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

Vladimir Ludinov @ Stuzo

Обо мне

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

История развития веба

1999 - XMLHttpRequest 2002 - ASP, JSP, PHP 2005 - “Ajax” 2006 - jQuery 2008 - JavascriptMVC 2010 - Backbone

Социальные приложения

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

jQuery подход

Проблемы

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

Требования

Читаемость Повторное использование Простота поддержки

JS фреймворки

Widget based: ExtJS, Qooxdoo ... Toolkits: YUI, Dojo, ... Microframeworks MVC: 30+

MVC шаблон (1970)

Разделение сфер влияния

MVC, MVP, MVVM...MV* (MV Whatever)

Копроненты JS MVC

Система модулей (OOP, injectors, mixins)

Шина событий (сообщений)

Шаблонизатор Ajax и роутинг хелперы

С jQuery на Backbone

html:

С jQuery на Backbone

js:

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

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

Выводы

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

TodoMVC

30+ фреймворков

Критерии выбора

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

Top 3

Angular Backbone Ember

Backbone

Достоинства Предстказуемый код Очень гибкий Хорошо документирован Большое сообщество Расширенные возможности

представления (Chaplin)

Недостатки Много кода инициализации

Ember

Достоинства 2-х сторонняя привязка данных Сильное сообщество

Недостатки Очень плохая документация Сложная архитектура

Уникальные особенности Angular

2-х сторонняя привязка данных Декларативные шаблоны

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

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

«Из коробки»

Удобный роутинг Валидация форм Rest хелпер

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

Rest хелпер

«Из коробки»

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

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

«Из коробки»

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

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

Angular

Достоинства Гораздо меньше кода Доп. возможности из коробки

Недостатки «Магия» – Высокий порог входа Слабые возможности представления

Вложенные представления Модальные диалоги

Ссылки

https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md

http://todomvc.com/ http://angularjs.org http://emberjs.com/api/ http://chaplinjs.org/