Productizing Backend Driven UI
Today many companies are exploring different ways to validate their ideas faster and improve their time to market. The ones that managed to grab my attention on this topic are Airbnb and Spotify.
In 2016, John Sundell presented a talk titled Backend-driven native UIs, where he described the approach Spotify took to build fully native UIs using JSON components. This enabled their team to test new ideas, iterate and react to user data faster.
At GraphQL Summit Airbnb’s Adam Neary spoke about how they’re using GraphQL to improve their time to market by shifting most of the heavy lifting to the server without compromising quality.
Last year I started working on a product that’s been in my head for some time that tries to address these problems at scale.
Introducing Engine
Engine is a server-powered rendering engine for mobile applications. It enables product teams to build, test, and iterate on fully native applications instantly.
Engine uses templates to define what the server needs the client to render. The templating engine is JSON-based and it can connect to any 3rd party JSON API.
The native component can be included in an existing native app to power one flow or multiple areas within your application.
How does it work?
The product is made up of three main components:
- Engine Core The heart of the renderer.
- Engine API Takes care of versioning, caching and handles templates for clients.
- Engine Native Our cross-platform mobile rendering engine.
To use engine within an app you’ll need to set up three things: Configuration, Data & Templates.
Configuration
The configuration is used to define brand details such as typography, colors, padding, etc. It also references the templates and their version.
Versioning allows you to switch the base configuration, templates, and data resources on-demand without changing anything within the native app.
Data
Data definitions serve as template data sources, they provide templates with access to content from other JSON APIs.
Requests passing through Engine are signed with JWT (RS256) making it easy and safe to verify request authenticity.
Responses can be cached by specifying age and key.
Templates
Templates define what the view should render, this can be a simple list showing names and avatars or a full-blown user profile page with posts, recent activities, etc.
The most important items within a template are Components & Data
Components
A template is made up of one or more components. Components define the basic structure of a view, this is used by Engine Core to understand what to render.
Data
Data can hold one or many references to data definitions, this is how data is referenced on a template.
Combining components with data
The example below is a real-world application of how you would build a list of news articles.
How flexible is the templating engine?
Engine doesn’t rely on rich components to build UI’s, instead, it uses primitives like blocks & lists. By combining these you can create a variety of user interfaces unique to your brand.
Built using Engine
Who is this for?
Engine is ideal for content-driven applications that need the flexibility to test new ideas efficiently and at runtime. Teams can hook different configurations with existing A/B testing tools and validate ideas without having to release an app update.
Conclusion
Right now we’re looking for launch partners, if your company is working on a product that can make use of this technology let us know and we’ll schedule a demo with you.
Update
Since this post still generates a substantial amount of traffic, I thought it would be fair to share an update on the events that followed. You can read more about this here.
