Conferencia impartida por Adam Stanley.

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