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

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

Андрей Саломатин

Андрей СаломатинFull stack разработчик Организатор MoscowJS

@filipovskii hello@andreysalomatin.me

2

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

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

Портрет Эпохи

Фокус на:

• Архитектуру

• Сложные интерфейсы

• Реактивность

18

Портрет Эпохи

Фокус на:

• Архитектуру

• Сложные интерфейсы

• Реактивность

19

Портрет Эпохи

Фокус на:

• Архитектуру

• Сложные интерфейсы

• Реактивность

19

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

Варианты развития

Модульные фреймворки Изоморфизм

Перенос данных на клиент

21

Модульные фреймворки

• Возможность заменить логическую часть

• Возможность использовать часть отдельно от остального

• Ampersand.js, i-bem.js

22

Изоморфизм• Один код на сервере и клиенте

• React, Meteor уже поддерживают

• Angular, Polymer никогда не будут поддерживать

23

Перенос данных на клиент

• Описываем операции с данными, не транспорт

• Фреймворк синхронизирует клиент и сервер

• Offline First

• Hoodie, Swarm.js

24

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

25

Спасибо!#yac2014 #frontend

Андрей Саломатин @filipovskii

hello@andreysalomatin.me