Components as microservices

SOA in the front-end world

Matteo Figus / @matteofigus


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

Europe, North and South America, Asia

millions of requests per minute

more than 50 engineers make changes every day


  • Microsites architecture
  • OpenComponents architecture
  • Agile in the front-end world

The Microsites architecture

Step #1 - Dismantling the monolith

Continuous delivery in dates

2012 - Setup continuous integration pipeline

2013 - All the code moved to github

2014 - First project implements continous deployment

2015 - 10+ deployments per day

couple days ago - New engineer makes 1 PR and gets its code to prod on day 1

The monolithic architecture (2012)

  • Unique giant DB managed by DBAs
  • Stored procedures to handle data
  • Huge .NET applications dialing directly with the DB

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...


  • "start" microsite
  • San Francisco metro
  • => http://start-123/?domain=com&metro=4


  • Team of 2 to 4 full-stack engineers
  • Minimal complexity
  • Minimal dependencies
  • Easier to test, maintain, extend
  • Multiple daily deployments
  • Ownership

The common parts

The common parts

Microsite rendering (server-side)

  • http://search-456/?metro=4&dateTime=2015-10-23T19:00
  • Execute logic
  • GET shared components from Components API
  • <html>
        <!-- css component -->
        <!-- js head component -->
        <!-- header component -->
        <!-- footer component -->
        <!-- js body component -->

Components for common UI elements

$ curl http://components-789/header/1.X.X/?userType=Admin&metroId=72 -H Accept-Language:en-US

  "href": "http://components-789/header/1.X.X?userType=Admin&metroId=72",aefaef
  "html": "<div><img src=\"//\" />...</div>"

Microsites + Shared components



Optimal front-end loading

Easy to spin-up new microsites


A framework for developing and deploying HTML components

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 rendered components

$ curl

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

Server-side unrendered components

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

Server-side rendering with node.js

npm install oc-client --save

var Client = require('oc-client'),
    client = new Client({
      registries: {
        serverRendering: 'http://oc-registry.intranet/'
        clientRendering: ''
      components: {'hello-world': '~1.0.0'}

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


Enables people to create and publish new components independently

Granular ownership



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

Microsites have control

What is a microservice?

Good question, dear

The art of destroying software

Why are you doing this?


Microservices / Microsites / Microteams

  • Minimal dependencies
  • Minimal complexity
  • Closer to Business
  • Trusted to handle ownership
  • Optimised for resilience


SOA is not just about code

Test, test, test

Failure is a feature

Componentise all the web!

Thank you

follow me on twitter - @matteofigus