Blog

One codebase, every screen: how our apps reach web, iPhone and Android

1 min read
One codebase, every screen: how our apps reach web, iPhone and Android

When people hear that an app needs to be on the web, on iPhone and on Android, they often picture three separate apps, three teams and three sets of bugs. That is one way to do it. It is not how we build.

Web first

Each of our apps starts as a web app. OwnSites, ProfVault, Wanderply and Homeroom are all built on Ruby on Rails with Hotwire, which sends ready-made pages to the browser and updates them as you use them. A web app can be tried by anyone with a link, tested on every device, and fixed the same day a problem is found.

Thin native shells

When an app belongs on a phone, we wrap the same web screens in a thin native shell using Hotwire Native: Swift for iPhone and Kotlin for Android. The shell supplies what only a native app can, like push notifications, the home-screen icon and native navigation. The screens themselves still come from the web app.

Homeroom runs on the web and in native iPhone and Android shells built from the same screens.
Homeroom runs on the web and in native iPhone and Android shells built from the same screens.

The practical result: when we change a screen, the change reaches the web, iPhone and Android together, usually without anyone downloading an update. The OwnSites provider app, Wanderply and Homeroom all work this way.

Browser extensions where the work happens

Some apps are most useful inside other websites. ProfVault fills in job applications on the sites where people apply, so it also ships as browser extensions for Chrome, Firefox and Safari, talking to the same backend as its web and phone apps.

The right tool when the job is different

Not everything fits one pattern. Brandreel renders video, so it is built with Next.js and Remotion, which describe each frame of a film in code. We choose the stack for the job, then keep it as small as the job allows.

Brandreel renders video, so it is built with Next.js and Remotion instead.
Brandreel renders video, so it is built with Next.js and Remotion instead.

Why this matters if you are building an app

Fewer codebases means fewer places for things to go wrong, faster changes, and lower running costs. It also means your app can start on the web, prove that people want it, and add phone apps later without starting again.

If your idea needs to be on every screen, tell us about it. We will tell you which screens it needs first.