Creating High Performance Mobile Apps with HTML5

Does performance matter?
Best practices
Seven interesting findings
4 frameworks focused on performance for mobile
Web Inspector, your best friend
Live refresh workflow

Transcript

1. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Creating High Performance Mobile Apps with HTML5 Demian Borba | BlackBerry Developer Evangelist | @demianborba | dborba.com 1
2. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Agenda § Does performance matter? § Best practices § Seven interesting findings § 4 frameworks focused on performance for mobile § Web Inspector, your best friend § Live refresh workflow 2
3. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3 78% of developers interested in revenue, use two or more platforms concurrently Source: Vision Mobile Developer Economics 2013
4. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4 Android, iOS and BlackBerry are top priority for their developers Source: Vision Mobile Developer Economics 2013
5. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5 A viable and powerful technology choice is...
6. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 Does Performance Matter?
7. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7 Does performance matter? Source: http://www.businessinsider.com/10-golden-principles-successful-web-apps-2010-3 10 Golden Principles Of Successful Web Apps by Fred Wilson, from a talk he gave at the Future Of Web Apps conference in Miami in February of 2010 § Speed is always the most important feature § Your service must be useful right away, not after an hour of set-up § Your software should have a personality and voice § Less is always more when you first launch § Make your app programmable -- allow others to add on to it in some way § Individuals should be able to personalize your app (both users and programmers) § Make sure everything in your application has a unique, comprehensible URL § Build your app so that it's optimized to be found in terms of both social media and search § Make it visually clean § Be playful -- you can turn anything into a game
8. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8 Does performance matter? Source: http://www.slideshare.net/stoyan/yslow-20-presentation
9. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 Does performance matter? Source: https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0
10. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10 UI Latency Input Event ( press menu key ) Display Update ( menu appears ) timeline UI Latency Performance in mobile is about Latency
11. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11 UI Latency
12. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12 Best Practices
13. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13 ECMA Land (JavaScript) vs DOM Land (Document Object Model) ECMA LAND DOM LAND BRIDGE TOLL ROAD
14. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14 ECMA Land vs DOM Land http://jsperf.com/ecma-land-vs-dom-land X
15. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15 Memory & Images The largest contributors to unnecessary memory use are: § Loading invisible UI § Un-optimized Image Assets § Pre-loading and caching data into memory USE JPEG FOR for non-transparent images USE PNG FOR for transparent images
16. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16 JavaScript setTimeout() Ask yourself: § How much of this JS has to get done right now? § How much of this JS has to get done eventually? UI THREAD § UI THREAD is used both for JavaScript execution and UI Updates § UI cannot be updated while JavaScript is executing § Keep JavaScript execution to 50ms using Timers or WebWorkers
17. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17 WebWorkers § Execution happens in a separate process § Not on the UI THREAD = no UI delays Main Script doWork.js (The Worker)
18. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Valuable recommendations § Don’t touch the DOM § Cache DOM preferences in local vars § Cache the length when looping collections § Batch style changes (reflow) § Use fewer images, more CSS (bandwidth) § Worry about asset management (minification, gzipping, CDNs) § Be careful with Page Transitions and Page Refreshing (very expensive) § Design mobile first § Design single page apps whenever possible § Use animation frameworks such as GreenSock § Avoid locking the UI Thread (WebWorkers or Timers) § Test, test, test (JSPerf, BrowserScope, WebInspector) 18
19. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19 Seven Interesting Findings
20. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20 Tech Center UFPE, Brazil
21. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21 What did I use? http://www.broofa.com/Tools/JSLitmus/ JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests. Features include: Single-file install (JSLitmus.js) Works on Firefox, Opera, Safari, IE, Google Chrome, and iPhone browsers Adaptive test cycles - tests take ~1-2 seconds, regardless of the operation Google Chart + TinyUrl integration Open Source MIT-style license
22. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22 Seven interesting findings 1.Object.create() vs new Object() 2.One Ajax call (processed locally) vs Multiple Ajax Calls 3.Local Storage vs Session Storage vs SQLite 4.display:none vs Destroy Element 5.bbUI (need Ripple to view) vs jQuery Mobile (creating 1000 buttons) 6.Minified JS vs Non-Minified JS 7.Web Workers vs Main Thread ALL TESTS (ONLINE): www.dborba.com/download/webworks-stress-test
23. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23 4 frameworks focused on performance
24. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24 jQuery Mobile http://jquerymobile.com § Easy to write (no need for heavy JS work) § Theme Roller & Codiqa (visual tool) § Does well with single page apps § Built upon jQuery UI § Runs on iOS, Android, BlackBerry, Bada, Windows Phone, WebOS and more § Has a builder tool (alpha)
25. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25 Sencha Touch http://www.sencha.com/products/touch § MVC like § Focused on commercial products § Training & Support § Runs on OS, Android, BlackBerry, Windows Phone, and more.
26. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26 Lungo.js http://lungo.tapquo.com § Created to run on low end devices § Robust API § Community Driven (GitHub) § Runs on iOS / Android / Blackberry / FirefoxOS
27. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27 bbUI.js https://github.com/blackberry/bbUI.js § Niche specific, (BlackBerry 10 look and feel) § Follows BlackBerry 10 User Experience Guidelines § Community Driven (GitHub) § OFF DOM Implementation § UI only
28. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28 Built for BlackBerry HTML5 Sample https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/Built-For- BlackBerry http://developer.blackberry.com/builtforblackberry
29. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29 Visual tool from the Community Creating your first BlackBerry 10 App Video tutorial and download: http://dborba.com/meet-gap-alpha-for-html5-no- need-to-use-command-line-anymore/
30. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30 Web Inspector Your Best Friend
31. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31 A nice combination... Text Editor (i.g. Sublime) Packager (i.g. WebWorks) Network Observer (i.g. Live Reload) + +
32. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32 Live Refresh Workflow Video tutorial: http://dborba.com/wow-no-more-re-packaging-when-testing-html5- apps-on-your-device/
33. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. How can I start with BlackBerry 10 Development? 33 http://developer.blackberry.com/html5
34. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34 Personal recommendation: GreenSock Animation Platform JAVASCRIPT § http://www.greensock.com/jquery/ § http://www.greensock.com/js/speed.html CSS TRANSITIONS § http://www.greensock.com/transitions/ SPEED TEST § http://www.greensock.com/js/speed.html
35. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. How can I start with BlackBerry 10 Development? 35 http://dborba.com
36. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Recap 36 § Does performance matter? § Best practices § Seven interesting findings § 4 frameworks focused on performance for mobile § Web Inspector, your best friend § Live refresh workflow
37. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
38. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thank you very much Demian Borba | @demianborba | dborba.com 38