This week is all about hybrid apps for me. On Wednesday, we released the first in a weekly series of videos called ‘Web Hack Wednesday’, this week's edition is on Hybrid apps. On Friday, I am speaking at NDC London about ‘The murky world of hybrid apps’.
I wanted to write an article which summarises some of the key points around hybrid apps. The videos and resources listed at the bottom will give you more detail, but I thought it made sense to cover some of the basics here.
So what is a 'Hybrid App'?
The term ‘hybrid app’ is a fairly loaded term these days; it means different things to different people. For me, it means a mobile app that in some way uses a combination of native and web technologies.
There are two distinct types of hybrid app:
Hosted Hybrid. This is where a large proportion of the app comes from a web application that is hosted in the cloud somewhere (on a web server). The HTML, JS and CSS that make-up the app is served from a web server in the same way that they would be through a browser. This web app is then wrapped in a native app that contains ‘web view’ control. The native part of the app may also contain metadata, images and possibly some native code.
We also have Native or 'packaged' apps (which run natively on the device and are written in a native language) and plain old web apps which are accessed via a browser.
When to go hybrid (or not)
The decision on whether to go with hybrid or not is a complex one. There are many conflicting priorities and concerns but here are some of the key considerations for and against:
Look at hybrid if ...
- Your web site/app is modern, responsive, touch enabled and fast. Ideally it will be developed to be an 'web app' not 'web site'. See the resources at the bottom for a list of Web App UI frameworks
- You want to maintain a single developer skill set and workflow
- You want broad reach but do not have the budget to build native store apps for every platform
- You care about TCO
- Your web site/app is not very nice
- You need the very best user experience without compromise and you have the budget to support that
- Does you app need local device capabilities?
- How important is offline? (you can do this with web apps, but it is harder than fully native. Details coming later in article)
- What are you thoughts on design? Consistent for all your apps or platform conventions?
- Do you need to get something out quickly (time to market)?
- What is your revenue model? Will you rely on in-app purchases, store subscriptions or fees for the app itself?
- Does your app contain content that is prohibited from the app stores?
How to build hybrid?
So you've decided to go ahead with a hybrid app? Thankfully, there are a bunch of tools that will help you get started.
One of the key technologies is a W3C standard called the 'Web App Manifest'. This is a working draft standard that refers to a manifest file which provides a bunch of metadata about the web site. This will help inform your operating system and the app stores about the app. It will also contain links to resources like icons which are required to add native icons/tiles for your app.
W3C describe the specification as follows:
"This specification defines a JSON-based manifest that provides developers with a centralized place to put metadata associated with a web application. This includes, but is not limited to, the web application's name, links to icons, as well as the preferred URL to open when a user launches the web application. The manifest also allows developers to declare a default orientation for their web application, as well as providing the ability to set the display mode for the application (e.g., in fullscreen). Additionally, the manifest allows a developer to "scope" a web application to a URL. This restricts the URLs to which the manifest is applied and provides a means to "deep link" into a web application from other applications. Using this metadata, user agents can provide developers with means to create user experiences that are more comparable to that of a native application."
If you have a web app manifest file, you can use an open-source tool developed by Microsoft called ManifoldJS to create hybrid apps on all the main app platforms (Windows, IOS, Android and a bunch of browsers). You can also use ManifoldJS to help create your web app manifest.
If you are interested in Windows 10 and the Universal Windows Platform. We have some special capabilities in Windows that allow you to take hybrid apps one step further.
Yes, full access to the Windows Runtime API!
It looks a bit like this:
How to make Hybrid apps awesome
The goal with any app is to provide a great user experience and hybrid apps are no different. A well designed hybrid app can be a superb experience and often better than most native apps.
Here are 5 top tips for making hybrid apps awesome.
1) Be Responsive. Your app should adapt to the viewport that is being used. This could be 4" or 80". Responsive web design is a must have for this.
2) Be Fast. One of the top complaints from people around hybrid apps is that they are slow. But they don't have to be. Checkout YSlow and Google Pagespeed Insights to make sure your web app is sports-car quick
3) Offline. You might think that hybrid apps cannot work offline ... wrong, check out the FT web app. There are three things that can help you make your hybrid app work offline App Cache Manifest, IndexDb and Local Storage
4) Design as an app. UI makes a big difference. If your app looks like a website, users will think it is a website and rate it negatively. Avoid 'web' UI conventions like banner adverts, footers, on-page or complex main navigation bars. There are a bunch of UI frameworks that can help you design your HTML and CSS to be more app-like. See the resources at the bottom for links
5) Platform Integration. At the very least, you should go to the effort of having the right tiles/icons for your app. But if you can, take it a step further with Apache Cordova and/or Project Westminster for Windows
I've mentioned a tonne of resources in this article, here they are for convenience.
W3C Web App manifest: A standard for defining metadata and resources for hybrid apps
ManifoldJS: Open source tool from Microsoft for creating a load of hybrid apps based on the W3C Web App Manifest
This Here Web: A neat website by my chum Jeff Bertoft who is the guy behind ManifoldJS.
YSlow: A tool for checking your website performance based on Yahoo's YSlow ruleset
Google Page Speed Insights: A tool for checking your website performance based on Google rule set
App Cache Manifest: A manifest which allows a HTML pages to be cached
Bootstrap Ratchet: An app UI framework from the guys behind Bootstrap
Zurb Foundation for Apps: An app UI framework from Zurb
Google Material Design: A design framework/rule set fro Google
Ionic: An app ui framework that uses Angular
I hope that is useful to you. Please let me know one way or another via the comments.