Hyperview Brings CI/CD to Mobile Using React Native – The New Stack

When Instawork engineering director Adam Stepinski joined the company in 2017, the team was using React Native to build a cross-platform app for Android and iOS. Between QA and the App Store review process, the fastest they could iterate was with a weekly release. On the web, however, changes could be pushed immediately to users, allowing for a more agile approach to development.

“What can we do to get out of this weekly cycle? Stepinski asked, 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 every time we deploy the back-end, users get the new interface user ?”

He started looking for a solution. Finding none that fit his needs, he started creating what is now Hyperview – an open source project that offers a React Native thin client for developing server-driven mobile apps using a hypermedia approach. Stepinski said he took some inspiration from Intercooler.js — now known as htmx — 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 web and mobile, Stepinski said he doesn’t want to use that approach.

“There’s still a gap between the experiences you can create using web technologies and WebKit, and what mobile app platforms give you these days,” Stepinski said. “Smooth navigation, the ability to deep link to different parts of the app, incorporate things like taking videos and photos very smoothly – you can always tell if you’re just using something which is a web app, albeit progressive, versus something that’s a native app experience. We were really aiming for that native app experience here.

To do this, Hyperview uses the thin client to retrieve Hyperview XML (HXML), an XML-based format for describing native mobile user interfaces that supports elements such as headers, scroll views, lists, and text fields; as well as styling and a behavioral syntax for user interactions like touches, gestures, and input interaction – all without the need for scripts.

Using this approach, Stepinski said, allows developers to use whatever language they want on the backend. While Instawork uses Django, any backend language – such as Node.js or Ruby on Rails – can be used for the logic layer, which also allows reuse between mobile and web when it comes to logic job.

“In the same way that we think wrapping a WebView isn’t a great mobile experience, I think wrapping a mobile experience isn’t great for desktop and in-browser,” said Stepinski. “But the fact that all of our logic is contained on the back-end side means that we can share the same back-end logic and then either render using templates in HTML or use that same logic to render Hyperview XML .”

With Hyperview, the project description states, “true CI/CD is finally accessible for mobile development.” Stepinski added that by moving all that logic to the backend, “you can just follow the same CI/CD process that you have on the web.”

Hyperview also gives developers another benefit, reducing app size, because much of the logic that might otherwise bloat a mobile app is kept on the backend. Users of older mobile devices then don’t have to worry about your app taking up too much space – Stepinski noted that the Instawork app falls into the under 30MB category – and even if features are added, the application size may remain the same.

Currently, Hyperview is powering the Instawork app and other companies are using it, but Stepinski says they have a few things left before officially declaring v1.0.

“We have goals in 2022, to get to an official v1.0, where we sort of clean it up and provide all the basic functionality we think is needed for anyone to go out and build mobile apps with Hyperview,” he said. “The big thing that I’m personally working on as a [a] part of this is improving how our form and user input works with real-time validation.

Beyond that, Stepinski also noted that Hyperview is extensible, which is currently not 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 an extension library.

While Hyperview may not carry the v1.0 label, the project itself boasts of its own means of transformation: “Hyperview has completely changed the game for the way we work at Instawork. Improvements to our developer productivity have allowed us to ship new features faster, improve our app performance, and minimize context switching between mobile and web development. For rapidly evolving networked mobile applications, Hyperview offers an unbeatable set of compromises,” states the project introduction.

Photo by Essow from Pexels.

Jack L. Goldstein