react - amazon s3rethinking)best)prac0ces •...
TRANSCRIPT
ReactA"JavaScript"Library"For"Building"User"Interfaces
React&is¬&FRP
[Func&onal]+Reac&ve+programming+is+programming+with+asynchronous+data+streams.
!!"André"Staltz1
1"The"introduc.on"to"Reac.ve"Programming"you've"been"missing
Component(Based
It's%components%all%the%way%down!
Func%onal)*)Declara%ve)UI
Impera've)<+>)Declara've
Func%onal)*)Declara%ve)UI
Virtual(DOM
The$UI$is$first$rendered$to$a$virtual$DOM,$then$a$minimal$and$efficient$diff$is$applied$to$the$actual$DOM$to$update$the$visible$UI.
(aside)(JSX(Syntax
// JSX as authored<div className="app"> <h2>Hello World</h2> <p>Welcome to {this.props.appName}</p> <UserList users={activeUsers} /></div>
// output JSReact.createElement("div", {className: "app"}, React.createElement("h2", null, "Hello World"), React.createElement("p", null, "Welcome to ", this.props.appName), React.createElement(UserList, {users: activeUsers}))
Sample'App
Sample'App
• App$component$(blue)
Sample'App
• App$component$(blue)
• User$list$component$(green)
Sample'App
• App$component$++$blue
• User$list$component$++$green
• Profile$component(s)$++$red
User%profile%component
var Profile = React.createClass({ githubUrl: function() { return "https://github.com/" + this.props.user.github; },
render: function() { return ( <li className="user"> <a href={this.githubUrl()}> {this.props.user.name} on github </a> </li> ) }});
User%List%Component
var UserList = React.createClass({ renderUser: function(user) { return <Profile user={user} /> },
render: function() { return ( <ul> {this.props.users.map(this.renderUser)} </ul> ) }})
App#Component
var App = React.createClass({ render: function() { return ( <div className="app"> <h1>Active Users</h1> <p>{this.props.users.length} active users</p> <UserList users={this.state.users} /> </div> ) }})
Boot$The$App
var users = [ { name: "Chris", github: "christoomey" }, { name: "Joe", github: "jferris" }, { name: "Ben", github: "r00k" }, { name: "Chad", github: "cpytel" }];
React.renderComponent( <App users={users} />, document.getElementById('content'));
Rethinking)Best)Prac0ces
• Render&the&world"#"Re#render"everything"on"any"change"Re#render"the"en2re"app"(in"memory)"on"all"changes,"then"efficiently"update"the"UI"to"match.
• Sepera/on&of&Concerns"#"Rather"than"pulling"out"templates,"separate"in"terms"of"components
• Hide&the&DOM"#"The"Virutal"DOM"abstracts"away"the"harsh"reality"of"the"DOM"API"and"allows"you"to"focus"on"your"app.
From%Pete%Hunt's%presenta0on
The$right$abstrac-on
Abstrac(ng+away+the+DOM+has+lead+to+some+very+impressive+work+in+short+(me
• canvas'render'target
• Ne.lix's'gibbon'widget'system
• Server'side'/'isometric'rendering':
• react'na;ve
Flipboard's,Canvas
In#search#of#60fps#on#mobile.
React&Canvas&adds&the&ability&for&React&components&to&render&to&<canvas>&rather&than&DOM.
Ne#lix'Gibbon
Ne#lix's)Gibbon)widget)system)is)an)alterna6ve)rendering)engine)that)takes)the)place)of)the)DOM,)while)s6ll)using)React.
Server%Side
Since&the&DOM&is&abstracted&away,&react&can&run&in&Node&and&render&to&a&string!
React&Na(ve
The$Right$Abstrac/on
It's%worth%no+ng%that%we're%not%chasing%“write%once,%run%anywhere.”%Different%pla;orms%have%different%looks,%feels,%and%capabili+es,%and%
as%such,%we%should%s+ll%be%developing%discrete%apps%for%each%pla;orm,%but%the%same%set%of%engineers%should%be%able%to%build%
applica+ons%for%whatever%pla;orm%they%choose,%without%needing%to%learn%a%fundamentally%different%set%of%technologies%for%each.%We%call%
this%approach%“learn%once,%write%anywhere.”
!!"Tom"Occhino"(React"team"at"Facebook)2
2"h$ps://facebook.github.io/react/blog/2015/03/26/introducing>react>na?ve.html
Learning(More
• Official(React(tutorial(from(Facebook
• Ryan(Florence's(React(training(repo
• Presenta;on(by(Ember(core(team(member(on(React
• React=rails(gem
