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.

JavaScript сегодня: React, Redux и новая реальность

2016 год. Добро пожаловать в новую реальность.
Сегодня позиция JavaScript-разработчика является одной из самых востребованных и хорошо оплачиваемых в мире. Современные возможности JavaScript - это квестистенция всего, что произошло в отрасли разработки за всё её время существования: универсальные React-компоненты и композиция, декларативная анимация, изоморфные приложения, отсутствие side effects, авто-генерация тестов, симбиоз ООП и функционального программирования.
Последние три года выдались самые насыщенные революционные для веб-разработки. Многие разработчики, кто не успел уследить за произошедшим, задают лишь один вопрос ЧТО ПРОИСХОДИТ?
В рамках этого доклада мы попробуем синхронизироваться с JavaScript сообществом и посмотреть, что же он предоставляет нам сегодня? Как решать задачи привычные задачи? Что является актуальным направлением, а что может стать пустой тратой сил и времени?

JavaScript сегодня: React, Redux и новая реальность

  1. 1. JavaScript сегодня: React, Redux и новая реальность Денис Измайлов 15 марта 2016
  2. 2. Денис Измайлов • 16 лет опыта разработки ПО и web • Последние 6 лет посвятил Front-end, Node.js и архитектуре • Более 15 проектов, в том числе много SPA, high-load и React • Коммиты в Redux, webpack и koa • Cпикер HighLoad++ 2015, MoscowJS • Автор статей на Habrahabr и англоязычных ресурсах , CEO
  3. 3. Most Popular «Результаты ежегодного исследования StackOverflow —
 про технологии, зарплаты, счастье и кофе», http://habrahabr.ru/post/255717/ 4
  4. 4. Most Popular http://www.ryan-williams.net/hacker-news-hiring-trends/2016/march.html? compare1=java&compare2=node.js&compare3=JavaScript&compare4=golang 5
  5. 5. JavaScript
 rules the web
  6. 6. Почему необходимо использовать актуальные технологии?
  7. 7. Что произошло
 за эти 2 года в мире JavaScript?
  8. 8. Какие тренды мы видим сегодня?
  9. 9. Front-end сегодня • Это не только JavaScript в браузере • Сегодня Front-end - клиент и сервер: 10 Front-end клиент Front-end сервер Back-end сервер
 
 Database Java Legacy
 etc
  10. 10. Front-end сегодня • Это не только JavaScript в браузере • Сегодня Front-end - клиент и сервер: 11 Front-end клиент Front-end сервер Back-end сервер
 
 Database Java Legacy
 etc
  11. 11. Front-end сегодня • Это не только JavaScript в браузере • Сегодня Front-end - клиент и сервер: 12 Front-end клиент Front-end сервер Back-end сервер
 
 Database Java Legacy
 etc - HTML - [critical CSS] - JS Bundle
  12. 12. Front-end сегодня • Это не только JavaScript в браузере • Сегодня Front-end - клиент и сервер: 13 Front-end клиент Front-end сервер Back-end сервер
 
 Database Java Legacy
 etc - HTML - [critical CSS] - JS Bundle
  13. 13. Front-end сегодня • Это не только JavaScript в браузере • Сегодня Front-end - клиент и сервер: 14 Front-end клиент Front-end сервер Back-end сервер
 
 Database Java Legacy
 etc - HTML - [critical CSS] - JS Bundle
  14. 14. Front-end сегодня • Это не только JavaScript в браузере • Сегодня Front-end - клиент и сервер: 15
  15. 15. Front-end сегодня • Это не только JavaScript в браузере • Сегодня Front-end - клиент и сервер: 16
  16. 16. Front-end сегодня • Это не только JavaScript в браузере • Сегодня Front-end - клиент и сервер: 17 SPA
  17. 17. JavaScript на сервере • Представлен Node.js • Экосистема - npm
 (Node.js Package Manager) • Что такое npm?
 251 К пакетов, ~ 4 млрд. загрузок/мес. 18 https://unpm.nodesource.com/
  18. 18. Мир JavaScript - это самый увлекательный сериал
  19. 19. Мир JavaScript - это самый увлекательный сериал • 2014: React = HTML в JavaScript? • 2015: React - то, с чем стало всё проще • 2014: Flux - как его внедрить? • 2015: Flux - RIP, viva la Redux 20
  20. 20. 2014
  21. 21. 2014: Server-Side 1. Node.js в Production -> развитие платформы стало замедляться (Joyent страхует риски) 22
  22. 22. 2014: Server-Side 1. Node.js в Production -> развитие платформы стало замедляться (Joyent страхует риски) 2. Node.js для сборки SPA 23
  23. 23. 2014: Server-Side 1. Node.js в Production -> развитие платформы стало замедляться (Joyent страхует риски) 2. Node.js для сборки SPA 3. Require.js (AMD) -> Browserify (CommonJS) + BrowserSync/Watchify 24
  24. 24. 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
  25. 25. 2014: Client-Side 1. В проектах сражаются за доминирование:
 Angular, Knockout, jQuery, Backbone, Handlebars 2. Благодаря сборщикам, от чистого CSS уходят:
 LESS, SASS, Stylus 3. ... 26
  26. 26. 2014: Client-Side 1. В проектах сражаются за доминирование:
 Angular, Knockout, jQuery, Backbone, Handlebars 2. Благодаря сборщикам, от чистого CSS уходят:
 LESS, SASS, Stylus 3. ... 27
  27. 27. 2014: Client-Side 1. В проектах сражаются за доминирование:
 Angular, Knockout, jQuery, Backbone, Handlebars 28 1. Низкая структурированность 2. Медленное обновление UI 3. Side Effects 4. Много [ООП] кода и шаблонов
  28. 28. React 
 JavaScript-библиотека для создания UI
  29. 29. React 1. Просто “V” в паттерне MVC + Specs and Lifecycle 31
  30. 30. React Lifecycle 32* - om
  31. 31. React 1. Просто “V” в паттерне MVC + Specs and Lifecycle 2. Скорость обновления UI: 1. точечные и пакетные обновления 2. виртуальный DOM 33
  32. 32. React DOM Diff 34
  33. 33. React 1. Просто “V” в паттерне MVC + Specs and Lifecycle 2. Скорость обновления UI: 1. точечные и пакетные обновления 2. виртуальный DOM 3. Отсутствие Side Effects: 1. однонаправленный Data Flow (props) 2. неизменяемые данные (state) 35
  34. 34. React Flow 36
  35. 35. React 
 UI = f(x), x = state, f = component
  36. 36. React 1. Просто “V” в паттерне MVC + Specs and Lifecycle 2. Скорость обновления UI: 1. точечные и пакетные обновления 2. виртуальный DOM 3. Отсутствие Side Effects: 1. однонаправленный Data Flow (props) 2. неизменяемые данные (state) 4. Удобство разработки - JSX 38
  37. 37. React Component 39
  38. 38. React 1. Просто “V” в паттерне MVC + Specs and Lifecycle 2. Скорость обновления UI 3. Отсутствие Side Effects 4. Удобство разработки - JSX 40
  39. 39. 2014: Client-Side 1. В проектах сражаются за доминирование:
 Angular, Knockout, jQuery, Backbone, Handlebars 41 1. Низкая структурированность 2. Медленное обновление UI 3. Side Effects 4. Много [ООП] кода и шаблонов SOLVED BY REACT
  40. 40. 2014: Client-Side 1. В проектах сражаются за доминирование:
 Angular, Knockout, jQuery, Backbone, Handlebars 2. Благодаря сборщикам, от чистого CSS уходят:
 LESS, SASS, Stylus 3. Большинство всё ещё скептически посматривает на React: • HTML-код в JavaScript? PHP way? • Ещё один Angular? • А куда Backbone тут? 42
  41. 41. 2014: Client-Side • 30 апреля 2014 • Сан-Франциско • 30ºC • 1700 разработчиков • F8 Facebook Developer Conference
  42. 42. Проблема масштабирования MVC 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference
  43. 43. 45 30 апреля 2014, Сан-Франциско F8 Facebook Developer Conference
  44. 44. Command-Query Responsibility Segregation CQRS 46
  45. 45. CQRS Command-Query Responsibility Segregation модель
 для чтения
 и записи 47
  46. 46. CQRS Command-Query Responsibility Segregation модель для чтения
 данных модель
 для чтения
 и записи модель для записи
 данных 48
  47. 47. Что даёт Flux? 1. Состояние гонки (race condition) 2. Каскадные обновления (cascade updates) 3. Воспроизводимость состояний 49
  48. 48. Что даёт Flux? 1. Состояние гонки (race condition) 2. Каскадные обновления (cascade updates) 3. Воспроизводимость состояний 50
  49. 49. Воспроизводимость состояний 51 A time
  50. 50. Воспроизводимость состояний 52 A B
  51. 51. Воспроизводимость состояний 53 A B A B
  52. 52. Воспроизводимость состояний 54 A E A E
  53. 53. Воспроизводимость состояний 55 A E A E Record / Replay Time Traveling
  54. 54. 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
  55. 55. 2015
  56. 56. 2015: Server-Side 1. 14 января выходит io.js:
 форк Node.js с более
 новым V8 с частичным ES6
 - промисы, генераторы 2. 8 сентября вышел Node.js v4.0.0 3. Волна удаления gulp из процесса сборки с заменой на отдельные скрипты в npm scripts 4. Изоморфные приложения 58
  57. 57. 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
  58. 58. 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
  59. 59. Проблемы Flux
  60. 60. Проблемы Flux 1. Обилие boilerplate-кода 2. “Заточенность" кода приложения под API каждого Flux-фреймворка 3. Логика сторов связана с их состоянием 62
  61. 61. Пара примеров с alt.js
  62. 62. Создание Store 64
  63. 63. Создание Store 65 полезная часть
  64. 64. Создание компонент 66
  65. 65. Создание компонент 67 бесполезная
 часть
  66. 66. Проблемы Flux 1. Обилие boilerplate-кода 2. “Заточенность" кода приложения под API каждого Flux-фреймворка 3. Логика сторов связана с их состоянием 4. Сложность сделать Record/Replay 5. Сложность для понимания роль диспетчера 68
  67. 67. Проблемы Flux 69 Store Диспетчер Action 1 Компонент
  68. 68. Проблемы Flux 70 Store Диспетчер Action 1 Action 2 Компонент
  69. 69. Проблемы Flux 71 Store Диспетчер Action 1 Action 2 Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. Компонент
  70. 70. Проблемы Flux h ps://github.com/facebook/flux/issues/47
  71. 71. Как эти проблемы
 решает Redux?
  72. 72. ООП -> ФП
  73. 73. Reducers 75
  74. 74. Middleware 76
  75. 75. View Provider 77 Доступ к данным из React, Angular и пр.
  76. 76. Connector 78
  77. 77. Redux
  78. 78. Будет ли ещё один Redux?
  79. 79. Hype Cycle 81
  80. 80. React + Redux: Plateau of Productivity
  81. 81. А что тогда будет?
  82. 82. 2016 Тренды
  83. 83. Качественный рост экосистемы React + Redux
  84. 84. React - не просто V в MVC
  85. 85. React - экосистема
  86. 86. Redux - экосистема
  87. 87. Рост экосистемы React + Redux 1. Библиотеки компонентов • Elemental UI 89
  88. 88. Elemental UI
  89. 89. Рост экосистемы React + Redux 1. Библиотеки компонентов • Elemental UI • Material-UI 91
  90. 90. Material-UI
  91. 91. Рост экосистемы React + Redux 1. Библиотеки компонентов • Elemental UI • Material-UI • TouchstoneJS 93
  92. 92. TouchstoneJS
  93. 93. Рост экосистемы React + Redux 1. Библиотеки компонентов • Elemental UI • Material-UI • TouchstoneJS • reapp 95
  94. 94. reapp
  95. 95. Рост экосистемы React + Redux 1. Библиотеки компонентов • Elemental UI • Material-UI • TouchstoneJS • reapp 2. Инструменты для Redux 97
  96. 96. Redux Dev Tools 1. Live Edit 2. Time Travel
  97. 97. Redux Slider Monitor 1. Time Travel через слайдер
  98. 98. Redux Diff Monitor
  99. 99. Redux GenTest Plugin
  100. 100. Рост экосистемы React + Redux 1. Библиотеки компонентов • Elemental UI • Material-UI • TouchstoneJS • reapp 2. Инструменты для Redux 3. Анимация (react-motion, velocity-react, etc) 4. CSS Modules & Post CSS 102
  101. 101. Борьба библиотек для работы с данными
 и offline-режима
  102. 102. Работа с данными и offline 1. Facebook Relay 2. Netflix Falcor 3. om.next 4. PouchDB, etc 5. h p://blog.yld.io/2015/11/30/building-realtime- collaborative-offline-first-apps-with-react-redux- pouchdb-and-web-sockets/ 104
  103. 103. GraphQL + Relay
  104. 104. До GraphQL 106
  105. 105. До GraphQL 107 1. Где реализовать загрузку данных? 2. Как реализовать Optimistic Updates? 3. Чем оптимизировать сетевой трафик?
  106. 106. GraphQL Example
  107. 107. GraphQL Applications
  108. 108. GraphQL Schema
  109. 109. Вместе с GraphQL 111 1. Optimistic Updates 2. Query Collocation 3. Кэширование 4. Автоматический Data-Fetching,
 прощай AJAX
  110. 110. Relay Way 1. Прощаемся: 1. Service-Oriented Architecture 2. Imperative Data Fetching 2. Встречаем: 1. User Experience Oriented Architecture 2. Declarative Data Fetching 112
  111. 111. Relay Way 1. Прощаемся: 1. Service-Oriented Architecture 2. Imperative Data Fetching 2. Встречаем: 1. User Experience Oriented Architecture 2. Declarative Data Fetching 113
  112. 112. Relay + React Native 114
  113. 113. Давление на React со стороны Angular 2
  114. 114. Функциональное программирование + Иммутабельные данные
  115. 115. Функциональное 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
  116. 116. Изоморфные приложения
  117. 117. Изоморфные приложения 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
  118. 118. Шаблоны Стили Локализация Конфигурация Routes Права доступа Модели Схемы Валидация Сервисы Изоморфные приложения server.jsNode.js worker.js client.jsBrowser admin.js Бизнес-логика Компоненты API-интерфейсы Actions, Reducers Static Files
  119. 119. Server-Side Rendering • Сборка HTML на Front-end сервере • Моментальное отображение в браузере, ещё до загрузки JS • Когда JS загрузится, React только добавит обработчики событий • А это очень быстро 122
  120. 120. Server-Side Rendering 1. Пользователь видит страницу мгновенно 2. Отсутствие дополнительных запросов на получение данных 3. Страница может работать даже без JS 4. Полноценная URL-навигация и мета- тэги 5. Сохранение всех возможностей современного JavaScript 123
  121. 121. Изоморфные приложения 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
  122. 122. Native Applications
  123. 123. Native Applications 1. Electron 126
  124. 124. Slack
  125. 125. Native Applications 1. Electron 2. React Native 130
  126. 126. SVG + D3.js
  127. 127. WebAssembly, WebGL
  128. 128. C++ add-ons -> Node.js
  129. 129. Обучение и профессиональная сертификация
  130. 130. Node.js -> Enterprise
  131. 131. StrongLoop -> IBM
  132. 132. Docker-контейнеры
  133. 133. Docker + CoreOS 138
  134. 134. Систематизация Workflow
  135. 135. Систематизация Workflow 1. jsdoc 3, GitBook, documentation.js 2. JSON API, GraphQL 3. BitBucket, GitHub, Gogs 4. CI (CodeShip, Travis, Circle) 5. Docker (Heroku, DigitalOcean, vscale) 6. StrongLoop, PM2, Enterprise NPM 7. Slack, Fleep, etc 140
  136. 136. GitBook
  137. 137. documentation.js
  138. 138. Итоги
  139. 139. 2016 1. Качественный рост экосистем React и Redux 2. Библиотеки работы с данными (Facebook Relay, Falcor, etc) и поддержкой offline-режима 3. Давление на React-сообщество со стороны Angular 2 4. Функциональное программирование, иммутабельные данные 5. Изоморфные приложения 6. Native Applications (Desktop & Mobile) 144
  140. 140. 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
  141. 141. Какие тренды мы видим сегодня?
  142. 142. Что произошло
 за эти 2 года в мире JavaScript?
  143. 143. Почему необходимо использовать актуальные технологии?
  144. 144. Как поддерживать актуальность?
  145. 145. Процесс 1. Осведомлённость (10% времени) 2. Исследование 3. Обучение / практика 4. Использование 150
  146. 146. OODA Loop 151* 1970
  147. 147. Рекомендации • Присоединяйтесь к MoscowJS
 http://moscowjs.ru/ • Не читайте советских газет - улучшайте английский (Hacker News, Reddit, etc) • Читайте оригиналы и технические блоги (Netflix, Facebook, AirBnb, LinkedIn и т.д.) • Активно внедряйте в свою жизнь Twitter и GitHub
  148. 148. Спасибо за внимание Денис Измайлов @DenisIzmaylov https://github.com/DenisIzmaylov www.startup-makers.ru denis_izmaylov

    Be the first to comment

    Login to see the comments

  • denisizmaylov

    Jun. 21, 2016
  • ivanvens

    Jun. 22, 2016
  • Andrgreen

    Aug. 8, 2016
  • tchaykovski

    Nov. 20, 2017

2016 год. Добро пожаловать в новую реальность. Сегодня позиция JavaScript-разработчика является одной из самых востребованных и хорошо оплачиваемых в мире. Современные возможности JavaScript - это квестистенция всего, что произошло в отрасли разработки за всё её время существования: универсальные React-компоненты и композиция, декларативная анимация, изоморфные приложения, отсутствие side effects, авто-генерация тестов, симбиоз ООП и функционального программирования. Последние три года выдались самые насыщенные революционные для веб-разработки. Многие разработчики, кто не успел уследить за произошедшим, задают лишь один вопрос ЧТО ПРОИСХОДИТ? В рамках этого доклада мы попробуем синхронизироваться с JavaScript сообществом и посмотреть, что же он предоставляет нам сегодня? Как решать задачи привычные задачи? Что является актуальным направлением, а что может стать пустой тратой сил и времени?

Views

Total views

2,069

On Slideshare

0

From embeds

0

Number of embeds

38

Actions

Downloads

35

Shares

0

Comments

0

Likes

4

×