HTML5 mobile applications make use of cutting edge browser technology to create powerful mobile apps that can even be submitted to and downloaded from the Apple App Store and Google Play. This is cool and exciting in itself, but it also provides a great opportunity for web developers.
As a web developer chances are you are already quite familiar with the technology these HTML5 mobile frameworks use, making it a lot easier to learn. In some ways you will feel right at home.
In other ways it can feel like a weird new world; there is a unique set of challenges that mobile app developers face but also a lot of new opportunities. The paradigm shift cant be quite startling and it’s certainly not as easy reading a couple of tutorials then being ready to submit the next big hit to the App Store.
Here’s a few important things to know as a web developer making the journey into the wonderful world of mobile application development.
1. JavaScript (duh!)
The basis of just about everything you will do to create mobile applications when using HTML5 is Javascript. As a web developer you would probably be reasonably familiar with Javascript and Javascript frameworks like jQuery. Some web developers may be able to create complex interactive websites with Javascript, and others may only know how to include basic scripts in a website – if you don’t have a good understanding of Javascript yet, don’t let that stop you.
When learning to build HTML5 mobiles apps, it is a massive help to really understand the basics of what is happening. Having a solid understanding of the core principles will make the advanced stuff stick much better. In a recent Reddit ‘Ask me Anything’ thread super smart guy and SpaceX CEO Elon Musk replied to a question about how he learns so much:
It’s common for developers to learn a framework before learning the language itself, which makes sense becuase most people understandably want to jump straight into the action. People learn Ruby on Rails before learning Ruby, jQuery before JavaScript and so on. It’s not important to know everything inside out the begin with – you’ll probably bore yourself with theory and burn out before you ever get to making mobile apps. Instead try learning them side by side – jump straight into the mobile app frameworks but make sure you’re building up a solid Javascript foundation, or tree trunk, as well.
Here’s a few resources you can use to buff up on Javascript:
2. Mobiles are not as powerful as desktop computers
Web browsers on the whole are getting super powerful and can handle all sorts of crazy stuff we couldn’t do in the past – both mobile and desktop browsers. Understandably though, desktop browsers are more powerful than mobile browsers. As we try to push the limits of what we can do in the browser, we often find that mobile doesn’t hold up to the beating as well as a desktop browser does.
The main cause of problems for HTML5 mobile developers is that we do most of our mobile development and testing through a desktop browser. If we implement a particular solution poorly and use excessive resources, then it may still function fine through a desktop browser, but when we install it on a phone the performance could drop significantly. This is especially troublesome if you develop your entire application before ever actually testing it on mobile.
Most modern mobile browsers can handle quite a lot, and as long as your app isn’t overly complex or poorly designed you’d be unlikely to run into much trouble. You also have to keep older devices in mind though, if you pull out an older Android device you might notice it struggling a bit more. Keep in mind the devices you plan to support and make sure the app behaves acceptably on the least powerful devices.
DOM manipulation is one of the most costly functions for the browser and the thing you should keep an eye when trying to develop a high performing app. The more complex the DOM and the more lookups you’re doing the worse the performance will be. So try interacting with the DOM in the most efficient way possible. For example, if you need to access an element more than once store a reference to it in a variable rather than looking it up multiple times.
For more tips on improving Javascript performance, specifically for mobile, check out the following video about Sencha Touch debugging and performance:
Sencha Touch Debugging and Performance from Sencha on Vimeo.
3. HTML5 mobile apps behave in the same way a normal website does
There’s no magic happening here, a HTML5 mobile application is just a website running through a browser (that either is or is not hidden from the user) that is styled to provide a native app like experience (or perhaps more appropriate, just a good mobile experience). If your HTML5 mobile app is hosted on the Internet then it is exactly like accessing any other website on the Internet, if your app is downloaded through app stores then it is just running as a local file (like opening up a HTML file that is saved on your computer in a browser).
Once you realise what’s going on behind the scenes, it makes it much easier to realise what you can and can not do…
- Can my HTML5 mobile app access the users location? Yes, just like a normal website can.
- Can my HTML5 mobile app vibrate the device? No, because websites do not have this ability.
BUT you can still vibrate the device with HTML5 mobile apps, you just need to use a [native wrapper like PhoneGap][12] (more on that in the next point).
4. There are different choices for distributing your application
Once you’ve created your application and are ready to distribute it to the world, you have a few options:
- Publish it straight to the web, and people will access it through their mobile browser
- Add a native wrapper to your application and submit it to app stores
- Submit it as a web app through the Amazon App Store (not really common)
Only native applications can be submitted to the Apple App store and Google Play, so how can we submit our HTML5 apps? By using a native wrapper.
A native wrapper puts your HTML5 mobile application inside of a native mobile application – it “wraps” it in a native shell. The concept is actually quite simple, and goes something like this:
- A “blank” native application is created for each of the respective platforms (iOS, Android)
- All files necessary to run the HTML5 mobile application are added to the native application (index.html, javascript files, images etc.)
- A web view is created in the native application (you won’t be able to see this as there is no browsing UI but it’s there)
- The local HTML5 mobile app is loaded into the web view (no Internet connection required)
The actual process itself may not look exactly like this behind the scenes, but that’s the gist of it. It’s a bit of a hack (hack is probably not the right word, it’s well established and has been used for years), but your end users shouldn’t notice any difference between downloading an application in a native wrapper and a normal native application.
PhoneGap is used most commonly to do this, but it does a lot more than just wrap your application. PhoneGap provides an interface to use just about every native function possible – basically if a native app can do it then so can your HTML5 app through PhoneGap.
As I mentioned above, a HTML5 mobile app can do everything a normal website can do. Even after you wrap it with PhoneGap it is still technically being run through a browser, so it can not access device features like vibrate. Your HTML5 mobile app might not have access to the device, but it’s wrapper (PhoneGap) is no different to a normal native application so PhoneGap can make the device vibrate just fine.
So rather than asking the device to vibrate directly, you can ask PhoneGap to do it and then PhoneGap will ask the device for you.
If you wanted to do something a little more complex like get contacts from the device then something like this would happen:
- You ask PhoneGap for the users Contacts
- PhoneGap asks the device for the users Contacts
- The device gives PhoneGap the users Contacts
- PhoneGap gives you the users Contacts
In this way you can do anything a native application can do with PhoneGap as an intermediary.
5. You don’t need a Mac to develop iOS applications
This is one of the most asked questions and there seems to be a lot of conflicting information, so let’s clear things up.
When you want to distribute on the app store you will have to use a native wrapper like I mentioned in the previous point. If you are using something like PhoneGap / Cordova locally to wrap your application then you are required to have the SDKs of the platform you are targeting installed on your computer. This means that you will require a Mac, as the iOS SDK can not be installed on a Windows machine.
If you are using the PhoneGap Build cloud service, then compilation is handled on Adobe’s servers and you are not required to install SDKs on your own computer. So in this case you do not need a Mac to build iOS applications.
TL;DR:
- Local installation of PhoneGap: You need a Mac
- PhoneGap Build Cloud Service: You don’t need a Mac
Ready to start developing HTML5 mobile applications?
Chances are you’re interested in learning HTML5 mobile application development if you’re reading this. As a web developer, your background in HTML, CSS and Javascript will get you up and running a lot faster than learning native development from scratch.
Although you’ve got a head start already, it’s not an easy road to the App Store and there’s plenty of places you can get stuck along the way. I’ve created the Web to Mobile Developer course to help accelerate this process from a stumbling shuffle to a confident striding sprint. If you’ve read this far, I’m confident you’ll get a lot out of it.
Got any questions about HTML5 mobile development? Leave them below and if you’re a veteran let’s hear some of your tips!
[12]: http://www.joshmorony.com/whats-the-difference-between-native-hybrid-and-web-mobile-app-development/ ‘What’s the Difference between Native, Hybrid and Web Mobile App Development?’