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

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

Обо мне

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

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

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

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

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

isomorphic

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

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

ISOMORPHIC

СЕЙЧАС

CLIENT

API

SERVER

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

Value proposition

Проблемы one page apps

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

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

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

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

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

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

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

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

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

Изоморфный 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

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

‣ Location

‣ Cookies

‣ GET params

‣ POST params

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

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

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

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

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

Решения

‣ Relay

‣ GraphQL

‣ Transmit

Relay

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

Недостатки

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

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

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

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

Transmit

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

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

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

МОБИЛЬНЫЕ

REACT NATIVE

CLI

ENT

SERV

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

API

MOBILE

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

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

Service

Service

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

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

Два варианта

Service

приложение

database cache node.js

rendered rendered

task 1

запрос 2

state

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

запрос 1

state

task 2

cache

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

Выводы

Выводы

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

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

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

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

Недостатки

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

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

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

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

‣ Facebook

‣ Instagram

‣ Yahoo! Mail

‣ Walmart

‣ Airbnb

‣ Netflix

JS Frameworks Day

@maxmaxmaxmax