Download to read offline
![Пример
{
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]
]));
}
}](https://image.slidesharecdn.com/hackntellodessa2015-150516113828-lva1-app6891/75/React-js-16-2048.jpg)
![Пример
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>
}})](https://image.slidesharecdn.com/hackntellodessa2015-150516113828-lva1-app6891/75/React-js-20-2048.jpg)
![Пример
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)}]
]))});](https://image.slidesharecdn.com/hackntellodessa2015-150516113828-lva1-app6891/75/React-js-21-2048.jpg)
Uploaded byMax Klymyshyn
Изоформные приложения на React.js
Документ рассматривает изоморфную разработку с использованием React.js, описывая преимущества и проблемы, такие как производительность, задержки отображения и архитектурные сложности. Упоминается, что изоморфный код позволяет использовать один и тот же код на клиенте и сервере, что способствует унификации бизнес-логики и улучшению SEO. Также обсуждаются примеры кода и архитектурные решения, включая CSP Channels, рендеринг компонентов и преимущества использования GraphQL.
Изоформные приложения на React.js
- 1. Изоморфная разработка c React.js @maxmaxmaxmaxМАКСИМКЛИМИШИН CTO ZAKAZ.UA GVMachines Inc.
- 2.
- 3.
- 4.
- 5.
- 6. Проблемыonepageapps Зачем это надо? ‣Производительность-загрузкаданных, задержкаотображенияпристарте ‣ Тяжелаяоперацияпорендерингуисозданию DOM-дерева ‣ Недружелюбныедлякраулеров(hashbang)
- 7. Проблемыархитектуры Зачем это надо? ‣Двойнаявалидациявходныхданных ‣ Поддержкасложнойбизнес-логики одновременнонаклиентеинасервере ‣ Зависимость отсерверавмобильных приложениях
- 8.
- 9.
- 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.
- 13.
- 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.
- 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.
- 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.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. Service ‣ Асинхронная загрузкаданныхрасполагаетк медленномубекенду ‣Тупоекешированиеприводитксложной инвалидации Проблемс
- 36.
- 37. Service ‣ Синхронныйсервис ‣ Очередьзадач,асинхронно Дваварианта
- 38.
- 39.
- 40.
- 41.
- 42. Выводы ‣ Увеличиваетсяколичествоsharedкода, уменьшаетсярассеивание бизнеслогики междуразнымиплатформами(клиент,сервер, мобильные) ‣УлучшаетсяUX– засчет пререндеринга пользовательполучаеткартинкунаэкране быстрее ‣ Улучшаетсявидимостьвпоисковыхсистемах ‣ НенужновсепереписыватьнаJavaScript
- 43. Недостатки ‣ Ограничениявсехплатформ,учавствующихв выполненииприложения (клиент∩сервер∩ мобильный) ‣Увеличиваетколичествокомпонентовв системе(если неnode.js-basedпроект) ‣ Сложнеетестировать
- 44. Ктовтеме Выводы ‣ Facebook ‣ Instagram ‣Yahoo!Mail ‣ Walmart ‣ Airbnb ‣ Netflix
- 45.