Html5 api herói, vilão e sua utilização hoje em aplicações reais

58
HTML5 API: Herói, Vilão e sua utilização em aplicações reais Wilson Mendes @willmendesneto

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 of Html5 api herói, vilão e sua utilização hoje em aplicações reais

Page 1: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

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

Além da V

ALID

ÃO

Formuláriosde

Page 4: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

Promises / Proactor

Page 6: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

JavaScriptAsync

Page 7: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

NaN

Porque pode acontecertudo.

Inclusive nada

Page 8: Html5 api  herói, vilão e sua utilização hoje em aplicações reais
Page 9: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

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

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

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
Page 14: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

E o Internet Explorer?

Page 16: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Veja bem...

Page 17: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

Javascript pode fazer isso?

Page 19: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

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

http://remysharp.com/2010/10/08/what-is-a-polyfill/

Polifylls? SHIM?

Page 23: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

Testando suporte

Page 25: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Feature Detection

Page 26: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

@supports

Page 27: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

CSS Support Javascript

Page 28: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

MAS TEMOS AJUDA

Page 29: Html5 api  herói, vilão e sua utilização hoje em aplicações reais
Page 30: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

HTML5 please

Page 31: Html5 api  herói, vilão e sua utilização hoje em aplicações reais
Page 32: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Frontend-search

Page 33: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

Vibration

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

Page 35: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Web Notification

Page 36: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Offline

Page 37: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

!==

Offline First!

Offline API

Page 38: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Fullscreen

Page 39: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

UsabilidadeAcessibilidadeHTML5 API’s

Page 41: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

UsabilidadeAcessibilidadeHTML5 API’s

Page 42: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Web Speech

Page 43: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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
Page 45: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Sensor

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

Page 46: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Como integrar as 2 API’s?

NÃO INTEGRA!

Bad news...

Page 48: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

Arquitetura

Page 49: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

O mesmo app em browsers diferentes?

Page 50: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

KEEP CALM

IT’S

SHOOOW

TIME

Page 52: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

LIÇÕES

APRENDIDAS

Page 54: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

NOVAS RESPONSABILIDADESNOVAS POSSIBILIDADES

Page 55: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

BONUS

TIME

Page 56: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

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

Web Alarms

Page 58: Html5 api  herói, vilão e sua utilização hoje em aplicações reais

OBRIGADO

Wilson Mendes@willmendesneto

HTML5 API: Herói, vilão e sua utilização em aplicações reais