Why React is Awesome ・ #BCBK 6

Slide № 1 1 Why React is Awesome Barcamp BangKhen
6 Thai Pangsakulyanont

Slide № 2 About Me Thai Pangsakulyanont (@dtinth), a frontend
enthusiast.  My Blog: http://me.dt.in.th/  My Toys: http://spacet.me/ Working at Taskworld as web engineer.  We use React and Node.js. Building a free web-based rhythm game, Bemuse.  Please check it out at https://bemuse.ninja/  The front-end part uses React.

Slide № 3 Note: Since I used Angular.js a lot,
there will be many comparisons with Angular.

Slide № 4 Note: This session aims at showing the
awesomeness of React. Therefore, many details are left out.

Slide № 5 Awesome #1 Declarative UI

Slide № 6 let todos = [ ]

Slide № 7 let todos = [ ] function addTodo
(text) { }

Slide № 8 let todos = [ ] let nextId
= 1 function addTodo (text) { let id = nextId++ }

= 1 function addTodo (text) { let id = nextId++ todos.push({ id: id, text: text }) }

Slide № 10 function removeTodo (idToRemove) { }

Slide № 11 function removeTodo (idToRemove) { todos = todos.filter(
({ id }) => id !== idToRemove ) }

Slide № 12 Imperative UI You tell what to do.

= 1 function addTodo (text) { let id = nextId++ todos.push({ id: id, text: text }) $('<li></li>') .text(text).attr('id', 'todo' + id) .appendTo('#todos') }

({ id }) => id !== idToRemove ) $('#todo' + idToRemove).remove() }

({ id }) => id !== idToRemove ) $('#todo' + idToRemove).remove() } Simple and Straightforward

Slide № 18 How about editing to-dos? Marking them as
completed? How about filtering?

Slide № 19 If we update DOM manually, our code
would quickly become a spaghetti.

Slide № 20

Slide № 21 Declarative UI You say what you want.

= 1 function addTodo (text) { let id = nextId++ todos.push({ id: id, text: text }) updateUI() }

({ id }) => id !== idToRemove ) updateUI() }

Slide № 26 function updateUI () { }

Slide № 27 function updateUI () { $('#app').html(render(todos)) }

Slide № 28 function updateUI () { $('#app').html(render(todos)) } function
render (todos) { return ( '<ul>' + todos.map(todo => '<li>' + todo.text + '</li>' ).join('') + '</ul>' ) }

render (todos) { return ( '<ul>' + todos.map(todo => '<li>' + todo.text + '</li>' ).join('') + '</ul>' ) } Very simple! Predictable! Testable!

Slide № 30 Problem: Very ineﬀicient

Slide № 31 Each time updateUI() is called the browser
throws away old UI, and renders the new one.

Slide № 32 Problem: Insecure

render (todos) { return ( '<ul>' + (todos.map(todo => '<li>' + todo.text + '</li>' )).join('') + '</ul>' ) }

render (todos) { return ( '<ul>' + (todos.map(todo => '<li>' + escapeHtml(todo.text) + '</li>' )).join('') + '</ul>' ) }

Slide № 35 With React

Slide № 36 function render (todos) { return ( <ul>
{todos.map(todo => <li>{todo.text}</li> )} </ul> ) }

Slide № 37 JSX function render (todos) { return (
<ul> {todos.map(todo => <li>{todo.text}</li> )} </ul> ) }

Slide № 38 Plain JS function render (todos) { return
( React.createElement('ul', null, todos.map(todo => React.createElement('li', null, todo.text) ) ) ) }

Slide № 39 function render (todos) { return ( React.createElement('ul',
null, todos.map(todo => React.createElement('li', null, todo.text) ) ) ) } Returns a “virtual DOM”

Slide № 40 function updateUI () { let view =
render(todos) }

render(todos) let container = document.querySelector('#app') }

render(todos) let container = document.querySelector('#app') ReactDOM.render(view, container) }

render(todos) let container = document.querySelector('#app') ReactDOM.render(view, container) } Blazing fast!

Slide № 44 http://calendar.perfplanet.com/2013/diff/ Reconciliation

{todos.map(todo => <li>{todo.text}</li> )} </ul> ) }

{todos.map(todo => <li>{todo.text}</li> )} </ul> ) } JSX ReactDOM.render()

Slide № 47 Awesome #2 Components = Basic

Slide № 48 <div class="setting-section" ng-if="!self.display"> <div class="container"> <h2>Preview</h2> <div
title="Click to save" sign-display="settings" ng-click="save()" ng-style="previewSize(setti class="preview-container"></div> </div> </div> <div class="setting-section" ng-if="!self.display"> <div class="container"> <h2>Appearance</h2> <div class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-3">Font</label> <div class="col-sm-4"> <input class="form-control" ng-model="settings.fontFamily"> </div> <div class="col-sm-2"> <button type="button" ng-class="{ btn: true, 'btn-default': true, 'btn-block': true, activ settings.fontBold }" ng-click="settings.fontBold = !settings.fontBold">Bold</button> </div> </div> <div class="form-group"> <label class="control-label col-sm-3">Color</label> <div class="col-sm-6"> <div class="row"> <div class="col-xs-5"> <input class="form-control" ng-model="settings.colorFg"> </div> <div class="col-xs-2 text-center text-muted"> <div class="form-control-static">on</div> </div> <div class="col-xs-5"> <input class="form-control" ng-model="settings.colorBg"> </div> </div> </div> </div> </div> </div> </div>

Slide № 49

Slide № 50

Slide № 51 Thinking in React https://facebook.github.io/react/docs/thinking-in-react.html

Slide № 52 Step 1: break the UI into a
component hierarchy https://facebook.github.io/react/docs/thinking-in-react.html

Slide № 53

Slide № 54 Options

Slide № 55 Options Panel Panel Panel

Slide № 56 Options OptionsPlayer OptionsInput OptionsAdvanced Panel Panel Panel

Slide № 57 const Options = React.createClass({

Slide № 58 const Options = React.createClass({ render () {
}

return <div className="Options"> </div> }

return <div className="Options"> <Panel title="Player Settings"> <OptionsPlayer onClose={this.props.onClose} /> </Panel> <div className="Optionsͷvgroup"> <Panel title="Input Settings"> <OptionsInput /> </Panel> <Panel title="Advanced Settings"> <OptionsAdvanced /> </Panel> </div> </div> }

return <div className="Options"> <Panel title="Player Settings"> <OptionsPlayer onClose={this.props.onClose} /> </Panel> <div className="Optionsͷvgroup"> <Panel title="Input Settings"> <OptionsInput /> </Panel> <Panel title="Advanced Settings"> <OptionsAdvanced /> </Panel> </div> </div> } Let’s look at <Panel>

Slide № 62 const Panel = React.createClass({ render () {
return ( ) } })

return ( <div className="Panel"> <div className="Panelͷtitle"> {this.props.title} </div> <div className="Panelͷcontent"> {this.props.children} </div> </div> ) } })

return ( <div className="Panel"> <div className="Panelͷtitle"> {this.props.title} </div> <div className="Panelͷcontent"> {this.props.children} </div> </div> ) } }) <Panel title="Hello"> <div>Hi!</div> </Panel>

return ( <div className="Panel"> <div className="Panelͷtitle"> Hello </div> <div className="Panelͷcontent"> <div>Hi!</div> </div> </div> ) } }) <Panel title="Hello"> <div>Hi!</div> </Panel>

return ( <div className="Panel"> <div className="Panelͷtitle"> {this.props.title} </div> <div className="Panelͷcontent"> {this.props.children} </div> </div> ) } }) Very reusable

Slide № 68 Panel Panel Panel

Slide № 69 Panel Very reusable

Slide № 70 Component

Slide № 71 Data Component

Slide № 72 Data Virtual DOM Component

Slide № 73 Awesome #3 Just The Views

Slide № 74 React view model, framework, etc… Flux Redux
Rx.JS Angular Backbone Meteor Bacon.js (none)

Slide № 77 Awesome #4 Isomorphic

Slide № 78 Data Virtual DOM Component

Slide № 79 Data Virtual DOM Component Virtual DOM Real
DOM ReactDOM.render()

Slide № 80 Data Virtual DOM Component Virtual DOM Real
DOM ReactDOM.render() Does not require browser Requires browser

Slide № 81 Data Virtual DOM Component Virtual DOM HTML
String ReactDOMServer.renderToString() Does not require browser Does not require browser

Why React is Awesome ・ #BCBK 6

Why React is Awesome ・ #BCBK 6

More Decks by Thai Pangsakulyanont

Other Decks in Programming

Featured

Transcript