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