Web-native mobile app frameworks: How to sort through the choices

When a team works mainly with web technologies (JavaScript, HTML, CSS) it doesn’t always have the time or the skill set to learn Java, Swift, or Objective-C and build mobile apps in the native official languages for Android or iOS. But that's why web-native mobile application frameworks exist—so that developers can build mobile apps with the web languages they already know. Plus, most mobile app frameworks let you build the app once and deploy to both Android and iOS with few code changes.

The problems are that, with so many cross-platform solutions and frameworks available, the menu is quite confusing and different tools deal with various combinations of layers in the application. Luckily, I have some experience using and teaching these web-native mobile application frameworks. If you're not aware of the main frameworks, I'm going to help you sort through all of them, and if you're already familiar with this ecosystem, you should find this updated information about the frameworks and the current state of tooling to be very helpful.

Distribution: The first determining factor for choosing a framework

The first big decision you need to make about your app is how to distribute it:

1. Through the app stores (Android's Play Store and Apple's App Store)
2. Through a browser

Going through the browser may be mandatory if your app doesn’t follow the stores’ rules, or it may be a product decision if you have sufficient traffic to your website.

If you decide to distribute your app through app stores and you're not using the native languages and tools, you have two options:

1. Use a native stack (conversion)
2. Use a web stack (via WebView)

A native stack will generate native code—transpiled from the language you wrote the app with—that will be executed on the platform, usually using the same native UI controls. The web stack, on the other hand, will use a web engine to render elements and execute the logic in a browser instance (without the tools and search bar around it), even if it’s contained in a native package that will be distributed from the app store.

Using the web stack approach

For the web stack option, you'll use tools that leverage the WebView to render your app's contents. The WebView is a native control in the mobile OS that renders HTML, CSS, and SVG and executes JavaScript code. It’s like a browser embedded in a native app. The apps in this category are usually known as hybrid apps, or native web apps.

Just as with any basic web app, HTML and CSS are used for the presentation, JavaScript is used for the logic, and several web-based APIs are used for data storage, data transfer, and hardware access.

webapp-architecture.png

When the web stack doesn’t offer a solution for one specific situation, you can always rely on pure native code (Java, Swift, or C#) and create a bridge between the web stack and the native stack. The final package will contain both the native code and the web-based code.

Windows 10 supports the creation of universal apps using JavaScript and web technologies with the official WinJS framework and Visual Studio (even with the free Community edition). For Android and iOS you can use the WebView manually or the open-source Apache Cordova framework.

While this article is focused on mobile apps, it’s worth mentioning that if you want to create desktop apps with web technologies, you can use the open-source Electron, created by the GitHub team.

Apache Cordova and PhoneGap

The most commonly used framework available for this kind of app is Apache Cordova, also known by its main distribution: Adobe PhoneGap. Apache Cordova is a tool that will let you package your web app as a native app while creating a bridge with native code, known as Cordova plugins. With Cordova plugins, you can add features that are not available on the web stack, such as social network login, QR code readers, push notifications, or in-app purchases.

Apache Cordova is only responsible for the packaging and the plugins; the rest is up to the web stack. That means that questions such as “How do I insert a button in Cordova?” don’t really have an answer. You don’t insert a button in a Cordova app; you just do it with the web stack—HTML, CSS, and JavaScript.

The framework is open source, and several major companies, including Adobe, Intel, and Microsoft, support it with their developers. It has a free CLI (command-line interface) tool where you can control the entire packaging process. Several companies offer other tools on top of it, such as Adobe PhoneGap Developer App, Intel XDK, or Visual Studio for Apache Cordova.

The build toolchain for native-web apps

While Apache Cordova apps in the past were created manually from Xcode or Android Studio (the native IDEs for iOS and Android, repectively), using CLI tools or Cordova-specific IDEs are the best ways to build hybrid apps today.

You have two options for the content of the package

1. Work directly with the files that you will package.
2. Work with intermediate files that will be “compiled” into the final files that will be packaged into the native container.

For the latter case, you can even use other languages, such as TypeScript, ECMAScript 6, or JSX (JavaScript Extensions) that then will be compiled into standard JavaScript before the package is created. That’s why some of the newer frameworks available are supporting these meta languages to improve developer’s productivity.

High-performance WebViews

Two of the main problems with using the web stack are feature fragmentation in browsers' JavaScript engines and bad performance on old WebVews. The biggest problem is on Android. Apache Cordova relies on the installed WebView on each device, so it’s not going to help in this case. Fortunately for us, there is an open-source project from Intel, called Crosswalk, that lets you embed or install a new Chromium-based WebView for your hybrid application, letting you access new APIs and have better performance even on older devices. It’s compatible with Apache Cordova and available as a free plugin. If performance and latest APIs are important to you, you should consider adding it to your tool chain.

Choosing the right framework for your native-web mobile app

There are several frameworks available that will sit on top of Apache Cordova or other WebView-based packaging solutions. These frameworks can help with:

• The language stack (jQuery, Dojo)
• The navigation stack (MVC frameworks)
• The UI layer (Bootstrap, Foundation)

Some frameworks cross multiple layers.

Most apps relying on the web stack will use the Single Page Application (SPA) pattern, which means, instead of using several HTML documents linked through hyperlinks, it’s just one HTML document that is loaded and then dynamically changes its content with unobtrusive JavaScript (i.e., Ajax).

Apache Cordova will not help you with this pattern, so you need to use plain JavaScript or one of the frameworks available for it. AngularJS and React are the most prominent frameworks today. These frameworks will control the views (visual screens), navigation between them, the app’s flow, and the interactions. Sometimes they even manage the data communication, but they don’t create the visualization. You will need a UI framework on top of this framework, or you will need to use your own custom HTML and CSS.

For UI frameworks, you have several options that will help you get close to a high-performance, native-like UI with rich controls and behavior.

There are three types of UI frameworks:

• Classic (based on standard HTML markup, pure <div>'s, and CSS classes)
• Web components-based (based on custom HTML elements)
• JavaScript declaration-based

The following table shows some of the open-source libraries and frameworks available today and what layers of the web stack they help with:

There are some libraries, such as Onsen, Bootstrap, and Polymer, that offer just the UI components. They don’t offer routing, navigation, or MVC patterns. These frameworks can be used with pure JavaScript code or with other MVC frameworks such as AngularJS 2. Other frameworks such as Framework7 (and older ones such as jQuery Mobile or Sencha Touch) include routing and navigation optimized for a mobile app.

In terms of disruptive solutions, you can start looking at ReactJS, a library that creates the UI based on components that are defined within JavaScript using JavaScript code or JSX (an extension to the language allowing users to quote HTML-based syntax inside the code). Facebook created it, and it usually works with an ecosystem of other libraries that will help the rest of the app, such as Redux or React Routing.

AngularJS is a complete framework built by Google. Recently it rebuilt the framework in Version 2 for mobile performance, but with breaking changes for AngularJS 1 users. It defines how a web app should be created, including controllers, routing, data binding, and views. However, it doesn’t define how to render the views, so you usually mix AngularJS 2 with a UI framework, such as Ionic or Framework7.

On the other hand, Ionic Framework is trying to offer an all-in-one solution, including a UI framework that is based on Angular and a CLI that is based on Cordova. So if you want to use Ionic, you will get all the tooling in one package. Also, the company behind the open-source framework offers some cloud-based solutions for your app, such as authentication and push messages.

Using a native stack approach

Using the web stack has its advantages: plenty of open-source frameworks available, code sharing between the web and the app, and the ability to take advantage of your current web language skills. However, you also have some challenges regarding fragmentation, compatibility, performance, and memory usage, because you are using a full web-rendering engine loaded just for your app.

The alternate option I mentioned earlier is a native stack approach, which still uses web technologies and compiles those apps into native code, but it doesn't use the WebView for rendering. Native stack solutions create apps that are sometimes indistinguishable from an app created with the platform's official IDE and language.

This line of frameworks also includes ReactNative from the Facebook team, NativeScript, and Appcelerator. These frameworks usually don’t rely on HTML markup. They only rely on JavaScript or TypeScript.

ReactNative is an open-source solution that uses JavaScript and JSX to create native apps for iOS and Android from two different codebases. While you can share code between both platforms, the views and design will use native controls for both platforms, so the code is different. It can define styles using CSS, and you will use JSX markup to create layouts based on native components available for iOS or Android.

NativeScript lets you create native apps using JavaScript or TypeScript for iOS and Android (Windows support to be added in the near future). It’s an open-source solution supported by Telerik. The UI is defined in an XML format that will match native controls on every platform, and all the native APIs are available from JavaScript. Starting with NativeScript 2.0, there is optional beta support for using AngularJS 2 inside NativeScript, even if there is no web view running inside the app.

Appcelerator is an older JavaScript-to-native mobile solution and also the only one mentioned in this article that is not open source or free. It has an IDE with an app designer available and includes enterprise solutions offered as part of its paid plans.

Xamarin is another solution for the native stack approach, but its big difference is that, instead of compiling JavaScript and other web languages to native mobile languages, it compiles from C#, meaning .NET developers can now take their skills and build cross-platform apps on Android and iOS without leaving their preferred ecosystem. Xamarin is open source, and the company behind it was recently acquired by Microsoft.

Making your decision

As with most tooling decisions, it comes down to your team's skill sets, the level of performance you need, and the user experience you want to provide. Native stack approaches are often more performant, but the ease of use and larger community support with web stack solutions is more important for some.

All the tools mentioned in this article are constantly evolving, which is why updates such as this one are always necessary. You should see more advanced support for web technologies in the mobile space in the next few months and years. Cross-platform frameworks, regardless of their approach, are here to stay as long as they can provide the user experience that customers want without the overhead of multi-language and multi-platform development.

Image credit: Flickr

Keep learning

• Take a deep dive into the state of quality with TechBeacon's Guide. Plus: Download the free World Quality Report 2022-23.

• Put performance engineering into practice with these top 10 performance engineering techniques that work.

• Find to tools you need with TechBeacon's Buyer's Guide for Selecting Software Test Automation Tools.

• Discover best practices for reducing software defects with TechBeacon's Guide. 

• Take your testing career to the next level. TechBeacon's Careers Topic Center provides expert advice to prepare you for your next move.