html5 api herói, vilão e sua utilização hoje em aplicações reais
DESCRIPTION
As novas API’s do HTML5 abriram novas possibilidades como webapps, mobile apps, apps embarcados e outros. Mas como lidar com suporte (ou a falta dele) a API’s em diferentes browsers? Nesta apresentação vou falar sobre lições aprendidas, boas práticas de utilização de HTML5 Progressive Enhancement com falbacks e Gracefull degradation usando HTML5 API’s para melhorar a UX de seu app e como tratar a falta de suporte entre diferentes browsers, minificando impactos. Tudo isso baseado em um exemplo real. ------------------------------------------------------------------------- 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.TRANSCRIPT
![Page 1: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/1.jpg)
HTML5 API: Herói, Vilão e sua utilização
em aplicações reais
Wilson Mendes@willmendesneto
![Page 2: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/2.jpg)
Wilson Mendes@willmendesneto
#comunidades#jáChegaDeHashtag
QUEM
EUSOU
#opensource#developer
![Page 3: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/3.jpg)
Além da V
ALID
AÇ
ÃO
Formuláriosde
![Page 4: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/4.jpg)
Porque todo mundo um dia...
Sofreu com requisições assíncronas…
![Page 5: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/5.jpg)
Promises / Proactor
![Page 6: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/6.jpg)
JavaScriptAsync
![Page 7: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/7.jpg)
NaN
Porque pode acontecertudo.
Inclusive nada
![Page 8: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/8.jpg)
![Page 9: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/9.jpg)
Array(16).join(‘wat’ - 1) + ‘ Batman!’;
Se você sabe tudo...Qual o resultado?
https://www.destroyallsoftware.com/talks/wat
![Page 10: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/10.jpg)
Porque todo mundo um dia...
Se maravilhou com uma API...
![Page 11: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/11.jpg)
Web Storage
OfflineMedia
Web Speech
Web WorkersConnection
Fullscreen
Vibration
File
![Page 12: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/12.jpg)
Mas quando foi usar... ... se deparou com PROBLEMAS ...
![Page 13: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/13.jpg)
![Page 14: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/14.jpg)
http://loopinfinito.com.br/2012/09/05/entendendo-as-diferentes-distribuicoes-dos-browsers/
Stable channel
Beta channelDev channelCanary build
ReleaseBeta
AuroraNightly
EstávelNext
Browsers distribution
![Page 15: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/15.jpg)
E o Internet Explorer?
![Page 16: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/16.jpg)
Veja bem...
![Page 17: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/17.jpg)
Cenário atual
Pré-processadores
CLI
Frameworks
Libs
EnterpriseDesktop Apps
![Page 18: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/18.jpg)
Javascript pode fazer isso?
![Page 19: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/19.jpg)
...mas não é tão fácil assim...
![Page 20: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/20.jpg)
Novas API’sNovos problemas
API bacana, mas só funciona no …
![Page 21: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/21.jpg)
http://remysharp.com/2010/10/08/what-is-a-polyfill/
Polifylls? SHIM?
![Page 22: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/22.jpg)
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
...mas...para API’s?
![Page 23: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/23.jpg)
...mas não é tão fácil assim…[2]
![Page 24: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/24.jpg)
Testando suporte
![Page 25: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/25.jpg)
Feature Detection
![Page 26: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/26.jpg)
@supports
![Page 27: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/27.jpg)
CSS Support Javascript
![Page 28: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/28.jpg)
MAS TEMOS AJUDA
![Page 29: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/29.jpg)
![Page 30: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/30.jpg)
HTML5 please
![Page 31: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/31.jpg)
![Page 32: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/32.jpg)
Frontend-search
![Page 33: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/33.jpg)
So, let’s talk about HTML5 API’s?
![Page 34: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/34.jpg)
Vibration
http://embed.plnkr.co/UKYISp/
![Page 35: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/35.jpg)
Web Notification
![Page 36: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/36.jpg)
Offline
![Page 37: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/37.jpg)
!==
Offline First!
Offline API
![Page 38: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/38.jpg)
Fullscreen
![Page 39: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/39.jpg)
Web Storage
http://embed.plnkr.co/iznugnFL8fM3ALhKtBtQ/preview
![Page 40: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/40.jpg)
UsabilidadeAcessibilidadeHTML5 API’s
![Page 41: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/41.jpg)
UsabilidadeAcessibilidadeHTML5 API’s
![Page 42: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/42.jpg)
Web Speech
![Page 43: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/43.jpg)
Web Speech
http://embed.plnkr.co/D6BVEE/preview
![Page 44: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/44.jpg)
![Page 45: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/45.jpg)
Sensor
http://embed.plnkr.co/zKqSLBuI11HoYQLGk1zZ/preview
![Page 46: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/46.jpg)
Como integrar as 2 API’s?
NÃO INTEGRA!
Bad news...
![Page 47: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/47.jpg)
https://twitter.com/willmendesneto/status/474580225071017984
![Page 48: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/48.jpg)
Arquitetura
![Page 49: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/49.jpg)
O mesmo app em browsers diferentes?
![Page 50: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/50.jpg)
FullscreenMedia
Web StorageVibration
Web Notifications
API’s utilizadas
Speech recognition Battery
![Page 51: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/51.jpg)
KEEP CALM
IT’S
SHOOOW
TIME
![Page 52: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/52.jpg)
Social Share
https://github.com/willmendesneto/social-share
![Page 53: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/53.jpg)
LIÇÕES
APRENDIDAS
![Page 54: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/54.jpg)
NOVAS RESPONSABILIDADESNOVAS POSSIBILIDADES
![Page 55: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/55.jpg)
BONUS
TIME
![Page 56: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/56.jpg)
Text Encoding
http://embed.plnkr.co/4INpdt/preview
![Page 57: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/57.jpg)
Web Alarms
![Page 58: Html5 api herói, vilão e sua utilização hoje em aplicações reais](https://reader033.vdocuments.mx/reader033/viewer/2022051609/547385beb4af9f980a8b52dd/html5/thumbnails/58.jpg)
OBRIGADO
Wilson Mendes@willmendesneto
HTML5 API: Herói, vilão e sua utilização em aplicações reais