Embed Size (px)
DESCRIPTION
Фреймворки: недалёкое прошлое и ближайшее будущее Нам повезло — мы живём в эпоху JavaScript-ренессанса. Ленты новостей пестрят яркими названиями: Angular, Backbone, БЭМ, Polymer, React. Поговорим о том, зачем нам столько инструментов, чем они отличаются и, главное, какой из них выбрать. Андрей Саломатин, MoscowJS Разработчик мобильных и веб-приложений. Увлечён техническими сообществами. Работает со стартапами. Любит опенсорс. С 2014 года занимается организацией митапа MoscowJS.
Citation preview
ФреймворкиНедалёкое Прошлое и Ближайшее Будущее
Андрей Саломатин
Тёмные Времена
0 %
1 %
2 %Firefox 12 %
IE 85 %
2006 Статистика использования браузеров
источник: TheCounter.com
4
2006 StackOverflow и GitHub не существуют
5
2006 Появляется надежда
6
Эпоха Возрожденияклиент-сайда
2010-2011 Небольшие MV* библиотеки
8
2011-2012 Монолитные фреймворки
9
2013-2014 Компонентный подход
10
Polymer React
2008-2014 Количество вопросов на StackOverflow
11
Октябрь 2008
0
15 000
30 000
45 000
60 000
ExtJS Backbone Knockout Angular Ember Meteor Polymer React
2008-2014 Количество вопросов на StackOverflow
11
Сентябрь 2014
0
15 000
30 000
45 000
60 000
ExtJS Backbone Knockout Angular Ember Meteor Polymer React
Портретэпохи возрождения
Техники
MV* архитектура Компонентный подход
Двухсторонние биндинги Реактивность
13
MV* Архитектура• MVC, MVVM, MVP
• Просто начать
• Плохо масштабируется
• Backbone, Knockout, Angular
14
Компонентный подход• Слабо-связанные переиспользуемые компоненты
• Инкапсуляция на уровне DOM, CSS, JS
• ExtJS, basis.js, React, Polymer, BEM
15
Двухсторонние биндинги• Модель ⇄ представление
• Knockout, Angular, Polymer
• Проблемы с быстродействием
• Магия
16
Реактивность
• Описываем зависимости
• Фреймворк следит и распространяет изменения
• Knockout, Meteor, React
17
Портрет Эпохи
Фокус на:9
• Архитектуру
• Сложные интерфейсы
• Реактивность
18
Портрет Эпохи
Фокус на:9
• Архитектуру
• Сложные интерфейсы
• Реактивность
19
Портрет Эпохи
Фокус на:9
• Архитектуру
• Сложные интерфейсы
• Реактивность
19
Изобретаем9будущее
Варианты развития
Модульные фреймворки Изоморфизм
Перенос данных на клиент
21
Модульные фреймворки
• Возможность заменить логическую часть
• Возможность использовать часть отдельно от остального
• Ampersand.js, i-bem.js
22
Изоморфизм• Один код на сервере и клиенте
• React, Meteor уже поддерживают
• Angular, Polymer никогда не будут поддерживать
23
Перенос данных на клиент
• Описываем операции с данными, не транспорт
• Фреймворк синхронизирует клиент и сервер
• Offline First
• Hoodie, Swarm.js
24
Ваши варианты?#yac2014 #frontend
25
Спасибо!#yac2014 #frontend
!
Андрей Саломатин @filipovskii
