Hyperview Brings CI/CD to Mobile Using React Native
When Instawork director of engineering Adam Stepinski joined the company in 2017, the team there was using React Native to build a cross-platform app for both Android and iOS. In between quality assurance and the app store review process, the fastest they could iterate was with a weekly release. On the web end of things, however, changes could be pushed out to users immediately, allowing more of an agile approach to development.
“What can we do to break out of this weekly cycle?” asked Stepinski, recalling his thought process in an interview with The New Stack. “Can we have the same experience on mobile that we have on the web, where we basically define and control the interface from our back end, and anytime we deploy the back end, users get the benefit from the new UI?”
He began looking around for a solution. Finding none that fit his needs, he began building what is now Hyperview — an open source project that offers a thin React Native client for developing server-driven mobile apps using a hypermedia approach. Stepinski said that he took inspiration partly from Intercooler.js — now known as htmx — by adapting the approach of providing a server-driven user interface to mobile, rather than the web.
While other companies often solve this same problem by providing a wrapper around Webview, using the same content for both the web and for mobile, Stepinski said he didn’t want to use this approach.
“There’s still a gap between the experiences that you can build using web technologies and WebKit, versus what the mobile app platforms provide for you these days,” said Stepinski. “Smooth navigation, being able to deep-link to different parts of the app, incorporating things like taking videos and photos in a really smooth way — you can always kind of tell if you’re just using something that’s a web app, even if it’s progressive, versus something that’s a native app experience. We were really aiming for that native app experience here.”
Hyperview does this by using the thin client to fetch Hyperview XML (HXML), an XML-based format to describe native mobile UIs that supports elements such as headers, scroll views, lists, and text fields; as well as styling and a behavior syntax for user interactions like touches, gestures, and input interaction — all without the need for scripting.
By using this approach, said Stepinski, it allows developers to use whatever language they like on the backend. While Instawork uses Django, any backend language — such as Node.js or Ruby on Rails — could be used for the logic layer, which also allows for reuse between mobile and web when it comes to the business logic.
“The same way that we think wrapping a WebView is not a great mobile experience, I think wrapping a mobile experience is not great for desktop and in the browser,” said Stepinski. “But the fact that all of our logic is contained on the backend side, it means that we can share the same backend logic and then either render out using templates to HTML, or use that same logic to render out to the Hyperview XML.”
With Hyperview, declares the project’s description, “true CI/CD is finally attainable for mobile development.” Stepinski added that by moving all of this logic to the backend, “you can just follow the same CI/CD process that you have on the web.”
Hyperview also affords developers another benefit, by keeping app size down — since much of the logic that might otherwise bloat a mobile app is kept on the backend. Users with older mobile devices then don’t have to worry about your app taking up too much space — Stepinski noted that the Instawork app falls in the under-30MB category — and even as functionality is added, the app size can remain the same.
Right now, Hyperview powers the Instawork app and other companies are using it, but Stepinski says they have a few things left before they will officially declare v1.0.
“We have some goals in 2022, to get to an official v1.0, where we sort of clean it up and deliver all the core functionality that we think is needed for anyone to be able to go out and build mobile apps with Hyperview,” he said. “The big thing that I’m personally working on as [a] part of that is improving how our form and user inputs work with real-time validation.”
Beyond that, Stepinski also noted that Hyperview is extensible — something not currently formally noted. Instawork itself, he said, has developed 20 or 30 components that are not part of the open source project, but have the potential to be offered as part of a library of extensions.
While Hyperview may not bear the v1.0 label, the project itself boasts of its own transformative ways: “Hyperview has been a total game-changer for how we work at Instawork. The improvements to our developer productivity have allowed us to ship new features more quickly, improve our app’s performance, and minimize context switching between mobile and web development. For fast-changing networked mobile apps, Hyperview offers an unbeatable set of tradeoffs,” states the project’s introduction.
