React – Web UI the Right Way ?

View Github Repository Open presentation in a new window

DjebbZ

See all presentation from DjebbZ

React – Web UI the Right Way ?

0 0

react-palo-it

On Github DjebbZ / react-palo-it

React

Web UI the Right Way ?

aka Kinda the V of MVC

aka Functional Web UIs

Khalid Jebbari aka DjebbZ, @DjebbZ November 27th, 2014

hosted by Palo IT

1. Remercier Palo IT 2. Me présenter 3. Rappeler que plusieurs attendaient cette préz

Disclaimer

Talk greatly inspired by this video from React's Lead developer.

Je me suis pas chronométré !

Plan

Design of React :

  • Separation of concerns
  • Component oriented
  • Rendering concept

Going further (if time permits)

Best practice

Separate template from view logic (Handlebars, Angular.js template, all HTML-like languages VS Backbone View, Angular.js directive, all display-oriented JS code)

Ex: template PHP/JSP avec des requêtes à la base de données

Wait !?

Don't they both display the UI ?

Display logic and markup are highly cohesive.

Revoyons ensemble une définition importante. (NEXT SLIDE)

Separation of concers :

“Reduce coupling, increase cohesion”

Pas possible dans le web de faire fonctionner un morceau d'HTML dynamique sans la logique associée :

  • injection de données
  • affichage conditionnel
  • écoute d'évènements utilisateurs
  • boucle
  • règle métiers
HTML et Javascript complètement interdépendants

Augmentation du couplage et réduction de la cohésion. Couplage difficile à déceler (quel markup pour tel Javascript ? quel interaction pour tel markup ?). Dans programmation classique couplage plus facile à détecter : système de module, interface, signatures, code.

Templates separate technologies, not concerns. And they're underpowered.

  • pseudo-programming language
  • lacks some context (behavior)
  • poor reusability

React

  • Libraire javascript pour créer des interfaces web
  • Open-sourcée par Facebook en mai 2013

Hello World example

AخA
    React.createElement("h3", null, "Hello World !"),
  • Réusabilité : ailleurs sur la page
  • Idempotence : chaque appel produira ce résultat ...
  • ... résultat déclaratif

A better syntax : JSX

​x
 
  • Ressemble à de l'HTML
  • Nécessite une phase de compilation
  • JSX est complètement optionel

Question :

In programming, what's reusable ?

Functions...

... Pure functions !

Le monde merveilleux de la programmation ! Fonctions qui ne dépendent que de leurs arguments, qui sont idempotentes, qui n'ont pas de side-effects... Pas d'état mutable global, de dépendances implicites, de base de données stateful, de side-effects imprévisibles, random, concurrence, etc.

Ce serait bien si...

... on avait des composants graphiques réutilisables, basées sur les principes des fonctions pures, hein ?

Hein ouais ce serait bien ?

Hein ?

Component <=> Function

​x
 

Comment passer des paramètres à un composant ?

Fonctions : on peut leur passer des paramètres. Paramètres JSX <=> attributs HTML

React components are justidempotent functions.

They describe the UI at any point in time, just like the server-rendered page.

Managing UI state is hard

Server/client state, user input, complex interactions, etc.

Managing state in programming is hard

My second remark is that our intellectual powers are rather geared to master static relations and that our powers to visualize processes evolving in time are relatively poorly developed. For that reason we should do (as wise programmers aware of our limitations) our utmost to shorten the conceptual gap between the static program and the dynamic process, to make the correspondence between the program (spread out in text space) and the process (spread out in time) as trivial as possible.

E. W. Dijkstra, 1968

Dijkstra dans sa lettre de 1968 "Goto statement considered harmful" nous dit que programmer dans un environnement en constant changement est difficile.

In the 90s, it was easier

Just refresh the page when data changes !

Les templates affichent les données déjà calculées dans la partie métier. C'est ce que fait React !
React re-renders the entire component. Quand l'état du composant changes, React le rend entièrement, basé sur la description faite dans la méthode "render"

React Data-flow

Data flows from top to bottom. Easy.

Everything is declarative

​x
 
  • Composant HelloWorld externe
  • État explicite
  • Imbrication d'un composant externe
  • Gestion d'état explicite

Re-rendering ? Expensive and inefficient !

“And doesn't it mess up form fields and scroll position ?”

Indeed, the DOM is slow.

Meet the virtual DOM.

On every update, React :

  • builds a new virtual DOM subtree
  • ... diffs it with the old one
  • ... compute the minial set of DOM mutations and puts them in a queue
  • ... and batch executes all updates

Diff is fast because :

  • it's working on pure Javascript data structures, not the slow DOM
  • the algorithm used is O(n)
  • you can easily short-circuit it for even better performance

Virtual DOM enables :

  • unit testable components
  • rendering in Node.js
  • the Holy Grail
  • rendering SVG, VML and Canvas

React in the real world

Used by numerous and big names on the web. (Facebook, Instagram, AirBnB, Khan Academy, Mozilla, ...). It's solid.

Using it since 11 months. All good

And the other JS libs ?

Backbone : se marie bien avec vu qu'aucun n'impose de structure Angular : C'est comme une directive Angular. Mais avec moins de complexités ($scope, transclusion, link et compile functions, etc.). Pas de data-binding dans les deux sens.Possibilité d'utiliser des composants React à la place de directives Angular. Ember : Peut s'utiliser à la place des vues/templates Ember. La core team d'Ember va sûrement reprendre le concept de Virtual DOM.

Is React perfect ?

No. Nothing is perfect :

  • Lacks CSS management to make real components.
  • Some overlap with WebComponents
  • JSX is a nice syntax, but needs tooling
  • No full-stack front-end framework using React

But React is very good

Stateless over stateful

Explicit state management over uncontrolled mutability

Simple data-flow over unpredictable cascading changes

Components really reusable

Not a full stack framework :)

Questions ?

Images courtesy of @bobylito

0