React - What's the big deal?

Daniel Perez Alvarez

@unindented

This presentation tries to explain why I think React is a really important milestone for frontend development.

What makes a UI difficult to build?

What we are doing with a UI is mapping a bunch of data structures to something visible on the screen. That's pretty easy though.

Things get challenging when those data structures change over time, as the user interacts with the app, the server provides new data, etc.

Lots of state
Difficult to test
Limited libraries

- In a UI there's lots of state, which means lots of complexity. - You can automate some tests, but things almost always require human verification. - Our libraries are pretty limited.

Server-Side Rendering

Pages are immutable. Pros: - Every interaction means a page reload, so the frontend has very little state to manage. Cons: - Re-rendering the whole UI on every change makes for a bad UX. - It also puts extra load on the backend.

Manual Rendering

The UI notifies us that the user interacted with the UI, but we have to do all the work.

The DOM

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides an object-oriented representation of the document, and it can be modified with a scripting language such as JavaScript.

window.onload = function () {
  var doc = window.document;
  var el = doc.createElement('h1');
  var text = doc.createTextNode('Hi!');
  el.style.color = 'red';
  el.appendChild(text);
  doc.body.appendChild(el);
};

We have to take care of everything. Pros: - Doesn't re-render the whole UI on every interaction. Cons: - Complex and full of quirks. - Doesn't enforce any sort of separation of concerns. - Provides no means of composition.

jQuery

jQuery is a JavaScript library designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and fire Ajax requests. Originally released in 2006, it is in use on over 63% of the top million most popular sites by traffic volume.

$(function () {
  var heading = $('<h1/>', {
    text: 'Hello world!',
    css: {color: 'red'}
  }).appendTo('body');
});

We have to take care of everything, but with a slightly better API. Pros: - Less complex than vanilla DOM manipulation. Cons: - Doesn't enforce any sort of separation of concerns. - Provides no means of composition.

Backbone.js

Backbone is an MVW framework that came out in 2010. It gives structure to web applications by providing models, collections, views, and some ways of connecting it all to your backend APIs.

var Greeting = Backbone.View.extend({
  initialize: function () {
    this.listenTo(
      this.model, 'change', this.render
    );
  },
  render: function () {
    // ...
  }
});

var Person = Backbone.Model.extend({
  // ...
});

var view = new Greeting({
  model: new Person()
});

view.render().$el.appendTo('body');

While it gives us the architecture for separating UI code from models, it leaves the synchronization between the two up to us. We do get events when changes occur to the UI or our models, but everything else is our responsibility. Pros: - Introduces separation of concerns. - You can read the source code in an evening. Cons: - Models are special objects. - Doesn't have digest cycles, causing unnecessary re-renders. - Provides no means of composition.

Data Binding

Having to manually figure out re-rendering when app state changes is one of the major sources of incidental complexity in JavaScript apps. With data binding, when your models change, only the parts of the app that use it will update. Two-way data binding links UI and models both ways, so the UI updates when models change, and models update when user interacts with the UI. The framework is in control of both your UI and your models, so it takes care of most things.

Knockout.js

Knockout is an MVVM framework that came out in 2010. It was one of the first to include two-way data binding.

Pros: - Auto-updates UI when models change. Cons: - Models are special objects. - DSL for data binding. - Debugging is tricky.

Ember.js

Ember is an MVC framework that came out in late 2011. Originally it was a rewrite of another framework called SproutCore, but they ended up renaming it.

Pros: - Auto-updates UI when models change. Cons: - Models are special objects. - DSL for data binding. - Debugging is tricky.

Dirty Checking

Dirty checking also aims to solve the problem of having to manually re-render when things have changed. When you render a value, the framework creates a watcher for that value. After that, whenever anything happens in your app, the framework checks if the value in that watcher has changed from the last time. If it has, it re-renders the value in the UI.

AngularJS

AngularJS is a MVW framework that came out in 2009. It is backed by Google, although they only use it for the YouTube on PS3 app.

Pros: - Auto-updates UI when models change. - Uses plain data structures as models. Cons: - DSL for data binding. - Debugging is tricky.

Virtual DOM

A virtual DOM is a data structure composed of plain objects and arrays that represents a real DOM object graph. A separate process then takes that virtual DOM and creates the corresponding real DOM elements that are shown on the screen.

Whenever a change occurs, a new virtual DOM is created from scratch. The previous representation is diffed with the new one, to get the set of changes, and then those changes are applied to the real DOM.

React

Whenever you call setState on a component, it will trigger a re-render for that component and all of its children. You can be more granular by overriding shouldComponentUpdate and comparing the previous and current states yourself, but, with complex data structures, this can be costly and error-prone.

Pros: - Auto-updates UI when anything changes. - Uses plain data structures as models. Cons: - Updates everything by default.

Om

By using immutable data structures, the comparison between previous and current states is trivial, so we can easily mark parts of the component tree as unchanged. Pros: - Auto-updates UI when anything changes. - Uses immutable data structures as models. - Updates only things that changed.

Popularity

We all know that frontend development is fad-driven. Let's see what are the most popular frameworks.

Conclusion

Key-value observation
Dirty checking
Virtual DOM

- UI development is all about managing state. - Managing it manually is a mess. - KVO entangles app code with observables. - Dirty checking entangles app code with weird constructs. - Virtual DOM needs a signal to say anything may have changed. The beauty of React lies in the combination of the virtual DOM with easily composable components.

React - What's the big deal? Daniel Perez Alvarez @unindented This presentation tries to explain why I think React is a really important milestone for frontend development.

react-whats-the-big-deal-presentation

unindented

react-whats-the-big-deal-presentation

0 0