Transcript
Page 1: Write less, achieve meh - HTML5DevConf 2014

WRITE LESS, ACHIEVE MEH…

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

Page 2: Write less, achieve meh - HTML5DevConf 2014

HELLO THERE!

Page 3: Write less, achieve meh - HTML5DevConf 2014

YOU ARE AWESOME!

Page 4: Write less, achieve meh - HTML5DevConf 2014

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?

Page 5: Write less, achieve meh - HTML5DevConf 2014

THE FUTURE IS HERE!

Page 6: Write less, achieve meh - HTML5DevConf 2014

WHERE INTERNET EXPERTS OF TOMORROW USE THE HOTTEST PRODUCTS OF TODAY

TO BUILD RICH INTERNET APPLICATIONS!

Page 7: Write less, achieve meh - HTML5DevConf 2014

★ 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!

Page 8: Write less, achieve meh - HTML5DevConf 2014

GOOD THING THOSE DAYS ARE OVER.

Page 9: Write less, achieve meh - HTML5DevConf 2014

OR ARE THEY?

Page 10: Write less, achieve meh - HTML5DevConf 2014
Page 11: Write less, achieve meh - HTML5DevConf 2014

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

Page 12: Write less, achieve meh - HTML5DevConf 2014

TOTSCHLAGARGUMENT

Page 13: Write less, achieve meh - HTML5DevConf 2014

LINKS, RESOURCES AND CONNECTIONS

Page 14: Write less, achieve meh - HTML5DevConf 2014

BRINGING THE WEB TO APPS?

http://applinks.org/

http://applinks.org/

Page 15: Write less, achieve meh - HTML5DevConf 2014

UNICORNS EXIST, WE CAN STOP LOOKING FOR THEM

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

Page 16: Write less, achieve meh - HTML5DevConf 2014

WEB

MOBILE WEB

Page 17: Write less, achieve meh - HTML5DevConf 2014

GOOD THING THAT’S OVER…

FAT, GREY AND ALMOST HUNTED TO EXTINCTION

http://httparchive.org/

Page 18: Write less, achieve meh - HTML5DevConf 2014

HOW COME?

Page 19: Write less, achieve meh - HTML5DevConf 2014

WHAT’S WITH THE SUIT?

WE KEEP OURSELVES BUSY…

Page 20: Write less, achieve meh - HTML5DevConf 2014

WE ADD BITS TO MAKE IT PRETTY

Page 21: Write less, achieve meh - HTML5DevConf 2014

WE USE THIRD PARTY SOLUTIONS TO SHOW OFF

Page 22: Write less, achieve meh - HTML5DevConf 2014

REDUNDANCY DENIED

Page 23: Write less, achieve meh - HTML5DevConf 2014

BACK TO BASICS

Page 24: Write less, achieve meh - HTML5DevConf 2014

WHAT WAS HTML5 MEANT TO DO DIFFERENTLY?

Page 25: Write less, achieve meh - HTML5DevConf 2014

XHTML PUNISHED USERS FOR OUR MISTAKES

Page 26: Write less, achieve meh - HTML5DevConf 2014

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

Page 27: Write less, achieve meh - HTML5DevConf 2014

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.

Page 28: Write less, achieve meh - HTML5DevConf 2014

BEST FOOT FORWARD!

Page 29: Write less, achieve meh - HTML5DevConf 2014

DEAD LINKS AND BROKEN BUTTONS

Page 30: Write less, achieve meh - HTML5DevConf 2014

SHODDY ERROR HANDLING / A11Y

Page 31: Write less, achieve meh - HTML5DevConf 2014

WE CAN DO MUCH BETTER!

Page 32: Write less, achieve meh - HTML5DevConf 2014

WE GET MUCH MORE CONTROL

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

Page 33: Write less, achieve meh - HTML5DevConf 2014

SERVICEWORKER =

CONTROLLED APPCACHE +

RESOURCE LOAD CONTROLLER

https://github.com/slightlyoff/ServiceWorker

Page 34: Write less, achieve meh - HTML5DevConf 2014

WEB COMPONENTS

= BROWSER-NATIVE WIDGETS

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

Page 35: Write less, achieve meh - HTML5DevConf 2014

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

Page 36: Write less, achieve meh - HTML5DevConf 2014

THIS = NEW WHEEL();

Page 37: Write less, achieve meh - HTML5DevConf 2014

EXTENDING VS. RE-INVENTING

Page 38: Write less, achieve meh - HTML5DevConf 2014

DOING IT RIGHT FROM THE START

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

Page 39: Write less, achieve meh - HTML5DevConf 2014

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

Page 40: Write less, achieve meh - HTML5DevConf 2014

MORE AWESOME PLUMBING!

http://www.flickr.com/photos/55262442@N00/4266753830/

Page 41: Write less, achieve meh - HTML5DevConf 2014

WELCOME TO THE BRING YOUR OWN SOLUTION

PLATFORM

Page 42: Write less, achieve meh - HTML5DevConf 2014

WELCOME TO THE BRING YOUR OWN SOLUTION

PLATFORMFIND THE BRICKS YOU LIKE AND BUILD SOMETHING AMAZING

http://www.flickr.com/photos/29498428@N00/2314610838/

Page 43: Write less, achieve meh - HTML5DevConf 2014

DON’T GLUE THEM TOGETHER!

Page 44: Write less, achieve meh - HTML5DevConf 2014

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


Top Related