"Изоморфная разработка на javascript с помощью react.js"...

34
Изоморфная разработка на JavaScript с помощью React.js @maxmaxmaxmax МАКСИМ КЛИМИШИН CTO ZAKAZ.UA GVMachines Inc.

Upload: fwdays

Post on 18-Jul-2015

241 views

Category:

Technology


5 download

TRANSCRIPT

Page 1: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Изоморфная разработка на JavaScript с помощью React.js

@maxmaxmaxmaxМАКСИМ КЛИМИШИНCTO ZAKAZ.UA GVMachines Inc.

Page 2: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Обо мне

‣ 11+ лет опыта веб разработки, 5 лет JavaScript, 6 лет Python

‣ Работал в oDesk, Helios, 42cc.

‣ Со-организатор конференций PyCon Ukraine, KyivJS

‣ 3 года работаю техническим директором в ZAKAZ.UA

Page 3: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Что такое изоморфный код?

isomorphic

Page 4: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Возможность использовать один и тот же код

как на клиенте так и на сервере

ISOMORPHIC

Page 5: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

СЕЙЧАС

CLIENT

API

SERVER

изоморфный код

Page 6: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Value proposition

Page 7: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Проблемы one page apps

Зачем это надо?

‣ Производительность - загрузка данных, задержка при старте

‣ Тяжелая операция по рендерингу и созданию DOM-дерева

‣ Недружелюбные для краулеров (hashbang)

Page 8: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Проблемы архитектуры

Зачем это надо?

‣ Двойная валидация входных данных

‣ Поддержка сложной бизнес-логики одновременно на клиенте и на сервере

‣ Зависимость от сервера в мобильных приложениях

Page 9: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Изоморфный JavaScript может

решить эти проблемы

Зачем это надо?

Page 10: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

React.js

Page 11: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Что нужно

‣ Рендерить компоненты на сервере

‣ Обновлять данные на клиенте без перезагрузки страницы

‣ Максимально унифицировать код сервера и клиента

Page 12: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Архитектурно

comp_data = f(x) dom_cli = React.render(…comp_data…) html_srv = React.renderToString(…comp_data…)

x = url ∪ cookies ∪ get_data ∪ post_data

Page 13: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Состояние приложения (x)

‣ Location

‣ Cookies

‣ GET params

‣ POST params

Page 14: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Как это сделать в React.js

‣ в root-овом компоненте определить статический изоморфный метод, который

‣ собирает состояние запроса: path, cookies get params, post params

‣ консолидирует забор данных

‣ отложить рендер root-ового компонента до конца выполнения метода

Page 15: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Решения

‣ Relay

‣ GraphQL

‣ Transmit

Page 16: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Relay

Relay.createContainer(Story, { queries: { story: graphql` Story { author { name, profile_picture { uri } }, text}` }

Page 17: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Недостатки

‣ Relay – нет релиза

‣ GraphQL – нет релиза, но есть парсер

Page 18: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Transmit.createContainer(Main, { queryParams: { pagesToFetch: 10 }, queries: { /** * Return a Promise */ data: function (queryParams) { // isomorphic fetch return fetch(…).then(…) } }

Transmitзамена relay+graphql на промисы

Page 19: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Transmit

Попробовать можно в react-isomorphic-starterkit

Page 20: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Харашо, вай-вай

Page 21: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

React Native теперь можно создавать мобильные приложения

МОБИЛЬНЫЕ

Page 22: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

REACT NATIVE

CLI

ENT

SERV

ERизоморфный код

API

MOBILE

Page 23: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин
Page 24: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Изоморфный JS как отдельный сервис

Page 25: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

А почему-бы не сделать отдельный сервис, который рендерит JavaScript где надо

Service

Page 26: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Service

‣ Синхронный сервис

‣ Очередь задач, асинхронно

Два варианта

Page 27: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Service

приложение

database cache node.js

Page 28: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

rendered rendered

task 1

запрос 2

state

сервер задач node.js

запрос 1

state

task 2

cache

Page 29: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Полезно для мозга

Page 30: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Выводы

Page 31: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Выводы

‣ Увеличивается количество shared кода, уменьшается рассеивание бизнес логики между разными платформами (клиент, сервер, мобильные)

‣ Улучшается UX – за счет пререндеринга пользователь получает картинку на экране быстрее

‣ Улучшается видимость в поисковых системах

‣ Не нужно все переписывать на JavaScript

Page 32: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Недостатки

‣ Ограничения всех платформ, учавствующих в выполнении приложения (клиент ∩ сервер ∩ мобильный)

‣ Увеличивает количество компонентов в системе (если не node.js-based проект)

‣ Сложнее тестировать

Page 33: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

Кто в темеВыводы

‣ Facebook

‣ Instagram

‣ Yahoo! Mail

‣ Walmart

‣ Airbnb

‣ Netflix

Page 34: "Изоморфная разработка на javascript с помощью react.js" Максим Климишин

JS Frameworks Day

@maxmaxmaxmax