WebCamp2016:Front-End. Website: http://webcamp.in.ua/devops.html#theme Facebook: https://www.facebook.com/WebCamp/ VK: https://vk.com/webcamp Twitter: https://twitter.com/WebCampOdessa Youtube: http://bit.ly/2bsQ0LO

1. React.jsTheoretical
Basics
MaxKlymyshyn
CTOatCartFresh

2. CartFresh
‣ Стартап по доставке продуктов на дом
‣ Работаем как CartFresh (Boston, US) и
ZAKAZ.UA (Киев, Днепр, Одесса,
Харьков)
‣ Apache CouchDB, Apache Solr, Redis
‣ React.js on front-end

3. ‣ 12+ лет опыта, 7 лет с Python, 6 с JS
‣ Работал в oDesk, Helios, 42cc.
‣ Соорганизатор PyCon Ukraine, KyivJS
‣ CTO в CartFresh
Обомне

4. Очемречь
‣НемногооReact.js
‣Практика

5. Шо тамReact.js

6. UI –этопроекцияданных,
(еслиточно – проекцияданныхвиную
формуданных)

7. DOMнеоптимизирован дляработы с
динамическимиUI.

8. React.js этоупрощеннаямодельDOM,
некоторыйминимальныйнаборсвойств,
которыепозволяютсоздатьэффективную
проекциюUI/UX.

9. Базовыесвойства
‣ Абстракция– возможность вызыватьодни
абстракциииз другихбезучетаособенностей
реализации
‣ Композиция – возможность комбинировать
абстракции
‣ Состояние–локальноесостояниеабстракцийдля
реализации сложныхUX
‣ Memoization– “чистота”абстракций.Неменяем,
еслиничегоне поменялось

10. Нуиконечнопродалото,каккомандаReact.js
превратилиO(n3)проблемув O(n)спомощью
двухпростыхдопущений

11. Короче,React.js прежде всего является
хорошо спроектированнойоптимизацией.
shouldComponentUpdate:

12. Практика

13. Концепции,которые
помогают упроститькод
‣ Неизменяемыеструктурыданных– Immutable.js
etc.Позволяют сохранятьсостояниеибыстрее
чинитьбаги
‣ Dynamicallytyped language
‣ Communicatingsequentialprocesses– концепция,с
помощью которыхудается существенноупростить
код иеговосприятие
‣ BFF(Back-endForFront-end)– язык запросовдля
взаимодействиясбекендом

14. Неизменяемыеструктуры
данных

15. var React = require('react');
var { Map, List } = require('immutable');
var Component = React.createClass({
getInitialState() { return { data: Map({ count: 0, items: List() }) }},
handleCountClick() {
this.setState(({data}) => ({
data: data.update('count', v => v + 1)
}));
},
handleAddItemClick() {
this.setState(({data}) => ({
data: data.update('items', list => list.push(data.get('count')))
}));
},
render() {
var data = this.state.data;
return (
<div>
<button onClick={this.handleCountClick}>Add to count</button>
<button onClick={this.handleAddItemClick}>Save count</button>
<div>Count: {data.get('count')}</div>
Saved counts:
<ul>{data.get('items').map(item => <li>Saved: {item}</li>)}</ul>
</div>);
}});
React.render(<Component />, document.body);

16. PropTypes

17. Типы
‣ TypeScriptэто было чересчурдляпроекта,
переезжавшегосjQueryна React.js/ES6etc.
‣ Ключеваяидеястрого типизированныхязыков дать знать
вовремякомпиляции/алучше впроцессе написания кода
отом,чтоиспользуетсянекорректный тип данных
‣ PropTypesненастолько полезен:нужночитать
компоненту (илигенерированнуюдоку) для понимания.
Илизапускать код.

18. CSP

19. range.on("preheat", function() {
pot.on("boil", function() {
rice.on("cooked", function() {
dinner.serve(rice);
});
});
});
Pyramidof doom

22. export class Suggest extends React.Component {
constructor(props) {
super(props);
this.state = {active: -1, suggests: props.suggests}}
componentWillReceiveProps(nextProps) {
switch(nextProps.code) {
case 38:
this.setState({active: Math.max(-1, this.state.active - 1)});
break;
case 40:
this.setState({
active: Math.min(this.props.suggests.length - 1, this.state.active + 1)});
break;
case 13:
search(this.props.suggests[this.state.active]);
this.setState({suggests: []});
break;
default:
this.setState({suggests: nextProps.suggests});
}
}
render() {
return (<ul className="dropdown dropdown-menu">
{this.state.suggests.map((e, n) =>
<li key={e} className={...}><a href="#">{e}</a></li>)}
</ul>);
}}

23. function listen(el, type) {
var ch = chan();
el.addEventListener(type, e => {
putAsync(ch, [e.keyCode, el.value]);
e.preventDefault();
});
return ch;
}
export function suggest(elem) {
var el = elem[0];
go(function * () {
var keydown = listen(el, 'keydown');
while(true) {
var [code, value] = yield take(keydown);
var response = yield take(Storage.sync([
["store.suggest", {query: value}, {id: "suggest"}]]));
ReactDOM.render(
<Suggest suggests={response.suggests || []} code={code} value={value} />,
document.getElementById("suggest"));
}
});
}

26. Back-endforFront-end

27. APISERVERS
request
state
generated
stateresponse
RENDERING
WORKER
REACT.JSDOM
RENDERER
put htmlinto
cache
CACHESERVERS
time

28. [
"store.products", {
store_id: Storage.first(“store").id, slugs: [options.slug],
facets: options.facets || [], sort: options.sort || “"
}, {
offset: options.offset || 1, id: "catalog",
join: [{
apply_as: "facets_base",
on: ["slug", "slug"],
request: {
type: "store.facets",
args: {
store_id: "$request.[-2].args.store_id",
slug: "$request.[-2].args.slugs|first"
}
}
}, {
apply_as: "category_tree",
on: ["slug", "requested_slug"],
request: {
type: "store.department_tree",
args: {
store_id: "$request.[-2].args.store_id",
slug: "$request.[-2].args.slugs|first"
}
}
}]
}
]

29. @maxmaxmaxmax
Вопросы?