WEB Компонеты
Сумрачное
настоящее
и
Светлое будущее
Просто, пустой слайд
MV*
MV*
Логика
Данные
WEB - для людей
WEB для бизнеса
Компонеты
Web Component
<x-grid></x-grid>- custom elements
- html templates
- shadow dom
- html import
Web Component
<element name="x-foo" constructor="XFoo">
<section>I'm an x-foo!</section>
<script>
this.register({
prototype: {
readyCallback: function() { /* some **/ }
}
});
</script>
<style>
section{ paddin:10px; }
</style>
</element>
Web Component
<x-grid>
<x-column name="Year" sort="Number"></x-column>
</x-grid>
Polymer
<dom-module id="contact-card">
<link rel="import" type="css" href="contact-card.css">
<template>
<content></content>
<iron-icon icon="star" hidden$="{{!starred}}">
</template>
<script>
Polymer({
is: 'contact-card',
properties: {
starred: Boolean
}
});
</script>
</dom-module>
<contact-card starred> Maksim Kozhukh </contact-card>
Webix
<x:datatable data="records">
<x:column id="year" sort="int">Year</x:column>
</x:datatable>
~80 компонент
Работает везде (IE8+)
Desktop | Touch
лайаут, аккордион, табвью, мультивью, лист, грид, дерево, три-грид, датавью, график,форма, тулбар, кнопки, инпуты, слайдеры, селекты, комбобоксы, календрь, выбор цвета, и много других
Webix
Webix
Webix
Webix
Это не веб-компоненты
это лучше :)
<script src="//cdn.webix.com/edge/webix.js"></script>
<link href="//cdn.webix.com/edge/webix.css"></link>
<script>
webix.ui({
view: "datatable",
data: records
})
</script>
Webix
webix.ui({
view:"layout",
rows:[
{ view:"toolbar", elements:some },
{ cols:[
{ view:"tree", width:250, data:categories },
{ view:"datatable",
autoConfig:true, data:records }
]},
{ template:"copyright", height:40 }
]
})Сложные лайауты
Webix
Сложные лайауты
Webix
var top = view:"toolbar", elements:some };
var center = { cols:[
{ view:"tree", width:250, data:categories },
{ view:"datatable",
autoConfig:true, data:records }
]};
var bottom = { template:"copyright", height:40 };
webix.ui({
rows:[ top, center, bottom ]
});Сложные лайауты
Webix
webix.ui({
view:"list", id:"mylist",
on:{
onItemClick:function(id, ev){
this.remove(id);
}
}
});
$$("mylist").add({ some:"New" });События методы
Webix
webix.protoUI({
name:"mytree",
myCoolMethod:function(){ alert(1); }
}, webix.ui.tree)
webix.ui({ view:"mytree" });
//or
<x:mytree data="tree_data"></x:mytree>Наследование
Webix
Webix
- темплейты для всего
- 1-way data binding
- REST, Odata, Sockets
webix.ui({
view:"list",
url:"/contacts/all",
save:"rest->/contacts/"
});Webix
Интеграция
- backbone
- angular
- jquery
- любой UI widget
Webix Jet
Каждый уважающий себя JS программист должен написать свой фреймворк
Webix Designer
Skin Builder
