Автор Павел Черторогов, @nodkz, DevOps на вольных хлебах

2. Бэкенд, фронтенд —
всё смешалось.
Экскурсия в будущее веб-разработки.
Мой стэк для SPA.

3. @nodkz
Pavel Chertorogov

4. ES next and Babel
Webpack and Tools
Isomorphic JavaScript
NodeJS and React
Relay, GraphQL
My history
SPA and ServiceWorker

5. My history

6. My history
2001
2004
Сайт с анекдотами в
школьном интранете.
Веб-сайт nod.h1.ru с
ответами на реферальные
регистрации.
HTML 2000
- hover на кнопках
- анимированные GIF
- under construction и powered by,
- выпадающее меню вверх
мастерства,
- marquee
2004.04
Дата запуска Gmail
Первое на моей памяти SPA
wap.mobi.kz 2004.08
mobi.kz 2005.06
2005.02
AJAX
2006.09
jQuery
2006
2008
Автоматизация верстки
журнала и газет
Колёса, Крыша
31 апреля 2006
1 версии (www, wap)
2008.06
AppStore
2009.05
NodeJS
2008.09
V8

7. My history2010-11
Responsive
2010
март 2010
2 версии сайтов
отвязанные от газет
2011.08
Bootstrap
2010.10
Backbone
2011.12
Meteor
2010
Angular 1
2011.09
Ember 1
2011
июнь 2011
новый сайт
зарождение биллинга 2013
RoR, SEO, сборщики, tons of JS

8. My history
2015 Sep
2 версия сайта
и слияние с DNR.kz
2014.08
ServiceWorker
2015.08
Ember 22014-2016 and not ready yet
Angular 2 RC
2013.03
React
Aйрат Жаншуаков
показал CodeKit
Dan Abramov
показал Hot Reload
Sebastian Markbage
влюбил принципами разработки React
2015 July
2015 Apr

9. SPA and ServiceWorker

10. SPA and ServiceWorker
Hello,
Jake Archibald!
2014.08
работа в условиях потери связи
управление кэшем ресурсов
управление сетевыми HTTPS запросами
До свидания, AppCaсhe
https://developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers
https://github.com/NekR/offline-plugin for webpack by Arthur Stolyar
66.8% in KZ
59% in Global
caniuse.com
ServiceWorker это —

11. SPA and ServiceWorker
Бум Mobile Apps проходит,
приходит бум Single Page Applications.
уже доступно SEO, если есть server side rendering
не надо ничего устанавливать на телефон
удешевление разработки (одна команда, вместо трех)
Скорость и функционал немного не дотягивают до Mobile Apps
Service Worker Cookbook: https://serviceworke.rs/
НО
Мобильные приложения не вымрут, но шальных непонимающих
заказчиков станет меньше.

12. ES next и Babel

13. ES next и Babel
ES6 (ES2015, harmony)
ES7 (ES2016)
любые будущие proposals or possibilities
ES next —
get `ES next` and transform to `ES current`Babel —
ES current — ES5 (ECMAScript 5)
TC39 — комитет (люди которые решают, как улучшать язык)
свои плагины в обход TC39
ES6 можно считать в`ES current` для
SF10, CH52, FF49, Edge 14, Node 6
http://kangax.github.io/compat-table/es6/

14. ES next и Babel
transform syntax
babel-preset-es2015 babel-polyfill
new globals and object extensions

15. ES next и Babel
Arrow Functions in ES6

16. ES next и Babel
Default Parameters in ES6

17. ES next и Babel
Destructuring Assignment in ES6

18. ES next и Babel
Template Literals in ES6

19. ES next и Babel
Enhanced Object Literals in ES6

20. ES next и Babel
Classes in ES6

21. ES next и Babel
До свидания, CoffeeScript
Так получается, что c ES next я могу больше чем с CoffeeScript.
Для меня сахар ES6 уже вполне сопоставим с CoffeeScript.
Async/await для меня важнее, чем отсутсвие скобочек в CoffeeScript.
Import/export, уже не могу без ES6 модульности.
В модулях я использую flowtype для проверки типов.
И меня смущает, что до сих пор мало кто из больших компаний им пользуется.

22. Webpack

23. Webpack
Webpack — ключевое слово module bundler

24. Webpack
Webpack может подключить любые файлы как модули
В конфиге указываются лоадеры к расширениям файлов.
Лоадеры обрабатывают их по вашим правилам.
При этом в JS код возвращается мета-информация.
используете CSSModules со стилями?
тогда в stylesMap будет записан хэш
{ [имя класса из scss]: название
после сборки }
картинки получают уникальные
названия для кеширования?
тогда в imagePath будет записан
новый уникальный uri до файла
а ещё lazy loading, chunks, vendors и tree shaking

25. Webpack
The streaming
build system
Task Runner
основан
на конфигурации
end 2011
основан
на потоках
mid 2013
http://sixrevisions.com/web-development/grunt-vs-gulp/
May 11, 2015
Grunt Gulp

26. Webpack
https://www.youtube.com/playlist?list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn
Скринкаст от Ильи Кантора по Webpack 1:
Rollup.js — the next-generation JavaScript module bundler.
Tutorials
Competitors
Official docs
http://webpack.github.io/docs
http://rollupjs.org
Browserify lets you require('modules') in the browser by bundling up
all of your dependencies.
http://browserify.org/

27. Webpack
До свидания, Grunt, Gulp — вы не для SPA

28. Awesome tools

29. Awesome tools
До свидания, WebStorm, Sublime
Atom — a hackable text editor for the 21st Century

30. Awesome tools
Atom не Atom, без этих плагинов:
Nuclide от Facebook
Дополнительно устанавливает много полезных пакетов.
Поддерживает автокомплит, jump-to-definition, flowtype.
Раз в неделю обновляется.
LiveStyle для CSS, LESS и SCSS (Sergey Chikuyonok)
Один большой минус, не нашел плагина с GUI для git’а, который
был настолько же крут, как у WebStorm (IntelliJ IDEA).
Atom поддерживает flowtype из коробки.

31. Awesome tools
ESLint
Mocha+chai
Create ram disk on MacOS:
diskutil erasevolume hfsx my_ram_disk `hdiutil attach -nomount ram://1000000`;
проверяет типы, наличие методов, очень глубоко сканирует код.
Ловит баги до запуска JS кода. Интегрирован в Nuclide (Atom).
Работает моментально, код компилировать не нужно.
Обалденная вещь, если вы пишите библиотеку!
проверяет ваш JS код на соответствие style-guide,
находит простые ошибки по коду.
Рекомендую eslint-config-airbnb
Невероятно полезная вещь!
для написания BDD тестов
C Jest у меня что-то не сложилось, он слишком умный.
Flowtype

32. Awesome tools
Экономьте свое время
смотрите презентации в YouTube
в ускоренном режиме
Три презентации по времени двух!
ALT+SHIFT+Ю — быстрее ALT+SHIFT+Б — медленнее
Невероятная акция от YouTube!

33. Isomorphic JavaScript

34. Isomorphic JavaScript
What is Isomorphic JavaScript?
This is code, that can be run on client and server.
thin
server
Persistence
Application logic
View layer
Routing
DOM, forms,
animations
fat
server
thin
client
Now
fat
client
Early
@nodkz

35. Isomorphic JavaScript
Что дает Isomorphic JavaScript?
Уменьшение количества кода.
Код можно выполнить на клиенте
и на сервере. SEO для поисковиков.
Скорость работы приложения на клиенте.

36. NodeJS

37. NodeJS
Вкраце о NodeJS
Однопоточный дает скорость, т.к. не нужно переключать
контекст между потоками
Cheap connections малое потребление памяти для подключений
600k idle connections on AWS M3.xlarge with 15GB RAM:
https://www.jayway.com/2015/04/13/600k-concurrent-websocket-connections-on-aws-using-node-js/
JavaScript да-да тот самый язык, если до этого писали
код только в браузере ;)
EventLoop внутренняя очередь заданий для
асинхронности
Cамое то для Isomorphic Apps с тонким сервером

38. NodeJS
Худшее о NodeJS: как и везде
Утечки памяти Если кросс-ссылоки, куча хитрых объектов и событий.
Лечится прямыми руками, либо супервизорами: pm2, forever
Exceptions
Иногда просто хочется сказать, и чё ты мне вывел?
Лечится гаданием на кофейной гуще. Или методом тыка.
npm install Куча модулей и файлов, все постоянно обновляется
и может сломаться, хотя у вас все работает.
Лечится жестким фиксированием версий в package.json.
Если используете shrinkwrap, то руками версии
в package.json править нельзя.
Однопоточный
Если что-то тяжелое начало выполняться,
то все остальное накрывается медным тазом.
Лечение запускать больше инстансов, либо дробить задачу

39. React

40. React
— What about Ember?
Андрей Листочкин
Горячо рекомендую посмотреть его доклады в YouTube.
Неимоверно крутой чувак.
В Ember уже давно все есть, что появляется в React’e:
компонентный подход, react-router, ожидается react cli.
А до Ember был Borland Delphi, a до — Xerox PARC, а до — только калькуляторы.
Но для меня важно, кто стоит за проектом и как развивает комьюнити.
До свидания, Ember — прости ты не мой выбор.
Проблема во мне, проблема не в тебе!
Если не React,
то точно Ember!

41. React
React
VirtualDom Обновляет в DOM только то, что поменялось.
Быстро и без скрипа.
Great life cycles Делайте с компонентами что хотите, на любом
из этапов их жизненного цикла.
Errors on build Очень много проверок на этапе билда.
Events Своя event система, работающая во всех
браузерах/устройствах, которые использовал.
JS oriented HTML in JS. Not html extension.
Всё что вы пишите, пишите на JavaScript.
JSX syntax Удобное решение для разметки элементов.
Очень похож на html.

42. React
React Component lifecycle
Sorry, but I can not found an author of this diagram.

43. React
Rect-DOM styling
with CSSModules
Webpack config
Production DOM
Development DOM

44. React
React component
SASS syntax styles

45. React
react-dom
react-native
react-webGL
What in the future?
compatibility DOM and NATIVE components
Isomorphic react package that manipulates DOM on
client, or generates html string on the server.
A framework for building native apps using React.
Supported OS: >= Android 4.1 (API 16) and >= iOS 7.0.
Where is React works now?
react-canvas React Canvas adds the ability for React components
to render to <canvas> rather than DOM
hell knows what else … https://github.com/reactjs/react-future

46. React
Fast start for existing project with React
https://www.youtube.com/watch?v=BF58ZJ1ZQxY
Ryan Florence
Don't Rewrite, React! at react-europe 2015
Начните переписывать функционал снизу вверх.
К примеру, начните с формочки добавления комментариев. Затем к
отображению комментария. Ну и под конец сделайте список.
BOOM! И комментарии готовы.
Потом к статье, потом к меню. И не заметите как все приложение
у вас на React.
С Angular такое не пройдет, надо
переписывать все сразу и целиком.

47. React
Quick start from scratch

48. React
Quick start from scratch
July 22, 2016 by Dan Abramov, Christopher Chedeau, Kevin Lacker
Create Apps with No Configuration
https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html
May 5, 2016 by Konstantin Tarkus (@koistya)
React App SDK
Uses Webpack, Babel, ESLint under the hood
https://github.com/kriasoft/react-app
Uses Webpack, Babel, ESLint, Hot Loader, Postcss, Browser-sync
Why Kostya still does not work at Facebook?! I can not understand.
Best of the Best / Suggested Reading List
https://github.com/markerikson/react-redux-links
Curated tutorial and resource links by Mark Erikson (@acemarke)
This collection gets more than 150 reactions in my twitter.

49. React
Quick start from scratch
Other recommended resources:
https://www.udemy.com/user/sgslo/
For React recommended author is Stephen Grider
https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/
Paid courses on udemy.com
https://www.pluralsight.com/authors/cory-house
Building apps with React and Redux in ES6 by Cory House
http://egghead.io
Huge tutorial with screenshots: Cloning Yelp by Ari Lerner
Many lessons available free and by subscription
Wired parts in JS and NodeJS by Anthony Alicea
(also great courses by Docker, AWS)
Paid courses on pluralsight.com
https://www.udemy.com/user/anthonypalicea/
Many many FREE talks on YouTube. Eg. ReactEurope 2015-2016
https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A

50. GraphQL

51. GraphQL
“With GraphQL, we could simply stop writing
API documentation or reading it.
I think that’s the dream of every developer.”
— by @arunoda
GraphQL is a query language
developed by Facebook
Lee Byron
Nicholas Schrock
Daniel Schafer
Authors before and after releasing GraphQL SPEC

52. GraphQL
GraphQL at any backend as you wish!

53. GraphQL
GraphQL with any mix of databases!
Implements any custom bussines logic.
Also works with existing code.
One GraphQL query may combine results from different data sources.

54. GraphQL
GraphQL at any client as you wish!
The best solution to fetch data
for web apps, mobile apps, and 3rd party clients.
Any nesting and combination of data in one request.
No more nor less then the client requests.

55. GraphQL
GraphiQL — interactive in-browser GraphQL IDE
http://toolbox.sangria-graphql.org/graphiql
Try it! http://graphql-swapi.parseapp.com/
http://reidex.io/
beginner lvl
medium lvl
expert lvl
/ˈɡrafək(ə)l/

56. GraphQL
DocumentationValidation, autosuggestion
GraphiQL schema introspection

57. GraphQL
Several queries in one request
Also please note: only requested data, no more nor less!
3 REST requests in single GraphQL query

58. GraphQL
Any nesting in one request
ProTIP: Use DataLoader for reducing over-fetching (one record several times)
https://github.com/facebook/dataloader
https://medium.com/apollo-stack/graphql-explained-5844742f195eHow nested queries works:

59. GraphQL
Fragments (preparation for components)
In GraphQL, fragments are the way to group commonly used fields and reuse them.
Components are perfect correlated with Fragments
Required DataRender instructions

60. GraphQL
Schema definition on server
Your First GraphQL Server by Clay Allsopp:
https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2

61. GraphQL
Mutations and Subscriptions
Mutations = add, change or remove data on server
Subscriptions = send requested data, as soon you have new one
Mutation have similar syntax as Query.
But multiple Mutations in a single request are executed one by one.
I can not recommend any good OSS solution.

62. GraphQL
Any complex queries on your frontend
less network traffic
less time for processing
less time to develop
less request numbers
less possibilities for errors
less stress more success

63. GraphQL
До свидания, REST API

64. GraphQL
Tutorials
https://learngraphql.com
http://graphql.org/docs/getting-started/Official
Client
Useful OSS libraries
https://github.com/matthewmueller/graph.ql
Faster and simpler technique for creating and querying GraphQL schemas on server
https://github.com/mickhansen/graphql-sequelize
GraphQL & Relay for MySQL & Postgres via Sequelize
A GraphQL API created by reflection over a PostgreSQL schema
https://github.com/calebmer/postgraphql
My OSS family of packages graphql-compose
https://github.com/nodkz/graphql-compose
https://medium.com/apollo-stack/tutorial-building-a-graphql-server-cddaa023c035
Tutorial: How to build a GraphQL server

65. Relay

66. Relay
Components are perfect correlated with Fragments
Required DataRender instructions
Relay
A javascript framework
for building data-driven React application with GraphQL

67. Relay
React, Relay, GraphQL — all together

68. Relay
Conditional fetching Mutations
Optimistic updates
Pagination
Retry
Error handling
Rollback
Cache
Relay

69. Relay
https://www.youtube.com/results?search_query=relay+react
Talks from authors Steven Luscher, Joseph Savona, Greg Hurrell
Lokka — Simple JavaScript Client for GraphQL
Tutorials
Competitors
Official docs
https://facebook.github.io/relay/
https://github.com/kadirahq/lokka
Apollo is an incrementally-adoptable data stack that manages the
flow of data between clients and backends.
http://www.apollostack.com/

70. React, GraphQL, Relay, Nuclide, Flowtype, Jest
Harmonious work of all OSS projects by Facebook
You should not use Facebook OSS products, if you’ll take a financial
interest or any Patent Assertion against Facebook.

71. — Так что, у вас бэкенд с фронтендом
смешался?

72. До свидания, Bower, jQuery, современные
wap-сайты, рендеринг для клиентов на сервере,
старый добрый императивный подход.
До свидания, бесполезные версии продуктов,
которые приходится по-взрослому обслуживать.
— Адаптивность? Нееее, не слышали.

73. Problems

74. Problems
Много всего нового!
Много терпения и желания!
React
Babel
Webpack
GraphQL
Relay
NodeJS
ES next
Много времени на изучение!
А ещё, надо всё друг с другом “поженить”!

75. nodkz
В этой жизни возможно все. Просто на
невозможное, требуется больше времени.
А жизнь слишком коротка, чтобы заниматься
вещами, которые ничего не меняют.