Slide 1

Slide 1 text

Front End Orlando: Introduc0on to React.js 2015-‐03-‐31 James Burne? [email protected]

Slide 2

Slide 2 text

Senior SoEware Engineer @ Tribune Publishing Full Stack Engineer Ruby on Rails React.js About Me Small Apps Tribune Website Redevelopment Backend Content Management System Redesign

Slide 3

Slide 3 text

Overview •  What is React.js •  Building something •  Tes0ng something •  Unidirec0onal Data Flows (and Flux) •  React Na0ve

Slide 4

Slide 4 text

What is React I

Slide 5

Slide 5 text

React is a JavaScript View Library http://facebook.github.io/react/

Slide 6

Slide 6 text

React is “the ‘V’ in MVC”

Slide 7

Slide 7 text

React is a virtual DOM

Slide 8

Slide 8 text

React is NOT opinionated

Slide 9

Slide 9 text

React is NOT a framework

Slide 10

Slide 10 text

React is a component system

Slide 11

Slide 11 text

React Design

Slide 12

Slide 12 text

components

Slide 13

Slide 13 text

components composed into an app

Slide 14

Slide 14 text

components composed into an app then re-‐rendered on every update

Slide 15

Slide 15 text

re-‐rendering on every update is the key design decision that makes React awesome

Slide 16

Slide 16 text

user interface is hard because there is so much state

Slide 17

Slide 17 text

user interface is hard because there is so much state UI elements design itera0ons crazy environments mutable DOM user input anima0on lots of engineers ajax calls

Slide 18

Slide 18 text

“Our intellectual powers are rather geared to master sta0c rela0ons and our powers to visualize processes evolving in 0me are rela0vely poorly developed. For that reason we should do (as wise programmers aware of our limita0ons) our utmost to shorten the conceptual gap between the sta0c program and the dynamic process, to make the correspondence between the program (spread out in text space) and the process (spread out in 0me) as trivial as possible” -‐ Dijkstra

Slide 19

Slide 19 text

this is how web apps operated un0l recently

Slide 20

Slide 20 text

we have libraries like backbone, angular, and ember that try to deal with the changing state

Slide 21

Slide 21 text

react solves this by re-‐rendering the whole app on every change

Slide 22

Slide 22 text

react components are basically idempotent func0ons

Slide 23

Slide 23 text

re-‐rendering makes things simple

Slide 24

Slide 24 text

re-‐rendering makes things simple displayed data is up-‐to-‐date

Slide 25

Slide 25 text

re-‐rendering makes things simple displayed data is up-‐to-‐date no magical data binding

Slide 26

Slide 26 text

re-‐rendering makes things simple displayed data is up-‐to-‐date no magical data binding no model dirty checking

Slide 27

Slide 27 text

re-‐rendering makes things simple displayed data is up-‐to-‐date no magical data binding no model dirty checking no more explicit DOM opera0ons

Slide 28

Slide 28 text

alright, but what about the problems

Slide 29

Slide 29 text

alright, but what about the problems scroll posi0on

Slide 30

Slide 30 text

alright, but what about the problems scroll posi0on data entry

Slide 31

Slide 31 text

alright, but what about the problems scroll posi0on data entry The Flash

Slide 32

Slide 32 text

No, not this guy! The Flash is that brief ﬂicker you get when you re-‐render the DOM

Slide 33

Slide 33 text

alright, but what about the problems performance scroll posi0on data entry The Flash

Slide 34

Slide 34 text

performance comes from the virtual dom

Slide 35

Slide 35 text

it makes re-‐rendering the whole app fast

Slide 36

Slide 36 text

and it solves those other problems too

Slide 37

Slide 37 text

start

Slide 38

Slide 38 text

render virtual DOM start

Slide 39

Slide 39 text

render virtual DOM diﬀ start

Slide 40

Slide 40 text

render virtual DOM diﬀ batch change DOM start

Slide 41

Slide 41 text

render virtual DOM diﬀ batch change DOM update start

Slide 42

Slide 42 text

render virtual DOM diﬀ batch change DOM update React Lifecycle start

Slide 43

Slide 43 text

it is FAST because the DOM is slow

Slide 44

Slide 44 text

oh, and it has a synthe0c event system

Slide 45

Slide 45 text

alright, so let’s see some code already

Slide 46

Slide 46 text

Give it Five Minutes https://signalvnoise.com/posts/3124-‐give-‐it-‐five-‐minutes

Slide 47

Slide 47 text

“Some of this stuﬀ ﬂies in the face of best prac0ces, but these are prac0ces that deserve to be challenged.” -‐ Pete Hunt

Slide 48

Slide 48 text

a React app is made up of components

Slide 49

Slide 49 text

Components •  Are – idempotent – reusable – composable – testable •  Combine DOM genera0on and display logic

Slide 50

Slide 50 text

Example Component var ExampleComponent = React.createClass({ render: function() { return

An Example Component

; } });

Slide 51

Slide 51 text

The Controversial Part return

An Example Component

;

Slide 52

Slide 52 text

Wait, are we really going to comingle markup with JavaScript?!?!?! What about Separa0on of Concerns? JSX

Slide 53

Slide 53 text

What is the goal of Separa0on of Concerns

Slide 54

Slide 54 text

What is the goal of Separa0on of Concerns High Cohesion, Loose Coupling

Slide 55

Slide 55 text

Cohesion is: “The degree to which elements of a module belong together.” [Wikipedia](h?p://en.wikipedia.org/wiki/Cohesion_%28computer_science%29) Quo$ng Yourdon & Constan$ne’s Structured Design book from 1979

Slide 56

Slide 56 text

Coupling is: “[the] degree of interdependence between soEware modules” [Wikipedia](h?p://en.wikipedia.org/wiki/Coupling_(computer_programming)

Slide 57

Slide 57 text

by their very nature display logic and markup are intertwined

Slide 58

Slide 58 text

display logic is not model logic

Slide 59

Slide 59 text

Keeping view logic and markup separate is not separa0on of concerns it is really just a separa0on of technologies

Slide 60

Slide 60 text

so, give it ﬁve minutes and see if you s0ll hate it

Slide 61

Slide 61 text

component composi0on

Slide 62

Slide 62 text

components are arranged in a tree rendered based on props state

Slide 63

Slide 63 text

props are the proper0es passed in by the parent

Slide 64

Slide 64 text

they are immutable

Slide 65

Slide 65 text

state is internal to the component

Slide 66

Slide 66 text

React Best Prac0ces 101 state is only set on the root component parents pass props to children

Slide 67

Slide 67 text

I I Using React

Slide 68

Slide 68 text

Design Dropped by. . . they want “this one”

Slide 69

Slide 69 text

Create the Component Class Demo1 = React.createClass({ displayName: “Demo1” });

Slide 70

Slide 70 text

Start with Render render: function() { return (

-‐ {this.state.value} +

); }

Slide 71

Slide 71 text

JSX Conversion -‐

Slide 72

Slide 72 text

JSX Conversion -‐ becomes React.createElement( "button", // component )

Slide 73

Slide 73 text

JSX Conversion -‐ becomes React.createElement( "button", // component { onClick: this.minus }, // props )

Slide 74

Slide 74 text

JSX Conversion -‐ becomes React.createElement( "button", // component { onClick: this.minus }, // props "-‐" // children )

Slide 75

Slide 75 text

Ini0al State // because we used {this.state.value} getInitialState: function() { return { value: 0 }; }

Slide 76

Slide 76 text

Event Handlers plus: function() { this.setState({ value: this.state.value + 1 }); } minus: function() { this.setState({ value: this.state.value -‐ 1 }); }

Slide 77

Slide 77 text

Add to the DOM

Slide 78

Slide 78 text

Add to the DOM var Demo1 = React.createClass({ ... }); React.renderComponent( <Demo1 />, document.getElementById('app') );

Slide 79

Slide 79 text

injec0ng the code inline is not very modular or testable

Slide 80

Slide 80 text

there are tools to help browserify webpack react-‐rails browserify-‐rails

Slide 81

Slide 81 text

for a good tutorial on geqng react setup (with Rails) https://reactjsnews.com/setting-‐up-‐rails-‐for-‐react-‐and-‐jest/ warning: shameless plug

Slide 82

Slide 82 text

these tools give us access to node and its package manager npm

Slide 83

Slide 83 text

now we write our component as an independent module

Slide 84

Slide 84 text

Smile.jsx var React = require('react'); var Smile = React.createClass({ . . . }); module.exports = Smile;

Slide 85

Slide 85 text

Using That Component var Smile = require('./Smile'); React.renderComponent( , document.getElementById('app') );

Slide 86

Slide 86 text

I Tes0ng React I I

Slide 87

Slide 87 text

Jest is Facebook’s solu0on for unit tes0ng React http://facebook.github.io/jest/

Slide 88

Slide 88 text

Jest is based on Jasmine it(“should do something”, function() {}); describe(“a group of tests”, function() {}); beforeEach(function() {}); expect([condition]).toBe([something])

Slide 89

Slide 89 text

but it auto-‐mocks CommonJS modules (those require() statements) jest.dontMock(‘something’)

Slide 90

Slide 90 text

and it runs from the command line in parallel via node.js npm test [optional pattern]

Slide 91

Slide 91 text

how about another example

Slide 92

Slide 92 text

ﬁrst, create a new directory __tests__/

Slide 93

Slide 93 text

and a ﬁle __tests__/Demo1-‐test.jsx

Slide 94

Slide 94 text

Demo1-‐test.jsx jest.dontMock('../Demo1'); describe("Demo1", function() { var React = require('react/addons') , TestUtils = React.addons.TestUtils , Demo1 = require('../Demo1') // . . . }

Slide 95

Slide 95 text

Demo1-‐test.jsx it("should default to 0 with buttons for +/-‐", function() { var demo1 = TestUtils .renderIntoDocument(); expect(demo1.getDOMNode().textContent) .toBe('-‐0+'); } );

Slide 96

Slide 96 text

Demo1-‐test.jsx it("should increment the counter when clicking on the + button", function() { var demo1 = TestUtils .renderIntoDocument(); var plusButton = TestUtils .scryRenderedDOMComponentsWithTag(demo1, 'button’) .filter(function(component) { return component.getDOMNode().textContent === '+’ })[0]; TestUtils.Simulate.click(plusButton) expect(demo1.getDOMNode().textContent).toBe('-‐1+'); });

Slide 97

Slide 97 text

Jest API http://facebook.github.io/jest/docs/api.html#content dontMock genMockFunc0on it/it.only .not .toBe/.toEqual .toBeDeﬁned .toBeCalled[With] React TestU0ls API http://facebook.github.io/react/docs/test-‐utils.html renderIntoDocument Simulate.[event] [scry/ﬁnd]RenderedDOMComponentWith[Class/Tag/Type]

Slide 98

Slide 98 text

Mocha http://mochajs.org/ be?er repor0ng fewer issues with auto-‐mocking serial execu0on Expect.js https://github.com/Automattic/expect.js expect, to.be

Slide 99

Slide 99 text

V Unidirec0onal Dataﬂow (and Flux) I

Slide 100

Slide 100 text

how do we share data to/from our component?

Slide 101

Slide 101 text

Rethinking Demo12 propTypes: { value: React.PropTypes.number }, getDefaultProps: function() { return { value: 0 }; },

Slide 102

Slide 102 text

No more state render: function() { return (

-‐ {this.state props.value} +

); }

Slide 103

Slide 103 text

Yay!

Slide 104

Slide 104 text

Yay!. . . wait. . . it is not doing anything anymore

Slide 105

Slide 105 text

we need to alert the parent

Slide 106

Slide 106 text

Parent Component onChange: function(newValue) { this.setState({ value: newValue }); } render: function() { return ( ); }

Slide 107

Slide 107 text

what about components not in our tree

Slide 108

Slide 108 text

The Flux Architecture

Slide 109

Slide 109 text

The Case For Flux “your data changes over 0me” and you “care about immediately reﬂec0ng those changes in the UI” h?ps://medium.com/@dan_abramov/the-‐case-‐for-‐ﬂux-‐379b7d1982c6

Slide 110

Slide 110 text

The Case For Flux “you want to cache data in memory, but it can change while cached” h?ps://medium.com/@dan_abramov/the-‐case-‐for-‐ﬂux-‐379b7d1982c6

Slide 111

Slide 111 text

The Case For Flux “your data is rela0onal and models include and depend on each other” h?ps://medium.com/@dan_abramov/the-‐case-‐for-‐ﬂux-‐379b7d1982c6

Slide 112

Slide 112 text

The Case For Flux “the same data is assembled from diﬀerent sources and can be rendered in several places throughout the UI” h?ps://medium.com/@dan_abramov/the-‐case-‐for-‐ﬂux-‐379b7d1982c6

Slide 113

Slide 113 text

Store View Dispatcher Ac0on Unidirec0onal Data Flow (Flux)

Slide 114

Slide 114 text

Store View Dispatcher Ac0on Unidirec0onal Data Flow (Flux) ex. fetch the user model

Slide 115

Slide 115 text

Store View Dispatcher Ac0on Unidirec0onal Data Flow (Flux) This is where data should be fetched

Slide 116

Slide 116 text

Store View Dispatcher Ac0on Unidirec0onal Data Flow (Flux) This is like the model. users: [ 55586: {someData} ]

Slide 117

Slide 117 text

Store View Dispatcher Ac0on Unidirec0onal Data Flow (Flux) Changes to the store trigger a re-‐render

Slide 118

Slide 118 text

Ac0on Store View Dispatcher Ac0on Unidirec0onal Data Flow (Flux) Views trigger ac0ons

Slide 119

Slide 119 text

Ac0on Store View Dispatcher Ac0on Unidirec0onal Data Flow (Flux) And the cycle starts all over again

Slide 120

Slide 120 text

Flux is an architecture, not a library

Slide 121

Slide 121 text

Flux Implementa0ons •  [Reflux](h?ps://github.com/spoike/refluxjs) •  [Fluxxor](h?p://fluxxor.com/) •  [Fluxify](h?ps://github.com/arqex/fluxify) •  [Ambidex] (h?ps://github.com/appsforar0sts/ambidex) uses reflux

Slide 122

Slide 122 text

reﬂux demo Project BlueBird

Slide 123

Slide 123 text

React Na0ve V

Slide 124

Slide 124 text

automa0c touch handling

Slide 125

Slide 125 text

na0ve components

Slide 126

Slide 126 text

style & layout

Slide 127

Slide 127 text

React Na0ve Demo thanks to Collin Eberhardt of ShinobiControls

Slide 128

Slide 128 text

Recap V I

Slide 129

Slide 129 text

Objec0ves •  Learn the basics of how to think in React •  See some actual React in Prac0ce •  Get a basic understanding of tes0ng React •  Introduc0on to the concept of unidirec0onal dataﬂow as an “alterna$ve” to MVC •  See ReactNa0ve •  Play with some examples

Slide 130

Slide 130 text

Useful Resources •  [ReactJS](h?p://facebook.github.io/react/) •  [ReactJSConf] (h?p://conf.reactjs.com/schedule.html) •  [ReactJSNews](h?ps://reactjsnews.com/) •  [Immutable.js] (h?p://facebook.github.io/immutable-‐js/) •  [CSS in JS] (h?ps://speakerdeck.com/vjeux/react-‐css-‐in-‐js)

Slide 131

Slide 131 text

Useful Resources •  [Sublime w/ React]( h?p://www.petethompson.net/blog/js/ 2015/02/25/sublime-‐text-‐3-‐and-‐modern-‐js/) •  [Browserify](h?p://browserify.org/) •  [webpack](h?p://webpack.github.io/)

Slide 132

Slide 132 text

More Useful Resources •  [Thinking in React] (h?p://facebook.github.io/react/docs/ thinking-‐in-‐react.html) •  [Egghead.io] (h?ps://egghead.io/technologies/react) •  [Khan Academy] (h?p://khan.github.io/react-‐components/)

Slide 133

Slide 133 text

Contact Informa0on Twi?er: @HurricaneJames Email: [email protected] GitHub: h?ps://github.com/HurricaneJames