The Twelve-Factor Front-End App

You might have heard of The Twelve-Factor App, a methodology for building reliable, scalable web applications. There are many platforms that make it possible to deploy twelve-factor back-end web services. At Divshot, we're building a platform for the twelve-factor front-end.

I. Codebase

One repo is one Divshot app, simple enough. Divshot's command-line tools work right along-side your version control system. You can deploy your app ten times or ten thousand, each deploy gets a unique version and can be rolled back to at any time.

II. Dependencies

Divshot is made to be used in conjunction with front-end build chains powered by npm and package managers like Bower. Because Divshot caches static file content, there are no external dependencies that might affect your running code.

III. Config

Every Divshot app can be configured using JavaScript environment variables for data like Mixpanel API keys and external service URLs. In addition, every Divshot app ships with multiple environments: development, staging, and production, each of which can be configured independently.

IV. Backing Services

A twelve-factor front-end is completely decoupled from its back-end data services. Divshot makes it equally simple to work with third-party providers like Firebase or custom code deployed to other cloud platforms. In combination with environment config, these services can be swapped out instantly as needed.

V. Build, release, run

Divshot provides instant switch-over between deployed versions. No new code will run on your app until all code and environment configuration has been successfully deployed and accounted for. Integrations with build tools like Travis CI and Wercker give you even more control over your build and release cycle.

VI. Processes

In sophisticated browser applications every user who opens your site is running their own isolated process. Persistence is handled either by external back-end services or offline browser storage. Fortunately, Divshot doesn't really have to do any work to make this happen!

VII. Port Binding

A Divshot front-end application can be seen as a coordinating agent, fetching data from and sending input to one or more back-end services. This can be done using HTTP as well as protocols like Web Sockets and WebRTC.

VIII. Concurrency

High-Performance Divshot apps are deployed to a global network of CDN edge servers. These servers each cache the static file content for a Divshot app and purge content for each new release. Files are the ultimate shared-nothing architecture, and Divshot scales easily both horizontally and vertically.

IX. Disposability

Divshot applications can be provisioned instantly and deleted just as quickly. It takes less than 30 seconds to create and deploy a new application. We manage all server processes including caching and failover so that you don't have to.

X. Dev/prod parity

Divshot's web processes run Superstatic, an open-source app server that is bundled with Divshot's command-line tools. All Divshot platform features, including JS environment variables, can be run locally. In addition, having multiple environments per application allows you to confirm that everything looks right before promoting to production.

XI. Logs

Divshot aggregates basic access information about your app as well as integrating easily with third-party services like Google Analytics and Mixpanel.

XII. Admin processes

Front-end applications have no admin processes, per se, but building a twelve-factor front-end also enables you to build an admin system completely removed from what your users can see. Your admin system can speak to the same back-end services but present and persist data in a different manner.

Twelve-factor platforms encourage rapid iteration and simple scalability. Back-end applications have had these platforms available for years. Today, many front-end applications are more sophisticated than the simple back-end data stores to which they connect. It's time for front-end platforms to take the same path.