Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating High Performance Mobile Apps with HTML5

Demian Borba
October 24, 2013

Creating High Performance Mobile Apps with HTML5

Learn how to create amazing HTML5 apps for mobile devices — always focusing on the best performance possible — using debugging and inspection tools. This presentation covers how to package applications for BlackBerry 10 devices and how to set up your environment to get live reloads on your mobile devices. Open source JavaScript libraries for our UI are mentioned, and it goes through some of the important ins and outs of mobile development using HTML5.

Demian Borba

October 24, 2013

More Decks by Demian Borba

Other Decks in Technology


  1. Demian Borba BlackBerry Developer Evangelist @demianborba www.dborba.com C R E

    A T I N G H I G H P E R F O R M A N C E M O B I L E A P P S W I T H H T M L 5
  2. • Graduated in Industrial Design (CEFET-PR) • Graduated in Computer

    Science (UFAL) • Crazy about Design, UX, Business and Technology • Professor at University of California San Diego (UCSD) • Working with Interactive Media for over 13 years • Founder of Action Creations, interactive agency in California • Developer Evangelist, 90% #upintheair • Launch the Startup Jam program globally • Launched the Tech Centers in Universities A B O U T M E
  3. • Mobile is different • Why HTML5? • Defining PERFORMANCE

    • 20 tips to improve performance • Samples built with HTML5 • Remote Web Inspector • Live Refresh • The Car • What we are trying to solve • Questions & Answers A G E N D A
  4. • Large display • Large point of focus • Unlimited

    connection and power • IMMERSIVE EXPERIENCE D E S K T O P C O N N E C T E D W O R L D
  5. • Small display • Single point of focus • Variable

    limited connection and power INTERACTIVE EXPERIENCE M O B I L E I S D I F F E R E N T
  6. W H Y ? • Reach • Huge Developer Community

    • Cross* Platform (Cordova, PhoneGap, Sencha etc) • Standards • Tons of Libraries, Tools and Services
  7. Source: Vision Mobile Developer Economics 2013 78% of developers interested

    in revenue, use two or more platforms concurrently
  8. Source: Wikipedia (http://en.wikipedia.org/wiki/Computer_performance) Computer performance is characterized by the amount

    of useful work accomplished by a computer system compared to the time and resources used.
  9. L A T E N C Y Input Event (

    press menu key ) Display Update ( menu appears ) timeline UI Latency
  10. D O E S P E R F O R

    M A N C E M A T T E R ? Source: http://www.slideshare.net/stoyan/yslow-20-presentation
  11. D O E S P E R F O R

    M A N C E M A T T E R ? Source: https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0
  12. 2 0 T I P S P E R F

    O R M A N C E I M P R O V E T O
  13. 3 Use custom data-* attributes // Add new data attributes

    via JS. var el = document.querySelector('#demian'); el.setAttribute('data-focus', 'html5');
  14. 3 Use custom data-* attributes var html = []; for

    (var key in el.dataset) { html.push(key, ': ', el.dataset[key], '<br>'); } el.innerHTML = html.join(''); Output: job: evangelist company: blackberry focus: html5
  15. 4 Worry about keeping the user well informed (good feedback)

  16. 4 Worry about keeping the user well informed (good feedback)

  17. 5 Be careful with Gradients, prefer CSS or SVG <html>

    <svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg> </html>
  18. 6 Use sprites and pick the right image format USE

    JPEG FOR for non-transparent images USE PNG FOR for transparent images
  19. 9 Have a nice backend solution (ex: Amazon AWS) Great

    tutorial by Christophe Coenraets: http://bit.ly/1aDYANI
  20. 1 0 Create an offline mode (Web SQL Database) var

    db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); // 5MB db.transaction(function(tx) { tx.executeSql("SELECT * FROM employees", [], successCallback, errorCallback); });
  21. 1 0 Create an offline mode (IndexedDB) var idbRequest =

    window.indexedDB.open('Database Name'); idbRequest.onsuccess = function(event) { var db = event.srcElement.result; var transaction = db.transaction([], IDBTransaction.READ_ONLY); var curRequest = transaction.objectStore('ObjectStore Name').openCursor(); curRequest.onsuccess = ...; };
  22. 1 1 Create single page apps <html> <head> <title>App<title> <script

    src="app.js"></script> </head> <body> </body> <html>
  23. 1 2 Touch is different than Click github.com/ftlabs/fastclick index.html: <script

    src="lib/fastclick.js"></script> app.js: window.addEventListener('load', function () { new FastClick(document.body); }, false);
  24. 1 8 Web Workers Execution happens in a separate process.

    Not on the UI THREAD = no UI delays Main Script doWork.js (The Worker)
  25. 1 9 Be careful with frameworks 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)
  26. 1 9 Be careful with frameworks http://www.sencha.com/products/touch § MVC like

    § Focused on commercial products § Training & Support § Runs on OS, Android, BlackBerry, Windows Phone, and more.
  27. 1 9 Be careful with frameworks http://lungo.tapquo.com § Created to

    run on low end devices § Robust API § Community Driven (GitHub) § Runs on iOS / Android / Blackberry / FirefoxOS
  28. 1 9 Be careful with frameworks 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
  29. • bbUI.js • Sensors • Accelerometer Fight • Built For

    BlackBerry • WebGL Sample (http://dborba.com/gamepad) source code: http://github.com/blackberry/ and look for WebWorks S A M P L E A P P S
  30. R E M O T E W E B I

    N S P E C T O R Sample App: bbUI Sample
  31. L I V E R E F R E S

    H Video tutorial: http://dborba.com/wow-no-more-re-packaging-when-testing-html5-apps-on-your-device/ Text Editor (i.g. Sublime) Packager (i.g. WebWorks) Network Observer (i.g. Live Reload) + +
  32. • HTML5 SDK for Web Developers • Launch planned for

    end of 2013 (in sync with QNX CAR 2.1) How app developers can make money? • Advertising • In-app purchases • SaaS - Software as a Service (monthly charges) • OEM pre-funded • Etc Q N X C A R S D K
  33. QNX$CAR$2$feature$highlights$ Naviga&on) •  Elektrobit$embedded$ •  Telenav$hybrid$ •  TCS$off@board$ $ Infotainment)+)social)media)

    •  Media/AM/FM/HD$ •  Pandora,$SHtcher$ •  Web$browser,$YouTube$ •  Facebook,$TwiMer$ Automo&ve) •  PersonalizaHon$ •  Climate$control$ •  Virtual$mechanic$ •  Audio$control$ $ Connec&vity) •  Bluetooth$+$SMS$ •  MirrorLink$+$iPod$Out$ •  Smartphone$w/$HTML5$ •  DLNA$ Pla9orm)+)framework) •  Torch$browser$ •  ComposiHon$manager$ •  HTML5$framework$ •  App$store$support$
  34. • Bluetooth 4.0 • Wifi • NFC • USB •

    HDMI • DLNA • Triggers SENSE UNDERSTAND ADAPT • BBM • Files • Screen • Video • Game GPS Accelerometer Altimeter Gyroscope Camera Screens Keyboard Cascades UI Framework My Location Geofence Places Map Automotive Hub Contacts Calendar Notifications UI Outputs based on Sensor Inputs and User Preferences CONNECT SHARE
  35. T R I G G E R S Sample: Travel,

    Context Aware, Headless Apps
  36. C O N T R O L L E R

    Sample: Sphero “In 2 hours, I created an app to control my Sphero with a BlackBerry 10. It was the 1st time I had even heard of the BlackBerry development tools”. - Mike DePhillips, Software Engineer at GoSphero
  37. • Find a real world problem • Never bring TECHNOLOGY

    before the PROBLEM • Analyze the current solutions • Validate your idea • Build your MVP (Minimum Viable Product) • Sense, understand and adapt S U G G E S T I O N S
  38. W H A T A R E Y O U

    W A I T I N G F O R ?