Download pdf - HTML5 API's: Hero, Villain and your usage in real applications

HTML5 API: Hero, Villain your usage

in real applications

Wilson Mendes@willmendesneto


#communities#stopWithHashtags

WHEN

IAM#opensource

#developer

Beyond

VA

LIDA

TIONFORMS

OF

Because everyone someday...

Suffered with asyncronousrequests...

Promises / Proactor

JavaScriptAsync

NaN

Because everything canhappen.

Including nothing

Array(16).join(‘wat’ - 1) + ‘ Batman!’;

If you know everything...What the result?

https://www.destroyallsoftware.com/talks/wat



Because everyone someday...

Was impressed with aHTML5 API...

Web Storage

OfflineMedia

Web Speech

Web WorkersConnection

Fullscreen

Vibration

File

But when was use it... ... was faced with PROBLEMS ...

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



And Internet Explorer?

Well...

Current scenario

Pre-processors

CLI

Frameworks

Libs

EnterpriseDesktop Apps

Javascript can do it?

...but it’s not so easy...

New API’sNew problemsCool API, but it works only in …

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

Polifylls? SHIM?



https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

...but...for API’s?




...but it’s not so easy…[2]

Testing support

Feature Detection

@supports

CSS Support Javascript

BUT WE HAVE HELP

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



UsabilityAcessibilityHTML5 API’s

UsabilityAcessibilityHTML5 API’s

Web Speech

Web Speech

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



Sensor

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

How to integrate these 2 API’s?

WITHOUT INTEGRATION! (for now)

Bad news...

https://twitter.com/willmendesneto/status/474580225071017984



Architecture

Same app id distinct browsers?

FullscreenMedia

Web StorageVibration

Web Notifications

API’s useds

Speech recognition Battery

KEEP CALM

IT’S

SHOOOW

TIME

Social Share

https://github.com/willmendesneto/social-share



LESSONS

LEARNED

NEW RESPONSABILITIESNEW POSSIBILITIES

BONUS

TIME

Text Encoding

http://embed.plnkr.co/4INpdt/preview



Web Alarms

THANKS


HTML5 API: Hero, villain and your usage in real applications