Slide 1

Slide 1 text

R E A C T + B A C K B O N E C H I C A G O B A C K B O N E M E E T U P Presented by Jake Larson #FEDMeetup

Slide 2

Slide 2 text

Building Modern Web Applications is Difficult

Slide 3

Slide 3 text

Back-end Front-end Logic

Slide 4

Slide 4 text

The Front-end space is the wild west

Slide 5

Slide 5 text

Backbone to the Rescue Models Views Routers Collections

Slide 6

Slide 6 text

But let’s be Honest…

Slide 7

Slide 7 text

Backbone views can be a Struggle…

Slide 8

Slide 8 text

Zombie Views

Slide 9

Slide 9 text

DOM Reflow Bottlenecks

Slide 10

Slide 10 text

So how do we solve these Problems?

Slide 11

Slide 11 text

Replace your Backbone views with React

Slide 12

Slide 12 text

What is React? Created at Facebook Technology stack agnostic A library for creating User Interfaces Everything is a Component Format similar to Backbone views

Slide 13

Slide 13 text

React to Backbone Comparison // React Component var SampleComponent = React.createClass({ render: function() { return ( React.DOM.div({className: "sample-component"}, "Hello, world! I am a Component." ) ); } }); // Render to DOM React.renderComponent(new SampleComponent(), document.body); ! ! // Backbone View var SampleView = Backbone.View.extend({ el: $('body'), ! initialize: function(){ this.render(); }, ! render: function(){ $(this.el).append("
Hello, world! I am a Component.
"); } }); // Render to DOM new SampleView();

Slide 14

Slide 14 text

Why React?

Slide 15

Slide 15 text

causes headaches Data changing over time React re-renders the entire component when data changes (Makes things simple, guarantees displayed data is up-to-date)

Slide 16

Slide 16 text

“Isn’t re-rendering on each change expensive?”

Slide 17

Slide 17 text

DOM is SLOW Memory (RAM) Hard Drive Virtual DOM React’s is FAST (Makes re-rendering quick)

Slide 18

Slide 18 text

Virtual DOM process (On every update) All DOM nodes and events are synthetic, leading to consistent cross- browser support (even IE8!) State Component Virtual DOM Diff & Compute! Mutations Update! DOM Generate a new DOM subtree Diff with the old one Compute the minimal set of DOM mutations and put them in a queue Batch execute all updates

Slide 19

Slide 19 text

“Performance isn’t the [main] goal of the Virtual DOM, but if you’re worried with performance, most workloads are as fast or faster [than MV* alternatives] out of the box”! - Pete Hunt! (Software Engineer on React Team)

Slide 20

Slide 20 text

Server-side Rendering

Slide 21

Slide 21 text

Optional JSX syntax // React Component var SampleJSX = React.createClass({ render: function() { return (

Hello, world!

I am a Component.

); } }); // Render to DOM React.renderComponent(new SampleJSX(), document.body);

Slide 22

Slide 22 text

Battle Tested

Slide 23

Slide 23 text

“So Backbone works perfectly with React?” Not exactly…..

Slide 24

Slide 24 text

Mixins React allows for extra functionality through mixins. This mixin can be used to help glue backbone data to react components

Slide 25

Slide 25 text

Let’s Build Something

Slide 26

Slide 26 text

Conclusion Solves many of the problems with Backbone Views! Is very performant out of the box (Virtual DOM)! Is production proven! Components can be rendered on client and server! Has IE8 support with HTML5 events and ECMAScript 5 goodies! Pure JavaScript, No Templates (Optional JSX Syntax)! React…

Slide 27

Slide 27 text

Questions?

Slide 28

Slide 28 text

Sources: Bottleneck Image: elbo.gs.washington.edu Gif Images: http://giphy.com/ Bill Cosby image: http://weknowmemes.com/ Boiler room image: http://www.hamptonregional.com/ Server image: http://commons.wikimedia.org