Download - Write less, achieve meh - HTML5DevConf 2014
![Page 1: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/1.jpg)
WRITE LESS, ACHIEVE MEH…
Christian Heilmann (@codepo8) HTML5DevConf, SF, May. 2014
![Page 2: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/2.jpg)
HELLO THERE!
![Page 3: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/3.jpg)
YOU ARE AWESOME!
![Page 4: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/4.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/5.jpg)
THE FUTURE IS HERE!
![Page 6: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/6.jpg)
WHERE INTERNET EXPERTS OF TOMORROW USE THE HOTTEST PRODUCTS OF TODAY
TO BUILD RICH INTERNET APPLICATIONS!
![Page 7: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/7.jpg)
★ 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](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/8.jpg)
GOOD THING THOSE DAYS ARE OVER.
![Page 9: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/9.jpg)
OR ARE THEY?
![Page 10: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/10.jpg)
![Page 11: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/11.jpg)
‹‹‹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](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/12.jpg)
TOTSCHLAGARGUMENT
![Page 13: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/13.jpg)
LINKS, RESOURCES AND CONNECTIONS
![Page 15: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/15.jpg)
UNICORNS EXIST, WE CAN STOP LOOKING FOR THEM
http://www.flickr.com/photos/11454687@N03/13337677083
![Page 16: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/16.jpg)
WEB
MOBILE WEB
![Page 17: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/17.jpg)
GOOD THING THAT’S OVER…
FAT, GREY AND ALMOST HUNTED TO EXTINCTION
http://httparchive.org/
![Page 18: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/18.jpg)
HOW COME?
![Page 19: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/19.jpg)
WHAT’S WITH THE SUIT?
WE KEEP OURSELVES BUSY…
![Page 20: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/20.jpg)
WE ADD BITS TO MAKE IT PRETTY
![Page 21: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/21.jpg)
WE USE THIRD PARTY SOLUTIONS TO SHOW OFF
![Page 22: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/22.jpg)
REDUNDANCY DENIED
![Page 23: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/23.jpg)
BACK TO BASICS
![Page 24: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/24.jpg)
WHAT WAS HTML5 MEANT TO DO DIFFERENTLY?
![Page 25: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/25.jpg)
XHTML PUNISHED USERS FOR OUR MISTAKES
![Page 26: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/26.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/27.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/28.jpg)
BEST FOOT FORWARD!
![Page 29: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/29.jpg)
DEAD LINKS AND BROKEN BUTTONS
![Page 30: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/30.jpg)
SHODDY ERROR HANDLING / A11Y
![Page 31: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/31.jpg)
WE CAN DO MUCH BETTER!
![Page 32: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/32.jpg)
WE GET MUCH MORE CONTROL
http://www.flickr.com/photos/10307897@N07/3573120848/
![Page 33: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/33.jpg)
SERVICEWORKER =
CONTROLLED APPCACHE +
RESOURCE LOAD CONTROLLER
https://github.com/slightlyoff/ServiceWorker
![Page 34: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/34.jpg)
WEB COMPONENTS
= BROWSER-NATIVE WIDGETS
http://www.w3.org/TR/components-intro/
![Page 36: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/36.jpg)
THIS = NEW WHEEL();
![Page 37: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/37.jpg)
EXTENDING VS. RE-INVENTING
![Page 38: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/38.jpg)
DOING IT RIGHT FROM THE START
http://www.polymer-project.org/articles/accessible-web-components.html
![Page 39: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/39.jpg)
LESS SNAKE OIL…http://www.flickr.com/photos/21896484@N02/2726201320
![Page 40: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/40.jpg)
MORE AWESOME PLUMBING!
http://www.flickr.com/photos/55262442@N00/4266753830/
![Page 41: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/41.jpg)
WELCOME TO THE BRING YOUR OWN SOLUTION
PLATFORM
![Page 42: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/42.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/43.jpg)
DON’T GLUE THEM TOGETHER!
![Page 44: Write less, achieve meh - HTML5DevConf 2014](https://reader038.vdocuments.us/reader038/viewer/2022102417/53f538428d7f7246588b4685/html5/thumbnails/44.jpg)
LET’S GO EXPLORING! THANKS! CHRIS HEILMANN @CODEPO8