FUNCTIONAL WEB DEVELOPMENT - AN

INTRODUCTION TO React.js

HELLO, MY NAME IS Bertrand KARERANGABO.

@BERTRANDK

I WORK AT RANGLE.IO

Moar functional!— Nick Van Weerdenburg

typeof NaN === 'number' //=> true

WHAT PROBLEM ARE WE TALKING ABOUT TODAY?

Most software today is very much like an Egyptian

pyramid with millions of bricks piled on top of each other, with no structural integrity, but just done by brute force and thousands

of slaves.— Alan Kay

THE PROBLEMHOW CAN WE BUILD LARGE APPLICATIONS

WITH DATA THAT CHANGES OVER TIME?

▸ A (very) short history of web development▸ OOP in the wild▸ Functional design▸ React.js

▸ Immutable (data stuctures)▸ The server (SEO & performance)

▸ The end

1979 · MODEL-VIEW-CONTROLLER IS BORNIt was fist articulated by Trygve Reenskaug, Adele Goldberg and others

at Xeroc PARC.

MVC was conceived as a general solution to the problem of users controlling a large and complex data set.

MVC AND IT'S LATER VARIANTS HAVE ALL INHERITED FROM THE INITIAL OOP-BASED

IMPLEMENTATION.

1990 · THE FIRST WEB BROWSER

It was invented by Tim Berners-Lee and was initially called WorldWideWeb.

▸ It was written in Objective-C.▸ It introduced an Internet-based document

system called HyperText Markup Language.▸ The layout engine was a subclass of

NeXTSTEP's Text class.▸ The document is static – if data changes, you

must refresh!

1995 · THE FIRST DOMThe Level 0 DOM was created by Netscape for Netscape Navigator 2.0.

The idea was to give web developers a means by which to allow users to interact with a site.

Given that an HTML document can be represented as a tree, the DOM API allows for developers to interact and manipulate the tree's nodes.

1995 · THE FIRST JAVASCRIPT

▸ A (very) short history of web development▸ OOP in the wild▸ Functional design▸ React.js

▸ Immutable (data stuctures)▸ The server (SEO & performance)

▸ The end

A SHOPPING CART

A SHOPPING CART - OOP DATA

A SHOPPING CART - OOP DATA & METHODS

Local state that changes over time is the root of all evil.

A BASIC COMPUTER IN 1995Ram: 8MB

HDD: 1GB

CPU: 33MHz

LET'S NOT WRITE SOFTWARE LIKE

IT'S 1995.

WE NEED A BETTER

ABSTRACTION

▸ A (very) short history of web development▸ OOP in the wild▸ Functional design▸ React.js

▸ Immutable (data stuctures)▸ The server (SEO & performance)

▸ The end

A SHOPPING CART - FP DATA

A SHOPPING CART - FP DATA

A SOLUTIONREACT.JS + IMMUTABLE-JS

▸ A (very) short history of web development▸ OOP in the wild▸ Functional design▸ React.js

▸ Immutable (data stuctures)▸ The server (SEO & performance)

▸ The end

REACT.JSA JAVASCRIPT LIBRARY FOR BUILDING

COMPOSABLE USER INTERFACES

REACT.JS VIRTUAL DOMThe full DOM API in JavaScript.

When rendering, it uses a diff implementation for ultra-high performance.

f(newDOM, oldDOM) = Δ

REACT.JS COMPONENTvar App = React.createClass({

render: function() { return React.DOM.h1(null, 'Hello'); };

});

REACT.JS RENDERvar App = React.createClass({

render: function() { return React.DOM.h1(null, 'Hello'); };

});

React.renderComponent(App(null), document.body);

REACT.JS PROPSvar french = 'Allo';

var App = React.createClass({

render: function() { return React.DOM.h1(null, this.props.salutation ); };

});

React.renderComponent(App({ salutation: french }), document.body);

REACT.JS DOM PROPERTIESvar french = 'Allo';

var App = React.createClass({

render: function() { return React.DOM.h1({ className: 'title' }, this.props.salutation ); };

});

React.renderComponent(App({ salutation: french }), document.body);

REACT.JS EVENTSvar french = 'Allo';

function scream() { alert("I've been clicked!");}

var App = React.createClass({

render: function() { return React.DOM.h1({ className: 'title', onClick: this.props.clickHandler }, this.props.salutation ); };

});

React.renderComponent(App({ salutation: french, clickHandler: scream }), document.body);

REACT.JS STATE*var french = 'Allo';

var App = React.createClass({ getInitialState: function() { return { name: 'Unknown' }; }, componentDidMount: function() { $.ajax({ url: '/me', dataType: 'json', success: function(data) { this.setState({ name: data }); }.bind(this); }); }, render: function() { var fullSalutation = this.props.salutation + ', ' + this.state.name;

return React.DOM.h1(null, fullSalutation); };

});

React.renderComponent(App({ salutation: french }), document.body);

REACT.JS COMPONENT SPECIFICATION- render- getInitialState- getDefaultProps- propTypes- mixins- statics- displayName

REACT.JS COMPONENT LIFECYCLEMounting: - componentWillMount - componentDidMount

Updating: - componentWillReceiveProps - shouldComponentUpdate - componentWillUpdate - componentDidUpdate

Unmounting: - componentWillUnmount

REACT.JS SHOPPING CART

▸ A (very) short history of web development▸ OOP in the wild▸ Functional design▸ React.js

▸ Immutable (data stuctures)▸ The server (SEO & performance)

▸ The end

IMMUTABLEIMMUTABLE AND PERSISTENT DATA STRUCTURES + SUPPORTING APIS

IMMUTABLE MAPSvar map1 = Immutable.Map({ a: 1, b: 2, c: 3 });

map2 = map.set('b', 20); // note the assignmentmap2.get('b'); // 20

map1.get('b'); // 2

IMMUTABLE VECTORvar vect1 = Immutable.Vector(1, 2);var vect2 = vect1.push(3, 4, 5);var vect3 = vect2.unshift(0);var vect4 = vect1.concat(vect2, vect3);assert(vect1.length === 2);assert(vect2.length === 5);assert(vect3.length === 6);assert(vect4.length === 13);assert(vect4.get(0) === 1);

IMMUTABLE EQUALITYvar map1 = Immutable.Map({a:1, b:1, c:1});var map2 = Immutable.Map({a:1, b:1, c:1});assert(map1 !== map2);assert(Immutable.is(map1, map2) === true);

IMMUTABLE INTEROPvar deep = Immutable.Map({a:1, b:2, c:Immutable.Vector(3,4,5)});deep.toObject() // { a: 1, b: 2, c: Vector [ 3, 4, 5 ] }deep.toArray() // [ 1, 2, Vector [ 3, 4, 5 ] ]deep.toJS() // { a: 1, b: 2, c: [ 3, 4, 5 ] }JSON.stringify(deep) // '{"a":1,"b":2,"c":[3,4,5]}'

IMMUTABLE CURSORSvar appData = Immutable.fromJS({ a: { b: { c: 1 } } });var userData = appData.cursor(['a', 'b', 'c'], function(newData) { appData = newData;});

// ... elsewhere ...

userData.deref(); // 1userData = userData.update(function(x) { return x + 1 });userData.deref(); // 2

// ... back to data ...

appData.getIn(['a', 'b', 'c']); // 2

IMMUTABLE SHOPPING CART

▸ A (very) short history of web development▸ OOP in the wild▸ Functional design▸ React.js

▸ Immutable (data stuctures)▸ The server (SEO & performance)

▸ The end

SERVER-SIDE RENDERINGvar url = require('url')

function(req, res, next) { // get the application path/stage var path = url.parse(req.url).pathname;

// get a React.js component var app = App({path: path});

// render component into string instead of DOM var markup = React.renderComponentToString(app);

// return full html and let client-side takeover res.send(markup);}

▸ A (very) short history of web development▸ OOP in the wild▸ Functional design▸ React.js

▸ Immutable (data stuctures)▸ The server (SEO & performance)

▸ The end

WE NOW HAVE SOLID MODEL FOR DATA THAT CHANGES

OVER TIME.

MIND THE PUNCHLINEIt's not important that the chicken crossed the road or even how it did

it.

What's important is why it crossed the road.

Thank you!