Выбор фреймворка для проекта, или зачем мы изобрели велосипед

Framework vs. Library

Фреймворк «навязывает» структуру приложения

Библиотека – инструмент для решиния задач, встраиваемый

в вашу структуру

Функционал

Наблюдаемые (observables)

Маршрутизация (Routing)

Представление связываний (View bindings)

Двунаправленное связывание (Two way bindings)

Вложенные представления (Partial Views)

Отобранный список просмотра (Filtered list Views)

Порог вхождения

Вау эффект

Легкая документация

Борьба с ограничениями

По началу трудный

Плохая документация

Минусы

Медленный рендерингизменяемых данных

Сложная архитектура данных

Большой размер

Handlebars шаблоны

Маленькое комьюнити

Зависит от jQuery

Плюсы

Маленький размер

jQlite

Большое комьюнити

Легко продать

Скорость рендеринга

Повторное использование

Минимизация ошибок кода

TodoMVC performance testsChrome, Firefox, Safari

1617.72 мс 1544.88 мс

XFramework

Проблема

Responsive веб-дизайн плохо работает для веб-аппов*

На рынке нет по-настоящему кросс-платформенных решений

Трудно предоставить необходимый уровень UX для каждой платформы

Идея

Desktop(/index.html(

((Page(#1(

Component(#1( Component(#2(

Component(#3(

Component(#4(

Tablet'/index.html'

''Page'#1'

Component'#1'

Component'#2'

Component'#3'

''Page'#2'

Component'#1'

Component'#2'

Component'#4'

Mobile'phone'/index.html'

''Page'#1'

Component'#1'

Component'#2'

''Page'#2' ''Page'#3'

Component'#1'

Component'#3'

Component'#1'

Component'#4'

Как это работает

XF.define(‘My App', function () { ! return new XF.App({ initialize: function() { }, ! device: { types : [ { name : 'tablet', range : { max : 1024, min : 569 }, templatePath : 'tablet/', defaultAnimation: 'fade' }, ! {

XF.define(‘MyApp’, function () { ! return new XF.App({ ! device: { types : [ { name : 'ios', range : { max : 1024, min : 320 }, supports : ['isIOS'], templatePath : 'ios/', defaultAnimation: 'slideleft' }, ! {

<div data-component="componentClass" data-id="componentID" data-device-type="desktop"> ! This text is visible while component is loading !</div>

<div data-component="componentClass" data-id=“componentID" />

components/componentClass.js

// is visible

new ComponentClass(options);

tmpl/ deviceProfile/ componentClass.tmpl

rest/componentClass/

// loading JS if it’s needed

// rendering

<div data-component="componentClass" data-id="componentID"> <ul class="xf-list" data-role="listview"> <li></li>

Backbone.js

Underscore.js / Lo-dash.js

JQuery / Zepto

<div class="xf-page" data-id="home">…</div>

XF.define(function () { return new XF.App({ router: { routes: { '/': 'home' }, ! home: function() { // ... } }, initialize: function() { }, !

Touch Events

Pointer Events

Mouse Events

D-Pad Events*

tap

swipe

ashorror