HTML5 API: Herói, Vilão e sua utilização
em aplicações reais
Wilson Mendes@willmendesneto
Wilson Mendes@willmendesneto
#comunidades#jáChegaDeHashtag
QUEM
EUSOU
#opensource#developer
Além da V
ALID
AÇ
ÃO
Formuláriosde
Porque todo mundo um dia...
Sofreu com requisições assíncronas…
Promises / Proactor
JavaScriptAsync
NaN
Porque pode acontecertudo.
Inclusive nada
Array(16).join(‘wat’ - 1) + ‘ Batman!’;
Se você sabe tudo...Qual o resultado?
https://www.destroyallsoftware.com/talks/wat
Porque todo mundo um dia...
Se maravilhou com uma API...
Web Storage
OfflineMedia
Web Speech
Web WorkersConnection
Fullscreen
Vibration
File
Mas quando foi usar... ... se deparou com PROBLEMAS ...
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
E o Internet Explorer?
Veja bem...
Cenário atual
Pré-processadores
CLI
Frameworks
Libs
EnterpriseDesktop Apps
Javascript pode fazer isso?
...mas não é tão fácil assim...
Novas API’sNovos problemas
API bacana, mas só funciona no …
http://remysharp.com/2010/10/08/what-is-a-polyfill/
Polifylls? SHIM?
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
...mas...para API’s?
...mas não é tão fácil assim…[2]
Testando suporte
Feature Detection
@supports
CSS Support Javascript
MAS TEMOS AJUDA
HTML5 please
Frontend-search
So, let’s talk about HTML5 API’s?
Vibration
http://embed.plnkr.co/UKYISp/
Web Notification
Offline
!==
Offline First!
Offline API
Fullscreen
Web Storage
http://embed.plnkr.co/iznugnFL8fM3ALhKtBtQ/preview
UsabilidadeAcessibilidadeHTML5 API’s
UsabilidadeAcessibilidadeHTML5 API’s
Web Speech
Web Speech
http://embed.plnkr.co/D6BVEE/preview
Sensor
http://embed.plnkr.co/zKqSLBuI11HoYQLGk1zZ/preview
Como integrar as 2 API’s?
NÃO INTEGRA!
Bad news...
https://twitter.com/willmendesneto/status/474580225071017984
Arquitetura
O mesmo app em browsers diferentes?
FullscreenMedia
Web StorageVibration
Web Notifications
API’s utilizadas
Speech recognition Battery
KEEP CALM
IT’S
SHOOOW
TIME
Social Share
https://github.com/willmendesneto/social-share
LIÇÕES
APRENDIDAS
NOVAS RESPONSABILIDADESNOVAS POSSIBILIDADES
BONUS
TIME
Text Encoding
http://embed.plnkr.co/4INpdt/preview
Web Alarms
OBRIGADO
Wilson Mendes@willmendesneto
HTML5 API: Herói, vilão e sua utilização em aplicações reais