This document discusses the challenges of developing mobile applications using HTML5 versus native platforms like Objective C and Java. While HTML5 allows for cross-platform development, the author details his experience building a complex application with HTML5 that suffered from poor performance, especially on Android devices. Even after extensive optimization efforts, the application remained sluggish on low-end Android phones. The author concludes that HTML5 may be suitable for simpler applications or when prioritizing a tight schedule over performance, but that native development is generally better suited for complex, demanding applications on Android.

1. Caught between fires: the disillusion of the
HTML5 promises on Android
Mahdi Njim
DISYCS

2. Great times
▸ It’s great to be a programmer these days
▸ Users want rich applications
▸ Many platforms and technology to consider in order
to deliver this great experience
▸ This age's dilemma: Web or App

3. Web or App is NOT the Real Problem
▸ Many reduce the problem to whether you should
have m.youapp.xy or App Store/Google play App
▸ This is more a strategically point of view
▸ It’s better to have both!

4. Why you should have an App
▸ Angry birds made 5 million downloads in less than
two years, Super Mario sold only 3 million including
all versions
▸ Great statistics tools
▸ Mobile is more used than ever
▸ Reach more people

6. Why you should have a mobile web
▸ The browser is already making success in the pc
world
▸ Web provides a well known experience
▸ People demand it
▸ Use it for different scenarios
▸ m.facebook is used more than all the Facebook
native apps together

7. So what is the real problem
Do I create my app using
Objective C/Java
or
using HTML5+CSS3+Javascript+Phonegap?

8. The answer is HARD
Let me tell my
Story
and you decide

9. The Story Begins
▸ Big application, Time to market pressure, Customer
requires three versions of the app IOS, Android and
web
▸ A science-fiction design and in love with Web
▸ Decision made “We are not sure but we are going for
HTML5”

10. The arguments and the dream
▸ HTML5 is cross platform, the browser is like the JVM
back in the days
▸ Phonegap is really great and supports many features
▸ We already have the web experience (using HTML,
CSS and Javascript)
▸ Everyone is talking about The shift towards Web!
▸ If things didn’t go well, that’s ok we will end up with
web browser version (we need it anyway)
The Dream:
Having three great versions at a time

11. Phonegap supported features

12. We used Sencha and we enjoyed it
▸ Sencha is an open source framework for building
HTML5 applications
▸ Sencha looked mature and well documented
▸ It uses MVC design pattern
▸ It’s great for developers who used to develop with
C#/java
▸ Friendly support team
▸ Decent community
▸ Unit tests supported (new feature)

13. 30 days of happens
▸ The best part was using CSS3 to apply the design: it
was easy to use,
▸ The same Design would have needed thousands of
lines of XML code
▸ We noticed some performance issues, but we said it
will go away in the production version “hopefully”.
u ght ys!!!
ly tho 0 da
eal just 3
e r in
W
d e it
ma
we

14. The Dream becomes a nightmare
▸ The performance issue still there after production
build
▸ And becomes a real nightmare …
Performance is the real Problem

15. So we start a 60+ optimization phase
▸ All good practices (Cache, modified CSS files,
modified Javascript, HTML5 manifest…)
▸ Events
▸ Drawing
▸ Animations
▸ Code execution
▸ And DOM DOM DOM!!!

16. Keep The DOM light
▸ Complex DOM kills memory
▸ Use the little screen of the smartphone and kill all the
unused views

17. Events
▸ Javascript events also eat a lot of memory, remove
any unused events

18. Drawing
▸ The use of the GPU by the web browser still not very
optimized
▸ Don’t use CSS3 advanced new features (opacity,
border-radius, gradients, text shadow and box
shadow..)
▸ All the drawing is handled by the CPU
▸ Use images instead and accept lower quality of
images

19. Pagination and User Illusion
▸ Use pagination
▸ Use lazy loading
▸ When navigating between
Views display an empty view and
A loading wheel, it gives the user
A better feeling

20. Code execution
▸ The CPU is really powerful, don’t look for the usual
suspects
▸ All in the size, try to make your Javascript code as
tiny as possible
▸ Use shorthand techniques, they are useful

21. iPhone good friend,Android is still killing us!!
▸ Optimization efforts really useful, the application works
great on PC, iPhone 4 and +
▸ The application was not bad on advanced devices but
clumsy on low devices and again: Android device
fragmentation makes life harder!
▸ Developing for Android browsers is like developing for
IE6
▸ Strange behavior with forms and Javascript injection
▸ The next updated version will make things even worst
▸ We spent the same effort optimizing that probably would
have been needed for two native Apps!

22. The bonuses …
▸ Application works great on iPhone, iPad and many
android phones and tablets
▸ Mobile web version
▸ With a crazy idea, PC version too
▸ But the best BONUS was…

23. Adding new features:
▸ One implementation worked for all platforms

24. When to use HTML5
▸ If you have a small application
▸ If you have a tight schedule and limited resources
▸ If you like to get all the bonuses of HTML5 AND
ready to take the challenge
▸ You can use a hybrid application (LinkedIn) but it
requires advanced knowledge

25. What can the Android community do
▸ It can fight the HTML5 and kill it, claiming that only
way to develop for android is by using Android SDK
The good way would however be to:
▸ Keep enhancing the browsers and the web
experience on mobiles

26. Thanks you for your attention
Mahdi Njim
Disycs SARL
njimmahdi@disycs.com
+216 21 082 206
www.disycs.com