Multiplatform App Development
with Web Technologies
Adam Stanley
@n_adam_stanley
04 de julio 2013
Logo de empresa
que pres...
Hola Mundo
• Adam Stanley
– Team Lead, BlackBerry Developer Relations
– Likes: ninjas, bacon, JavaScript
– Dislikes: cilan...
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
requestAnimationFr...
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-fami...
CSS3
• GPU helps animation & CSS transitions
– Use 3D to enable hardware acceleration
-webkit-transform: translate(100px, ...
JavaScript
• Functionality for web apps
• A beautiful language
– Standards based
– Cross-platform
– No compilation
– View ...
JavaScript
• It’s also a terrible language
– No OOP
– No standard libraries
– No module system
– Full of surprises
> [] + ...
JavaScript
• Classic developer problem
Image Source: © 2013, Nicholas H. Tollervey, http://ntoll.org/article/pinax-and-leg...
JavaScript
• Or had the problem already been solved?
– Don’t invent already invented solutions
Image Source: © 2013, Craig...
JavaScript
• Understand community frameworks
– Macro (jQuery, Sencha)
– Micro (require, backbone)
“Micro” Frameworks
Your ...
JavaScript
• Flotr2.js
– Drawing HTML5 charts & graphics
Image Source: © 2013, Humble Software Development, http://www.hum...
JavaScript
• Hammer.js
– multi-touch gestures
– Cross-platform support
– Super lightweight (2Kb)
Image Source: © 2013, Jor...
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 det...
JavaScript
• Modernizr
– A JavaScript library for feature detection
– HTML5, CSS3
– Write code for all browsers
Modernizr....
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
Pla...
Mobile Applications
• Enriched platform capabilities
blackberry.app
blackberry.event
blackberry.system
blackberry.identity...
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.jsSencha TouchjQuery ...
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, WebG...
Real World applications
Sencha
HTML5
Facebook
Hybrid App
List scrolling
Payload
State Retention
http://www.sencha.com/blog...
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=J0rM...
Closing thoughts
• Choose mobile industry leaders
– High HTML5 standards support
– Very active WebKit contributions
– 1st-...
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: © ...
Closing thoughts
• Performance must be considered at every step
0 20 40 60 80 100
Performance
Default
Some optimization
Fu...
Preguntas
¡Gracias!
Adam Stanley
@n_adam_stanley
Logo de empresa
que presenta
Upcoming SlideShare
Loading in...5
×

Sg conference multiplatform_apps_adam_stanley

431

Published on

Web technologies such as HTML5, Javascript and CSS3 are emerging as an alternative for mobile application development platform, at the same time allow the user to provide great experiences, and are simple to administer and maintain by IT organizations.

This session will discuss the status of these technologies and their feasibility for the development of mobile applications. We will also address some recommendations and considerations that must be taken to choose a strategy for developing apps based on web technologies.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
431
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sg conference multiplatform_apps_adam_stanley

  1. 1. Multiplatform App Development with Web Technologies Adam Stanley @n_adam_stanley 04 de julio 2013 Logo de empresa que presenta
  2. 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. 3. Web or Native? USA Today Flixster
  4. 4. Web or Native? • What matters to users is EXPERIENCE • What matters to developers is USERS
  5. 5. Why consider Web? • Cross platform by nature, good for developers
  6. 6. Why consider Web? Q2 2013 Mobile Developer Report 6,046 Appcelerator Titanium developers
  7. 7. Why consider Web? • Excellent cross-platform mobile support • HTML5 Test – Max 500 + 15 bonus points http://html5test.com
  8. 8. Current state of HTML5 Camera Accelerometer Storage File API WebGL Magnetometer Geolocation Web sockets requestAnimationFrame Media queries Notification
  9. 9. Current state of HTML5 • It knows what you want to do next – Contextual input fields – Native UI integration 9
  10. 10. Current state of HTML5 • Ringmark test http://rng.io BlackBerry 10
  11. 11. CSS3 • Provide visual style to UI – Enhance default styles – Define a custom look & feel .gangnam { float: left; font-family: Korean; }
  12. 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. 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. 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. 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. 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. 17. JavaScript • Understand community frameworks – Macro (jQuery, Sencha) – Micro (require, backbone) “Micro” Frameworks Your Org HTML5, CSS3 JavaScript “Macro” Frameworks
  18. 18. JavaScript • Flotr2.js – Drawing HTML5 charts & graphics Image Source: © 2013, Humble Software Development, http://www.humblesoftware.com/flotr2
  19. 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. 20. JavaScript • Construct2 – Create compelling HTML5 games – No coding required http://www.scirra.com/construct2
  21. 21. JavaScript • Development strategy rule – Never make assumptions based on a browser – Use feature detection NOT browser detection
  22. 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. 23. Mobile Applications What if you could build a native application using Web technologies? JavaScript HTML5 CSS3
  24. 24. Mobile Applications • Storefronts – Powerful digital shopping experience – Carrier billing – Credit card, PayPal
  25. 25. Mobile Applications • Browser vs. Applications distribution model
  26. 26. Mobile Applications • HTML5 apps that run natively – SDKs: Cordova, PhoneGap, WebWorks
  27. 27. Mobile Applications • HTML5 powered by native capabilities HTML5, CSS3, JavaScript WebKit engine Application platforms Platform Developer APIs
  28. 28. Mobile Applications • Enriched platform capabilities blackberry.app blackberry.event blackberry.system blackberry.identity Native plugin (C/C++)JavaScript API
  29. 29. Mobile Applications • Platform Services – Payment – Advertising – Location – Analytics – Social – Scoreloop
  30. 30. Mobile Applications • Achieve a native “Look & Feel” with Web – Reminder: It’s about EXPERIENCE bbUI.jsSencha TouchjQuery Mobile
  31. 31. Performance matters http://browserdiet.com
  32. 32. Performance matters • Radio – Bandwidth – Latency • CPU – Animation – Scrolling • Battery – Events
  33. 33. Performance matters • Hardware acceleration makes a BIG difference – CSS (scrolling, transitions) – Canvas (GUIMark3, WebGL) http://www.youtube.com/watch?v=OYgtr0-hlBQ
  34. 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. 35. Real World applications 35
  36. 36. Real World applications USA Today Flixster
  37. 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. 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. 39. Closing thoughts • Build sophisticated mobile Web apps 2Scoops Filter Mama TuneIn radio Mailonline
  40. 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. 41. Closing thoughts • Performance must be considered at every step 0 20 40 60 80 100 Performance Default Some optimization Fully optimized
  42. 42. Preguntas ¡Gracias! Adam Stanley @n_adam_stanley Logo de empresa que presenta
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×