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

Спасибо!

http://webix.com

http://github.com/webix-hub

Максим Кожух

mkozhukh@ya.ru

http://designer.webix.com

http://docs.webix.com