This document discusses using HTML5 APIs in real applications. It begins by introducing various HTML5 APIs like Web Storage, Offline, Media, and Web Workers. It then addresses problems that can be encountered when using these APIs like browser support issues. The document discusses techniques for dealing with support problems like polyfills and feature detection. Finally, it provides examples of using APIs like Vibration, Web Notifications, and Web Speech in applications and lessons learned.

1. HTML5 API:
Hero, Villain your usage
in real applications
Wilson Mendes
@willmendesneto

2. Wilson Mendes
@willmendesneto
#communities
#stopWithHashtags
WHEN
IAM
#opensource
#developer

3. Beyond
VALIDATION
FORMS
OF

4. Because
everyone someday...
Suffered with asyncronous
requests...

5. Promises / Proactor

6. JavaScript
Async

7. NaN
Because everything can
happen.
Including nothing

9. Array(16).join(‘wat’ - 1) + ‘ Batman!’;
If you know everything...
What the result?
https://www.destroyallsoftware.com/talks/wat

10. Because
everyone someday...
Was impressed with a
HTML5 API...

11. Web Storage
Offline
Media
Web Speech
Web Workers
Connection
Fullscreen
Vibration
File

12. But when was use it...
... was faced with PROBLEMS ...

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

15. And Internet Explorer?

16. Well...

17. Current scenario
Pre-processors
CLI
Frameworks
Libs
Enterprise
Desktop Apps

18. Javascript can do it?

19. ...but it’s not so easy...

20. New API’s
New problems
Cool API, but it works only in …

21. http://remysharp.com/2010/10/08/what-is-a-polyfill/
Polifylls? SHIM?

22. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
...but...for API’s?

23. ...but it’s not so easy…[2]

24. Testing support

25. Feature Detection

26. @supports

27. CSS Support Javascript

28. BUT WE HAVE HELP

30. HTML5 please

32. Frontend-search

33. So, let’s talk about
HTML5 API’s?

34. Vibration
http://embed.plnkr.co/UKYISp/

35. Web Notification

36. Offline

37. !==
Offline First!
Offline API

38. Fullscreen

39. Web Storage
http://embed.plnkr.co/iznugnFL8fM3ALhKtBtQ/preview

40. Usability
Acessibility
HTML5 API’s

41. Usability
Acessibility
HTML5 API’s

42. Web Speech

43. Web Speech
http://embed.plnkr.co/D6BVEE/preview

45. Sensor
http://embed.plnkr.co/zKqSLBuI11HoYQLGk1zZ/preview

46. How to integrate
these 2 API’s?
WITHOUT INTEGRATION!
(for now)
Bad news...

47. https://twitter.com/willmendesneto/status/474580225071017984

48. Architecture

49. Same app id
distinct browsers?

50. Fullscreen
Media
Web Storage
Vibration
Web Notifications
API’s useds
Speech recognition Battery

51. KEEP
CALM
IT’S
SHOOOW
TIME

52. Social Share
https://github.com/willmendesneto/social-share

53. LESSONS
LEARNED

54. NEW RESPONSABILITIES
NEW POSSIBILITIES

55. BONUS
TIME

56. Text Encoding
http://embed.plnkr.co/4INpdt/preview

57. Web Alarms

58. THANKS
Wilson Mendes
@willmendesneto
HTML5 API: Hero, villain and your usage in real applications