Christian Heilmann discusses the evolution of web applications and the advantages of using HTML5 for building rich internet applications. He emphasizes the importance of clean, scalable code, addressing browser quirks, and leveraging new technologies such as service workers and web components. Heilmann encourages developers to embrace modern tools and methodologies to enhance app performance and user experience.

1. WRITE LESS, ACHIEVE MEH…
Christian Heilmann (@codepo8)
HTML5DevConf, SF, May. 2014

2. HELLO THERE!

3. YOU ARE AWESOME!

4. 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?

5. THE FUTURE IS HERE!

6. WHERE INTERNET EXPERTS OF TOMORROW
USE THE HOTTEST PRODUCTS OF TODAY
TO BUILD RICH INTERNET APPLICATIONS!

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

8. GOOD THING THOSE DAYS ARE OVER.

9. OR ARE THEY?

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

12. TOTSCHLAGARGUMENT

13. LINKS, RESOURCES AND CONNECTIONS

14. BRINGING THE WEB TO APPS?
http://applinks.org/
http://applinks.org/

15. UNICORNS EXIST, WE CAN STOP LOOKING FOR THEM
http://www.flickr.com/photos/11454687@N03/13337677083

16. WEB
MOBILE WEB

17. GOOD THING THAT’S OVER…
FAT, GREY AND ALMOST HUNTED TO EXTINCTION
http://httparchive.org/

18. HOW COME?

19. WHAT’S WITH THE SUIT?
WE KEEP OURSELVES BUSY…

20. WE ADD BITS TO MAKE IT PRETTY

21. WE USE THIRD PARTY SOLUTIONS TO SHOW OFF

22. REDUNDANCY DENIED

23. BACK TO BASICS

24. WHAT WAS HTML5 MEANT
TO DO DIFFERENTLY?

25. XHTML PUNISHED USERS FOR OUR MISTAKES

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

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

28. BEST FOOT FORWARD!

29. DEAD LINKS AND BROKEN BUTTONS

30. SHODDY ERROR HANDLING / A11Y

31. WE CAN DO MUCH BETTER!

32. WE GET MUCH MORE CONTROL
http://www.flickr.com/photos/10307897@N07/3573120848/

33. SERVICEWORKER
=
CONTROLLED APPCACHE
+
RESOURCE LOAD CONTROLLER
https://github.com/slightlyoff/ServiceWorker

34. WEB
COMPONENTS
=
BROWSER-NATIVE WIDGETS
http://www.w3.org/TR/components-intro/

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

36. THIS = NEW WHEEL();

37. EXTENDING VS. RE-INVENTING

38. DOING IT RIGHT FROM THE START
http://www.polymer-project.org/articles/accessible-web-components.html

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

40. MORE AWESOME PLUMBING!
http://www.flickr.com/photos/55262442@N00/4266753830/

41. WELCOME TO THE
BRING YOUR OWN SOLUTION
PLATFORM

42. WELCOME TO THE
BRING YOUR OWN SOLUTION
PLATFORM
FIND THE BRICKS YOU LIKE AND BUILD SOMETHING AMAZING
http://www.flickr.com/photos/29498428@N00/2314610838/

43. DON’T GLUE THEM TOGETHER!

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