Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Functional Web Development

1,648 views

Published on

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.

Published in: Internet
  • Be the first to comment

Functional Web Development

  1. 1. FUNCTIONAL WEB DEVELOPMENT - AN INTRODUCTION TO React.js
  2. 2. HELLO, MY NAME IS Bertrand KARERANGABO. @BERTRANDK
  3. 3. I WORK AT RANGLE.IO
  4. 4. Moar functional! — Nick Van Weerdenburg
  5. 5. typeof NaN === 'number' //=> true
  6. 6. WHAT PROBLEM ARE WE TALKING ABOUT TODAY?
  7. 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. 8. THE PROBLEM HOW CAN WE BUILD LARGE APPLICATIONS WITH DATA THAT CHANGES OVER TIME?
  9. 9. ▸ A (very) short history of web development ▸ OOP in the wild ▸ Functional design ▸ React.js ▸ Immutable (data stuctures) ▸ The server (SEO & performance) ▸ The end
  10. 10. 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.
  11. 11. MVC AND IT'S LATER VARIANTS HAVE ALL INHERITED FROM THE INITIAL OOP-BASED IMPLEMENTATION.
  12. 12. 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!
  13. 13. 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.
  14. 14. 1995 · THE FIRST JAVASCRIPT
  15. 15. ▸ A (very) short history of web development ▸ OOP in the wild ▸ Functional design ▸ React.js ▸ Immutable (data stuctures) ▸ The server (SEO & performance) ▸ The end
  16. 16. A SHOPPING CART
  17. 17. A SHOPPING CART - OOP DATA
  18. 18. A SHOPPING CART - OOP DATA & METHODS
  19. 19. Local state that changes over time is the root of all evil.
  20. 20. A BASIC COMPUTER IN 1995 Ram: 8MB HDD: 1GB CPU: 33MHz
  21. 21. LET'S NOT WRITE SOFTWARE LIKE IT'S 1995.
  22. 22. WE NEED A BETTER ABSTRACTION
  23. 23. ▸ A (very) short history of web development ▸ OOP in the wild ▸ Functional design ▸ React.js ▸ Immutable (data stuctures) ▸ The server (SEO & performance) ▸ The end
  24. 24. A SHOPPING CART - FP DATA
  25. 25. A SHOPPING CART - FP DATA
  26. 26. A SOLUTION REACT.JS + IMMUTABLE-JS
  27. 27. ▸ A (very) short history of web development ▸ OOP in the wild ▸ Functional design ▸ React.js ▸ Immutable (data stuctures) ▸ The server (SEO & performance) ▸ The end
  28. 28. REACT.JS A JAVASCRIPT LIBRARY FOR BUILDING COMPOSABLE USER INTERFACES
  29. 29. REACT.JS VIRTUAL DOM The full DOM API in JavaScript. When rendering, it uses a diff implementation for ultra-high performance. f(newDOM, oldDOM) = Δ
  30. 30. REACT.JS COMPONENT var App = React.createClass({ render: function() { return React.DOM.h1(null, 'Hello'); }; });
  31. 31. REACT.JS RENDER var App = React.createClass({ render: function() { return React.DOM.h1(null, 'Hello'); }; }); React.renderComponent(App(null), document.body);
  32. 32. 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);
  33. 33. 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);
  34. 34. 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);
  35. 35. 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);
  36. 36. REACT.JS COMPONENT SPECIFICATION - render - getInitialState - getDefaultProps - propTypes - mixins - statics - displayName
  37. 37. REACT.JS COMPONENT LIFECYCLE Mounting: - componentWillMount - componentDidMount Updating: - componentWillReceiveProps - shouldComponentUpdate - componentWillUpdate - componentDidUpdate Unmounting: - componentWillUnmount
  38. 38. REACT.JS SHOPPING CART
  39. 39. ▸ A (very) short history of web development ▸ OOP in the wild ▸ Functional design ▸ React.js ▸ Immutable (data stuctures) ▸ The server (SEO & performance) ▸ The end
  40. 40. IMMUTABLE IMMUTABLE AND PERSISTENT DATA STRUCTURES + SUPPORTING APIS
  41. 41. 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
  42. 42. 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);
  43. 43. 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);
  44. 44. 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]}'
  45. 45. 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
  46. 46. IMMUTABLE SHOPPING CART
  47. 47. ▸ A (very) short history of web development ▸ OOP in the wild ▸ Functional design ▸ React.js ▸ Immutable (data stuctures) ▸ The server (SEO & performance) ▸ The end
  48. 48. 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); }
  49. 49. ▸ A (very) short history of web development ▸ OOP in the wild ▸ Functional design ▸ React.js ▸ Immutable (data stuctures) ▸ The server (SEO & performance) ▸ The end
  50. 50. WE NOW HAVE SOLID MODEL FOR DATA THAT CHANGES OVER TIME.
  51. 51. 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.
  52. 52. Thank you!

×