react, flux, es6 and problems we met
TRANSCRIPT
Ihor HarahatyiExecutive Software Delivery Boy
(I feel good about myself)
@
Let’s speak about:
+ REACT + FLUX+ Yahoo’s Fluxible+ ES6 for REACT+ Problems we met
Not now:
- REACT without FLUX- Other realizations of FLUX
Lot of code + Frequent changes = Many bugs
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 );
});
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} />
Do not refresh. Rerender!
It’s fast
MVC
More models
FLUX
Fluxible
Fluxible
ES6http://es6-features.org/
Classes
ES5
var Photo = React.createClass({handleDoubleTap: function(e) { },render: function() { },});
ES6
class Photo extends React.Component {handleDoubleTap(e) { }render() { }}
Props and StateES5
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 }}
Use arrow functionsES6
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!'); }
Destructuring and Spread attributesES6
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>);}}
Problems?
Markup Engineers
World changes
No documentation
Real Programmers don’t write specs. Users shouldconsider themselves lucky to get any programs atall, and take what they get.
(Real Programmer’s rulebook)
You should not change DOM
We don’t have good UI Kit
When use REACT:
▶ You have lot of componets.▶ Your components change frequently.▶ You’re ready to avoid mentioned problems.
React Native
Things to read
▶ reactjs for stupid people▶ flux for stupid people