Functional Web Development – An Introduction to React.js with Bertrand Karerangabo Presented at FITC's Web Unleashed 2014 conference on September 18 2014 More info at www.fitc.ca React.js is a UI framework created by Facebook and Instagram. Its primary design goal is to help build large applications with data that changes over time. To do so at scale, conventional wisdom and some long-held assumptions about software development had to be challenged. Gone are the “M” and the “C” in MVC. Gone are templates and special HTML directives. Gone also are traditional data-bindings. The results are applications that are extremely fast and reliable, out of the box. Bertrand Karerangabo will dive into those concepts that make React.js unique and along the way, also learn how to build web applications from simple, composable and reusable components. OBJECTIVE Rethink web development best practices and explore how you can build ambitious and performant application using functional programming with a virtual DOM representation. TARGET AUDIENCE Javascript developers working on medium to large dynamic applications. ASSUMED AUDIENCE KNOWLEDGE A solid understanding of Javascript and the DOM is strongly recommended. FIVE THINGS AUDIENCE MEMBERS WILL LEARN What React.js is and why it was built. How to deal with the “evil” of mutable state in non-trivial applications. A strategy for working around notoriously slow and expensive DOM operations. The way to truly separate concerns, instead of just technologies, in an application. The SEO, performance and usability benefits that come from using a client-side framework that plays nice with the server.

1. FUNCTIONAL WEB
DEVELOPMENT - AN
INTRODUCTION TO React.js

2. HELLO, MY NAME IS Bertrand
KARERANGABO.
@BERTRANDK

3. I WORK AT RANGLE.IO

4. Moar functional!
— Nick Van Weerdenburg

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

6. WHAT PROBLEM ARE WE
TALKING ABOUT TODAY?

7. 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

8. THE PROBLEM HOW CAN WE BUILD LARGE APPLICATIONS
WITH DATA THAT CHANGES OVER TIME?

10. ▸ A (very) short history of web development
▸ OOP in the wild
▸ Functional design
▸ React.js
▸ Immutable (data stuctures)
▸ The server (SEO & performance)
▸ The end

11. 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.

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

13. 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!

14. 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.

15. 1995 · THE FIRST
JAVASCRIPT

16. ▸ A (very) short history of web development
▸ OOP in the wild
▸ Functional design
▸ React.js
▸ Immutable (data stuctures)
▸ The server (SEO & performance)
▸ The end

17. A SHOPPING CART

18. A SHOPPING CART - OOP DATA

19. A SHOPPING CART - OOP DATA & METHODS

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

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

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

23. WE NEED A
BETTER
ABSTRACTION

24. ▸ A (very) short history of web development
▸ OOP in the wild
▸ Functional design
▸ React.js
▸ Immutable (data stuctures)
▸ The server (SEO & performance)
▸ The end

25. A SHOPPING CART - FP DATA

26. A SHOPPING CART - FP DATA

27. A SOLUTION
REACT.JS + IMMUTABLE-JS

28. ▸ A (very) short history of web development
▸ OOP in the wild
▸ Functional design
▸ React.js
▸ Immutable (data stuctures)
▸ The server (SEO & performance)
▸ The end

29. REACT.JS A JAVASCRIPT LIBRARY FOR BUILDING
COMPOSABLE USER INTERFACES

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

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

32. REACT.JS RENDER
var App = React.createClass({
render: function() {
return React.DOM.h1(null, 'Hello');
};
});
React.renderComponent(App(null), document.body);

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

34. REACT.JS DOM PROPERTIES
var french = 'Allo';
var App = React.createClass({
render: function() {
return React.DOM.h1({ className: 'title' }, this.props.salutation );
};
});
React.renderComponent(App({ salutation: french }), document.body);

35. REACT.JS EVENTS
var 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);

36. 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);

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

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

39. REACT.JS SHOPPING CART

40. ▸ A (very) short history of web development
▸ OOP in the wild
▸ Functional design
▸ React.js
▸ Immutable (data stuctures)
▸ The server (SEO & performance)
▸ The end

41. IMMUTABLE IMMUTABLE AND PERSISTENT DATA
STRUCTURES + SUPPORTING APIS

42. 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

43. 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(vect2.length === 5);
assert(vect3.length === 6);
assert(vect4.length === 13);
assert(vect4.get(0) === 1);

44. 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);

45. 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]}'

46. 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

47. IMMUTABLE SHOPPING CART

48. ▸ A (very) short history of web development
▸ OOP in the wild
▸ Functional design
▸ React.js
▸ Immutable (data stuctures)
▸ The server (SEO & performance)
▸ The end

49. 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);
}

50. ▸ A (very) short history of web development
▸ OOP in the wild
▸ Functional design
▸ React.js
▸ Immutable (data stuctures)
▸ The server (SEO & performance)
▸ The end

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

52. 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.

53. Thank you!