Embed Size (px)
DESCRIPTION
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.
Citation preview
HTML5 API: Hero, Villain your usage
in real applications
Wilson Mendes@willmendesneto
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
Wilson Mendes@willmendesneto
HTML5 API: Hero, villain and your usage in real applications
