For SoftServe IT Weekend Kharkiv, 14.11.2015. Talk about REACT, FLUX and Problems we met integrating this stack

1. Ihor Harahatyi
Executive Software Delivery Boy
(I feel good about myself)
@

2. Let’s speak about:
+ REACT + FLUX
+ Yahoo’s Fluxible
+ ES6 for REACT
+ Problems we met
Not now:
- REACT without FLUX
- Other realizations of FLUX

3. Lot of code + Frequent changes = Many bugs

4. html + jQuery
.html
<header>
<div class="name"></div>
</header>
.js
$.post('/login', credentials, function( user ) {
// Modify the DOM here
$('header .name').show().text( user.name );
});

5. REACT
.js
class Header extends React.Component {
render() {
return (
<header>
{ this.props.name ?
<div>this.props.name</div> : null }
</header>
);
}
}
Use:
<Header name={name_from_store} />

6. Do not refresh. Rerender!

7. It’s fast

8. MVC

9. More models

10. FLUX

11. Fluxible

12. Fluxible

13. ES6
http://es6-features.org/

14. Classes
ES5
var Photo = React.createClass({
handleDoubleTap: function(e) { },
render: function() { },
});
ES6
class Photo extends React.Component {
handleDoubleTap(e) { }
render() { }
}

15. Props and State
ES5
var Counter = React.createClass({
getDefaultProps: function() {
return { start: 0 };
},
getInitialState: function() {
return { currentCount: this.props.start, };
},
});
ES6
class Video extends React.Component {
static defaultProps = { start: 0 }
state = { currentCount: this.props.start }
}

16. Use arrow functions
ES6
class ClickBtn extends React.Component {
onButtonClick(e) {
alert('Clicked!');
}
render() {
return (<button onClick={this.onButtonClick.bind(this)>
Click Me!
<button>);
}
}
ES6
onButtonClick = (e) => { alert('Clicked!'); }

17. Destructuring and Spread attributes
ES6
class AutoloadingPostsGrid extends React.Component {
render() {
let {
className,
...others,
} = this.props;
return (
<div className={className}>
<PostsGrid {...others} />
<button onClick={this.loadMore}>Load more<button>
<div>
);
}
}

18. Problems?

19. Markup Engineers

20. World changes

21. No documentation
Real Programmers don’t write specs. Users should
consider themselves lucky to get any programs at
all, and take what they get.
(Real Programmer’s rulebook)

22. You should not change DOM

23. We don’t have good UI Kit

24. When use REACT:
▶ You have lot of componets.
▶ Your components change frequently.
▶ You’re ready to avoid mentioned problems.

25. React Native

26. Things to read
▶ reactjs for stupid people
▶ flux for stupid people