Meet.js Gdańsk - 03.10.2016

1. React
Podsumowanie z placu boju

2. TOC
1.React - TL;DR
2.Część właściwa
3.Krótko o narzędziach

3. React
TL;DR

4. <MeetJS when="03.10.2016"/>

5. <div>
<h1>Meet.js</h1>
<time>03.10.2016</time>
</div>

6. const MeetJS = props => (
<div>
<h1>Meet.js</h1>
<time>{props.when}</time>
</div>
);

7. class MeetJS extends React.Component
{
render() {
return (
<div>
<h1>Meet.js</h1>
<time>{this.props.when}</time>
</div>
);
}
}

8. const MeetJS = props => (
<div>
<h1>Meet.js</h1>
<time>{props.when}</time>
<button onClick={() => this.setState({
started: true,
})}>
Lets start!
</button>
{this.state.started && <BeerBooth/>}
</div>
);

9. const MeetJS = props => (
<div>
<h1>Meet.js</h1>
<AtendeesList
attendees={props.attendees}/>
</div>
);

10. Pytania?

11. Krótko o mnie
W trzech memach

15. React
Podsumowanie z placu boju

16. Komponenty są jak klasy

17. Properties === methods

18. <MeetJS when="03.10.2016"/>

19. new MeetJS()
.setWhen('03.10.2016')
.render();

20. Properties === API

21. <MeetJS ticketPrice={daysLeft => 0}/>

22. <div>
<h1>Meet.js</h1>
<BeerBooth onEmpty={() =>
this.panic()
}/>
</div>

23. SRP głupcze!

24. Blob component
Po czym poznać?

25. Ilość kodu!

26. Za dużo właściwości

27. static propTypes = {
id: PropTypes.string,
label: PropTypes.string,
changeHandler: PropTypes.func,
checked: PropTypes.bool,
wrapper: PropTypes.string,
labelClass: PropTypes.string,
type: PropTypes.string,
setValue: PropTypes.func,
getValue: PropTypes.func,
resetValue: PropTypes.func,
touched: PropTypes.bool,
error: PropTypes.string,
name: PropTypes.string,
showError: PropTypes.func,
onChange: PropTypes.func,
preventHover: PropTypes.bool,
onMouseOut: PropTypes.func,
};

28. Za dużo stanów

29. this.state = {
show: false,
enableEdit: false,
enableRemoveDropdown: false,
enableDueDateDropdown: false,
itemTitle: props.item.title,
canCreate: true,
canBeHidden: true,
temporaryDueDate: undefined,
temporaryAssigneeId: undefined,
discardModalOpened: false,
locked: false,
wasUnchecked: false,
};

30. … za dużo className

31. const todoListClass: string = cx({
'todo-list-item__inline': true,
'todo-list-item__inline--hover': this.state.show,
'todo-list-item__inline--active': this.state.enableEdit,
'todo-list-item__inline--loading': this.state.locked || item.notSaved,
'todo-list-item__inline--hidden': this.props.item.hidden,
'todo-list-item__inline--edit': this.isDrawerOpened(),
'todo-list-item__inline--updated': item.state.updated,
'todo-list-item__inline--updated-comment': item.state.firstUnreadCommentId,
});
const dragClass: string = cx({
'todo-list-item__drag': true,
'todo-list-item__drag--hover': this.state.show && !this.state.enableEdit,
});
const editControlsClass: string = cx({
'todo-list-item__edit__controls': true,
'todo-list-item__edit__controls--active': this.state.show,
});
const editClass: string = cx({
'todo-list-item__edit': true,
'todo-list-item__edit--hover': this.state.show,
'todo-list-item__edit--active': this.state.enableEdit,
});
const editTodoButtonClass: string = cx({
'todo-list-item__edit__toggle': true,
'todo-list-item__edit__toggle--hide': this.state.enableEdit,
});
const saveTodoButtonClass: string = cx({
'todo-list-item__add': true,
'todo-list-item__add--active': this.state.enableEdit,
'todo-list-item__add--disabled': !this.state.canCreate,
});
const discardButtonClass: string = cx({
'todo-list-item__discard': true,
'todo-list-item__discard--show': this.state.enableEdit,
});
const todoItemInfoClass: string = cx({
'todo-list-item__info': true,
'todo-list-item__info--hide': this.state.enableEdit,
});
const editTodoInputClass: string = cx({
'todo-list-item__edit__input': true,
'todo-list-item__edit__input--active': this.state.enableEdit,
});
const todoItemEditDescriptionClass: string = cx({
'todo-list-item__edit__description': true,
'todo-list-item__edit__description--show': this.state.enableEdit,
});
const removeTodoClass: string = cx({
'todo-list-item__remove': true,
'todo-list-item__remove--edit': this.state.enableEdit,
});
const toggleDropdownClass: string = cx({
'todo-list-item__remove__dropdown': true,
'todo-list-item__remove__dropdown--show': this.state.enableRemoveDropdown,
});

32. Jedyne rozwiązanie

34. Komunikacja między
komponentami

35. Top to bottom
Parent > child

36. const MeetJS = props => (
<div>
<BeerBooth
opened={props.when > new Date()} />
<Attendees list={props.attendess} />
</div>
);

37. FTW!

38. Context

39. class BeerBooth extends React.Component {
static contextTypes = {
opened: React.PropTypes.bool,
};
render() {
return (
<div>
<h1>Beer!</h1>
<h2>{this.context.opened ?
'Opened!' :
'Closed'}</h2>
</div>
);
}
}

40. class MeetJS extends React.Component {
static childContextTypes = {
opened: React.PropTypes.bool,
};
getChildContext() {
return {
opened: this.props.when > new Date(),
};
}
render() {
return (
<div>{/* ... */}</div>
);
}
}

41. Referencje

42. class MeetJS extends React.Component {
componentDidMount() {
if (this.props.when > new Date()) {
this.beer.open();
// this.beer.setState({opened: true});
}
}
render() {
return (
<div>
<BeerBooth ref={el => {
this.beer = el;
}}/>
</div>
);
}
}

43. Bottom to top
Child > parent

44. Właściwości jako eventy

45. const MeetJS = props => (
<div>
<h1>Meet.js</h1>
<BeerBooth
onEmpty={() => this.setState({
closed: true,
})}/>
</div>
);

46. Referencje

47. const MeetJS = props => (
<div>
<h1>Meet.js</h1>
<BeerBooth
partyHost={this}/>
</div>
);

48. STAHP

49. Context

50. class MeetJS extends React.Component {
static childContextTypes = {
endParty: React.PropTypes.func,
};
getChildContext() {
return {
endParty: () => this.setState({
closed: true,
}),
};
}
render() {
return (
<div>{/* ... */}</div>
);
}
}

51. Komunikacja dwustronna
Taki pomysł

52. Context + event emitter

53. FLUX głupcze!

54. Unidirectional data flow

55. High Order Components

56. … komplikują korzystanie z
referencji

57. … uniemożliwiają
korzystanie z shallow
render

58. Trochę o testowaniu

59. Shallow render
of <MeetJS/>

60. <div>
<h1>Meet.js</h1>
<BeerBooth/>
</div>

61. Full render
of <MeetJS/>

62. <div>
<h1>Meet.js</h1>
<div class="beer-booth">
<div id="theGuy">•|龴◡龴|•</div>
<ul class="beer-booth--kegs-list">
<li>Beer keg #1</li>
<li>Beer keg #2</li>
<li>Beer keg #3</li>
</ul>
</div>
</div>

63. Testy jednostkowe to nie
testy integracyjne
Shallow render != full render

64. Unit test powinien korzystać
z shallow render

65. Full render zostawmy dla
testów e2e

66. Unit testy powinny być
szybkie
Szanuj swój czas :)

67. Rozdziel testy
Unit test / e2e

68. Natywne narzędzia mogą
nie wystarczać

69. Szybko o narzędziach

70. Hot Module Reload
FTW

71. Eslint
… skąd u niego taka spina?

72. Mocha > Karma

73. Pytania?

74. fb:
twt:
gh:
radoslaw.mejer
_radmen
radmen

75. ♥

76. Dzięki!