2016 год. Добро пожаловать в новую реальность.
Сегодня позиция JavaScript-разработчика является одной из самых востребованных и хорошо оплачиваемых в мире. Современные возможности JavaScript - это квестистенция всего, что произошло в отрасли разработки за всё её время существования: универсальные React-компоненты и композиция, декларативная анимация, изоморфные приложения, отсутствие side effects, авто-генерация тестов, симбиоз ООП и функционального программирования.
Последние три года выдались самые насыщенные революционные для веб-разработки. Многие разработчики, кто не успел уследить за произошедшим, задают лишь один вопрос ЧТО ПРОИСХОДИТ?
В рамках этого доклада мы попробуем синхронизироваться с JavaScript сообществом и посмотреть, что же он предоставляет нам сегодня? Как решать задачи привычные задачи? Что является актуальным направлением, а что может стать пустой тратой сил и времени?
2. Денис Измайлов
• 16 лет опыта разработки ПО и web
• Последние 6 лет посвятил Front-end,
Node.js и архитектуре
• Более 15 проектов, в том числе много
SPA, high-load и React
• Коммиты в Redux, webpack и koa
• Cпикер HighLoad++ 2015, MoscowJS
• Автор статей на Habrahabr и
англоязычных ресурсах
, CEO
3.
4. Most Popular
«Результаты ежегодного исследования StackOverflow —
про технологии, зарплаты, счастье и кофе», http://habrahabr.ru/post/255717/
4
10. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
10
Front-end
клиент
Front-end
сервер
Back-end
сервер
Database
Java
Legacy
etc
11. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
11
Front-end
клиент
Front-end
сервер
Back-end
сервер
Database
Java
Legacy
etc
12. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
12
Front-end
клиент
Front-end
сервер
Back-end
сервер
Database
Java
Legacy
etc
- HTML
- [critical CSS]
- JS Bundle
13. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
13
Front-end
клиент
Front-end
сервер
Back-end
сервер
Database
Java
Legacy
etc
- HTML
- [critical CSS]
- JS Bundle
14. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
14
Front-end
клиент
Front-end
сервер
Back-end
сервер
Database
Java
Legacy
etc
- HTML
- [critical CSS]
- JS Bundle
15. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
15
16. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
16
17. Front-end сегодня
• Это не только JavaScript в браузере
• Сегодня Front-end - клиент и сервер:
17
SPA
18. JavaScript на сервере
• Представлен Node.js
• Экосистема - npm
(Node.js Package Manager)
• Что такое npm?
251 К пакетов, ~ 4 млрд. загрузок/мес.
18
https://unpm.nodesource.com/
20. Мир JavaScript - это самый
увлекательный сериал
• 2014: React = HTML в JavaScript?
• 2015: React - то, с чем стало всё проще
• 2014: Flux - как его внедрить?
• 2015: Flux - RIP, viva la Redux
20
23. 2014: Server-Side
1. Node.js в Production -> развитие платформы
стало замедляться (Joyent страхует риски)
2. Node.js для сборки SPA
23
24. 2014: Server-Side
1. Node.js в Production -> развитие платформы
стало замедляться (Joyent страхует риски)
2. Node.js для сборки SPA
3. Require.js (AMD) -> Browserify (CommonJS) +
BrowserSync/Watchify
24
25. 2014: Server-Side
1. Node.js в Production -> развитие платформы
стало замедляться (Joyent страхует риски)
2. Node.js для сборки SPA
3. Require.js (AMD) -> Browserify (CommonJS) +
BrowserSync/Watchify
4. 27 ноября 2014, доклад «webpack: 7 бед - один
ответ» на MoscowJS 17:
h ps://www.youtube.com/watch?v=kuXIgUsvpLo
5. Статья на Хабрахабр про webpack:
h p://habrahabr.ru/post/245991/
25
26. 2014: Client-Side
1. В проектах сражаются за доминирование:
Angular, Knockout, jQuery, Backbone,
Handlebars
2. Благодаря сборщикам, от чистого CSS уходят:
LESS, SASS, Stylus
3. ...
26
27. 2014: Client-Side
1. В проектах сражаются за доминирование:
Angular, Knockout, jQuery, Backbone,
Handlebars
2. Благодаря сборщикам, от чистого CSS уходят:
LESS, SASS, Stylus
3. ...
27
28. 2014: Client-Side
1. В проектах сражаются за доминирование:
Angular, Knockout, jQuery, Backbone,
Handlebars
28
1. Низкая структурированность
2. Медленное обновление UI
3. Side Effects
4. Много [ООП] кода и шаблонов
35. React
1. Просто “V” в паттерне MVC + Specs and Lifecycle
2. Скорость обновления UI:
1. точечные и пакетные обновления
2. виртуальный DOM
3. Отсутствие Side Effects:
1. однонаправленный Data Flow (props)
2. неизменяемые данные (state)
35
38. React
1. Просто “V” в паттерне MVC + Specs and Lifecycle
2. Скорость обновления UI:
1. точечные и пакетные обновления
2. виртуальный DOM
3. Отсутствие Side Effects:
1. однонаправленный Data Flow (props)
2. неизменяемые данные (state)
4. Удобство разработки - JSX
38
40. React
1. Просто “V” в паттерне MVC + Specs and Lifecycle
2. Скорость обновления UI
3. Отсутствие Side Effects
4. Удобство разработки - JSX
40
41. 2014: Client-Side
1. В проектах сражаются за доминирование:
Angular, Knockout, jQuery, Backbone,
Handlebars
41
1. Низкая структурированность
2. Медленное обновление UI
3. Side Effects
4. Много [ООП] кода и шаблонов
SOLVED
BY
REACT
42. 2014: Client-Side
1. В проектах сражаются за доминирование:
Angular, Knockout, jQuery, Backbone,
Handlebars
2. Благодаря сборщикам, от чистого CSS уходят:
LESS, SASS, Stylus
3. Большинство всё ещё скептически
посматривает на React:
• HTML-код в JavaScript? PHP way?
• Ещё один Angular?
• А куда Backbone тут?
42
56. 2014: Client-Side
4. Flux, как альтернатива MVC и архитектура для
React-приложений
5. Это помогло немного иначе посмотреть на React
6. Гонка Flux-фреймворков: Fluxxor, Reflux.js, Flux от
Facebook, Flummox, Marty.js, Fluxible от Yahoo,
AirBnb представляет alt
7. Было трудно, но понятно, что React и Flux - это
верное направление
8. ES6-транспилеры 6to5, esnext, traceur начали
вытеснять CoffeeScript и пр.
56
58. 2015: Server-Side
1. 14 января выходит io.js:
форк Node.js с более
новым V8 с частичным ES6
- промисы, генераторы
2. 8 сентября вышел Node.js v4.0.0
3. Волна удаления gulp из процесса сборки с
заменой на отдельные скрипты в npm scripts
4. Изоморфные приложения
58
59. 2015: Client-Side
1. Пришёл ES6, 15 февраля - Babel (6to5 + esnext)
2. React Native
3. Взлёт популярности PostCSS
4. webpack стал стандартом де-факто в проектах
5. React почти полностью вытеснил Angular 1.x
6. Гонка Flux-реализаций окончена
сокрушительной победой Redux
59
60. 2015: Client-Side
1. Пришёл ES6, 15 февраля - Babel (6to5 + esnext)
2. React Native
3. Взлёт популярности PostCSS
4. webpack стал стандартом де-факто в проектах
5. React почти полностью вытеснил Angular 1.x
6. Гонка Flux-реализаций окончена
сокрушительной победой Redux
60
62. Проблемы Flux
1. Обилие boilerplate-кода
2. “Заточенность" кода приложения под API
каждого Flux-фреймворка
3. Логика сторов связана с их состоянием
62
68. Проблемы Flux
1. Обилие boilerplate-кода
2. “Заточенность" кода приложения под API
каждого Flux-фреймворка
3. Логика сторов связана с их состоянием
4. Сложность сделать Record/Replay
5. Сложность для понимания роль диспетчера
68
118. Функциональное
1. Ph. D
2. UI = f(x), x = state(action1, action2, ...actionN)
3. Ramda
4. Professor Frisby's Mostly Adequate Guide to Functional
Programming
h ps://drboolean.gitbooks.io/mostly-adequate-guide/
content/
5. Fantasy Land Specification
h ps://github.com/fantasyland/fantasy-land
118
120. Изоморфные приложения
By isomorphic we mean that any
given line of code (with notable
exceptions) can execute both on
the client and the server.
Charlie Robbins,
18 Oct 2011
122. Server-Side Rendering
• Сборка HTML на Front-end сервере
• Моментальное отображение в
браузере, ещё до загрузки JS
• Когда JS загрузится, React только
добавит обработчики событий
• А это очень быстро
122
123. Server-Side Rendering
1. Пользователь видит страницу
мгновенно
2. Отсутствие дополнительных запросов
на получение данных
3. Страница может работать даже без JS
4. Полноценная URL-навигация и мета-
тэги
5. Сохранение всех возможностей
современного JavaScript 123
124. Изоморфные приложения
1. Redux: the best for isomorphic apps
h ps://www.youtube.com/watch?
v=Uyk_8WWna6s
2. Изоморфные React-приложения:
производительность и масштабирование
h p://www.highload.ru/2015/abstracts/1962.html
3. Изоморфные React-приложения
h p://www.youtube.com/watch?v=PbK5xLmS0MU
124
144. 2016
1. Качественный рост экосистем React и Redux
2. Библиотеки работы с данными (Facebook
Relay, Falcor, etc) и поддержкой offline-режима
3. Давление на React-сообщество со стороны
Angular 2
4. Функциональное программирование,
иммутабельные данные
5. Изоморфные приложения
6. Native Applications (Desktop & Mobile)
144
145. 2016
7. SVG & D3.js
8. WebAssembly, WebGL
9. C++ + JavaScript
10. Проекты обучения и профессиональной
сертификации (egghead.io, etc)
11. React и Node.js активно входят в Enterprise
12. Микросервисная архитектура и контейнеры
(Docker)
13. Систематизация Workflow
145
152. Рекомендации
• Присоединяйтесь к MoscowJS
http://moscowjs.ru/
• Не читайте советских газет - улучшайте
английский (Hacker News, Reddit, etc)
• Читайте оригиналы и технические блоги
(Netflix, Facebook, AirBnb, LinkedIn и т.д.)
• Активно внедряйте в свою жизнь Twitter
и GitHub