Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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

  • Login to see the comments

  • Be the first to like this

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

  1. 1. Изоморфная разработка на JavaScript с помощью React.js @maxmaxmaxmaxМАКСИМ КЛИМИШИН CTO ZAKAZ.UA GVMachines Inc.
  2. 2. Обомне ‣ 11+ летопытавебразработки,5летJavaScript, 6летPython ‣ Работалв oDesk,Helios,42cc. ‣ Со-организаторконференцийPyConUkraine, KyivJS ‣ 3годаработаютехническимдиректоромв ZAKAZ.UA
  3. 3. Что такое изоморфный код? isomorphic
  4. 4. Возможностьиспользовать одини тотжекод какнаклиентетакинасервере ISOMORPHIC
  5. 5. СЕЙЧАС CLIENT API SERVER изоморфный код
  6. 6. Valueproposition
  7. 7. Проблемыonepageapps Зачем это надо? ‣ Производительность-загрузкаданных, задержкапри старте ‣ Тяжелаяоперацияпорендерингуисозданию DOM-дерева ‣ Недружелюбныедлякраулеров(hashbang)
  8. 8. Проблемыархитектуры Зачем это надо? ‣ Двойнаявалидациявходныхданных ‣ Поддержкасложнойбизнес-логики одновременнонаклиентеинасервере ‣ Зависимость отсерверавмобильных приложениях
  9. 9. ИзоморфныйJavaScript может решитьэти проблемы Зачем это надо?
  10. 10. React.js
  11. 11. Чтонужно ‣ Рендеритькомпонентына сервере ‣ Обновлятьданныенаклиенте без перезагрузкистраницы ‣ Максимальноунифицироватькодсервераи клиента
  12. 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. 13. Состояниеприложения(x) ‣ Location ‣ Cookies ‣ GETparams ‣ POSTparams
  14. 14. КакэтосделатьвReact.js ‣ вroot-овомкомпонентеопределить статическийизоморфныйметод,который ‣ собираетсостояниезапроса:path,cookies getparams,postparams ‣ консолидируетзаборданных ‣ отложитьрендерroot-овогокомпонентадо концавыполненияметода
  15. 15. Решения ‣ Relay ‣ GraphQL ‣ Transmit
  16. 16. Relay Relay.createContainer(Story, { queries: { story: graphql` Story { author { name, profile_picture { uri } }, text}` }
  17. 17. Недостатки ‣ Relay– нетрелиза ‣ GraphQL– нет релиза,ноестьпарсер
  18. 18. Transmit.createContainer(Main, { queryParams: { pagesToFetch: 10 }, queries: { /** * Return a Promise */ data: function (queryParams) { // isomorphic fetch return fetch(…).then(…) } } Transmit заменаrelay+graphqlнапромисы
  19. 19. Transmit Попробоватьможновreact-isomorphic-starterkit
  20. 20. Харашо,вай-вай
  21. 21. React Native теперьможносоздавать мобильныеприложения МОБИЛЬНЫЕ
  22. 22. REACT NATIVE CLIENT SERVER изоморфный код API MOBILE
  23. 23. Изоморфный JSкак отдельныйсервис
  24. 24. Апочему-быне сделать отдельныйсервис,который рендеритJavaScriptгденадо Service
  25. 25. Service ‣ Синхронныйсервис ‣ Очередь задач,асинхронно Дваварианта
  26. 26. Service приложение database cache node.js
  27. 27. rendered rendered task1 запрос2 state серверзадачnode.js запрос1 state task2 cache
  28. 28. Полезнодлямозга
  29. 29. Выводы
  30. 30. Выводы ‣ Увеличиваетсяколичествоsharedкода, уменьшаетсярассеивание бизнеслогики междуразнымиплатформами(клиент,сервер, мобильные) ‣ УлучшаетсяUX– засчет пререндеринга пользовательполучаеткартинкунаэкране быстрее ‣ Улучшаетсявидимостьвпоисковыхсистемах ‣ НенужновсепереписыватьнаJavaScript
  31. 31. Недостатки ‣ Ограничениявсехплатформ,учавствующихв выполненииприложения (клиент∩сервер∩ мобильный) ‣ Увеличиваетколичествокомпонентовв системе(если неnode.js-basedпроект) ‣ Сложнеетестировать
  32. 32. Ктовтеме Выводы ‣ Facebook ‣ Instagram ‣ Yahoo!Mail ‣ Walmart ‣ Airbnb ‣ Netflix
  33. 33. JS Frameworks Day @maxmaxmaxmax

×