Matteo Figus / @matteofigus

Who am I

Coding, technology, conferences
London, UK

Restaurant Reservations - Free • Instant • Confirmed

more than 32K restaurants worldwide

more than 16M reservations every month

more than 450K reviews per month

Dismantling the monolith

SOA from the back-end to the front-end

The monolith

Deployments every 15 days

Not very resilient

Not very robust

Code consistency (one single language)

Dedicated team for infrastructure

Dedicated team for testing

A couple of years later...



Quick deployments

More (focused and effective) testing


Diversity on tech stacks

Microsites: not a free ride!

    Static resources duplication

    Markup, javascript, css duplication


    Every microsite including ~150K of javascript libraries

    Every microsite including ~50K of css

The common parts

The common parts

Components for common UI elements

$ curl http://components/couk/header?userType=Admin&metroId=72

  "html": "<div><img src=\"//\" />...</div>",
  • REST interface
  • HTML output
  • Headers and parameters to get different variants
  • Ability to handle server-side logic
  • Ability to host static resources

Components for shared CSS/JS libraries

$ curl http://components/jp/css

  "html": "<link src=\"//\" rel=\"stylesheet\" />",
$ curl http://components/com/js

  "html": "<script src=\"//\"></script>",

What about...

  • Client-side rendering?
  • IFrames?
  • Asset compilation during build time?
  • WebComponents?

Microsites + Shared components



Optimal front-end loading

Easy to spin-up new microsites

A new hard dependency for all the front-end!

Not possible to create or edit components!


A framework for developing and deploying HTML components


Enables people to create new components independently and publish them

Granular ownership



Serve as framework for experimenting and A/B testing new ideas in the front-end

Consumers have control

How does it work

Demo time!

Getting started

$ npm install -g oc

$ mkdir demo && cd demo
$ oc init test-component jade
$ echo 'div this is my component' > test-component/template.jade

$ oc dev . 3030
$ oc preview http://localhost:3030/test-component

Ship it!

$ oc registry add
$ oc publish /test-component

$ oc preview

Static resources? Let me handle this!

// template.jade


// server.js = function(context, cb){
  cb(null, {
    staticPath: context.staticPath

Client-side rendering

    <oc-component href="">
    <script src="">

Server-side rendering with node.js

npm install oc-client --save

var Client = require('oc-client'),
    client = new Client();

client.config = {
  registries: [''],
  components: {'hello-world': '~1.0.0'}

client.renderComponent('hello-world', function(err, componentHtml){
  console.log(componentHtml); // => rendered html

Server-side rendered components

$ curl

  "href": "",
  "version": "1.0.0",
  "requestVersion": "",
  "html": "<div>hello John Doe</div>",
  "type": "oc-component",
  "renderMode": "rendered"

Server-side pre-rendered components

$ curl 
-H Accept:application/vnd.oc.prerendered+json
  "href": "",
  "version": "1.0.0",
  "requestVersion": "",
  "data": {
    "name": "John doe"
  "template": {
    "src": "",
    "type": "handlebars",
    "key": "cad2a9671257d5033d2abfd739b1660993021d02"
  "type": "oc-component",
  "renderMode": "pre-rendered"


SOA is not just about code

We need love when dealing with dependencies

Componentise all the web!

Thank you

follow me on twitter - @matteofigus