Документ обсуждает разработку одностраничных приложений с использованием различных JavaScript фреймворков, включая Backbone и Knockout, а также их преимущества и недостатки. Основное внимание уделяется организации структуры приложения, тестированию и взаимодействию с моделью, представлением и маршрутизацией. Документ также затрагивает вопросы производительности и оптимизации работы с DOM.

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

2. Extranet

4. Backbone
Knockout
Ember
Batman
rJS, Dojo, Closure, YUI, Javascr

5. Backbone
Knockout
Ember
Batman
rJS, Dojo, Closure, YUI, Javascr

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

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

8. Backbone
Knockout
Ember
Batman
rJS, Dojo, Closure, YUI, Javascr

9. MV*
Model
Collection
View
Router

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

11. Backbone.Model
Backbone.Collection

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

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

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

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

16. Тестирование JS
Jasmine
Qunit
Mocha

17. Тестирование JS
Jasmine
Qunit
Mocha

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

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

21. Batman

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

23. Batman.App

24. Batman.Model

25. Batman.Controller

26. Batman.View

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

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

29. 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']

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

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

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

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

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

35. Отказ от 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