0
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
×

Desarrollo de apps multiplataforma con tecnologías web

1,072

Published on

Conferencia impartida por Adam Stanley.

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

  • Be the first to like this

No Downloads
Views
Total Views
1,072
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Desarrollo de apps multiplataforma con tecnologías web"

  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. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×