Isomorphic React.js by Maksym Klymyshyn for Hack'n'Tell JavaScript powered by Intersog - http://intersog.com/hack-n-tell/

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