Multiplatform App Development with Web Technologies

Adam Stanley

@n_adam_stanley

04 de julio 2013

Logo de empresa que presenta

Hola Mundo

• Adam Stanley – Team Lead, BlackBerry Developer Relations

– Likes: ninjas, bacon, JavaScript

– Dislikes: cilantro, styrofoam, JavaScript

– 127.0.0.1 is Waterloo, Ontario, Canada

Web or Native?

USA Today Flixster

Web or Native?

• What matters to users is EXPERIENCE

• What matters to developers is USERS

Why consider Web?

• Cross platform by nature, good for developers

Why consider Web?

Q2 2013 Mobile Developer Report 6,046 Appcelerator Titanium developers

Why consider Web?

• Excellent cross-platform mobile support

• HTML5 Test

– Max 500 + 15 bonus points

http://html5test.com

Current state of HTML5

Camera Accelerometer Storage File API WebGL Magnetometer

Geolocation Web sockets requestAnimationFrame Media queries Notification

Current state of HTML5

• It knows what you want to do next

– Contextual input fields

– Native UI integration

9

Current state of HTML5

• Ringmark test

http://rng.io

BlackBerry 10

CSS3

• Provide visual style to UI

– Enhance default styles

– Define a custom look & feel

.gangnam {

float: left;

font-family: Korean;

}

CSS3

• GPU helps animation & CSS transitions

– Use 3D to enable hardware acceleration

-webkit-transform: translate(100px, 0px);

-webkit-transform: translate3d(100px, 0px, 0px);

More demos http://bit.ly/15h0Xa2

JavaScript

• Functionality for web apps

• A beautiful language

– Standards based

– Cross-platform

– No compilation

– View source

Image Source: ©2008 Doug Crockford, http://shop.oreilly.com/product/9780596517748.do

JavaScript

• It’s also a terrible language

– No OOP

– No standard libraries

– No module system

– Full of surprises

> [] + [] [object Object]

> {} + []

0

> {} + {}

NaN Image Source: © Phillihp Harmon, http://bit.ly/13uHQKM

JavaScript

• Classic developer problem

Image Source: © 2013, Nicholas H. Tollervey, http://ntoll.org/article/pinax-and-lego

So, you want to build something awesome.

Do you build everything yourself?

Image Source: © 2011, CNET http://news.cnet.com/2300-17938_105-10008728-10.html

JavaScript

• Or had the problem already been solved?

– Don’t invent already invented solutions

Image Source: © 2013, Craig Changfoot, http://www.organizedactions.com/?p=1801

JavaScript

• Understand community frameworks

– Macro (jQuery, Sencha)

– Micro (require, backbone)

“Micro” Frameworks

Your Org

HTML5, CSS3

JavaScript

“Macro” Frameworks

JavaScript

• Flotr2.js

– Drawing HTML5 charts & graphics

Image Source: © 2013, Humble Software Development, http://www.humblesoftware.com/flotr2

JavaScript

• Hammer.js

– multi-touch gestures

– Cross-platform support

– Super lightweight (2Kb)

Image Source: © 2013, Jorik Tangelder, http://eightmedia.github.io/hammer.js/

Hammer(el).on("swipeleft", function() {

alert('you swiped left!');

});

JavaScript

• Construct2

– Create compelling HTML5 games

– No coding required

http://www.scirra.com/construct2

JavaScript

• Development strategy rule

– Never make assumptions based on a browser

– Use feature detection NOT browser detection

JavaScript

• Modernizr

– A JavaScript library for feature detection

– HTML5, CSS3

– Write code for all browsers

Modernizr.load({

test: Modernizr.geolocation,

yep : 'geo.js',

nope: 'geo-polyfill.js'

});

Mobile Applications

What if you could build a native application using Web technologies?

JavaScript

HTML5 CSS3

Mobile Applications

• Storefronts

– Powerful digital shopping experience

– Carrier billing

– Credit card, PayPal

Mobile Applications

• Browser vs. Applications distribution model

Mobile Applications

• HTML5 apps that run natively

– SDKs: Cordova, PhoneGap, WebWorks

Mobile Applications

• HTML5 powered by native capabilities

HTML5, CSS3, JavaScript

WebKit engine

Application platforms

Platform Developer APIs

Mobile Applications

• Enriched platform capabilities

blackberry.app

blackberry.event

blackberry.system

blackberry.identity

Native plugin (C/C++)

JavaScript API

Mobile Applications

• Platform Services

– Payment

– Advertising

– Location

– Analytics

– Social

– Scoreloop

Mobile Applications

• Achieve a native “Look & Feel” with Web

– Reminder: It’s about EXPERIENCE

bbUI.js Sencha Touch jQuery Mobile

Performance matters

http://browserdiet.com

Performance matters

• Radio – Bandwidth

– Latency

• CPU – Animation

– Scrolling

• Battery – Events

Performance matters

• Hardware acceleration makes a BIG difference

– CSS (scrolling, transitions)

– Canvas (GUIMark3, WebGL)

http://www.youtube.com/watch?v=OYgtr0-hlBQ

Real World applications

Sencha HTML5

Facebook Hybrid App

List scrolling

Payload

State Retention

http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story

15 fps 60 fps

20 kb 2 kb

None Full

Real World applications

35

Real World applications

USA Today Flixster

What’s next for HTML5?

• Mobile computing

– More than smartphones

– Think ‘end points’

http://www.youtube.com/watch?v=J0rMb8qtcSs Image Source: ©2013, Crackberry.com, http://bit.ly/11Btbh9

©2013, PostMedia News, http://bit.ly/1cUP3U9

Closing thoughts

• Choose mobile industry leaders

– High HTML5 standards support

– Very active WebKit contributions

– 1st-class packaged Web app support

– Enables native integration

– Push boundaries of web app platform

38

Closing thoughts

• Build sophisticated mobile Web apps

2Scoops Filter Mama TuneIn radio Mailonline

Closing thoughts

• A Web app is not a Web site

Packaged Resources

+ User

Experience

Optimize

Performance

Image Source: © Rooster Teeth, http://bit.ly/11jyK3e

Closing thoughts

• Performance must be considered at every step

0 20 40 60 80 100

Performance

Default

Some optimization

Fully optimized

Preguntas

¡Gracias!

Adam Stanley

@n_adam_stanley

Logo de empresa que presenta