The github repo is here, including documentation. And check out the demo.

If you went back in time just a few years, HTML5 apps were a distant second to native apps, which were faster, more responsive, more attractive, and offered access to higher-quality and more numerous touch-enabled plugins and libraries. Let me ask you, though: how many of these advantages hold true today? The speed of HTML5 has not been an issue since the day of the iPhone 5s, and thousands of incredible touch-enabled plugins have made their way to GitHub — just check out Slick Slider and PhotoSwipe. Is native kept alive more by momentum now than anything else?

Consider the huge downside of native — the need for completely separate codebases written in different languages. It is difficult to overstate the scale of this problem. If you are a solo entrepreneur hoping to build your idea into a business, strapped for time and resources, are you going to write the same exact app in JS, Java and Swift? What if you want to add some basic functionality like internationalization that touches all parts of your codebase? A change like this now requires three times the amount of work, once for each platform. This is not the development experience I want, and you shouldn’t be satisfied with it either.

As the Ionic Framework for building hybrid HTML5 apps for mobile has gained popularity, it has proven that HTML is cut out for the challenge of apps, and I long assumed that the day native dies, Ionic would be caught standing over the body, candlestick in hand.

Then came the day I started development on my next app.

Ionic is an incredible framework, offering a powerful CLI, solutions for device testing, even a beautiful GUI wrapper for its dev server. It looks nice, with well-designed UI elements, awesome Ionicons and web-components and grid system. You’ll find your answers on stackoverflow, detailed documentation and full-length tutorials. It’s just, I want more. More control, more flexibility. Take web. Despite writing Ionic apps in html, you cannot deploy to the web. So no progressive web apps. And then there is the framework. You’re going to be using Angular 2+, a framework that, well, I just don’t want to learn.

I think it comes down to this. With Ionic, you get irreducible complexity. When it handles everything for you, you lose the ability to remix, extend and hack your own solution. You struggle to roll your own simple script for factoring out shared code between platforms. If you want to use another dev server or deploy script, hidden undocumented limitations will arise to resist you. This is the nature of opinionated platforms.

A Flexible and Powerful Combination

Hackers, here is my solution. It’s small, simple and lightweight, just an opinionated combination of existing libraries. I hope it can help a few of you in a similar situation.

This repo attempts to combine Aurelia, Framework7, Webpack and Cordova to create a simple framework for building hybrid apps. Build pages with Aurelia modules, register routes with a simple javascript object, build off a simple starting point with little-to-no magic or hidden interlocking parts.

Something incredible happens when you take these solutions, each of them so flexible, elegant and capable, and put them together. Each covers the limitations of the others. They work together so well. And despite the ambitiousness of trying to reuse the same code on every conceivable platform, they take on the complexity and make it simple.

Start with Framework7, that framework-without-a-framework. It is beautiful, and unlike Ionic, you will be happy to see your good old friends, divs and classes. I like that. And the fidelity of the animations is next level — this is the frontend mobile framework for perfectionists.

Slot in Aurelia. If you’re worried about trying another frontend framework, Aurelia is so simple, powerful and clean, you can really just pick it up in a day from the guides on their website. To understand it is to use it. It is designed to be simple and powerful. It delivers.

Webpack makes transpiling as easy as adding a single line of code, while Aurelia’s webpack plugin takes care of Aurelia’s module loading. This is the secret weapon behind that keyword import and it provides tools to customize each platform with environment variables and conditional modules.

Cordova? Well, it’s Cordova. Powerful, even if a pain.

The size of the default bundle is 1.1MB. That includes everything you need to make an app, from accordians to loaders to an icon library, animations and routing, but an industrious optimizer has a few high-value targets right out of the gate. 346KB for removing Framework7’s optional color schemes file, 40KB by removing Aurelia’s router (we’re using Framework7’s instead), and you can cut out more than half of Framework7’s remaining 447KB by removing components you don’t need with their custom Gulp builder. The smallest you can get is 500KB.

You can ship this.

If you can’t tell, I put this together because I need to use it. As I continue I plan to share my work with the community that provided these awesome tools.

What’s next? Well, this project is intentionally minimal, so you will want to expand and personalize it. Coming soon, I will create a series of guides on how to add some useful functionality. Mix and match the features you need, ditch the rest.

JAN 29: Optimize the File Size

JAN 29: Add a Linter → Clean Code, Baby

JAN 29: Customizing Production Webpack Configuration

FEB 5: Add Modular SASS

FEB 12: Customizing App Based on Platform

TBD: Build Your App with TDD

TBD: Create a Progressive Web App

HTML5 is here, and it is flexible, performant, and uniquely cross-platform. Soon, perhaps, developers will look back on our current era like we look back on the Netscape and IE era of the late 90s, as a time before platform differences were abstracted away, a time where the incredible inconvenience of multiple parallel codebases still ran rampant.

The stakes here are real. In the day of a single unified codebase, apps that required teams of developers to build and maintain, for web, android, native and beyond, can be accomplished by two, or even one. That is the dream, at least. This is where native apps will die — when the cost/benefit ratio is so skewed, eventually the business owners will only see one option.

What I am trying to build here is the holy grail. A single shared source-code that can easily be reused on Web, iOS, and Android. Found a bug? Fix it once. Add a feature? Add it once. Now that is the kind of experience I am looking for.

Finally, I would like to give a huge thanks to an excellent github project by Julien Enselme, which was the first to demonstrate the two frameworks working together, which I used as a starting point.

Further inspiration came from Erik Hanchett's elegantly simple Webpack configuration with a dash of Aurelia Skeleton Webpack and Timo Ernst who explained the need to use Framework7’s inline page routing.

Does this help you? Want to make a suggestion? Tweet me — my handle is @alflennik — I look forward to hearing from you!

If you too are looking for a better way to develop cross-platform apps, sound off in the comments.