With the global pandemic increasing remote work and forcing the acceleration of enterprise digital transformation, IT leaders are increasingly turning to low-code platforms. According to
Gartner, Inc., the worldwide low-code development technologies market will grow 23% in 2021, and it’s not hard to understand why. By simplifying the application development lifecycle, low-code platforms can increase speed-to-market. They also address the shortfall of niche and in-demand developer skillsets by opening development up to a broader pool of technical talent.
Within the low-code space, there are many vendors with offerings tailored for different application domains. For example:
- Mobile: Simplification of cross-platform mobile app development.
- Back end: Simple definition, deployment and management of back-end capabilities such as storage, user authentication, API and business logic definition.
- Machine Learning (ML)/Artificial Intelligence (AI): Streamlining training and deployment of ML models for a set of common use cases, such as object detection and image and text classification.
- Full stack: Native mobile and web client applications with comprehensive back-ends that include storage, business logic, automation, ML capabilities and integration with a wide range of third party data sources, APIs and SaaS platforms.
My team has a particular interest in mobile development. Recently, we’ve been exploring which open-source tools we could use to build a platform supporting low code cross-platform mobile app development.
React Native as an enabler
React Native has emerged as the preeminent framework for developing performant cross-platform native mobile apps. React Native also supports progressive web apps through the
react-native-web package, allowing a single application code base to target iOS, Android and web front ends. Prior to the emergence of React Native, cross-platform development was limited to hybrid web apps through platforms such as
Cordova.
An alternative cross-platform framework is
NativeScript, which provides access to native APIs from JavaScript directly, and has support for the major JavaScript frameworks, including Angular, Vue and React. NativeScript is also open source.
The app builder user experience gap
For many, the existence of an app builder — a kind of "drag and drop" tool for defining the user experience, data models and business logic — is what makes a platform "low code." App builders typically allow the developer to:
- Define app screens and populate them from a component library, defining responsive layout behavior.
- Define their own components, including properties and event handling.
- Manage application state in response to component interactions, including navigation, persisting and fetching state from the backend data store, and connecting to third party REST APIs and other tools and platforms.
Developers can use the underlying application model that the app builder creates to generate application code, which can be built and served for a near-real-time preview.
An open-source, mobile-oriented app builder that can export to React Native or NativeScript would provide a route to a fully open-source mobile low code application builder. However, there is somewhat of a gap here in the open-source domain. Because there are few mobile app builder options in the open-source domain that target React Native or NativeScript directly, the startups that offer attractive web-based mobile app builders for these platforms have a competitive advantage.
That said, there are a few interesting projects that are close to what might be needed to need low-code cross-platform mobile app development needs. Let’s take a quick look at them:
Pagedraw
Pagedraw was a startup focused on build a React component builder tool. The start-up has shut down, but they have open-sourced their code. The Pagedraw tool allows you to define React app screens and components, including props handling. However, it doesn’t allow definition of application state or navigation, so you’ll still need to code this functionality manually. And, of course, it’s React, not React Native. However, Pagedraw does what it does pretty well, giving a decent visual environment for defining your app screens and React components. It also supports import from design tools Sketch and Figma.
Teleport HQ
Teleport provides a good web UI builder. While it’s not open-source, their specification of a
User Interface Definition Language (UIDL) is unique in that it’s a JSON-formatted, language-neutral way of describing a UI that you can use to generate code.
Teleport has a number of open-source code generators for producing component and project code from UIDL application definitions in a number of different formats, including React, React Native, Vue, Angular, Preact and Stencil. At the time of writing, Teleport only enables React Native support at the component level but not at the project level. Certainly, those writing their own UI builder might consider adopting support for the UIDL format so they can tap into, and potentially extend, the range of open-source code exporters available.
webcodesk
Webcodesk is an app that allows the developer to create React apps using a visual editor that can define pages from components and create data flow logic between components. Interestingly, rather than generate the app code, it generates a JSON application model that configures a react-app-framework. This creates pages and routes and makes containers for Redux from a set of provided React components.
However, you still need to understand how the React components and functions are connected together in the app builder, low-code developers without knowledge of this process could find fitting the pieces together confusing. Nonetheless, the implementation approach here is certainly interesting.
Conclusions
While there is solid open-source enabling technology for cross-platform app development in the form of React Native, NativeScript and some app builder tools, the latter are mostly targeting general web application dev through React. There is a great need for a good mobile-oriented open-source app builder UI targeting React Native or NativeScript. Should such a solution become available, low code mobile application development using an open-source stack may actually become a reality.
