Современная разработка на JavaScript быстро эволиционирует – в язык входят инструменты, которые позволяют создавать прогнозируемые и надежные продукты как на сервере, так и на клиенте. С ES6 пришли генератор и итераторы, из Clojure – трансдюсеры и CSP каналы, Facebook дал React.js и Immutable.js. Изоморфная разработка – когда один и тот же код может работать как на сервере, так и на клиенте, набирает популярность. В моем докладе я хочу раскрыть последние тренды в этой области и как это можно сделать с помощью React.js.

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

2. Обомне
‣ 11+ летопытавебразработки,5летJavaScript,
6летPython
‣ Работалв oDesk,Helios,42cc.
‣ Со-организаторконференцийPyConUkraine,
KyivJS
‣ 3годаработаютехническимдиректоромв
ZAKAZ.UA

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

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

5. СЕЙЧАС
CLIENT
API
SERVER
изоморфный код

6. Valueproposition

7. Проблемыonepageapps
Зачем это надо?
‣ Производительность-загрузкаданных,
задержкапри старте
‣ Тяжелаяоперацияпорендерингуисозданию
DOM-дерева
‣ Недружелюбныедлякраулеров(hashbang)

8. Проблемыархитектуры
Зачем это надо?
‣ Двойнаявалидациявходныхданных
‣ Поддержкасложнойбизнес-логики
одновременнонаклиентеинасервере
‣ Зависимость отсерверавмобильных
приложениях

9. ИзоморфныйJavaScript
может
решитьэти проблемы
Зачем это надо?

10. React.js

11. Чтонужно
‣ Рендеритькомпонентына сервере
‣ Обновлятьданныенаклиенте без
перезагрузкистраницы
‣ Максимальноунифицироватькодсервераи
клиента

12. Архитектурно
comp_data = f(x)
dom_cli = React.render(…comp_data…)
html_srv = React.renderToString(…comp_data…)
x = url ∪ cookies ∪ get_data ∪ post_data

13. Состояниеприложения(x)
‣ Location
‣ Cookies
‣ GETparams
‣ POSTparams

14. КакэтосделатьвReact.js
‣ вroot-овомкомпонентеопределить
статическийизоморфныйметод,который
‣ собираетсостояниезапроса:path,cookies
getparams,postparams
‣ консолидируетзаборданных
‣ отложитьрендерroot-овогокомпонентадо
концавыполненияметода

15. Решения
‣ Relay
‣ GraphQL
‣ Transmit

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

17. Недостатки
‣ Relay– нетрелиза
‣ GraphQL– нет релиза,ноестьпарсер

18. Transmit.createContainer(Main, {
queryParams: {
pagesToFetch: 10
},
queries: {
/**
* Return a Promise */
data: function (queryParams) {
// isomorphic fetch
return fetch(…).then(…)
}
}
Transmit
заменаrelay+graphqlнапромисы

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

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

21. React Native
теперьможносоздавать
мобильныеприложения
МОБИЛЬНЫЕ

22. REACT NATIVE
CLIENT
SERVER
изоморфный код
API
MOBILE

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

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

26. Service
‣ Синхронныйсервис
‣ Очередь задач,асинхронно
Дваварианта

27. Service
приложение
database cache node.js

28. rendered rendered
task1
запрос2
state
серверзадачnode.js
запрос1
state
task2
cache

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

30. Выводы

31. Выводы
‣ Увеличиваетсяколичествоsharedкода,
уменьшаетсярассеивание бизнеслогики
междуразнымиплатформами(клиент,сервер,
мобильные)
‣ УлучшаетсяUX– засчет пререндеринга
пользовательполучаеткартинкунаэкране
быстрее
‣ Улучшаетсявидимостьвпоисковыхсистемах
‣ НенужновсепереписыватьнаJavaScript

32. Недостатки
‣ Ограничениявсехплатформ,учавствующихв
выполненииприложения (клиент∩сервер∩
мобильный)
‣ Увеличиваетколичествокомпонентовв
системе(если неnode.js-basedпроект)
‣ Сложнеетестировать

33. Ктовтеме
Выводы
‣ Facebook
‣ Instagram
‣ Yahoo!Mail
‣ Walmart
‣ Airbnb
‣ Netflix

34. JS Frameworks Day
@maxmaxmaxmax