Creating High Performance Mobile Apps with HTML5

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 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

Slide 3

Slide 3 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 3 78% of developers interested in revenue, use two or more platforms concurrently Source: Vision Mobile Developer Economics 2013

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 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 ﬁrst 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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 9 Does performance matter? Source: https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0

Slide 10

Slide 10 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 10 UI Latency Input Event ( press menu key ) Display Update ( menu appears ) timeline UI Latency Performance in mobile is about Latency

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 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

Slide 16

Slide 16 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 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

Slide 17

Slide 17 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 17 WebWorkers § Execution happens in a separate process § Not on the UI THREAD = no UI delays Main Script doWork.js (The Worker)

Slide 18

Slide 18 text

© 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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 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-ﬁle 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

Slide 22

Slide 22 text

© 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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 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)

Slide 25

Slide 25 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 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.

Slide 26

Slide 26 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 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

Slide 27

Slide 27 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 27 bbUI.js https://github.com/blackberry/bbUI.js § Niche speciﬁc, (BlackBerry 10 look and feel) § Follows BlackBerry 10 User Experience Guidelines § Community Driven (GitHub) § OFF DOM Implementation § UI only

Slide 28

Slide 28 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 28 Built for BlackBerry HTML5 Sample https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/Built-For- BlackBerry http://developer.blackberry.com/builtforblackberry

Slide 29

Slide 29 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 29 Visual tool from the Community Creating your ﬁrst BlackBerry 10 App Video tutorial and download: http://dborba.com/meet-gap-alpha-for-html5-no- need-to-use-command-line-anymore/

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Conﬁdential. 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

Slide 35

Slide 35 text

Slide 36

Slide 36 text

© 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

Slide 37

Slide 37 text

Slide 38

Slide 38 text