Enhance the browser_experience

Preview:

DESCRIPTION

This talk tries to

Citation preview

ENHANCE THE BROWSEREXPERIENCE

LET'S TALKSome previous thoughts

How can improve the health of our "patient"?Experimental treatments: the cool ones!

DO WE LOOK LIKEALCHEMISTS?

Clients usually ask for "miracles"

FOR ME IT'S MORE LIKE THIS

"Selfie" in some years

SOME PRESET IDEAS SPREAD AROUND...RWD: Solution for Multi-Device: Look some of the caveats

& [link] list of approachesBrowsers based on Webkit: Winner bet [1][2][3]

SPA: Everybody needs one? : [link]

WHAT A WONDERFULWORLD...

AS HOUSE SAYS“Everybody Lies.”

BUT NOT ALL ARE MISSED , WE ARE HOUSE'S TEAM!

BROWSER "BODY"JS engine: and some ECMAScript 5 compatibility Rendering Engine: Good Read about how browsers work: On mobile, don't forget and

[list] [list][list]

[link]Viewport's Hell DPI's

DOCTORS HAVE DIFFERENTAPPROACHES

WHICH IS "OUR" BOTTLENECK? : Rendering way managed in JS vs Trust in CSS3

operations: Virtual DOM operations

Famo.us

ReactJS

VADEMÉCUM : HTML5 API'STHE BIG UNCOMPLETED LIST

API's availableWhen to use it: Can I Use

THE DIAGNOSISI have no time, my patient is dying!! : Is the target Browser ready? Check it: Backwards compatibility? : Your code seems OK, your performance NOT so well: JankIssues ?

Can't find a polyfill for my needs:

HTML5 PleaseModernizr

Polyfills

[link]Runtime Performance Checklist

Build your own

DIFFERENCIAL DIAGNOSIS

Internationalization of your App, Unicode in Javascript?JavaScript Internationalization API

Regex: XRegExp

Do i need Jquery?You might not need jquery

EXPERIMENTAL TREATMENTSCOOL DEMOS ABOUT WHAT CAN BE

DONE IN A BROWSERWebRTC typography: GUM QRcode: GUM OCR: Speech Recognition: | Gesture Recognition: |

[link][link]

[video]Annyang Dictation.io$N With touch support

TRENDSUSE THIS INFO WITH CAUTION

and HTTP Archive Mobile HTTP ArchiveDevice Atlas - Data ExplorerStatCounter

THANKS!

Jorge Barrachina@NTKOG / @HTML5MeetSpain

info@html5-spain.com

Recommended