Suche senden
Hochladen
Изоформные приложения на React.js
•
0 gefällt mir
•
1,113 views
Max Klymyshyn
Folgen
Концепция разработки изоморфных приложений с помощью React.js и CSP каналов
Weniger lesen
Mehr lesen
Software
Melden
Teilen
Melden
Teilen
1 von 45
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Инновации и JavaScript
Инновации и JavaScript
Max Klymyshyn
JAM stack - what it is and what's it for
JAM stack - what it is and what's it for
Alex Stepchenkov
Что нового в ASP.NET 5
Что нового в ASP.NET 5
Microsoft
Web programming modern tendencies
Web programming modern tendencies
DarkestMaster
WebAssembly
WebAssembly
Sergey Rubanov
React.js: Ускоряем UX/UI
React.js: Ускоряем UX/UI
Max Klymyshyn
Интерактивные карты планировок на сайтах торговых центров
Интерактивные карты планировок на сайтах торговых центров
Агентство AlterEGO
Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScr...
Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScr...
Ontico
Weitere ähnliche Inhalte
Ähnlich wie Изоформные приложения на React.js
"Изоморфная разработка на javascript с помощью react.js" Максим Климишин
"Изоморфная разработка на javascript с помощью react.js" Максим Климишин
Fwdays
Микросервисы, чистый PaaS и конкурс Мисс Россия
Микросервисы, чистый PaaS и конкурс Мисс Россия
Alexander Byndyu
#MBLTdev: Практический пример переиспользования кода. Как повысить качество и...
#MBLTdev: Практический пример переиспользования кода. Как повысить качество и...
e-Legion
«Путь от монолита на PHP к микросервисам на Scala» – Денис Иванов, 2ГИС
«Путь от монолита на PHP к микросервисам на Scala» – Денис Иванов, 2ГИС
2ГИС Технологии
Node.js Меньше сложности, больше надежности Holy.js 2021
Node.js Меньше сложности, больше надежности Holy.js 2021
Timur Shemsedinov
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Ontico
Javascript-фреймворки: должен остаться только один
Javascript-фреймворки: должен остаться только один
Sergey Xek
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
HappyDev
Mihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine Learning
Maria Kuneva
Mihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine Learning
OdessaJS Conf
Поиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кода
corehard_by
Поиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кода
Andrey Karpov
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...
Oleg Chirukhin
Асинхронный биллинг для службы такси - IzhDevCom November 2014
Асинхронный биллинг для службы такси - IzhDevCom November 2014
Egor Konovalov
KAZOOMEETUP MOSCOW 2015. Михаил Родионов. Введение в KAZOO (KAZOO 101)
KAZOOMEETUP MOSCOW 2015. Михаил Родионов. Введение в KAZOO (KAZOO 101)
SIPLABS Communications
Cloud APIs - обзор API западных провайдеров и API Scalaxy, Нат Гаджибалаев
Cloud APIs - обзор API западных провайдеров и API Scalaxy, Нат Гаджибалаев
Fuenteovejuna
Фронтенд разработка без боли
Фронтенд разработка без боли
Anton Piskunov
«Рамблер Касса» как пример высокопроизводительного проекта на .Net (Дмитрий П...
«Рамблер Касса» как пример высокопроизводительного проекта на .Net (Дмитрий П...
Ontico
Symfony в архитектуре Upwork Enterprise
Symfony в архитектуре Upwork Enterprise
Dmitry Semenov
Как не наступить на грабли, внедряя скрипты в java приложение
Как не наступить на грабли, внедряя скрипты в java приложение
Sergey Tselovalnikov
Ähnlich wie Изоформные приложения на React.js
(20)
"Изоморфная разработка на javascript с помощью react.js" Максим Климишин
"Изоморфная разработка на javascript с помощью react.js" Максим Климишин
Микросервисы, чистый PaaS и конкурс Мисс Россия
Микросервисы, чистый PaaS и конкурс Мисс Россия
#MBLTdev: Практический пример переиспользования кода. Как повысить качество и...
#MBLTdev: Практический пример переиспользования кода. Как повысить качество и...
«Путь от монолита на PHP к микросервисам на Scala» – Денис Иванов, 2ГИС
«Путь от монолита на PHP к микросервисам на Scala» – Денис Иванов, 2ГИС
Node.js Меньше сложности, больше надежности Holy.js 2021
Node.js Меньше сложности, больше надежности Holy.js 2021
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один
Javascript-фреймворки: должен остаться только один
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
Mihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine Learning
Поиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кода
Поиск уязвимостей с использованием статического анализа кода
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...
Graal, Truffle, SubstrateVM and other perks: what are those and why do you ne...
Асинхронный биллинг для службы такси - IzhDevCom November 2014
Асинхронный биллинг для службы такси - IzhDevCom November 2014
KAZOOMEETUP MOSCOW 2015. Михаил Родионов. Введение в KAZOO (KAZOO 101)
KAZOOMEETUP MOSCOW 2015. Михаил Родионов. Введение в KAZOO (KAZOO 101)
Cloud APIs - обзор API западных провайдеров и API Scalaxy, Нат Гаджибалаев
Cloud APIs - обзор API западных провайдеров и API Scalaxy, Нат Гаджибалаев
Фронтенд разработка без боли
Фронтенд разработка без боли
«Рамблер Касса» как пример высокопроизводительного проекта на .Net (Дмитрий П...
«Рамблер Касса» как пример высокопроизводительного проекта на .Net (Дмитрий П...
Symfony в архитектуре Upwork Enterprise
Symfony в архитектуре Upwork Enterprise
Как не наступить на грабли, внедряя скрипты в java приложение
Как не наступить на грабли, внедряя скрипты в java приложение
Mehr von Max Klymyshyn
Papers We Love Kyiv, July 2018: A Conflict-Free Replicated JSON Datatype
Papers We Love Kyiv, July 2018: A Conflict-Free Replicated JSON Datatype
Max Klymyshyn
KharkivJS 2017: Коллаборативные системы и CRDT
KharkivJS 2017: Коллаборативные системы и CRDT
Max Klymyshyn
OdessaJS 2017: Groupware Systems for fun and profit
OdessaJS 2017: Groupware Systems for fun and profit
Max Klymyshyn
PyCon Ukraine 2017: Operational Transformation
PyCon Ukraine 2017: Operational Transformation
Max Klymyshyn
Communicating Sequential Processes (CSP) in JavaScript
Communicating Sequential Processes (CSP) in JavaScript
Max Klymyshyn
PiterPy 2016: Parallelization, Aggregation and Validation of API in Python
PiterPy 2016: Parallelization, Aggregation and Validation of API in Python
Max Klymyshyn
Fighting async JavaScript (CSP)
Fighting async JavaScript (CSP)
Max Klymyshyn
KharkovPy #12: I/O in Python apps and smart logging (russian)
KharkovPy #12: I/O in Python apps and smart logging (russian)
Max Klymyshyn
5 мифов о производительности баз данных и Python
5 мифов о производительности баз данных и Python
Max Klymyshyn
Изоморфный JavaScript (iForum 2015)
Изоморфный JavaScript (iForum 2015)
Max Klymyshyn
Трансдюсеры, CSP каналы, неизменяемые структуры данных в JavaScript
Трансдюсеры, CSP каналы, неизменяемые структуры данных в JavaScript
Max Klymyshyn
PiterPy 2015 - Трансдюсеры и Python
PiterPy 2015 - Трансдюсеры и Python
Max Klymyshyn
Robust web apps with React.js
Robust web apps with React.js
Max Klymyshyn
LvivJS 2014 - Win-win c React.js
LvivJS 2014 - Win-win c React.js
Max Klymyshyn
Odessapy2013 - Graph databases and Python
Odessapy2013 - Graph databases and Python
Max Klymyshyn
Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
Max Klymyshyn
Зачем читать чужой код?
Зачем читать чужой код?
Max Klymyshyn
AgileBaseCamp 2013 - Start Up and Get Done
AgileBaseCamp 2013 - Start Up and Get Done
Max Klymyshyn
PyCon 2012 - Data Driven Design
PyCon 2012 - Data Driven Design
Max Klymyshyn
LvivPy - Flask in details
LvivPy - Flask in details
Max Klymyshyn
Mehr von Max Klymyshyn
(20)
Papers We Love Kyiv, July 2018: A Conflict-Free Replicated JSON Datatype
Papers We Love Kyiv, July 2018: A Conflict-Free Replicated JSON Datatype
KharkivJS 2017: Коллаборативные системы и CRDT
KharkivJS 2017: Коллаборативные системы и CRDT
OdessaJS 2017: Groupware Systems for fun and profit
OdessaJS 2017: Groupware Systems for fun and profit
PyCon Ukraine 2017: Operational Transformation
PyCon Ukraine 2017: Operational Transformation
Communicating Sequential Processes (CSP) in JavaScript
Communicating Sequential Processes (CSP) in JavaScript
PiterPy 2016: Parallelization, Aggregation and Validation of API in Python
PiterPy 2016: Parallelization, Aggregation and Validation of API in Python
Fighting async JavaScript (CSP)
Fighting async JavaScript (CSP)
KharkovPy #12: I/O in Python apps and smart logging (russian)
KharkovPy #12: I/O in Python apps and smart logging (russian)
5 мифов о производительности баз данных и Python
5 мифов о производительности баз данных и Python
Изоморфный JavaScript (iForum 2015)
Изоморфный JavaScript (iForum 2015)
Трансдюсеры, CSP каналы, неизменяемые структуры данных в JavaScript
Трансдюсеры, CSP каналы, неизменяемые структуры данных в JavaScript
PiterPy 2015 - Трансдюсеры и Python
PiterPy 2015 - Трансдюсеры и Python
Robust web apps with React.js
Robust web apps with React.js
LvivJS 2014 - Win-win c React.js
LvivJS 2014 - Win-win c React.js
Odessapy2013 - Graph databases and Python
Odessapy2013 - Graph databases and Python
Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
Зачем читать чужой код?
Зачем читать чужой код?
AgileBaseCamp 2013 - Start Up and Get Done
AgileBaseCamp 2013 - Start Up and Get Done
PyCon 2012 - Data Driven Design
PyCon 2012 - Data Driven Design
LvivPy - Flask in details
LvivPy - Flask in details
Изоформные приложения на React.js
1.
Изоморфная разработка c React.js @maxmaxmaxmaxМАКСИМ
КЛИМИШИН CTO ZAKAZ.UA GVMachines Inc.
2.
Что такое изоморфный код? isomorphic
3.
Возможностьиспользовать одини тотжекод какнаклиентетакинасервере ISOMORPHIC
4.
СЕЙЧАС CLIENT API SERVER изоморфный код
5.
Valueproposition
6.
Проблемыonepageapps Зачем это надо? ‣
Производительность-загрузкаданных, задержкаотображенияпристарте ‣ Тяжелаяоперацияпорендерингуисозданию DOM-дерева ‣ Недружелюбныедлякраулеров(hashbang)
7.
Проблемыархитектуры Зачем это надо? ‣
Двойнаявалидациявходныхданных ‣ Поддержкасложнойбизнес-логики одновременнонаклиентеинасервере ‣ Зависимость отсерверавмобильных приложениях
8.
ИзоморфныйJavaScript может решитьэти проблемы Зачем это
надо?
9.
CSPChannels Communicating sequentialprocesses
10.
‣ Параллельныепроцессыобмениваются информацией ‣ Безбуферныйобменинформациейтипа «рандеву» ‣
Взаимодействиепроисходитчерезканал CSPchannels
11.
var ch =
chan(); go(function*() { yield put(ch, 1); console.log(2); yield put(ch, 3); console.log(yield take(ch)); }); go(function*() { console.log(yield take(ch)); //yield timeout(100); console.log(4); console.log(yield take(ch)); yield put(ch, 5); }); Пример 1 4 2 3 5 Результат
12.
CSP
13.
React.js
14.
Чтонужно ‣ Рендеритькомпонентына сервере ‣
Обновлятьданныенаклиенте без перезагрузкистраницы ‣ Максимальноунифицироватькодсервераи клиента
15.
Состояниезапроса ‣ Location ‣ Cookies ‣
GETparams ‣ POSTparams request = url + cookies + get + post
16.
Пример { client: (location) =>
{ return state.merge(Map([ ["url", location.pathname], ["protocol", location.protocol], ["hostname", location.hostname], ["hash", location.hash] ])); }, server: (request) => { return state.merge(Map([ ["url", request.url], ["method", request.method] ])); } }
17.
Состояниеприложения ‣ API/external sourcecall1, ‣
Call2 ‣ Calli state = f(request)
18.
Архитектурно REQUEST STATE APPBROWSER APIRESPONSE ISOMORPHICRENDER APP
19.
Архитектурно state = f(request) dom_cli
= React.render(…state) html_srv = React.renderToString(…state)
20.
Пример module.exports = React.createClass({ statics:
{ // state will be executed within CSP `go` routine state: function(state, channel) { return go(function * () { yield put(channel, ["title", "World"]); channel.close(); }) } }, render: function () { return <h1>Hello, <span>{this.props.title}</span></h1> }})
21.
Пример var stateCh =
chan(), component = React.createFactory(type); type.state ? type.state(state, stateCh) : null; go(function *() { var context = Map(yield take(stateCh)); yield put(renderCh, Map([ … [keys.state, context], [keys.render, {server: server(component), client: client(component)}] ]))});
22.
Пример var client =
(component) => { return (context) => { return React.render( component(context.get(keys.state).toObject()), document.getElementById(context.get(keys.name))); }}; var server = (component) => { return (context) => { return React.renderToString( component(context.get(keys.state).toObject())); }};
23.
isoroutes Попробоватьможно https://goo.gl/xyptPx
24.
КакэтосделатьвReact.js ‣ вroot-овомкомпонентеопределить статическийизоморфныйметод,который ‣ собираетсостояниезапроса:path,cookies getparams,postparams ‣
консолидируетзаборданных ‣ отложитьрендерroot-овогокомпонентадо концавыполненияметода
25.
Решения ‣ Relay–анализзапросов,cache engine ‣
GraphQL– консолидируетсложность API ‣ Transmit– оченьтупая queryengine,которая делегируетсянакодquery
26.
Relay Relay.createContainer(Story, { queries: { story:
graphql` Story { author { name, profile_picture { uri } }, text}` }
27.
Недостатки ‣ Relay– нетрелиза ‣ GraphQL– нет
релиза,ноестьпарсер
28.
Transmit.createContainer(Main, { queryParams: { pagesToFetch:
10 }, queries: { /** * Return a Promise */ data: function (queryParams) { // isomorphic fetch return fetch(…).then(…) } } Transmit заменаrelay+graphqlнапромисы
29.
Transmit Попробоватьможнов google://react-isomorphic-starterkit
30.
64Крезультатовisomorphicreact.js против 47Mreact.js
31.
React Native теперьможносоздавать мобильныеприложения МОБИЛЬНЫЕ
32.
Реактдоставляэ.
33.
REACT NATIVE CLIENT SERVER изоморфный код API MOBILE
34.
Изоморфный JSкак отдельныйсервис
35.
Service ‣ Асинхронная загрузкаданныхрасполагаетк медленномубекенду ‣
Тупоекешированиеприводитксложной инвалидации Проблемс
36.
Апочему-быне сделать отдельныйсервис,который рендеритJavaScriptгденадо Service
37.
Service ‣ Синхронныйсервис ‣ Очередь
задач,асинхронно Дваварианта
38.
Service приложение database cache node.js
39.
rendered rendered task1 запрос2 state серверзадачnode.js запрос1 state task2 cache
40.
Полезнодлямозга
41.
Выводы
42.
Выводы ‣ Увеличиваетсяколичествоsharedкода, уменьшаетсярассеивание бизнеслогики междуразнымиплатформами(клиент,сервер, мобильные) ‣
УлучшаетсяUX– засчет пререндеринга пользовательполучаеткартинкунаэкране быстрее ‣ Улучшаетсявидимостьвпоисковыхсистемах ‣ НенужновсепереписыватьнаJavaScript
43.
Недостатки ‣ Ограничениявсехплатформ,учавствующихв выполненииприложения (клиент∩сервер∩ мобильный) ‣
Увеличиваетколичествокомпонентовв системе(если неnode.js-basedпроект) ‣ Сложнеетестировать
44.
Ктовтеме Выводы ‣ Facebook ‣ Instagram ‣
Yahoo!Mail ‣ Walmart ‣ Airbnb ‣ Netflix
45.
@maxmaxmaxmax
Jetzt herunterladen