This document discusses developing multiplatform apps using web technologies. It argues that web technologies allow for cross-platform development which benefits both users and developers. The current state of HTML5, CSS3 and JavaScript allows for building sophisticated mobile web apps that can utilize device capabilities and feel native. Performance is important and web apps should be optimized to be on par with native apps. With continued advancement, web technologies provide a strong option for mobile app development.

1. Multiplatform App Development
with Web Technologies
Adam Stanley
@n_adam_stanley
04 de julio 2013
Logo de empresa
que presenta

2. 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

3. Web or Native?
USA Today Flixster

4. Web or Native?
• What matters to users is EXPERIENCE
• What matters to developers is USERS

5. Why consider Web?
• Cross platform by nature, good for developers

6. Why consider Web?
Q2 2013 Mobile Developer Report
6,046 Appcelerator Titanium developers

7. Why consider Web?
• Excellent cross-platform mobile support
• HTML5 Test
– Max 500 + 15 bonus points
http://html5test.com

8. Current state of HTML5
Camera
Accelerometer
Storage
File API
WebGL
Magnetometer
Geolocation
Web sockets
requestAnimationFrame
Media queries
Notification

9. Current state of HTML5
• It knows what you want to do next
– Contextual input fields
– Native UI integration
9

10. Current state of HTML5
• Ringmark test
http://rng.io
BlackBerry 10

11. CSS3
• Provide visual style to UI
– Enhance default styles
– Define a custom look & feel
.gangnam {
float: left;
font-family: Korean;
}

12. 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

13. 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

14. 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

15. 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

16. 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

17. JavaScript
• Understand community frameworks
– Macro (jQuery, Sencha)
– Micro (require, backbone)
“Micro” Frameworks
Your Org
HTML5, CSS3
JavaScript
“Macro” Frameworks

18. JavaScript
• Flotr2.js
– Drawing HTML5 charts & graphics
Image Source: © 2013, Humble Software Development, http://www.humblesoftware.com/flotr2

19. 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!');
});

20. JavaScript
• Construct2
– Create compelling HTML5 games
– No coding required
http://www.scirra.com/construct2

21. JavaScript
• Development strategy rule
– Never make assumptions based on a browser
– Use feature detection NOT browser detection

22. 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'
});

23. Mobile Applications
What if you could
build a native
application using
Web technologies?
JavaScript
HTML5
CSS3

24. Mobile Applications
• Storefronts
– Powerful digital
shopping
experience
– Carrier billing
– Credit card, PayPal

25. Mobile Applications
• Browser vs. Applications distribution model

26. Mobile Applications
• HTML5 apps that run natively
– SDKs: Cordova, PhoneGap, WebWorks

27. Mobile Applications
• HTML5 powered by native capabilities
HTML5, CSS3, JavaScript
WebKit engine
Application platforms
Platform Developer APIs

28. Mobile Applications
• Enriched platform capabilities
blackberry.app
blackberry.event
blackberry.system
blackberry.identity
Native plugin (C/C++)JavaScript API

29. Mobile Applications
• Platform Services
– Payment
– Advertising
– Location
– Analytics
– Social
– Scoreloop

30. Mobile Applications
• Achieve a native “Look & Feel” with Web
– Reminder: It’s about EXPERIENCE
bbUI.jsSencha TouchjQuery Mobile

31. Performance matters
http://browserdiet.com

32. Performance matters
• Radio
– Bandwidth
– Latency
• CPU
– Animation
– Scrolling
• Battery
– Events

33. Performance matters
• Hardware acceleration makes a BIG difference
– CSS (scrolling, transitions)
– Canvas (GUIMark3, WebGL)
http://www.youtube.com/watch?v=OYgtr0-hlBQ

34. 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

35. Real World applications
35

36. Real World applications
USA Today Flixster

37. 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

38. 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

39. Closing thoughts
• Build sophisticated mobile Web apps
2Scoops Filter Mama TuneIn radio Mailonline

40. Closing thoughts
• A Web app is not a Web site
Packaged
Resources
+ User
Experience
Optimize
Performance
Image Source: © Rooster Teeth,
http://bit.ly/11jyK3e

41. Closing thoughts
• Performance must be considered at every step
0 20 40 60 80 100
Performance
Default
Some optimization
Fully optimized

42. Preguntas
¡Gracias!
Adam Stanley
@n_adam_stanley
Logo de empresa
que presenta