Web-native mobile app frameworks: How to sort through the choices
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:
- Through the app stores (Android's Play Store and Apple's App Store)
- 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:
- Use a native stack (conversion)
- 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
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.
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.
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
- Work directly with the files that you will package.
- Work with intermediate files that will be “compiled” into the final files that will be packaged into the native container.
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.
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)
The following table shows some of the open-source libraries and frameworks available today and what layers of the web stack they help with:
Navigation / Controller
Data binding included. TypeScript support.
Navigation with other frameworks in the React ecosystem. TypeScript support.
CLI and IDE
Uses AngularJS for navigation; it has some cloud-based services on top of the framework.
Onsen 2.0 offers an Angular version and a React version.
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.
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