Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Caught between fires html5 mahdi_njim


Published on

Published in: Technology
  • Be the first to comment

Caught between fires html5 mahdi_njim

  1. 1. Caught between fires: the disillusion of the HTML5 promises on Android Mahdi Njim DISYCS
  2. 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 ages dilemma: Web or App
  3. 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. 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
  5. 5. 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
  6. 6. So what is the real problem Do I create my app using Objective C/Java orusing HTML5+CSS3+Javascript+Phonegap?
  7. 7. The answer is HARD Let me tell my Story and you decide
  8. 8. 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”
  9. 9. 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
  10. 10. Phonegap supported features
  11. 11. 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)
  12. 12. 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
  13. 13. The Dream becomes a nightmare▸ The performance issue still there after production build▸ And becomes a real nightmare … Performance is the real Problem
  14. 14. 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!!!
  15. 15. Keep The DOM light▸ Complex DOM kills memory▸ Use the little screen of the smartphone and kill all the unused views
  16. 16. Events▸ Javascript events also eat a lot of memory, remove any unused events
  17. 17. 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
  18. 18. Pagination and User Illusion▸ Use pagination▸ Use lazy loading▸ When navigating betweenViews display an empty view andA loading wheel, it gives the userA better feeling
  19. 19. 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
  20. 20. 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!
  21. 21. 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…
  22. 22. Adding new features:▸ One implementation worked for all platforms
  23. 23. 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
  24. 24. 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 SDKThe good way would however be to:▸ Keep enhancing the browsers and the web experience on mobiles
  25. 25. Thanks you for your attention Mahdi Njim Disycs SARL +216 21 082 206