실제 소프트웨어를 만들기 위한 프레임워크와 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>