write less, achieve meh - html5devconf 2014

WRITE LESS, ACHIEVE MEH…

Christian Heilmann (@codepo8) HTML5DevConf, SF, May. 2014

HELLO THERE!

YOU ARE AWESOME!

WHO HERE WANTS TO…

★ Build rich apps across all platforms?

★ Have amazing app performance without having to worry about your code?

★ Concentrate on writing clean, scalable code using known software paradigms instead of knowing about browser quirks?

★ Pick from an amazing collection of beautiful widgets that users will love?

THE FUTURE IS HERE!

WHERE INTERNET EXPERTS OF TOMORROW USE THE HOTTEST PRODUCTS OF TODAY

TO BUILD RICH INTERNET APPLICATIONS!

★ 5 CDs with 30 day trial versions of the best WYSIWYG editors on the market!

★ 3 fully functional trial licenses for the widget-o-matic server from Macrohard!

★ A cool mouse-mat!

★ 10 vouchers for trial training sessions on our partner products!

GOOD THING THOSE DAYS ARE OVER.

OR ARE THEY?

‹‹‹I’m the web I’m an app

Runs for 800 years without supervision and repairs itself

Gets shut down remotely and has no spare parts.

TOTSCHLAGARGUMENT

LINKS, RESOURCES AND CONNECTIONS

BRINGING THE WEB TO APPS?

http://applinks.org/



UNICORNS EXIST, WE CAN STOP LOOKING FOR THEM

http://www.flickr.com/photos/11454687@N03/13337677083


WEB

MOBILE WEB

GOOD THING THAT’S OVER…

FAT, GREY AND ALMOST HUNTED TO EXTINCTION

http://httparchive.org/

http://httparchive.org/

HOW COME?

WHAT’S WITH THE SUIT?

WE KEEP OURSELVES BUSY…

WE ADD BITS TO MAKE IT PRETTY

WE USE THIRD PARTY SOLUTIONS TO SHOW OFF

REDUNDANCY DENIED

BACK TO BASICS

WHAT WAS HTML5 MEANT TO DO DIFFERENTLY?

XHTML PUNISHED USERS FOR OUR MISTAKES

XHTML WASN’T “APP READY”

• focused: fullscreen with a simple interface

• rich in interaction: touch enabled app interaction elements

• mobile: works offline

• integrated: works with the OS and has hardware access

• responsive and fast: runs smooth, can be killed without taking down the rest of the OS

NOW WE HAVE THAT!

• focused: fullscreen APIs, manifest files.

• rich in interaction: new input types

• mobile: appcache, localStorage, indexedDB/WebSQL

• integrated: WebAPIs, Open Web Apps

• responsive and fast: too much to mention.

BEST FOOT FORWARD!

DEAD LINKS AND BROKEN BUTTONS

SHODDY ERROR HANDLING / A11Y

WE CAN DO MUCH BETTER!

WE GET MUCH MORE CONTROL

http://www.flickr.com/photos/10307897@N07/3573120848/


SERVICEWORKER =

CONTROLLED APPCACHE +

RESOURCE LOAD CONTROLLER

https://github.com/slightlyoff/ServiceWorker

https://github.com/slightlyoff/ServiceWorker

WEB COMPONENTS

= BROWSER-NATIVE WIDGETS

http://www.w3.org/TR/components-intro/

http://geelen.github.io/x-gif

http://geelen.github.io/x-gif

THIS = NEW WHEEL();

EXTENDING VS. RE-INVENTING

DOING IT RIGHT FROM THE START

http://www.polymer-project.org/articles/accessible-web-components.html

http://www.polymer-project.org/articles/accessible-web-components.html

LESS SNAKE OIL…http://www.flickr.com/photos/21896484@N02/2726201320


MORE AWESOME PLUMBING!



WELCOME TO THE BRING YOUR OWN SOLUTION

PLATFORM

WELCOME TO THE BRING YOUR OWN SOLUTION

PLATFORMFIND THE BRICKS YOU LIKE AND BUILD SOMETHING AMAZING



DON’T GLUE THEM TOGETHER!

LET’S GO EXPLORING! THANKS! CHRIS HEILMANN @CODEPO8