As a developer with personal projects, I rarely commit to dropping loads of cash on my pet ideas. I prefer to hack something together rather than pay for a tool to shrink my development time. As a cost risk, I consider time less valuable than my limited supply of discretionary funds— that is, until my side-app hits it big and I rake in the billions. So this list includes open-source and free cross-platform mobile app development tools that any developer can use immediately.
Note: Some of the free cross-platform mobile application development tools are also available as paid plans, but all provide free and unlimited production use.
1. Apache Cordova
Apache Cordova is first on this list because it powers the build process for most free cross-platform mobile application development tools, and many that aren't free, for that matter. Formerly known as PhoneGap, Adobe released Cordova as an open-source project which, as of this writing, has received contributions from BlackBerry, Google, IBM, Intel and Microsoft.
The term WebView refers to a native interface element that permits mobile developers to render web content in their application. In web development, we use Iframes; in mobile development, WebViews.
Pros: Cutting out the middleman. By working directly on top of Cordova, developers have access to the latest updates from Apache’s team. With each version, Cordova gains access to critical OS enhancements. These enhancements may improve Cordova’s performance and provide it with access to new APIs. Build right on top of Cordova and you’ll never miss out.
Cons: Cordova is UI and framework-agnostic. It leaves all the design and architecture decisions to the developer. This may not be an issue if you’ve built mobile-first websites before. But if this is your first time working on a mobile application, consider a framework that does a bit more hand-holding. And according to StackOverflow’s developer survey, developers dread working with Cordova above all others.
2. Adobe PhoneGap
Yes, the actual PhoneGap product is separate from Apache Cordova. As stated above, PhoneGap was originally the basis for Cordova, but is now a standalone product powered by Cordova—times they are a changin’. The primary benefit Adobe provides with PhoneGap is a GUI build system that abstracts the command line messiness of Apache Cordova.
By providing an interface to build Cordova applications, PhoneGap simplifies the process and gets developers working sooner. PhoneGap also offers an application server you can run from your machine to host your apps over the network. The server accelerates the build→run→revise loop so developers can spend more time coding and less time running, compiling, and deploying manual updates.
Pros: Simplifies Apache Cordova by providing a GUI build system and template projects to help kick-start hybrid development (one of those templates includes another tool on this list, Framework 7). PhoneGap also has the continued support of Adobe and hundreds of open-source developers.
Cons: PhoneGap does not have a strong opinion on how to build applications. So while it simplifies Cordova, it will not hold your hand much further.
Hmm: PhoneGap, while slim, has a code profile that sits above Cordova. Some developers complain that this results in poor application performance. The merits of this complaint are difficult to assess. I believe that performance issues stem primarily from the specific applications, not the framework itself.
3. Ionic Framework
In the previous section, I revealed that PhoneGap is a thin layer above Apache Cordova that improves the hybrid development experience without forcing an application paradigm or structure onto the developer. For a similar yet more opinionated tool that provides an excellent development experience, consider the Ionic Framework.
Ionic combines Angular with its own UI library to provide a cross-platform mobile application development experience that many web developers will find familiar. They find it so familiar in fact, that Ionic has become synonymous with cross-platform hybrid development. More so than PhoneGap, actually. However, Ionic’s mobile build process relies on PhoneGap and therefore also inherits all of Apache Cordova’s plugins.
Pros: Ionic is the world’s prevailing hybrid cross-platform solution because it allows web developers to continue using the front-end framework many of them are familiar with: Angular. By incorporating Angular into their framework, Ionic eases the transition from web to mobile development. Ionic also supports Progressive Web Applications that run in Chrome, and hybrid desktop applications enabled by Electron.Cons: At current pricing structures, developers on Ionic’s free Kickstarter plan are limited to development builds. And development builds are restricted to debugging on one’s own device: deploying development builds to either app store is not possible. To publish their applications, developers must upgrade their subscription.
4. Framework 7
Framework7 is another one of the free cross-platform mobile application development tools powered by Apache Cordova. Framework7 provides an application framework (built on Vue.js) and a host of ready-made interface elements that mimic native interfaces. This tool recreates standard iOS designs and Google’s Material Design patterns to replicate the “native look” mobile users expect. Here’s an example of how Framework7 helps developers make carbon copies of iOS designs:
Framework7 also allows developers to customize the interface — these built-in themes are merely guidelines that can shorten development time.
Pros: Framework7 adds two critical layers to Cordova application structure and interface elements. If you’re willing to sacrifice a little control, you will gain plenty of out-of-the-box capabilities with Framework7. These features will accelerate your development cycle when compared to working with Cordova directly.
Cons: This is an open-source project and a recent one, at that. There is no guarantee the Framework7 community will remain active and consistently incorporate the latest designs from Cupertino and Mountain View, potentially leaving applications looking out-of-date. Framework7 is also highly opinionated. If you’re not a fan of Vue or are unwilling to learn, you will have to look for another tool.
5. Apache Weex
Like Framework7, Weex provides UI components out of the box. But these elements translate to their native counterparts during interpretation, thereby boosting performance considerably. And like Cordova, Weex has a strong community of independent developers that contribute new design and interface plugins to keep the platform current.
Cons: Unlike Cordova, Weex is not fully endorsed by the Apache Software Foundation. It is currently an incubation project. And developers will not be able to port apps written on Weex to other platforms. So if Weex fails to acquire endorsement, developers may be forced to rewrite a considerable portion of their apps in the future.
6. React Native
NativeScript also lets developers get a feel for the end product by providing interface demonstration applications for Android and iOS. Both applications were generated from a single codebase, proving that NativeScript is a WORA solution capable of achieving high performance on both platforms.
Cons: Compared to React Native, NativeScript applications have not experienced the surge of daily users bombarding their mobile front-ends. One cannot point to a single application built on this tool that millions of users access each hour (like Facebook with React Native). If you anticipate your application to receive immense traffic, there’s no case study that validates NativeScript as a viable option among the free cross-platform mobile application tools out there (but you could be the first!). And like React Native, NativeScript uses a custom markup to design its interfaces—no CSS3 or HTML5.
Not only does Flutter bolster Google’s own programming language, it also remains intimately tied to another Google product: Material Design. If you’re willing to do things the Google way, you will reap the rewards. Flutter is the only open-source multi-platform solution supported by a company that also happens to run a major mobile platform. Apple has no such product, and Microsoft’s Xamarin tool is less permissive.
Pros: A non-zero number of Google’s mobile applications are built on Flutter. And if Flutter is good enough for the corporate king of mobile, it’s probably good enough for you. The Dart language and its mobile run-time approach native performance speeds; Google wouldn’t settle for less. And by using Google’s tools, you can build an app that feels familiar to people who use Gmail, Google Maps, and other applications that incorporate Material Design.
Cons: Flutter is an alpha product. And with a fluctuating mobile landscape, there’s no guarantee it will reach version one or that Google will continue to support it (though anecdotal evidence suggests they will). Additionally, most developers are not familiar with Dart, so Flutter comes bundled with a language you may have to learn before getting started. And while Flutter allows custom widgets and styles, it remains heavily biased toward Material Design.
We took a left turn in this list of free cross-platform mobile application development tools with Flutter, but now we’re going to take a u-turn into outer space with Jasonette. If you’re a web developer, you’re familiar with server-side rendering. That process generates the markup on the server and the browser downloads the completed page directly from the cloud. Jasonette functions similarly: your server provides a JSON file for each mobile screen the user interacts with.
Pros: Jasonette is as native as you can get—both layouts and logic use on-device APIs and runtimes. And this JSON-based framework may significantly reduce the size of your mobile code base.
Cons: For non-static applications, your server-side implementation requires added functionality to reply with Jasonette-styled JSON. And Jasonette’s support for embedded logic looks something like this:
Which blends logic and layout into a grotesque, un-testable monster. For large teams, a Jasonette-based application may be too unruly to maintain.
If you have experience working on responsive, mobile-targeted websites or if you already have a working mobile website, ManifoldJS may be the solution for you. Unlike other free cross-platform mobile application development tools on this list, Manifold does not aid your mobile development process in any substantive way. All it does is wrap an existing hosted web application with a native container.
With a command like this,
manifoldjs https://my-website.com -p android
Manifold turns your web application into a native package you can submit to Google Play. Under the hood, Manifold uses the Crosswalk Project to provide consistent WebView performance and capability across all mobile platforms (as do most hybrid tools on this list). So if you’d prefer to build a mobile site or already have one that simply needs a native wrapper, Manifold is your choice.
Pros: Manifold is simple to use and can help you take full advantage of the mobile-first site you already have running on the web. With some tweaks, your web app will run like a native one in a matter of seconds.
Cons: Accessing native APIs is tricky with manifold, but possible. The bigger concern is the lack of an offline mode. Manifold has an “offline feature,” but it merely shows a splash screen to users who attempt to access your application while offline. With Manifold, there is no other option. So if custom offline behavior or cached data is a requirement for your mobile application, look elsewhere.
Reining in the Free Cross-Platform Mobile App Development Tools
You’ve reached the end of the free cross-platform mobile application development tools rope — quite a rope, yes? If you felt the options in this list were too hands-on or perhaps you need a tool that will get your team to market faster, take a look at my cross-platform mobile development guides for small budgets and enterprises.
Thanks for reading! Have you tried any of the free cross-platform mobile application development tools on this list? Are you excited to try a new one out? Let me know on Twitter.