Jou Can Have It

Both Ways:

Web Components + React.JS

May 14 2015, Verona

Massimiliano Mantione


Andrew Rota

Irakli Gozalishvili

About Myself

An enthusiast software engineer

Passionate about languages and compilers

Worked in the V8 team in Google

Overall, worked on JIT compilers for +7 years

Now working on scalable, fault tolerant,
web facing distributed systems

Javascript and me

I started as a Javascript hater

When I sow Javascript for the 1st time (in 1995) I vowed that I would never touch such an abomination, even with a 10 feet pole

Eventually, I changed my mind, but...

Let's change subject!

Web Components

Custom Elements

Shadow DOM

HTML Imports

HTML Templates

Portable (standard Web Platform)


IloveWeb Components


Virtual DOM

One-Way Data Flow

High Performance

Portable Synthetic Event System

Code-centric component definitions

Client and Server Rendering


IloveWeb Components

Web ComponentsloveWeb Components

I definitely think it's the wrong programming paradigm;
I really hope that [web components]
do not succeed

(Pete Hunt)

Web ComponentsloveWeb Components

React or Web Components:

Pick One?

  • Custom Elements
  • Shadow DOM
  • Encapsulation
  • Reusability
  • Portability
  • Virtual DOM
  • Event System
  • Functional UI
  • High Performance
  • Isomorphic JS

Technical Issues

Custom Events

Custom Attributes

Custom Children

Fundamental Issue:
Stateful Components

a Custom React Class

  • getInitialState: add custom attributes
  • componentDidMount:
    • set custom attributes
    • set custom children
    • add event handlers
  • componentWillUnmount: remove event handlers
  • componentDidUpdate:
    • reset custom attributes
    • reset event handlers
  • render: display web component

Web ComponentsloveWeb Components


General Ideas
About Components

Components should be





State is "ok"...

...as long as it can be fully specified through attributes and children!

Good Idea

Bad Idea

That's All, Folks

code, docs and slides are on github

twitter: @M_a_s_s_i, #metascript

Thanks for following!