FITC events. For digital creators.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
A Journey with React
with Tasveer Singh
OVERVIEW
React has been receiving a lot of buzz lately but does it live up to it? Taz was curious about this exact question and decided to embark on a journey to find out more. Since then he has fallen in love with React, its simple paradigm, and what it has enabled him to do. From modelling large front-end applications with Flux and WebPack code splitting to search engine optimized isomorphic rendering, he really has explored React from one end to the other and will share his experience and insights with you along with tips and tricks along the way.
OBJECTIVE
To provide the audience with enough information to understand how React is different and to explore further.
TARGET AUDIENCE
Intermediate to Advanced JavaScript developers.
ASSUMED AUDIENCE KNOWLEDGE
Basic knowledge of client side JavaScript frameworks, JavaScript modules, ES6, asset management, SEO, and isomorphic JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What is React
How React is different
Pros and Cons of a Flux architecture
Pros and Cons of WebPack
Pros and Cons of Isomorphic JavaScript
6. – M I K E H O U R A H I N E
“You can learn trigonometry, physics, C++, and DirectX to make a video game.
Or you can make a video game and learn DirectX, C++, physics, and
trigonometry.”
7. 0
100
Number of times you’ve built a similar app
1 2 3 4 5 6 7 ...
Quality
Mistakes Made
8. A P P # 1 - R E A C T A S A T E M P L AT I N G E N G I N E
• Server side application framework
• Nashorn JavaScript engine for Java 8
• Vert.x 2.3 - Polyglot Event-Driven Messaging
• Innovative Router
• React to describe HTML
16. A P P # 2 - F L U X
• My first iteration relied on my experience from MVC
• Business logic resides in Models/Stores
• Fat models, skinny controllers
• Models/Stores make AJAX calls
• Actions were very light weight notifications to the Stores
19. function getState() {
return { currentUser: UserStore.currentUser }
}
class SignInComponent extends React.Component {
state = getState();
handleStateChange() { this.setState(getState()); }
componentDidMount() { UserStore.on(“change”, this.handleStateChange); }
componentWillUnmount() {
UserStore.removeListener(“change”, this.handleStateChange);
}
handleAuth(event) { signInUser(prompt(“What’s your username?”), prompt(“What’s your
password?”)); }
render() {
if(!this.state.currentUser)
return <a onClick={this.handleAuth}>Click here to sign in</a>;
else
return <p>You’re signed in as {this.state.currentUser.name}</p>;
}
}
20. A P P # 2 - F L U X - F I R S T I T E R AT I O N
• Facebook’s Dispatcher does not allow you to dispatch from a dispatch
• Difficult to compose application flow
• How do you handle errors?
• Relies on the Global State of ActionTypes
• Views worked great!
21. N E X T I T E R AT I O N
T RY C O M P O S I N G A C T I O N S
27. A P P # 2 - F L U X - 2 N D I T E R AT I O N
• Eliminates the “dispatching from a dispatch” problem
• Stores are synchronous
• Very easy to compose the flow of your application by composing actions
• Eliminated Global State of ActionTypes
• Extremely scalable solution
• Easy to test
• In a later iteration, dropped in WebPack
29. A P P # 3 - B R O C H U R E W E B S I T E
• SEO is paramount
• AJAX is bad for SEO
• Performant on Desktop and Mobile
• Server Side Rendered
• Incremental Loading
• Introduce server side developers to client side technologies
• ES6/ES2015 via Babel
• React + Flux + WebPack
30. A P P # 3 - B R O C H U R E W E B S I T E
• Server side React + Server side Flux
• WebPack manages front end assets, inlining, and chunking
• Incremental loading by chunking
• Reduce number of web requests by inlining
• Koa.js serves the application and handles routing
31. 0
100
Number of times you’ve built a similar app
1 2 3 4 5 6 7 ...
Quality
Mistakes Made
32. 0
100
Number of times you’ve built a similar app
1 2 3 4 5 6 7 ...
Quality
Mistakes Made
33. 0
100
Number of times you’ve built a similar app
1 2 3 4 5 6 7 ...
Quality
Mistakes Made
36. G R I F F I N . J S
• Includes everything I’ve learnt and more
• Facebook’s Dispatcher
• React Views
• Griffin Actions - Same as previous examples
• Redux Stores w/ Griffin Connector to Views
39. function getState() {
return { currentUser: UserStore.currentUser }
}
class SignInComponent extends React.Component {
state = getState();
handleStateChange() { this.setState(getState()); }
componentDidMount() { UserStore.on(“change”, this.handleStateChange); }
componentWillUnmount() {
UserStore.removeListener(“change”, this.handleStateChange);
}
handleAuth(event) { signInUser(prompt(“What’s your username?”), prompt(“What’s your
password?”)); }
render() {
if(!this.state.currentUser)
return <a onClick={this.handleAuth}>Click here to sign in</a>;
else
return <p>You’re signed in as {this.state.currentUser.name}</p>;
}
}
40. @connect({ currentUser: UserStore })
class SignInComponent extends React.Component {
handleAuth(event) { signInUser(prompt(“What’s your
username?”), prompt(“What’s your password?”)); }
render() {
if(!this.props.currentUser)
return <a onClick={this.handleAuth}>Click here to
sign in</a>;
else
return <p>You’re signed in as
{this.props.currentUser.name}</p>;
}
}
41. R E A C T D E P E N D E N C Y I N J E C T I O N
• Using props to pass in external data is similar to Angular’s dependency
injection
• Only use state to manage internal component state
• <SignInComponent currentUser={{name: “Mock User!”}} />
• <SignInComponent currentUser={null} />
43. R E A C T R O U T E R
• Amazing routing solution - Inspired heavily by Ember’s router
• Ember has an excellent router
• Uses JSX or JSON to describe routes and nested routes
• React Component will be loaded by a Route
• Version 1.0 has lazy loading of routes and components
• Better Server Side Rendering
50. G R I F F I N F I L E S Y S T E M B A S E D R O U T I N G
• Easy to initialize your app
• import myApp from “griffin!.”;
myApp({ /* any griffin options here */});
• Easy to mount other apps
• import anotherApp from “griffin!/path/to/app”;
anotherApp({ /* griffin options */});
51. U N I V E R S A L A P P S W I T H W E B PA C K
• Everything goes through WebPack
• Based on James Long’s excellent “Backend Apps with WebPack” posts
• On the server, it ignores CSS, images, etc.
• WebPack enables lazy-loading of application chunks
• Incrementally load Griffin routes
• Include common modules with initial payload
52. G R I F F I N . J S S TAT U S
• Almost ready for release
• Planning to release in the next few months
• I’m currently rewriting the WebPack incremental file-system based routing
• Last core item remaining before release
53. 0
100
Number of times you’ve built a similar app
1 2 3 4 5 6 7 ...
Quality
Mistakes Made