When we thinking on web apps and specially mobile web apps, we wish to make them smooth a responsive as possiable. The main problem is latency/network and luckily we have enough APIs in HTML5 to make sure we can achieve this goal. A good recent example is fastbook (yep… just like facebook but working FAST with HTML5). Here I’ll summaries some of the main points you wish to pay attention when you building your next amazing mobile web app. Start with ‘offline first’ (after all, you are on the right path with ‘mobile first’ already).
- You should store all the main assets of your application. There are several APIs you can use:
- AppCache – for the main index.html page and all your JS, CSS code. You could also use it for images and other static data.
- Filesystem – You have an option to work with files: text and binary data. This is a great option for cases where you have a lot of images/mp3/videos etc’. In order to manage the work with files there is a great library – filer.js
- Storing state/data:
- localStorage – in
mostall mobile browsers. But it’s sync and give you only a simple key-value api.
- WebSQL – in iOS and Chrome but since it’s deprecated you might want to use some librarty that will let you work with it and IndexedDB so you could switch to IndexedDB as soon as it will be supported.
- IndexedDB – The new DB (noSQL one) we have on the client side. If you do have an app that is using WebSQL here is a tutorial I’ve wrote on how to translate it to use indexedDB – Convert WebSQL To IndexedDB Tutorial
- localStorage – in
- Offline first – pretend that there’s no internet connection, implement a sync layer that works only when online.
- Offline/online events and here is a snippets to check when you are on or off the network:
navigator.onLine & window.(ononline|onoffline)
Using The Best Tool For The Job
- IDEs and Editors
- Sublime text 2 – Give you huge amount of extensions and customization that will make it ‘your own’ in no time. Start with ‘command + shift + P’ and see where I’m going with it.
- Web Storm – Powerful IDE with a great editor for JS.
- Netbean – the php version get you with a nice JS/HTML/CSS editor and the ability to debug it.
- CSS/JS Frameworks
- jQuery mobile
- bootstrap (responsive)
- github.com/ftlabs/fastclick – The FT work on making sure your users’ clicks will be responsive without the 300ms delay the ‘normal’ browsers are having.
- HammerJS – for multi touch web apps.
Tempting engines in JS are getting popularity because complex apps require complex DOM and we all know that DOM manipulation is relatively slow. Thus, we use templates in our html and then use an engine to populate the template with data. This is one option to declare our template:
<script id="my-template" type="text/my-template-language">
- Remote debugging with jsconsole.com
- Chrome for Android let you use Chrome devtools and debug with it. It’s very powerful…
- Remote debugging with Opera Dragonfly is also supports mobile.
- Enable Safari console for logging on iOS (Settings -> Safari -> Developer)
- Firefox mobile got a new option that let you run firebug on your mobile app.
- iWebInspector is a free tool to debug, profile and inspect web applications running on iOS Simulator.
- MVC provides separation of concerns so you could focus on your models and later on the views (which are harder to test through automation).
- Qunit – test your models just like the pro in jQuery are doing.
- Selenium and its mobile option Remote Web Driver are very good options as well.
- Blaze.io for mobile – Give you a servie that you can use in order to measure and improve your mobile web app speed.
- fingers != mouse – Dah moment! We all know it, but you can just have a quick look at some of the new devices out there (who said win 8 tablet) in order to see that developers tend to ‘forget’ it. The important point is to make sure your users will be able to interact with your web app easily. Think of your parents or other users that are less ‘expert’ in the domain your app is helping.
- Simulate touch events using Chrome DevTool – You can do it by opening Chrome devtools settings and clicking on ‘touch events’ under settings.
- Better CSS
- avoid tables, relative,absolut -> Use the new Flex box to build your interface.
- position: fixed; – headers/footers
- overflow: scroll; – scorll inside elements
- -wekbit-overflow-scrolling: touch; iOS 5+ and Chrome for great scrolling experience
- Don’t reinvent the wheel – Get good ideas from these examples:
Adaptive apps (just like in the image above) let you have custom views and templates for each form factor with the same shared model that control your data. This is a win as you have less code and the only difference is in the view layer. It’s (like most of the things in life) easy to say and hard to do – but it’s worth a try. One little corder you may cut here is to use responsive design within the form factor, in other words, you can use the same layout on iPad 4:3 and Galaxy Tablet 16:9.