Презентация Владимира Людинова "Сложные социальные приложения с помощью JS MVC фреймворков" с конференции Z-Tech 9.02.2013

1. Сложные социальные
приложения с помощью
JS MVC фреймворков
Vladimir Ludinov @ Stuzo

2. Обо мне
 10+ лет в веб разработке
 3 лет в Stuzo как front-end developer
 30+ Facebook приложений

3. История развития веба
 1999 - XMLHttpRequest
 2002 - ASP, JSP, PHP
 2005 - “Ajax”
 2006 - jQuery
 2008 - JavascriptMVC
 2010 - Backbone

4. Социальные приложения
 Сложная логика интерфейса
 Множество визуальных компонентов
 Краткие сроки

5. jQuery подход

6. Проблемы
 Нечитаемый код
 Связанный код
 Одноразовый код
 Часто все в одном файле
 Сложно поддерживать

7. Требования
 Читаемость
 Повторное использование
 Простота поддержки

8. JS фреймворки
 Widget based: ExtJS, Qooxdoo ...
 Toolkits: YUI, Dojo, ...
 Microframeworks
 MVC: 30+

9. MVC шаблон (1970)
 Разделение сфер
влияния
MVC, MVP, MVVM...
MV* (MV Whatever)

10. Копроненты JS MVC
 Система модулей (OOP, injectors, mixins)
 Шина событий (сообщений)
 Шаблонизатор
 Ajax и роутинг хелперы

11. С jQuery на Backbone
html:

12. С jQuery на Backbone
js:

13. Представления

14. Модели и инициализация

15. Выводы
 Кода в два раза больше
 Более структурированный код
 Читабельный ? – Предсказуемый!
 Более поддерживаемый код

16. TodoMVC
30+ фреймворков

17. Критерии выбора
 Зрелость фреймворка
 Сообщество
 Документация
 Дополнительные возможности
 Личное впечатление

18. Top 3
 Angular
 Backbone
 Ember

19. Backbone
 Достоинства
 Предстказуемый код
 Очень гибкий
 Хорошо документирован
 Большое сообщество
 Расширенные возможности представления
(Chaplin)
 Недостатки
 Много кода инициализации

20. Ember
 Достоинства
 2-хсторонняя привязка данных
 Сильное сообщество
 Недостатки
 Оченьплохая документация
 Сложная архитектура

21. Уникальные особенности Angular
 2-х сторонняя привязка данных
 Декларативные шаблоны

22. Просто работает

23. Или более в “MVC стиле”

24. «Из коробки»
 Удобный роутинг
 Валидация форм
 Rest хелпер

25. Валидация форм

26. Rest хелпер

27. «Из коробки»
 Директивы
 Фильтры
 Локализация

28. Директивы, Фильтры, Локализация

29. «Из коробки»
 Реализация «promise»

30. Реализация «promise»

31. Angular
 Достоинства
 Гораздо меньше кода
 Доп. возможности из коробки
 Недостатки
 «Магия» – Высокий порог входа
 Слабые возможности представления
 Вложенные представления
 Модальные диалоги

32. Ссылки
 https://github.com/kjbekkelund/writings/blob/m
aster/published/understanding-backbone.md
 http://todomvc.com/
 http://angularjs.org
 http://emberjs.com/api/
 http://chaplinjs.org/