Building web applications together, faster.

While microservice architectures allowed teams to scale delivery of independently deployable services, most frontend layers are still run as monolithic applications. Similar to server-side applications, frontend layers often grow into large monoliths that are difficult to maintain and evolve.

The idea behind micro frontends is to enable multiple teams to work seamlessy together by fostering end-to-end ownership of independently developed, tested and deployed features.

Think about UI as the composition of features which are maintained by independent teams. These teams could be cross-functional allowing them to develop such features end-to-end, from a database to user interface and independently deploy them.

Components

Small, immutable, units of universal code mainly consisting of html, javascript and css. They can optionally contain some logic, allowing a server-side node.js application to compose a model that is used to render the view. After rendering they are pieces of pure html to be injected into any html page.

Learn more

Template system

OC is unopinionated about components and their underlying client-side JavaScript stack. The template system allows for support of any client-side technology, hiding away all the configuration complexity while avoiding specific UI framework lock-in.

Learn more

Registry

The registry provides a rest API to consume, retrieve, and publish components to a library. When components depend on static resources (such as images, css files, etc.) these are stored, during packaging and publishing, in a publicly-exposed part of the library that serves as a CDN.

Learn more

CLI

The CLI tool allows developers to create, develop, and test components locally.

It also allows publishing of components to your registry.

Learn more

Client libraries

Multiple libraries are available, allowing clients to consume components on different environments and platforms. Depending on the library, clients are normally able to consume both unrendered components and rendered components.

Learn more

Open-source

OpenComponents is an open-source, "batteries included" micro frontends framework. Born at OpenTable in 2014, it matured over the years into a battle tested solution currently used to deliver micro frontends at scale by fast growing companies around the world.

Get started with OpenComponents

Before starting make sure you have:

An account on Heroku
An S3 bucket on AWS

#1 - Deploy the registry to Heroku

Click to deploy to Heroku - deploy your OpenComponents registry

#2 - Build your first component

Install the OpenComponents CLI

$ npm install -g oc

Create your first component

$ oc init my-first-component

Develop/test locally by starting a local dev registry

$ oc dev . 3030

Your component will be available at:

endpoint: http://localhost:3030/my-first-component
info: http://localhost:3030/my-first-component/~info
preview: http://localhost:3030/my-first-component/~preview

#3 Publish the component to the registry

Add the registry using the CLI

$ oc registry add http://my-registry.on.herokuapp.com/

Publish your component

$ oc publish my-first-component --username=YOURVALUEHERE --password=YOURVALUEHERE

Your component is now published: http://my-registry.on.herokuapp.com/my-first-component

Who's using OC?

OC is used by fast growing companies around the world to serve microfrontends at scale