Бэкенд, фронтенд — всё смешалось.

Экскурсия в будущее веб-разработки.Мой стэк для 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

В этой жизни возможно все. Просто на невозможное, требуется больше времени.

А жизнь слишком коротка, чтобы заниматься вещами, которые ничего не меняют.