Презентация доклада Андрея Саломатина на YaC 2014

1. Фреймворки
Недалёкое Прошлое и Ближайшее Будущее
Андрей Саломатин

2. Андрей
Саломатин
Full stack разработчик
Организатор MoscowJS
@filipovskii
hello@andreysalomatin.me
2

4. Тёмные Времена

5. 2006
Статистика использования браузеров
1 %
2 %
0 %
Firefox
12 %
IE
85 %
источник: TheCounter.com
4

6. 2006
StackOverflow и GitHub не существуют
5

7. 2006
Появляется надежда
6

9. Эпоха Возрождения
клиент-сайда

10. 2010-2011
Небольшие MV* библиотеки
8

11. 2011-2012
Монолитные фреймворки
9

12. 2013-2014
Компонентный подход
Polymer React
10

13. 2008-2014
Количество вопросов на StackOverflow
Октябрь 2008
11
60 000
45 000
30 000
15 000
0
ExtJS Backbone Knockout Angular Ember Meteor Polymer React

14. 2008-2014
Количество вопросов на StackOverflow
Сентябрь 2014
11
60 000
45 000
30 000
15 000
0
ExtJS Backbone Knockout Angular Ember Meteor Polymer React

16. Портрет
эпохи возрождения

17. Техники
MV* архитектура
Компонентный подход
Двухсторонние биндинги
Реактивность
13

18. MV* Архитектура
• MVC, MVVM, MVP
• Просто начать
• Плохо масштабируется
• Backbone, Knockout,
Angular
14

19. Компонентный подход
• Слабо-связанные
переиспользуемые
компоненты
• Инкапсуляция на уровне
DOM, CSS, JS
• ExtJS, basis.js, React,
Polymer, BEM
15

20. Двухсторонние биндинги
• Модель ⇄ представление
• Knockout, Angular,
Polymer
• Проблемы с
быстродействием
• Магия
16

21. Реактивность
• Описываем зависимости
• Фреймворк следит и
распространяет
изменения
• Knockout, Meteor, React
17

22. Портрет Эпохи
Фокус на:
• Архитектуру
• Сложные интерфейсы
• Реактивность
18

23. Портрет Эпохи
Фокус на:
• Архитектуру
• Сложные интерфейсы
• Реактивность
19

24. Портрет Эпохи
Фокус на:
• Архитектуру
• Сложные интерфейсы
• Реактивность
19

26. Изобретаем
будущее

27. Варианты развития
Модульные фреймворки
Изоморфизм
Перенос данных на клиент
21

28. Модульные фреймворки
• Возможность заменить
логическую часть
• Возможность
использовать часть
отдельно от остального
• Ampersand.js, i-bem.js
22

29. Изоморфизм
• Один код на сервере и
клиенте
• React, Meteor уже
поддерживают
• Angular, Polymer никогда
не будут поддерживать
23

30. Перенос данных на клиент
• Описываем операции с
данными, не транспорт
• Фреймворк синхронизирует
клиент и сервер
• Offline First
• Hoodie, Swarm.js
24

31. Ваши варианты?
#yac2014 #frontend
25

32. Спасибо!
#yac2014 #frontend
Андрей Саломатин
@filipovskii
hello@andreysalomatin.me