Functional Web Development

FUNCTIONAL WEB
DEVELOPMENT - AN
INTRODUCTION TO React.js

HELLO, MY NAME IS Bertrand
KARERANGABO.
@BERTRANDK

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 PROBLEM HOW 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 BORN
It 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 DOM
The 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.

A SHOPPING CART - OOP DATA & METHODS

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

A BASIC COMPUTER IN 1995
Ram: 8MB
HDD: 1GB
CPU: 33MHz

LET'S NOT WRITE
SOFTWARE LIKE
IT'S 1995.

WE NEED A
BETTER
ABSTRACTION

A SOLUTION
REACT.JS + IMMUTABLE-JS

REACT.JS A JAVASCRIPT LIBRARY FOR BUILDING
COMPOSABLE USER INTERFACES

REACT.JS VIRTUAL DOM
The full DOM API in JavaScript.
When rendering, it uses a diff implementation for ultra-high
performance.
f(newDOM, oldDOM) = Δ

REACT.JS COMPONENT
var App = React.createClass({
render: function() {
return React.DOM.h1(null, 'Hello');
};
});

REACT.JS RENDER
return React.DOM.h1(null, 'Hello');
};
});
React.renderComponent(App(null), document.body);

REACT.JS PROPS
var french = 'Allo';
return React.DOM.h1(null, this.props.salutation );
};
});
React.renderComponent(App({ salutation: french }), document.body);

REACT.JS DOM PROPERTIES
return React.DOM.h1({ className: 'title' }, this.props.salutation );
};
});

REACT.JS EVENTS
function scream() {
alert("I've been clicked!");
}
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*
getInitialState: function() {
return { name: 'Unknown' };
},
componentDidMount: function() {
$.ajax({
url: '/me',
dataType: 'json',
success: function(data) {
this.setState({ name: data });
}.bind(this);
});
},
var fullSalutation = this.props.salutation + ', ' + this.state.name;
return React.DOM.h1(null, fullSalutation);
};
});

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

REACT.JS COMPONENT LIFECYCLE
Mounting:
- componentWillMount
- componentDidMount
Updating:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
Unmounting:
- componentWillUnmount

IMMUTABLE IMMUTABLE AND PERSISTENT DATA
STRUCTURES + SUPPORTING APIS

IMMUTABLE MAPS
var map1 = Immutable.Map({ a: 1, b: 2, c: 3 });
map2 = map.set('b', 20); // note the assignment
map2.get('b'); // 20
map1.get('b'); // 2

IMMUTABLE VECTOR
var 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(vect4.get(0) === 1);

IMMUTABLE EQUALITY
var 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 INTEROP
var 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 CURSORS
var appData = Immutable.fromJS({ a: { b: { c: 1 } } });
var userData = appData.cursor(['a', 'b', 'c'], function(newData) {
appData = newData;
});
// ... elsewhere ...
userData.deref(); // 1
userData = userData.update(function(x) { return x + 1 });
userData.deref(); // 2
// ... back to data ...
appData.getIn(['a', 'b', 'c']); // 2

SERVER-SIDE RENDERING
var 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);
}

WE NOW HAVE SOLID MODEL
FOR DATA THAT CHANGES
OVER TIME.

MIND THE PUNCHLINE
It's not important that the chicken crossed the road or even how it did
it.
What's important is why it crossed the road.

Functional Web Development

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to Functional Web Development (20)

More from FITC (20)

Recently uploaded (20)

Functional Web Development