Сложные социальные приложения с помощью JS MVC...
description
Transcript of Сложные социальные приложения с помощью JS MVC...
![Page 1: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/1.jpg)
Сложные социальные приложения с помощьюJS MVC фреймворков
Vladimir Ludinov @ Stuzo
![Page 2: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/2.jpg)
Обо мне
10+ лет в веб разработке 3 лет в Stuzo как front-end developer 30+ Facebook приложений
![Page 3: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/3.jpg)
История развития веба
1999 - XMLHttpRequest 2002 - ASP, JSP, PHP 2005 - “Ajax” 2006 - jQuery 2008 - JavascriptMVC 2010 - Backbone
![Page 4: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/4.jpg)
Социальные приложения
Сложная логика интерфейса Множество визуальных компонентов Краткие сроки
![Page 5: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/5.jpg)
jQuery подход
![Page 6: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/6.jpg)
Проблемы
Нечитаемый код Связанный код Одноразовый код Часто все в одном файле Сложно поддерживать
![Page 7: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/7.jpg)
Требования
Читаемость Повторное использование Простота поддержки
![Page 8: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/8.jpg)
JS фреймворки
Widget based: ExtJS, Qooxdoo ... Toolkits: YUI, Dojo, ... Microframeworks MVC: 30+
![Page 9: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/9.jpg)
MVC шаблон (1970)
Разделение сфер влияния
MVC, MVP, MVVM...MV* (MV Whatever)
![Page 10: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/10.jpg)
Копроненты JS MVC
Система модулей (OOP, injectors, mixins)
Шина событий (сообщений)
Шаблонизатор Ajax и роутинг хелперы
![Page 11: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/11.jpg)
С jQuery на Backbone
html:
![Page 12: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/12.jpg)
С jQuery на Backbone
js:
![Page 13: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/13.jpg)
Представления
![Page 14: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/14.jpg)
Модели и инициализация
![Page 15: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/15.jpg)
Выводы
Кода в два раза больше Более структурированный код Читабельный ? – Предсказуемый! Более поддерживаемый код
![Page 16: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/16.jpg)
TodoMVC
30+ фреймворков
![Page 17: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/17.jpg)
Критерии выбора
Зрелость фреймворка Сообщество Документация Дополнительные возможности Личное впечатление
![Page 18: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/18.jpg)
Top 3
Angular Backbone Ember
![Page 19: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/19.jpg)
Backbone
Достоинства Предстказуемый код Очень гибкий Хорошо документирован Большое сообщество Расширенные возможности
представления (Chaplin)
Недостатки Много кода инициализации
![Page 20: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/20.jpg)
Ember
Достоинства 2-х сторонняя привязка данных Сильное сообщество
Недостатки Очень плохая документация Сложная архитектура
![Page 21: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/21.jpg)
Уникальные особенности Angular
2-х сторонняя привязка данных Декларативные шаблоны
![Page 22: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/22.jpg)
Просто работает
![Page 23: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/23.jpg)
Или более в “MVC стиле”
![Page 24: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/24.jpg)
«Из коробки»
Удобный роутинг Валидация форм Rest хелпер
![Page 25: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/25.jpg)
Валидация форм
![Page 26: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/26.jpg)
Rest хелпер
![Page 27: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/27.jpg)
«Из коробки»
Директивы Фильтры Локализация
![Page 28: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/28.jpg)
Директивы, Фильтры, Локализация
![Page 29: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/29.jpg)
«Из коробки»
Реализация «promise»
![Page 30: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/30.jpg)
Реализация «promise»
![Page 31: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/31.jpg)
Angular
Достоинства Гораздо меньше кода Доп. возможности из коробки
Недостатки «Магия» – Высокий порог входа Слабые возможности представления
Вложенные представления Модальные диалоги
![Page 32: Сложные социальные приложения с помощью JS MVC фреймворков](https://reader031.fdocuments.net/reader031/viewer/2022020720/547a08fbb4795983098b493e/html5/thumbnails/32.jpg)
Ссылки
https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md
http://todomvc.com/ http://angularjs.org http://emberjs.com/api/ http://chaplinjs.org/