SlideShare a Scribd company logo

Бэкенд, Фронтенд — всё смешалось. Обзорная экскурсия в будущее веб-разработки

I
ITCrowd Almaty

Документ представляет собой обзор эволюции веб-разработки и технологий, включая бэкенд и фронтенд. Обсуждаются такие инструменты, как React, GraphQL, Webpack и Node.js, а также их влияние на создание одностраничных приложений (SPA) и управление данными. Один из основных выводов заключается в том, что современные подходы и инструменты ведут к упрощению разработки и улучшению производительности, несмотря на существующие проблемы и вызовы.

Internet
1 of 75
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
Бэкенд, Фронтенд — всё смешалось. Обзорная экскурсия в будущее веб-разработки
Бэкенд, фронтенд — всё смешалось. Экскурсия в будущее веб-разработки. Мой стэк для SPA.
@nodkz Pavel Chertorogov
ES next and Babel Webpack and Tools Isomorphic JavaScript NodeJS and React Relay, GraphQL My history SPA and ServiceWorker
My history
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
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
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
SPA and ServiceWorker
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 это —
SPA and ServiceWorker Бум Mobile Apps проходит, приходит бум Single Page Applications. уже доступно SEO, если есть server side rendering не надо ничего устанавливать на телефон удешевление разработки (одна команда, вместо трех) Скорость и функционал немного не дотягивают до Mobile Apps Service Worker Cookbook: https://serviceworke.rs/ НО Мобильные приложения не вымрут, но шальных непонимающих заказчиков станет меньше.
ES next и Babel
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/
ES next и Babel transform syntax babel-preset-es2015 babel-polyfill new globals and object extensions
ES next и Babel Arrow Functions in ES6
ES next и Babel Default Parameters in ES6
ES next и Babel Destructuring Assignment in ES6
ES next и Babel Template Literals in ES6
ES next и Babel Enhanced Object Literals in ES6
ES next и Babel Classes in ES6
ES next и Babel До свидания, CoffeeScript Так получается, что c ES next я могу больше чем с CoffeeScript. Для меня сахар ES6 уже вполне сопоставим с CoffeeScript. Async/await для меня важнее, чем отсутсвие скобочек в CoffeeScript. Import/export, уже не могу без ES6 модульности. В модулях я использую flowtype для проверки типов. И меня смущает, что до сих пор мало кто из больших компаний им пользуется.
Webpack
Webpack Webpack — ключевое слово module bundler
Webpack Webpack может подключить любые файлы как модули В конфиге указываются лоадеры к расширениям файлов. Лоадеры обрабатывают их по вашим правилам. 
 При этом в JS код возвращается мета-информация. используете CSSModules со стилями? 
 тогда в stylesMap будет записан хэш { [имя класса из scss]: название после сборки } картинки получают уникальные названия для кеширования?
 тогда в imagePath будет записан новый уникальный uri до файла а ещё lazy loading, chunks, vendors и tree shaking
Webpack The streaming build system Task Runner основан на конфигурации end 2011 основан на потоках mid 2013 http://sixrevisions.com/web-development/grunt-vs-gulp/ May 11, 2015 Grunt Gulp
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/
Webpack До свидания, Grunt, Gulp — вы не для SPA
Awesome tools
Awesome tools До свидания, WebStorm, Sublime Atom — a hackable text editor for the 21st Century
Awesome tools Atom не Atom, без этих плагинов: Nuclide от Facebook Дополнительно устанавливает много полезных пакетов. Поддерживает автокомплит, jump-to-definition, flowtype. Раз в неделю обновляется. LiveStyle для CSS, LESS и SCSS (Sergey Chikuyonok) Один большой минус, не нашел плагина с GUI для git’а, который был настолько же крут, как у WebStorm (IntelliJ IDEA). Atom поддерживает flowtype из коробки.
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
Awesome tools Экономьте свое время смотрите презентации в YouTube в ускоренном режиме Три презентации по времени двух! ALT+SHIFT+Ю — быстрее ALT+SHIFT+Б — медленнее Невероятная акция от YouTube!
Isomorphic JavaScript
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
Isomorphic JavaScript Что дает Isomorphic JavaScript? Уменьшение количества кода. Код можно выполнить на клиенте 
 и на сервере. SEO для поисковиков. Скорость работы приложения на клиенте.
NodeJS
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 с тонким сервером
NodeJS Худшее о NodeJS: как и везде Утечки памяти Если кросс-ссылоки, куча хитрых объектов и событий. Лечится прямыми руками, либо супервизорами: pm2, forever Exceptions Иногда просто хочется сказать, и чё ты мне вывел? Лечится гаданием на кофейной гуще. Или методом тыка. npm install Куча модулей и файлов, все постоянно обновляется и может сломаться, хотя у вас все работает. Лечится жестким фиксированием версий в package.json. Если используете shrinkwrap, то руками версии в package.json править нельзя. Однопоточный Если что-то тяжелое начало выполняться, то все остальное накрывается медным тазом. Лечение запускать больше инстансов, либо дробить задачу
React
React — What about Ember? Андрей Листочкин Горячо рекомендую посмотреть его доклады в YouTube. Неимоверно крутой чувак. В Ember уже давно все есть, что появляется в React’e: компонентный подход, react-router, ожидается react cli. А до Ember был Borland Delphi, a до — Xerox PARC, а до — только калькуляторы. Но для меня важно, кто стоит за проектом и как развивает комьюнити. До свидания, Ember — прости ты не мой выбор. 
 Проблема во мне, проблема не в тебе! Если не React, то точно Ember!
React React VirtualDom Обновляет в DOM только то, что поменялось. Быстро и без скрипа. Great life cycles Делайте с компонентами что хотите, на любом из этапов их жизненного цикла. Errors on build Очень много проверок на этапе билда. Events Своя event система, работающая во всех браузерах/устройствах, которые использовал. JS oriented HTML in JS. Not html extension. Всё что вы пишите, пишите на JavaScript. JSX syntax Удобное решение для разметки элементов. Очень похож на html.
React React Component lifecycle Sorry, but I can not found an author of this diagram.
React Rect-DOM styling with CSSModules Webpack config Production DOM Development DOM
React React component SASS syntax styles
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
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 такое не пройдет, надо переписывать все сразу и целиком.
React Quick start from scratch
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.
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
GraphQL
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
GraphQL GraphQL at any backend as you wish!
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.
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.
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/
GraphQL DocumentationValidation, autosuggestion GraphiQL schema introspection
GraphQL Several queries in one request Also please note: only requested data, no more nor less! 3 REST requests in single GraphQL query
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:
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
GraphQL Schema definition on server Your First GraphQL Server by Clay Allsopp: https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2
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.
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
GraphQL До свидания, REST API
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
Relay
Relay Components are perfect correlated with Fragments Required DataRender instructions Relay A javascript framework for building data-driven React application with GraphQL
Relay React, Relay, GraphQL — all together
Relay Conditional fetching Mutations Optimistic updates Pagination Retry Error handling Rollback Cache Relay
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/
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.
— Так что, у вас бэкенд с фронтендом смешался?
До свидания, Bower, jQuery, современные 
 wap-сайты, рендеринг для клиентов на сервере, старый добрый императивный подход. До свидания, бесполезные версии продуктов, которые приходится по-взрослому обслуживать. — Адаптивность? Нееее, не слышали.
Problems
Problems Много всего нового! Много терпения и желания! React Babel Webpack GraphQL Relay NodeJS ES next Много времени на изучение! А ещё, надо всё друг с другом “поженить”!
nodkz В этой жизни возможно все. Просто на невозможное, требуется больше времени. А жизнь слишком коротка, чтобы заниматься вещами, которые ничего не меняют.

More Related Content

What's hot (20)

PDF
Конструктор / Денис Паясь (Яндекс)
Ontico
 
PDF
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
MoscowJS
 
PDF
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Ontico
 
PDF
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
ADN Digital Studio
 
PDF
Performance engineering stories from #fdminicon Saransk
Alex Chistyakov
 
PPTX
Знакомство с WebAssembly
Nikita Zimin
 
PDF
JavaScript завтра / Сергей Рубанов (Exante Limited)
Ontico
 
PPTX
Как быть с большими сайтами на Word press
vovasik
 
PDF
Roman Romanovsky, Sergey Rak - "JavaScript в IoT "
IT Event
 
PDF
Павел Юрийчук - Разработка приложений под мобильные браузеры
UA Mobile
 
PPTX
Обзор интернет браузеров
Alina Kolosova
 
PDF
Frontendlab: Cравнить Несравнимое - Юлия Пучнина
GeeksLab Odessa
 
PDF
13 октября, DEV {web} - конференция о Highload веб-разработке. "Java под нагр...
IT-Portfolio
 
PDF
Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Yandex
 
PPTX
Illya Klymov - "Vue.JS: What did I swap React for in 2017 and why?"
IT Event
 
PDF
Кэширование в веб-приложениях: что? где? когда?
CUSTIS
 
PDF
Эволюция клиентской разработки: от веба ко "всеобщей мобилизации” или mobile-...
Pavel Dovbush
 
PPTX
Chef @DevWeb
Alex Chistyakov
 
PPTX
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
DevGAMM Conference
 
PDF
openSUSE Build Server от Б до Ю
Minsk Linux User Group
 
Конструктор / Денис Паясь (Яндекс)
Ontico
 
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
MoscowJS
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Ontico
 
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
ADN Digital Studio
 
Performance engineering stories from #fdminicon Saransk
Alex Chistyakov
 
Знакомство с WebAssembly
Nikita Zimin
 
JavaScript завтра / Сергей Рубанов (Exante Limited)
Ontico
 
Как быть с большими сайтами на Word press
vovasik
 
Roman Romanovsky, Sergey Rak - "JavaScript в IoT "
IT Event
 
Павел Юрийчук - Разработка приложений под мобильные браузеры
UA Mobile
 
Обзор интернет браузеров
Alina Kolosova
 
Frontendlab: Cравнить Несравнимое - Юлия Пучнина
GeeksLab Odessa
 
13 октября, DEV {web} - конференция о Highload веб-разработке. "Java под нагр...
IT-Portfolio
 
Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Yandex
 
Illya Klymov - "Vue.JS: What did I swap React for in 2017 and why?"
IT Event
 
Кэширование в веб-приложениях: что? где? когда?
CUSTIS
 
Эволюция клиентской разработки: от веба ко "всеобщей мобилизации” или mobile-...
Pavel Dovbush
 
Chef @DevWeb
Alex Chistyakov
 
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
DevGAMM Conference
 
openSUSE Build Server от Б до Ю
Minsk Linux User Group
 

Viewers also liked (12)

PPTX
На плаву!
ITCrowd Almaty
 
PPTX
Web Performance в Казнете
ITCrowd Almaty
 
PDF
Разработка API для большого, нагруженного сервиса
ITCrowd Almaty
 
PDF
React + Flux
ITCrowd Almaty
 
PDF
Мобильность на Колёсах: об инструментах и полезных вещах
ITCrowd Almaty
 
PDF
Ключ от всех дверей: чем опасен Великий Казахстанский Файерволл
ITCrowd Almaty
 
PDF
Docker с чем едят и для чего используют
ITCrowd Almaty
 
PDF
ITCrowd 2 - Разработка крупного проекта в команде
ITCrowd Almaty
 
PPTX
Чем бесят программисты
ITCrowd Almaty
 
PDF
Бэкенд, фронтенд — всё смешалось (nodkz)
Pavel Chertorogov
 
PPTX
Александр Трищенко: Phalcon framework
Oleg Poludnenko
 
PDF
An Introduction to ReactJS
All Things Open
 
На плаву!
ITCrowd Almaty
 
Web Performance в Казнете
ITCrowd Almaty
 
Разработка API для большого, нагруженного сервиса
ITCrowd Almaty
 
React + Flux
ITCrowd Almaty
 
Мобильность на Колёсах: об инструментах и полезных вещах
ITCrowd Almaty
 
Ключ от всех дверей: чем опасен Великий Казахстанский Файерволл
ITCrowd Almaty
 
Docker с чем едят и для чего используют
ITCrowd Almaty
 
ITCrowd 2 - Разработка крупного проекта в команде
ITCrowd Almaty
 
Чем бесят программисты
ITCrowd Almaty
 
Бэкенд, фронтенд — всё смешалось (nodkz)
Pavel Chertorogov
 
Александр Трищенко: Phalcon framework
Oleg Poludnenko
 
An Introduction to ReactJS
All Things Open
 
Ad

Similar to Бэкенд, Фронтенд — всё смешалось. Обзорная экскурсия в будущее веб-разработки (20)

PDF
Изоморфный JavaScript — будущее уже здесь
CodeFest
 
PDF
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...
GeeksLab Odessa
 
PDF
Изоморфные react-приложения
Denis Izmaylov
 
PDF
Frontend - экосистема и будущее: iforum 2015
Eldar Djafarov
 
PDF
Изоморфные React-приложения: производительность и масштабирование
Denis Izmaylov
 
PDF
Инструментируй это
Roman Dvornov
 
PDF
Денис Измайлов, JavaScript сегодня: React, Redux и новая реальность
ScrumTrek
 
PDF
JavaScript сегодня: React, Redux и новая реальность
Denis Izmaylov
 
PDF
webpack: 7 бед - один ответ
Denis Izmaylov
 
PDF
Desktop app based on node js and html5
Provectus
 
PDF
Будущее шаблонизаторов
Alexey Ivanov
 
PPTX
Изоморфные React-приложения производительность и масштабирование / Денис Изма...
Ontico
 
PDF
SPA инструменты
Roman Dvornov
 
PDF
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
MoscowJS
 
PDF
Баба Яга против!
Roman Dvornov
 
PDF
Что такое современная Frontend разработка
DevOWL Meetup
 
PDF
Mobile Web Apps development essentials
Pavlo Iuriichuk
 
PDF
D2D Pizza JS Илья Беда "Куда мы все катимся?"
Dev2Dev
 
PDF
Java script и frontend завтра - Kharkiv JS 2013
Andrey Listochkin
 
PDF
YaC 2013 Notes
Anton Ignatov
 
Изоморфный JavaScript — будущее уже здесь
CodeFest
 
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...
GeeksLab Odessa
 
Изоморфные react-приложения
Denis Izmaylov
 
Frontend - экосистема и будущее: iforum 2015
Eldar Djafarov
 
Изоморфные React-приложения: производительность и масштабирование
Denis Izmaylov
 
Инструментируй это
Roman Dvornov
 
Денис Измайлов, JavaScript сегодня: React, Redux и новая реальность
ScrumTrek
 
JavaScript сегодня: React, Redux и новая реальность
Denis Izmaylov
 
webpack: 7 бед - один ответ
Denis Izmaylov
 
Desktop app based on node js and html5
Provectus
 
Будущее шаблонизаторов
Alexey Ivanov
 
Изоморфные React-приложения производительность и масштабирование / Денис Изма...
Ontico
 
SPA инструменты
Roman Dvornov
 
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
MoscowJS
 
Баба Яга против!
Roman Dvornov
 
Что такое современная Frontend разработка
DevOWL Meetup
 
Mobile Web Apps development essentials
Pavlo Iuriichuk
 
D2D Pizza JS Илья Беда "Куда мы все катимся?"
Dev2Dev
 
Java script и frontend завтра - Kharkiv JS 2013
Andrey Listochkin
 
YaC 2013 Notes
Anton Ignatov
 
Ad

More from ITCrowd Almaty (10)

PPTX
Система управления конфигурациями Ansible
ITCrowd Almaty
 
PPTX
Система мониторинга Zabbix
ITCrowd Almaty
 
PDF
WatchKit 101
ITCrowd Almaty
 
PPTX
AngularJS
ITCrowd Almaty
 
PPTX
Designer ≠ дизайнер
ITCrowd Almaty
 
PPTX
ITCrowd 2 - Обзор существующих стандартов разметки и продуктов на ее основе
ITCrowd Almaty
 
PDF
ITCrowd - Метапрограммирование
ITCrowd Almaty
 
PPTX
ITCrowd - Потенциал казахоязычной аудитории РК
ITCrowd Almaty
 
PPTX
ITCrowd - Почему и как я стал фрилансером?
ITCrowd Almaty
 
PPTX
ITCrowd - Правильная структура лендинга
ITCrowd Almaty
 
Система управления конфигурациями Ansible
ITCrowd Almaty
 
Система мониторинга Zabbix
ITCrowd Almaty
 
WatchKit 101
ITCrowd Almaty
 
AngularJS
ITCrowd Almaty
 
Designer ≠ дизайнер
ITCrowd Almaty
 
ITCrowd 2 - Обзор существующих стандартов разметки и продуктов на ее основе
ITCrowd Almaty
 
ITCrowd - Метапрограммирование
ITCrowd Almaty
 
ITCrowd - Потенциал казахоязычной аудитории РК
ITCrowd Almaty
 
ITCrowd - Почему и как я стал фрилансером?
ITCrowd Almaty
 
ITCrowd - Правильная структура лендинга
ITCrowd Almaty
 

Бэкенд, Фронтенд — всё смешалось. Обзорная экскурсия в будущее веб-разработки

  • 2. Бэкенд, фронтенд — всё смешалось. Экскурсия в будущее веб-разработки. Мой стэк для SPA.
  • 4. ES next and Babel Webpack and Tools Isomorphic JavaScript NodeJS and React Relay, GraphQL My history SPA and ServiceWorker
  • 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
  • 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 для проверки типов. И меня смущает, что до сих пор мало кто из больших компаний им пользуется.
  • 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
  • 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!
  • 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 для поисковиков. Скорость работы приложения на клиенте.
  • 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
  • 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 такое не пройдет, надо переписывать все сразу и целиком.
  • 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
  • 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/
  • 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
  • 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-сайты, рендеринг для клиентов на сервере, старый добрый императивный подход. До свидания, бесполезные версии продуктов, которые приходится по-взрослому обслуживать. — Адаптивность? Нееее, не слышали.
  • 74. Problems Много всего нового! Много терпения и желания! React Babel Webpack GraphQL Relay NodeJS ES next Много времени на изучение! А ещё, надо всё друг с другом “поженить”!
  • 75. nodkz В этой жизни возможно все. Просто на невозможное, требуется больше времени. А жизнь слишком коротка, чтобы заниматься вещами, которые ничего не меняют.