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