Creating High Performance Mobile Apps with HTML5

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

• 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

• Mobile is diﬀerent • Why HTML5? • Deﬁning 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

• 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

• 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

“Fulﬁll the promise of a full mobile computing experience”. ONE
CLEAR GOAL

Source: http://html5test.com

Source: http://beta.html5test.com/compare/browser/bb-10.2/ios-7.0/android-4.3/ﬁrefoxmobile-24/wp-8.html

W H Y ? • Reach • Huge Developer Community
• Cross* Platform (Cordova, PhoneGap, Sencha etc) • Standards • Tons of Libraries, Tools and Services

Source: Vision Mobile Developer Economics 2013 78% of developers interested
in revenue, use two or more platforms concurrently

Source: Vision Mobile Developer Economics 2013 Android, iOS and BlackBerry
are top priority for their developers

H O W D O E S I T W
O R K ?

P E R F O R M A N C
E

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.

Source: Michael Wolf, Director of Technology at Cynergy PERFORMANCE UX
===

L A T E N C Y Input Event (
press menu key ) Display Update ( menu appears ) timeline UI Latency

L A T E N C Y

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

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

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

Accessing the DOM is expensive, do smarter trips 1 ECMA
LAND DOM LAND BRIDGE TOLL ROAD

2 Call the right keyboard <input type="text" />

2 Call the right keyboard <input type="email" />

2 Call the right keyboard <input type="number" />

3 Use custom data-* attributes <div id="demian" data-job="evangelist" data-company="blackberry"></div>

3 Use custom data-* attributes // Add new data attributes
via JS. var el = document.querySelector('#demian'); el.setAttribute('data-focus', 'html5');

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

4 Worry about keeping the user well informed (good feedback)
TAP REQUEST DATA WAIT PARSE DATA UPDATE VIEW

5 Be careful with Gradients, prefer CSS or SVG <html>
<svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" ﬁll="url(#myGradient)" onmousedown="alert('hello');"/> </svg> </html>

6 Use sprites and pick the right image format USE
JPEG FOR for non-transparent images USE PNG FOR for transparent images

7 dataURI is your friend

8 Browser APIs are awesome if (navigator.onLine) { alert('online'); }
else { alert('oﬄine'); }

9 Have a nice backend solution (e.g. Amazon AWS)

9 Have a nice backend solution (ex: Amazon AWS) Great
tutorial by Christophe Coenraets: http://bit.ly/1aDYANI

9 Have a nice backend solution (ex: Amazon AWS)

1 0 Create an oﬄine mode (localStorage) window.localStorage.setItem('nome', 'Demian Borba');
window.localStorage.getItem('nome');

1 0 Create an oﬄine 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); });

1 0 Create an oﬄine 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 = ...; };

1 1 Create single page apps <html> <head> <title>App<title> <script
src="app.js"></script> </head> <body> </body> <html>

1 2 Touch is diﬀerent than Click click: 307ms

1 2 Touch is diﬀerent than Click touchstart: 4ms

1 2 Touch is diﬀerent 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);

1 3 jQuery? Well... .querySelectorAll()

1 3 jQuery? Well... document.getElementById

1 4 CSS for touch is special -webkit-tap-highlight-color: rgba(0, 0,
0, 0); user-select: none;

1 5 Boost your scrolling list -webkit-overﬂow-scrolling: touch; iScroll

1 6 Use CSS Transitions + Hardware Acceleration -webkit-transform: translate3d(0,0,0);

1 7 preventDefault()

1 8 Web Workers Execution happens in a separate process.
Not on the UI THREAD = no UI delays Main Script doWork.js (The Worker)

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)

1 9 Be careful with frameworks http://zeptojs.com/

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.

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

1 9 Be careful with frameworks 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

2 0 There is no magic! (JSPerf, BrowserScope, WebInspector) Test!
Test! Test! Tip: 20% QA

• 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

developer.blackberry.com/html5 C++/Qt Cascades ActionScript Adobe® AIR® HTML5 BlackBerry® WebWorks™ C/C++
Native SDK Java Android™ Runtime

developer.blackberry.com/builtforblackberry

R E M O T E W E B I
N S P E C T O R Sample App: bbUI Sample

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) + +

T H E C A R

Q N X C A R

• 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

QNX$CAR$2$feature$highlights$ Naviga&on) •  Elektrobit$embedded$ •  Telenav$hybrid$ •  TCS$oﬀ@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$

A P P ?

• Bluetooth 4.0 • Wiﬁ • 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 Notiﬁcations UI Outputs based on Sensor Inputs and User Preferences CONNECT SHARE

T R I G G E R S Sample: Travel,
Context Aware, Headless Apps

N F C Sample: Pictures, Wotando

P R O T Y P I N G Sample:
Rabiscapp

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

G A M I N G Sample: ShadowGun / Tunnel
Tilt

D O I T

• 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

W H A T A R E Y O U
W A I T I N G F O R ?

Demian Borba BlackBerry Developer Evangelist @demianborba www.dborba.com T H A
N K Y O U

Creating High Performance Mobile Apps with HTML5

Creating High Performance Mobile Apps with HTML5

More Decks by Demian Borba

Other Decks in Technology

Featured

Transcript