JSLab. Максим Климишин. "Трансдюсеры, CSP каналы, неизменяемые структуры данных"
"Изоморфная разработка на javascript с помощью react.js" Максим...
-
Upload
fwdays -
Category
Technology
-
view
245 -
download
5
Transcript of "Изоморфная разработка на javascript с помощью react.js" Максим...
Изоморфная разработка на 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 проект)
‣ Сложнее тестировать
Кто в темеВыводы
‣ Yahoo! Mail
‣ Walmart
‣ Airbnb
‣ Netflix
JS Frameworks Day
@maxmaxmaxmax