OpenComponents workshop

we build modern web applications in this workshop

Grab your we are going to Code here.
But coding is not mandatory, you can just listen and watch.
If you want to code, you will need 0.10.40 <= node < 6 and a laptop with any editor.
While you wait, then install oc: [sudo] npm i -g oc


Coding, technology, conferences
London, UK

With me today:


Why are we here

  • Introduction
  • Quick demo
  • Workshop
  • Happy ending


Services as interfaces: why?

What is an OpenComponent?

    <oc-component href="//">
      <div>hello John Doe</div>
    <script src="//">

Still the same component

$ curl

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

Components in action

Components in action

The header example

$ curl -H Accept-Language:ja-JP

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

Demo time!

Getting started

$ npm install -g oc

$ mkdir components && cd components
$ 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

// template.jade


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

Links and resources


Should I use OC?

Enables people to create new components independently and publish them

Flexibility (unopinionated)

Granular ownership




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

Thank you

follow me on twitter - @matteofigus