Бэкенд, фронтенд — всё смешалось (nodkz)
-
Upload
pavel-chertorogov -
Category
Technology
-
view
358 -
download
11
Transcript of Бэкенд, фронтенд — всё смешалось (nodkz)
Бэкенд, фронтенд — всё смешалось.
Экскурсия в будущее веб-разработки.Мой стэк для SPA.
@nodkzPavel 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
20062008
Автоматизация верстки журнала и газет Колёса, Крыша
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 July2015 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 docshttp://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 scratchOther 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-2016https://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 SubscriptionsMutations = 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 schemahttps://github.com/calebmer/postgraphql
My OSS family of packages graphql-composehttps://github.com/nodkz/graphql-compose
https://medium.com/apollo-stack/tutorial-building-a-graphql-server-cddaa023c035Tutorial: How to build a GraphQL server
Relay
Relay
Components are perfect correlated with Fragments
Required DataRender instructions
RelayA 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 docshttps://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, JestHarmonious 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
Много всего нового!
Много терпения и желания!
ReactBabel
WebpackGraphQL
RelayNodeJS
ES next
Много времени на изучение!
А ещё, надо всё друг с другом “поженить”!
nodkz
В этой жизни возможно все. Просто на невозможное, требуется больше времени.
А жизнь слишком коротка, чтобы заниматься вещами, которые ничего не меняют.