The jungle of mobile HTML5 development
Here’s the guide !
I’m a big fan of HTML5; it gives me the speed of development that my creativity needs.
But since the rise of mobile, the development with this technology started to be complex. On the desktop, everything was clear. Website development is in a constant evolution; still people have expertise on it. But on mobile, it’s just a nightmare. Developers are confused in the way of developing an HTML5 mobile app, so I hope this guide will help them.
As I said in this previous article, you have to be a web developer before thinking of realizing a mobile app.
Before starting to show you the different platforms, frameworks available, let me tell you that I don’t consider Titanium Mobile as an HTML5 solution. Read my previous article to understand why.
There are four known solutions (many new others are created, but are still in an early status) to create HTML5 mobile apps.
Web App
It’s the easiest way. In short, it’s just a website accessible by a browser. Android and iOS offer have a feature to add a shortcut of a web app in your dashboard. The app would be full screen if you set the right option and works offline with Appcache.
Edit: Daniel Appelquist precises me that Firefox OS, Firefox on Android and soon Chrome present the user that a web app can be added in his mobile. You need to declare a web app manifest in your page. Good to know ☺
For me, it’s not a reliable option:
- First, Appcache is just awful: http://alistapart.com/article/application-cache-is-a-douchebag
- ServiceWorker, the substitute of Appcache, is still not ready but the specs are damn cool: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
- The current HTML5 APIs coverage in iOS or Android before 4.x is too poor to rely on it.
- No push notifications (Firefox OS allows it)
- No interactions with native SDKs (FirefoxOS is more friendly with that)
Phonegap / Cordova
It’s currently, the best compromise. There is already an entire ecosystem of tools, forums, developers. You can take profit of HTML5 APIs as much as the native ones. In the end, you have a real app. They’re trying to follow HTML5 APIs specification in their platform to help the transition of web apps.
Homemade bridge
This solution is chosen when the team is quite big and already has knowledges in native code. Many big companies choose it. They can mix native UI components for performance and HTML for flexibility.
If you are interested, have a look to these links:
- http://developer.android.com/guide/webapps/webview.html
- https://github.com/marcuswestin/WebViewJavascriptBridge
- https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/ObjCFromJavaScript.html
- http://blog.impathic.com/post/64171814244/true-javascript-uiwebview-integration-in-ios7
Intel XDK
I can’t give an honest opinion on it. When I installed the editor the first time, I found it too complicated and didn’t give me motivation to continue. As I understand, it’s in the same spirit as Phonegap but they provide a complete IDE too. I don’t know precisely what are the differences. If an Intel guy reads this article, can you send me more details?
Native HTML
It’s the perfect solution. Instead of having a bridge between native code and HTML, the OS will execute the code directly. You have access to all the APIs, and the debugger is just perfect. In practise, only Firefox OS and Tizen have such a system.
Now that you discovered the different solutions let’s talk the myths of Mobile HTML5 apps. Mobile HTML5 development started when Steve Jobs announced it in the famous keynote where he presented the first iPhone. Safari was at that time one of the best browsers with Firefox in terms of HTML5 features (Google Chrome wasn’t yet available).
But one year after, the app store arrived, and the development was only accessible by Objective-C. Damn you Steve!
Not long time after, Phonegap was created by a bunch of developers. I still remember they had a wiki as a website. It was buggy, but the idea was so genius. The problem is that developers started mobile HTML5 development at the same time. So many people got frustrated by the platform and spread the word.
Since that time, a lot of things happened: smartphones have more powerful CPU, the render of CSS can be done with the GPU, the specifications of HTML5 are more precise, the browser engines are much better.
Front-end development got a huge improvement too. Our JS isn’t anymore a big $(document).ready function. We’re using more standardized frameworks (AngularJS, BackboneJS, EmberJS, Polymer, ReactJS) and our debuggers have nothing to envy to the native ones.
We are using build systems, packages managers, code styles.
HTML5 mobile development is completely different from the one in 2009.
So in the end, what’s the problem of HTML5? The UI.
As some readers know, I really don’t like jQuery Mobile and, unfortunately, most of the developers used it for mobile development. Bootstrap doesn’t solve the problem too. It’s responsive but is not mobile-only. Native developers compared HTML/CSS with their native components, which is an unfair comparison.
Native platforms provide ready-to-use components, which are fully tested, well optimized and with performance features included. A long list in iOS will automatically hide or remove not visible elements while, in pure HTML/CSS, you can’t.
The Web UI was a pain to develop with because Apple or Google never provided a Web UI framework. Imagine you will have a Bootstrap-like with all the features as native components (performance, transitions, personalization, etc.). They could do it, but it wasn’t their priority. But now it’s different.
Windows Metro
Microsoft was the first one who impressed me. Their Metro UI has the same features in C++, C# and HTML:
- http://msdn.microsoft.com/en-US/library/windows/apps/br211837.aspx
- http://code.msdn.microsoft.com/windowsapps/Universal-Windows-app-cb3248c3
Firefox OS
Firefox OS is even more interesting. Mozilla is using the same CSS as the third-party developers! Honestly, it’s just the best idea ever. You can contribute directly via Github:
What about Google?
Google is the last but not the least. They came with a different approach. They provided us AngularJS and more recently Polymer.
Polymer is a framework that helps you create web components easily.
As soon as they finished developing solid structures of web apps, they focused on UI. And the response is Material Design. The idea is to create a responsive design, not just a resize of elements, which looks sexy on every screen sizes. They are using Polymer to provide these components.
- http://www.polymer-project.org/components/paper-elements/demo.html#core-toolbar
- http://www.polymer-project.org/docs/start/tutorial/intro.html
There are other UI frameworks too!
Ionic Framework
It’s my favorite. The design is closer to iOS, but it looks good on Android too (Yes I’m looking at you jQuery Mobile).
They are providing AngularJS directives, ready-to-use, well optimized, with animations, etc. In short, the Holy Grail.
Pull to refresh, Side menus, Infinite Scroll, support of huge lists (yes, more than 1000 elements), Tabs, etc.
Drifty, the company behind Ionic Framework, is currently working with other developers on Angular Material, the equivalent of Material Design in Polymer but with AngularJS.
The other alternatives are promising but not as good as Ionic yet. Still have a look to them, I’m pretty sure they will improve soon:
And what about Apple? Well, I think they prefer to let only the option of native to force people developing with Swift or Objective-C. Fortunately, Most of the frameworks that I quoted are compatible with iOS. Take that Tim!
I hope you understand more about HTML5 mobile development now. This guide isn’t complete, I just wrote as the ideas come to my mind. If you have find any mistakes, feel free to write a comment or to contact me by the way you prefer : http://www.yrezgui.com
