�ݺ�ߣ

Single-Page Apps
Вся соль
Арсений Заречнев
Front-End Developer

Арсений Заречнев и Федор Шумов - Одностраничные приложения

Backbone
Knockout
Ember
Batman
AngularJS, Dojo, Closure, YUI, JavascriptMVC ...

Backbone

Хорошее знакомство с MVC на клиенте
Малый размер
Легкость освоения

Backbone

REST
Модели с событиями
Роутинг
Underscore.js
Большое коммьюнити

MV*
Model
Collection
View
Router

Backbone.Model
Backbone.Collection
Получение данных с сервера
Сохранение данных
Работа с данными на клиенте

Backbone.Model
Backbone.Collection

Backbone.View
Обработка событий
Подписки на изменения данных модели
Рендеринг

Backbone.Router
Отслеживание изменения URL
Инициализация View и Model

Backbone

Есть всё необходимое для
построения одностраничного
приложения.

И написания тестов!

Тестирование JS

Помогает сохранять слабую
связанность и хорошую структуру
кода

Тестирование JS

Jasmine
Qunit
Mocha

Jasmine

Запускается в браузере
Возможно автоматизировать запуск во
всех браузерах

Mocha

Запускается через node.js или в
браузере
Возможно включить в CI

Batman

Каноничный MVC
Роутинг Rails-style
Model-View Bindings
CoffeeScript

Batman

Все хорошо, но:
- В активной разработке
- Неизвестна производительность

Extranet
Самое соленое
Федор Шумов
Front-End Developer

Router. URL-object. URL-event

Навигация через адресную строку
#/hotels/567/rooms/23/facilities/?hints=true

Парсим строку по маске
{pathname: {Array, String}, mask: {Array, String}}

Слабое связывание
$xo.trigger('url', urlObject)

Организация структуры приложения
xo.pages['hotels.id.rooms.id.facilities']
xo.app.pages['hotels/567/rooms/23/facilities']

DOM-Data через Expando

Связывание любых данных с DOM

Bспользованиt библиотек и плагинов,
использующих $.data() или подобную
организацию данных через Expando

Не засорять неймспейс временными или
чужими данными.

Parent.removeChild(Child)

Самые затратные операции с DOM.

Строим только один раз.

Выдернутая построеная вьюха невидима
но живая.

Сохраняются DOM-данные через Expando,
а значит сохраняются преимущества
предыдущего слайда :)

Отказ от Delegate

Backbone слушает дерево view.el

Минимум детей у нодов — быстрее отклик

Так как вьюха собирается 1 раз, то можно
потратить время на сборе побольше

Прямые связки Knockout-bindings

Knockout

Ясная логика темплейта

Автоматическое изменение UI

Дисперсионные изменения в DOM —
скорость

Безопасная MVVM по keyUp/keyDown

Многопользовательский режим

Backbone + Knockout

Router + CRUD + MVVM

Two-way: model.set() триггерит изменения в
observables; и наоборот attributes
подписаны на оbservables.

Постепенный перевод вьюх из Backbone в
Knockout.

Отказ от Extend в «бешеных» вьюхах

Backbone при предподготовке модели как
минимум 3 раза бегает for-in по объекту
this.attributes = _.extend({}, defaults, attributes)
this._previousAttributes = _.clone(this.attributes)

Либо заменить объекты на парные массивы
и бегать do {--n} while (n)
this.defaultsKeys = [ “id”, “name” ]
this.defaultsVals = [ “456”, “Ivan Zolotov” ];

Либо отказаться от Backbone + Knockout

�ݺ�ߣ

Арсений Заречнев и Федор Шумов - Одностраничные приложения

Recommended

More Related Content

What's hot (20)

Арсений Заречнев и Федор Шумов - Одностраничные приложения