React: Thinking State First

Slide 1

Slide 1 text

React: Thinking State First Doug Neiner

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

github.com/LeanKit-Labs Open Source Goodness

Slide 4

Slide 4 text

React: Thinking State First Doug Neiner

Slide 5

Slide 5 text

Why another library? Why should I care?

Slide 6

Slide 6 text

Why React.js? • Cohesive Templates and Code • Enforced Predictable Behavior • Synthetic Event System • Performance • Can be integrated gradually

Slide 7

Slide 7 text

Our Canvas • It can stretch to any size • It may behave or appear differently to  different people • It can become a performance bottleneck when you mess with it • So… how do we dynamically modify this canvas?

Slide 8

Slide 8 text

JavaScript var ct = document.querySelector( ".cart-count" ); ct.innerHTML = "5";

Slide 9

Slide 9 text

jQuery $( ".cart-count" ).text( "5" );

Slide 10

Slide 10 text

jQuery $.each( someArray, function ( item ) { $( "#cart-items" ).append( "

" + item.title + "

" ); } );

Slide 11

Slide 11 text

jQuery var $ul = $( "

", { "class": "cart-item", text: item.title } ) ); } ); $container.html( $ul );

Slide 12

Slide 12 text

Rinse. Repeat. We need a better way

Slide 13

Slide 13 text

Templates

<%- item.title %>

Slide 14

Slide 14 text

Templates • When do you render them? • How often? • How do you get data out   of the rendered DOM?

Slide 15

Slide 15 text

Too Much Thinking We need a better way

Slide 16

Slide 16 text

Binding + Templates • Knockout.js • Ember • Angular

Slide 17

Slide 17 text

These Tools Are Solving The   Same Problem

Slide 18

Slide 18 text

The “Template” Part • Special attributes: data-bind, ng-repeat • Learning template syntax: {{#each}} • Templates maintained separately from the  code that uses them…

Slide 19

Slide 19 text

Templates maintained separately from the code that uses them…

Slide 20

Slide 20 text

We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome. – React Docs (emphasis added)

Slide 21

Slide 21 text

Slide 22

Slide 22 text

A React Component (JSX) React.createClass({ render: function() { return

{ this.props.items.length }

; } })

Slide 23

Slide 23 text

A React Component (JSX) React.createClass({ render: function() { return

{ this.props.items.length }

; } })

Slide 24

Slide 24 text

A React Component (JS) React.createClass({ render: function render() { return React.createElement( "div", { className: "cart" }, React.createElement( "span", { className: "cart-count" }, this.props.items.length ), React.createElement( CartItems, { items: this.props.items } ) ); } });

Slide 25

Slide 25 text

The “Template” Part • Special attributes: key, ref • Learning template syntax: {} + JS • Templates maintained with the code that   uses them.

Slide 26

Slide 26 text

Cohesion between our code and our templates in a language we already use. Key Benefit

Slide 27

Slide 27 text

Predictable Behavior Kindly Enforced by React.js

Slide 28

Slide 28 text

Props State Options Attributes Variables

Slide 29

Slide 29 text

Props State Externally  Controlled Internally  Controlled

Slide 30

Slide 30 text

Given the same props and state, the component will render the same thing. Every time.

Slide 31

Slide 31 text

Props in Action var NewsItem = React.createClass({ render: function() { return (

{ this.props.title }

{ this.props.content }

); } });

Slide 32

Slide 32 text

Props in Action var NewsItem = React.createClass({ render: function() { return (

{ this.props.title }

{ this.props.content }

); } });

Slide 33

Slide 33 text

State in Action var Menu = React.createClass( { getInitialState: function () { return { open: false }; }, toggleOpen: function() { this.setState({ open: !this.state.open }); }, ... render: function() { return

{ this.state.open ? "Open" : "Closed" }

; } } );

Slide 34

Slide 34 text

{ this.state.open ? "Open" : "Closed" }

; } } );

Slide 35

Slide 35 text

{ this.state.open ? "Open" : "Closed" }

; } } );

Slide 36

Slide 36 text

{ this.state.open ? "Open" : "Closed" }

; } } );

Slide 37

Slide 37 text

Any time props or state change, the component will call render.   Every time. (Default Behavior)

Slide 38

Slide 38 text

Uh… That's predictable

Slide 39

Slide 39 text

Virtual DOM (aka the part of React.js   you have heard of)

Slide 40

Slide 40 text

State or props change first Then the page is update  to reflect the changes

Slide 41

Slide 41 text

Changes Flow  One Direction

Slide 42

Slide 42 text

Changes Flow Down

Slide 43

Slide 43 text

this.setState({  items: items,  unread: itemIds  }) Changes Flow Down

Slide 44

Slide 44 text

Changes Flow Down

Slide 45

Slide 45 text

Changes Flow Down

Slide 46

Slide 46 text

Changes Flow Down

Slide 47

Slide 47 text

Changes Flow Down When clicked, reduce   UnreadCount by 1 and remove my class  "is-unread"

Slide 48

Slide 48 text

Changes Flow Down When clicked, reduce   UnreadCount by 1 and remove my class  "is-unread" ○

Slide 49

Slide 49 text

Changes Flow Down When clicked, call  this.props.newsItemRead( id )

Slide 50

Slide 50 text

Changes Flow Down When clicked, publish("newsItemRead", id );

Slide 51

Slide 51 text

Changes Flow Down this.setState({  unread: itemIds  })

Slide 52

Slide 52 text

A coding pattern that produces predictable components without sacrificing performance Key Benefit

Slide 53

Slide 53 text

I'll Say Yes To   Another Library But what does my   commitment look like?

Slide 54

Slide 54 text

Your Commitment • Give control of as little or as much of your page as you want. • A transpilation step (if you use JSX) • Some shims/polyfills if you support IE8

Slide 55

Slide 55 text

A focused library that can be integrated gradually. Key Benefit

Slide 56

Slide 56 text

Still Not Convinced? • Accessibility • Server side rendering • Other rendering engines • Touch support • React Developer Tools

Slide 57

Slide 57 text

I'll Say No To   Another Library So what advice do you  have for me?

Slide 58

Slide 58 text

Have a Single Source of Truth • Not in the DOM, in JavaScript variables • Changes are made first to the variables, then the view is updated to reflect the change.

Slide 59

Slide 59 text

Don’t Make Relative Changes • Don’t “add 1” or “subtract 1” when adding or removing an item from a cart. • Adjust the array of cart items, and update the count with the new length of that array.

Slide 60

Slide 60 text

Don’t Make Relative Changes • Don’t call toggleClass, hoping the correct class gets added or removed. • Store a true or false value in a variable. Invert the value when you want to toggle, and then call toggleClass( "my-class", myVar )

Slide 61

Slide 61 text

Have a Single Owner • Never have two separate pieces of JavaScript modifying the same aspect of a DOM element (style, children, etc)

Slide 62

Slide 62 text

Thank You [email protected] @dougneiner