HTML5 API's: Hero, Villain and your usage in real applications

412 views

Published on

The new HTML5 API's opened up new possibilities as webapps, mobile apps, and other embedded apps. But how to handle support (or lack thereof) API's in different browsers? In this presentation I will talk about lessons learned, best practices for using HTML5 with Progressive Enhancement and falbacks Gracefull degradation using HTML5 API's to improve the UX of your app and how to deal with the lack of support among different browsers, minificando impacts. All this based on a real example.

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

No Downloads
Views
Total views
412
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 API's: Hero, Villain and your usage in real applications

  1. 1. HTML5 API: Hero, Villain your usage in real applications Wilson Mendes @willmendesneto
  2. 2. Wilson Mendes @willmendesneto #communities #stopWithHashtags WHEN IAM #opensource #developer
  3. 3. Beyond VALIDATION FORMS OF
  4. 4. Because everyone someday... Suffered with asyncronous requests...
  5. 5. Promises / Proactor
  6. 6. JavaScript Async
  7. 7. NaN Because everything can happen. Including nothing
  8. 8. Array(16).join(‘wat’ - 1) + ‘ Batman!’; If you know everything... What the result? https://www.destroyallsoftware.com/talks/wat
  9. 9. Because everyone someday... Was impressed with a HTML5 API...
  10. 10. Web Storage Offline Media Web Speech Web Workers Connection Fullscreen Vibration File
  11. 11. But when was use it... ... was faced with PROBLEMS ...
  12. 12. http://loopinfinito.com.br/2012/09/05/entendendo-as-diferentes-distribuicoes-dos-browsers/ Stable channel Beta channel Dev channel Canary build Release Beta Aurora Nightly Estável Next Browsers distribution
  13. 13. And Internet Explorer?
  14. 14. Well...
  15. 15. Current scenario Pre-processors CLI Frameworks Libs Enterprise Desktop Apps
  16. 16. Javascript can do it?
  17. 17. ...but it’s not so easy...
  18. 18. New API’s New problems Cool API, but it works only in …
  19. 19. http://remysharp.com/2010/10/08/what-is-a-polyfill/ Polifylls? SHIM?
  20. 20. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills ...but...for API’s?
  21. 21. ...but it’s not so easy…[2]
  22. 22. Testing support
  23. 23. Feature Detection
  24. 24. @supports
  25. 25. CSS Support Javascript
  26. 26. BUT WE HAVE HELP
  27. 27. HTML5 please
  28. 28. Frontend-search
  29. 29. So, let’s talk about HTML5 API’s?
  30. 30. Vibration http://embed.plnkr.co/UKYISp/
  31. 31. Web Notification
  32. 32. Offline
  33. 33. !== Offline First! Offline API
  34. 34. Fullscreen
  35. 35. Web Storage http://embed.plnkr.co/iznugnFL8fM3ALhKtBtQ/preview
  36. 36. Usability Acessibility HTML5 API’s
  37. 37. Usability Acessibility HTML5 API’s
  38. 38. Web Speech
  39. 39. Web Speech http://embed.plnkr.co/D6BVEE/preview
  40. 40. Sensor http://embed.plnkr.co/zKqSLBuI11HoYQLGk1zZ/preview
  41. 41. How to integrate these 2 API’s? WITHOUT INTEGRATION! (for now) Bad news...
  42. 42. https://twitter.com/willmendesneto/status/474580225071017984
  43. 43. Architecture
  44. 44. Same app id distinct browsers?
  45. 45. Fullscreen Media Web Storage Vibration Web Notifications API’s useds Speech recognition Battery
  46. 46. KEEP CALM IT’S SHOOOW TIME
  47. 47. Social Share https://github.com/willmendesneto/social-share
  48. 48. LESSONS LEARNED
  49. 49. NEW RESPONSABILITIES NEW POSSIBILITIES
  50. 50. BONUS TIME
  51. 51. Text Encoding http://embed.plnkr.co/4INpdt/preview
  52. 52. Web Alarms
  53. 53. THANKS Wilson Mendes @willmendesneto HTML5 API: Hero, villain and your usage in real applications

×