本物のソフトウェアを作るためのフレームワークと UI。

// ピュアフレームワーク、依存関係なし
require('total5');

ROUTE('GET /', view_index);
ROUTE('+GET  /api/users/      --> Users/query');
ROUTE('+GET  /api/users/{id}/ --> Users/read');
ROUTE('+POST /api/users/      --> Users/insert');
ROUTE('SOCKET /live/', socket_live);

function socket_live($) {
    $.autodestroy();
    $.on('message', function(client, msg) {
        console.log(msg);
    });
}

NEWSCHEMA('Users', function(schema) {
  schema.action('query', function($) {
    DATA.find('users').fields('name').callback($);
  });
});

Total.run();

<script src="//cdn.componentator.com/spa.min@20.js"></script>
<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />

<ui-component name="input" path="form.name" config="required:1"></ui-component>
<ui-component name="input" path="form.email" config="type:email"></ui-component>
<ui-component name="button" config="exec:save">保存</ui-component>

<ui-bind path="form.name" config="text"></ui-bind>

<ui-component name="datagrid" path="items" config="margin:0">
	<script type="text/plain">
	[
		{ name: 'name', text: '名前', width: 200 },
		{ name: 'email', text: 'メール', type: 'email' },
		{ name: 'created', text: '作成日', template: "{{ created | format('dd.MM.yyyy') }}" }
	]
	</script>
</ui-component>