An enlightment journey into front-end

Functional & Reactive Programming

Realisation:

The JS world is too dynamic

2015

React


2016

My guess: something reactive

What's this new buzzword?

Build your way step by step

#1 Spaghetti


I just want to tell you: .
1_spaghetti.html

Analysis of proposal #1

  • It certainly does the jobโ€ฆ
  • ๐Ÿ™ˆ JS is mixed with the HTML
  • ๐Ÿ™ˆ Hard to refactor HTML while keeping the behaviour

#2 jQuery spaghetti


I just want to tell you: .
2_jquery_spaghetti.html

Analysis of proposal #2

  • HTML code is cleaner
  • No JS polluting HTML attributes
  • We can easily spot which elements are dynamic
  • ๐Ÿ™ˆ Same direct DOM manipulation, same imperative programming
  • ๐Ÿ™ˆ We can make this more complicated adding layers (models, views) but the underlying principles will remain

#3 React, imperative


3_react_imperative.html

Analysis of proposal #3

  • Set of view components composed via JSX
  • View is defined once and reacts (it's re-rendered) on state changes
    • Chain reaction! State mutates in the parent component and it's propagated to children via properties
    • DOM is not accessed manually to reflect state changes
    • Fast because the re-rendering uses a virtual DOM
  • ๐Ÿ™ˆ Children notify events to the state holder via callbacks passed as properties
  • ๐Ÿ™ˆ Still using event handlers in the view, not truly reactive. Facebook proposes Flux
  • ๐Ÿ™ˆ JSX is ugly but the programatic way is uglier

#4 React, streams


4_react_streams.html

Analysis of proposal #4

  • Interactions are decoupled from the view, no callbacks catering for events
  • All interactions between components are declared on top
  • Removed global state, as it's being replaced by streams
  • There are lots of stream libraries: RxJS, Bacon, Kefirโ€ฆ
  • State is only managed by the component, internally
  • Simple views that react upon event the streams they've subscribed
  • ๐Ÿ™ˆ No fully functional, we still have state, although only kept inside the component

#5 jQuery streams


I just want to tell you: .
5_jquery_streams.html

Analysis of proposal #5

  • The concept of streams is not bound to React
  • You can use streams to simplify interactions between jQuery plugins
  • Not a single callback: subscription to event streams
  • ๐Ÿ™ˆ DOM manipulation/replacement when updating big views. Alternatives:
    • Use a virtual-dom technology (React is a bit heavy)
    • Frameworks that include FRP and virtual-dom: cycle.js, yolkโ€ฆ

#6 FRP with cycle.js


    
6_cycle.js.html

Analysis of proposal #6

  • Fully pure functional approach
  • Everything is a stream, even the human()
  • ๐Ÿ™ˆ Ground-breaking concept

Recap

  • Same app functionality, different ways to write it
  • Coming from MVC, reactive programming is perplexing
  • React has a vibrant ecosystem of ready-to-use components
  • React has a Rails gem for quick usage & server-side rendering for the first page load
  • React is OOP and allows state mutation, which is sometimes a useful quick hack
  • cycle.js is virtual-dom views (could be React) plus observables, in a FP manner
  • cycle.js is very clean and easy to test
  • cycle.js composition is more difficult, not OOP
  • Today? React. Tomorrow? cycle.js
New technology, but same old answer:

Suitability

๐ŸŒž When to use React or cycle.js?

  • Massive JS SPA
  • Complex page interactions
  • Components talking to other components, depending on their interactions
    E.g., datepicker, review listโ€ฆ

๐Ÿ‘บ When not to use React or cycle.js?

  • Small enhancements to specific page elements
  • When components are quite independent
    E.g., colorbox, tooltipโ€ฆ

Suggested reads

Beginner:

Intermediate:

Advanced:

We're done!