Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Фреймворки 
Недалёкое Прошлое и Ближайшее Будущее 
Андрей Саломатин
Андрей 
Саломатин 
Full stack разработчик 
Организатор MoscowJS 
@filipovskii 
hello@andreysalomatin.me 
2
Тёмные Времена
2006 
Статистика использования браузеров 
1 % 
2 % 
0 % 
Firefox 
12 % 
IE 
85 % 
источник: TheCounter.com 
4
2006 
StackOverflow и GitHub не существуют 
5
2006 
Появляется надежда 
6
Эпоха Возрождения 
клиент-сайда
2010-2011 
Небольшие MV* библиотеки 
8
2011-2012 
Монолитные фреймворки 
9
2013-2014 
Компонентный подход 
Polymer React 
10
2008-2014 
Количество вопросов на StackOverflow 
Октябрь 2008 
11 
60 000 
45 000 
30 000 
15 000 
0 
ExtJS Backbone Knock...
2008-2014 
Количество вопросов на StackOverflow 
Сентябрь 2014 
11 
60 000 
45 000 
30 000 
15 000 
0 
ExtJS Backbone Knoc...
Портрет 
эпохи возрождения
Техники 
MV* архитектура 
Компонентный подход 
Двухсторонние биндинги 
Реактивность 
13
MV* Архитектура 
• MVC, MVVM, MVP 
• Просто начать 
• Плохо масштабируется 
• Backbone, Knockout, 
Angular 
14
Компонентный подход 
• Слабо-связанные 
переиспользуемые 
компоненты 
• Инкапсуляция на уровне 
DOM, CSS, JS 
• ExtJS, bas...
Двухсторонние биндинги 
• Модель ⇄ представление 
• Knockout, Angular, 
Polymer 
• Проблемы с 
быстродействием 
• Магия 
1...
Реактивность 
• Описываем зависимости 
• Фреймворк следит и 
распространяет 
изменения 
• Knockout, Meteor, React 
17
Портрет Эпохи 
Фокус на: 
• Архитектуру 
• Сложные интерфейсы 
• Реактивность 
18
Портрет Эпохи 
Фокус на: 
• Архитектуру 
• Сложные интерфейсы 
• Реактивность 
19
Портрет Эпохи 
Фокус на: 
• Архитектуру 
• Сложные интерфейсы 
• Реактивность 
19
Изобретаем 
будущее
Варианты развития 
Модульные фреймворки 
Изоморфизм 
Перенос данных на клиент 
21
Модульные фреймворки 
• Возможность заменить 
логическую часть 
• Возможность 
использовать часть 
отдельно от остального ...
Изоморфизм 
• Один код на сервере и 
клиенте 
• React, Meteor уже 
поддерживают 
• Angular, Polymer никогда 
не будут подд...
Перенос данных на клиент 
• Описываем операции с 
данными, не транспорт 
• Фреймворк синхронизирует 
клиент и сервер 
• Of...
Ваши варианты? 
#yac2014 #frontend 
25
Спасибо! 
#yac2014 #frontend 
Андрей Саломатин 
@filipovskii 
hello@andreysalomatin.me
Фреймворки: Недалёкое Прошлое и Ближайшее Будущее
Фреймворки: Недалёкое Прошлое и Ближайшее Будущее
Фреймворки: Недалёкое Прошлое и Ближайшее Будущее
Фреймворки: Недалёкое Прошлое и Ближайшее Будущее
Upcoming SlideShare
Loading in …5
×

Фреймворки: Недалёкое Прошлое и Ближайшее Будущее

1,932 views

Published on

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

Published in: Software
  • @Aleksandr Afonin Поговорили подробно в RadioJS :) Будет в следующем выпуске radiojs.ru
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Жаль не поговорили об Angular 2.0 https://docs.google.com/presentation/d/1XQP0_NTzCUcFweauLlkZpbbhNVYbYy156oD--KLmXsk/preview?sle=true#slide=id.p
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Фреймворки: Недалёкое Прошлое и Ближайшее Будущее

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

×