Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What's next? J and beyond keynote 2015

2,408 views

Published on

A talk about future technologies of the web, and how our time is equally well spent cleaning up the web of now.

Published in: Education

What's next? J and beyond keynote 2015

  1. 1. WHAT’S NEXT? CHRIS HEILMANN (@CODEPO8), J AND BEYOND, PRAGUE, 2015 Or: what happens when you forget to send a talk outline…
  2. 2. @codepo8 Chris Heilmann
  3. 3. I COULD NOW TALK TO YOU ABOUT THE AMAZING WORLD OF TOMORROW IOT VR WEARABLES SMART CARS SMART HOMES SMART PETS SMART POLITICIANS BIG DATA AI MACHINE LEARNING
  4. 4. I COULD TELL YOU ABOUT ALL THE TECHNOLOGY OF NOW THAT WILL BE IMPORTANT TO YOU “SOON” •Web Components •Service Workers •ECMAScript 2015/16… •React/Angular/Polymer •WebVR/WebGL/WebRTC
  5. 5. I COULD TELL YOU THAT YOU ARE TERRIBLY INEFFECTIVE AND SHOULD EMBRACE NEW TOOLING! •Grunt/Gulp •Remote Debugging with devtools and services (Vorlon.js, Weinre…) •Unit testing •Package management •Editor integration (sublime, electron, visual studio code) •SASS/Compass/LESS
  6. 6. PROBLEM IS… •I’m not here to depress you •I’m not a fortune teller •None of this is usable right now without overhead •Some of you will get very confused why this matters •Others get frustrated by your day to day deliveries •There are great talks here on the schedule (no pressure)
  7. 7. I AM GETTING TIRED OF US CHASING THE NEAR FUTURE…
  8. 8. WHEN THERE ARE SO MANY CURRENT PROBLEMS TO SOLVE.
  9. 9. “LET’S BUILD STUFF” Mobile happened… WHAT HAPPENED? WHEN DID WE GO FROM “OMG WE’RE NOT GOOD ENOUGH!” TO
  10. 10. NATIVE MOBILE APPS ARE TAKING OVER A LOT OF OUR FORMER BUSINESS… •They look gorgeous •They work offline and have sensible interfaces •They have access to the hardware and its benefits •It is easy to buy stuff in them
  11. 11. NATIVE MOBILE APPS ANSWER A FEW QUESTIONS OUR CLIENTS HAD FOR YEARS… •How can I reach people but prevent them from taking my content? •How do I know who is using my product? Can I get their statistics? •Can my users become advertisers for me?
  12. 12. PERSONALLY, I THINK ALL OF THIS IS A STEP BACK IN COMPUTING… •Apps are consumables, with a use-by date and controlled by the publisher •App makers are dependent on the app store provider •Users have no chance to change content to their needs (a11y, translation)
  13. 13. https://www.youtube.com/watch?v=CrcAPan028Y
  14. 14. IN ANY CASE, THERE IS NO POINT TRYING TO MATCH NATIVE USING WEB TECHNOLOGIES. •Mobile platforms are hostile towards web content. •There is a hard-wired connection between browser and OS •Even if users wanted to use a better browser, they are not allowed to.
  15. 15. MOBILE BROWSERS ARE A MESS! http://caniuse.com/#search=indexedDB
  16. 16. FRAGMENTATION DOESN’T HELP…
  17. 17. DESPERATION BREEDS GENIUS… https://crosswalk-project.org/
  18. 18. THE APP MARKET IS ALREADY CHANGING… •People download much less apps than they used to. •There’s a cut-throat price war that makes it unprofitable trying to sell apps. •OS upgrades are slowing down.
  19. 19. IT IS A GREAT TIME TO GET READY FOR THE “MOBILE IS ANNOYING, LET’S SEE HOW THE WEB IS DOING” CUSTOMERS
  20. 20. OTHERS SEEM TO AGREE… http://www.quirksmode.org/blog/archives/2015/05/web_vs_native_l.html
  21. 21. ALAS… •The current state of the web to me is unloved. •We build solutions with frameworks and systems •What’s ending up on our users’ screens is in many cases unoptimised and not the main focus.
  22. 22. “We crave for new sensations but soon become indifferent to them. The wonders of yesterday are today common occurrences.” ― Nikola Tesla, My Inventions
  23. 23. THE MODERN WEB LOOKS A LOT LIKE THE POWERPOINT OF OLD… http://gochat.us/
  24. 24. AWW, COME ON, IT’S NOT THAT BAD…
  25. 25. PEOPLE DON’T LIKE TO WAIT… •Research shows that 3 seconds is more or less the time people wait until they consider a web site “not loading” •This, of course, is perceived as much worse on a mobile device.
  26. 26. THINGS THAT SLOW US DOWN… •Multimedia content (images, videos) •Fonts (FOUF is the new FOUC) •Redirects •Third Party Libraries and scripts •Large code blocks (unmaintained CSS, unused libraries)
  27. 27. WE REALLY, REALLY WOULD LIKE TO GET TO KNOW YOU… WHETHER YOU WANT IT OR NOT.
  28. 28. OLD CLUTTER, NEW WEB? https://twitter.com/Caged/status/590602214021922818
  29. 29. DESPITE TRUCKLOADS OF RESOURCES AND INFO, WE SUPERSIZED THE WEB. https://twitter.com/scottjehl/status/595827049136267266
  30. 30. AND NO, BANDWIDTH IS NOT ALWAYS CHEAP…
  31. 31. FRAMEWORKS RESULT IN PERFORMING SOLUTIONS! http://www.webpagetest.org/video/view.php?id=150314_Q2_DEY.1Tested From: Virginia USA - EC2 - Firefox - Cable
  32. 32. WELL, PROBABLY ON MOBILE, RIGHT? http://www.webpagetest.org/video/view.php?id=150314_7R_DTG.Tested From: Dulles, VA - Nexus 5 - Chrome
  33. 33. SPEED UP YOUR PRODUCTS! http://www.webpagetest.org/
  34. 34. WE COULD TAKE A FEW TRICKS FROM MOBILE AND SPEED UP THE WEB… •Local caching of resources (localstorage/indexedDB) •Offline functionality (appcache) •On-demand loading (matchMedia vs. mediaqueries) •Progressive rendering (fonts) HTML5 HAS THE TOOLS FOR THAT.
  35. 35. makethumbnails.com
  36. 36. BY FAR THE #1 REASON I GOT FROM WEB DEVELOPERS NOT EMBRACING HTML5: WE NEED TO SUPPORT INTERNET EXPLORER!
  37. 37. WE NEED TO SUPPORT INTERNET EXPLORER! IS NO EXCUSE FOR LAZY, BLOATED, BAD CODE ANY LONGER!
  38. 38. •Out of the box browser of Windows 10 on Desktop, Mobile and X-Box •Constantly upgraded (evergreen) •Excellent standards/ES6 support •Fully hardware accelerated
  39. 39. GET READY NOW FOR THE OUT-OF- THE-BOX BROWSER OF WINDOWS 1O http://dev.modern.ie/tools/
  40. 40. EVEN IF YOU DON’T CARE, PLEASE MAKE THE WEB BETTER FOR ALL!
  41. 41. THE WEB CAN’T GET BETTER IF WE REPEAT OLD MISTAKES…
  42. 42. FRANKLY, I AM GETTING TIRED OF THIS… LET’S LIBERATE US FROM BROWSER SUPPORT ISSUES
  43. 43. CHECK BACK FREQUENTLY AND BET ON INTEROP! https://status.modern.ie/
  44. 44. THERE IS NO SINGLE PLAYER OR WINNER OF THE WEB!
  45. 45. READ UP-TO-DATE INFORMATION AND LEARN INSTEAD OF COPY AND PASTE! https://developer.mozilla.org/
  46. 46. HTML AND CSS ARE DESIGNED TO BE FAULT TOLERANT. https://adactio.com/journal/4272
  47. 47. JAVASCRIPT IS NOT FAULT TOLERANT.
  48. 48. CAPABILITY TESTING MEANS YOU NEVER DELIVER BROKEN EXPERIENCES.
  49. 49. “CUTTING THE MUSTARD” https://justmarkup.com/log/2015/02/26/cut-the-mustard-revisited/˝
  50. 50. SETTING YOUR BASELINE…
  51. 51. EXTENDING THE BASELINE
  52. 52. THAT’S THE POWER OF THE WEB… •Supply only what is needed •Enhance on demand •Pull, cache and use •React to change without having to publish and deliver a full new binary…
  53. 53. BEATING NATIVE USING THINGS ONLY THE WEB CAN DO… https://github.com/phonegap/phonegap-plugin-contentsync
  54. 54. SO, WHAT’S NEXT? •A richer web, based on agreed standards •The same freedom of publication and distribution you have now •Many different form factors, each no surprise as our products are built to adapt
  55. 55. Chris Heilmann christianheilmann.com @codepo8 Cheers and thanks!

×