Download as PDF, PPTX
Uploaded byChristian Heilmann
Of innovation and impatience - Future Decoded 2015
Chris Heilmann discusses the challenges and innovations in web development, emphasizing the rapid advancement of technology and the shortcomings of current web practices. He critiques the reliance on JavaScript, frameworks, and the need for optimization to enhance user experience while acknowledging the evolving landscape of web standards and tools. Heilmann urges developers to actively engage in improving web technologies and to be mindful of the implications their work has on end users.
More Related Content
Similar to Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015
- 1. Of innovation andimpatience Chris Heilmann @codepo8, Future Decoded, London, Nov 2015
- 2. Moore’s Law: (﴾paraphrased)﴿ Computers getfaster, better, cheaper and are more available every two years.
- 3. May’s Law: (﴾paraphrased)﴿ Software efficiencyhalves every 18 months, compensating Moore’s law.
- 4. WE’RE SMACK INTHE MIDDLE OF THIS… • We live in a market driven by hype • We work with amazing hardware • We work with great internet connectivity • We get paid very well and assume everybody else is, too.
- 5. CONVENIENCE BREEDS MORE CONVENIENCE • Browsersaren’t good enough • Development environments are not predictive and do our work for us • Languages are confusing • We should have to write less code and achieve more Instead of celebrating how lucky we are, we complain…
- 6. CONVENIENCE BREEDS ARROGANCE • Weare not the people who use our products • This is the web -‐ you don’t know your users and you can not tell them what to use • We can’t assume that people upgrade all the time
- 7. On the web, Moore’slaw is tricky to apply…
- 8. THE WEB ISAN AMAZING IDEA AND OFFER… • Access to information world-‐wide, 24⨉7 • Independent of hardware, software, ability, or geographical location • A read/write medium, everybody is invited to become a creator and not just a consumer
- 9. ONE PERSON’S BEAUTY ISANOTHER ONE’S WORRY… • It is hard to build software and interfaces for the unknown • Open distribution, caching and availability of source code is anathema to content providers wanting to protect their content.
- 10. THE NEXT USERSARE NOT THOSE WHO COMPLAIN THE WEB IS NOT AS GOOD AS NATIVE APPS… https://vimeo.com/139312920 https://brucelawson.github.io/talks/2015/velocity Bruce Lawson at SOTB 2015
- 11. THE NEXT CHALLENGEIS NOT IN COFFEE SHOPS IN THE SILICON VALLEY…
- 12. We’ve done a greatjob applying May’s law on the web…
- 13.
- 14. 🕗15 SECONDS http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/ THE TIMEWE HAVE TO WAIT FOR THE AVERAGE PAGE TO FULLY LOAD…
- 15. http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/ THAT’S A PRETTY TERRIBLESTATE OF THE WEB. • The median page’s time to interact is 5.5 seconds, and fully loads in just over 15 seconds. • The median page is 2MB in size and contains 170 resources • Most sites fail to take advantage of core image optimisation techniques • A lot is down to advertising and third party includes (﴾social buttons)﴿
- 16.
- 17. WE HAVE THE TECHNOLOGY! WECAN PATCH IT!
- 18. WE HAVE THE TECHNOLOGY! WECAN REBUILD IT! https://instantarticles.fb.com/ Facebook: Instant Articles
- 19. WE HAVE THE TECHNOLOGY! WECAN REBUILD IT! https://www.ampproject.org/ Google:Accelerated Mobile Pages (﴾AMP)﴿
- 20. WE HAVE THE TECHNOLOGY! WECAN REBUILD IT! https://www.apple.com/news/ Apple News
- 21. OPEN, BUT KINDOF CLOSED…
- 22. WE’RE NOT APPLYINGTECHNOLOGY IN A WEB FRIENDLY FORMAT…
- 23. WHAT DOES THISCODE DO?
- 24.
- 25. 3MB OF BLOCKING JAVASCRIPTBEFORE THE FIRST WORD APPEARS ON THE PAGE!
- 26.
- 27. AS DEVELOPERS, WE AREASKED TO DO THE IMPOSSIBLE… • Make it work the same in every browser • Make it easy to maintain and we want to control everything • Make sure it is also accessible -‐ I think there’s a law we need to follow • Don’t spent too much time on it -‐ let’s release it now and fix it later!
- 28. THE ANSWER IS ALWAYSJAVASCRIPT • Javascript is too powerful for its own good. • Almost everything that goes wrong can be controlled and to a degree fixed with JavaScript • This leads to people relying on libraries and frameworks
- 29. WE USE CODEWE DON’T UNDERSTAND TO FIX ISSUES WE DON’T HAVE… • Learning libraries and frameworks beyond “hello world” costs time and money. • Time you don’t spend on looking at optimising your code • In essence, we value developer convenience over user experience.
- 30.
- 31. IS DEPENDENCY HELL APROBLEM OF THE TOO PRIVILEGED? https://www.youtube.com/watch?v=PA139CERNbc Stephan Bönnemann (﴾JSConfEU 2015)﴿: Dependency Hell Just Froze Over
- 32. SHOULD WE BUILD EVERYTHINGFROM SCRATCH?
- 33. OLD ISSUES, NOWIN THE NEXT LANGUAGE…
- 34.
- 35. CONTROL OVER WHAT ISHAPPENING IN THE BROWSER #FFD700
- 36. REPLACING BUILT-‐IN FUNCTIONALITY FOR THESAKE OF CONTROL…
- 37. IF WE BUILDCLIENT-‐ SIDE SOLUTIONS WE DON’T CONTROL WHERE OUR CODE RUNS.
- 38. HOMEWORK / SNEAK PREVIEWOF GREAT INSIGHTS… PAUL LEWIS @AEROTWIST
- 39. THE DOM ISSLOW?
- 43. ANALYSING BROWSER RESULTS… npm install-‐g bigrig github.com/GoogleChrome/big-‐rig github.com/GoogleChrome/node-‐big-‐rig
- 45. It’s part ofmy life I won’t get back. Like they’re murdering me, but just a little … with this really tiny knife -‐ Henry Rollins
- 46. SIMPLY BECAUSE WECAN FIX ANYTHING WITH JAVASCRIPT DOES NOT MEAN WE SHOULD!
- 47.
- 48. BUT IT ISTHE PROFESSIONAL WAY! https://egghead.io/series/how-‐to-‐ write-‐an-‐open-‐source-‐javascript-‐ library
- 49. WE MADE JAVASCRIPT COMPLEXAND KIND OF SCARY…
- 50. WE’RE GOING FULL SPEEDON INNOVATION… • Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps
- 51. • We workaround browser issues • We make web standards of tomorrow work today. • We build solutions to clean up others and make them smaller • And each of those comes with a “don’t use in production” label. BUILDING LIBRARIES AND FRAMEWORKS THAT MAGICALLY FIX THINGS HAS BECOME FASHIONABLE…
- 52.
- 53. THAT’S COOL -‐ GONUTS AND PLAY WITH ANY TECHNOLOGY YOU WANT…
- 54. FRAMEWORKS ARE GREAT… • Theyare fun to use -‐ achieve a lot very quickly • You build complex apps in a matter of minutes • They work around pesky browser bugs • They are good on your CV
- 55. …BUT THEY ALSO COMEWITH DEVELOPER COST • Learning new frameworks • Re-‐learning new frameworks • Debugging frameworks • Setting up developer environments • Cutting down on possible hires/ adding to onboarding time
- 56. AND WE SHOULD CONSIDERTHE EFFECTS WE HAVE ON OUR END USERS… • Time to load / execute • Bandwidth used • CPU usage • Frame rate (﴾60 fps)﴿ • Memory usage • Battery hunger
- 57. WHAT ABOUT USERS OFOLD BROWSERS LIKE IE8 -‐ WE CAN’T LEAVE THOSE BEHIND! #FFD700
- 58.
- 59. LATELY I WORKED EXCLUSIVELYIN FIXING ONE MASSIVE ISSUE OF THE WEB…
- 60. I REALISED THATWE MESSED UP -‐ BADLY…
- 61. IT IS 2015-‐ AND IT IS STILL ABOUT BROWSERS?
- 62.
- 63.
- 64. TRUST ISSUES AND GETTINGTHE JOB DONE…
- 65. WEB DEVELOPERS ANDBROWSER MAKERS SHOULD BE FRIENDS, NOT COMPETITORS
- 66. LET’S TALK ABOUTSOME GREAT THINGS HAPPENING RIGHT NOW…
- 67. OUT OF THEBOX BROWSER DO NOT SUCK ANY LONGER!
- 68. COMPATIBILITY IS ON EVERYBROWSER MAKER’S RADAR…
- 69. OUR DEBUGGING ENVIRONMENT ROCKS ANDGETS BETTER ALL THE TIME…
- 70.
- 71. 1997 2015 1998 19992000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 1997 ECMAScript1 1998 ECMAScript2 1999 ECMAScript3 2005 -‐ 2007 ECMAScript4 -‐ Abandoned 2009 ECMAScript5 2015 ECMAScript6 JAVASCRIPT EVOLVES…
- 72. 1997 2015 1998 19992000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 1997 ECMAScript1 1998 ECMAScript2 1999 ECMAScript3 2005 -‐ 2007 ECMAScript4 -‐ Abandoned 2009 ECMAScript5 2015 ECMAScript6 …NOW WE HAVE ES6! • 5+ years since ES5 ratification • Significant changes in 15+ years • Backwards compatible • Ratified June 2015 http://www.ecma-‐international.org/publications/standards/Ecma-‐262.htm
- 73. this IS COMPLICATED*** ***
- 74. this IS COMPLICATED ****** blog.getify.com/arrow-this/
- 75. this IS COMPLICATED ****** blog.getify.com/arrow-this/
- 76. this IS COMPLICATED ****** blog.getify.com/arrow-this/
- 77.
- 78. • Arrow functionsas a short-hand version of an anonymous function. • Block-level scope using let instead of var makes variables scoped to a block (if, for, while, etc.) • Classes to encapsulate and extend code. • Constants using the const keyword. • Default parameters for functions like foo(bar = 3, baz = 2) • Destructuring to assign values from arrays or objects into variables. • Generators that create iterators using function* and the yield keyword. • Map, a Dictionary type object that can be used to store key/value pairs. and Set as a collection object to store a list of data values. • Modules as a way of organizing and loading code. • Promises for async operations avoiding callback hell • Rest parameters instead of using arguments to access functions arguments. • Template Strings to build up string values including multi-line strings. ES6 COMES WITH SO MUCH GOODNESS, TECHNICALLY IT HAS TO BE FATTENING…
- 79. Library Builders map, set& weakmap __proto__ Proxies Symbols Sub7classable built7ins Scalable Apps let, const & block7 scoped bindings Classes Promises Iterators Generators Typed arrays Modules Syntactic Sugar Arrow functions Enhanced object literals Template strings Destructuring Rest, Spread, Default String, Math, Number, Object, RegExp APIs ALL OF THESE PARTS HAVE DIFFERENT AUDIENCES
- 80. SUPPORT IS ENCOURAGING(﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿ http://kangax.github.io/compat-table/es6/
- 81. NUMBERS! Current status (﴾October2015)﴿: Desktop: Edge 13: 80% Firefox 42: 71% Chrome 47/Opera 34: 63 % Safari 9: 54% (﴾former 21%!)﴿ Mobile: Android 5.1: 29% iOS9: 54% http://kangax.github.io/compat-table/es6/
- 82. THE PROBLEM: FOR NON-‐SUPPORTING BROWSERS,ES6 FEATURES ARE SYNTAX ERRORS…
- 83. THE SOLUTION: TRANSPILINGINTO ES5… https://babeljs.io • Converts ES6 to older versions on the server or the client • In use by Facebook and many others • Used in editors and tool chains
- 84. ✘ Extra stepbetween writing code and running it in the browser. ✘ We don’t run or debug the code we write. ✘ We hope the transpiler creates efficient code ✘ We create a lot of code ✘ Browsers that support ES6 will never get any. THE PROBLEMS WITH TRANSPILING:
- 85.
- 86. ✘ It isan extra step that might be costly ✘ We can only do it client-‐side ✘ We can get false positives -‐ experimental features might be implemented in a rudimentary fashion ✘ We have to keep your feature tests up-‐to-‐date and extend them as needed -‐ support for one feature doesn’t mean support for another. THE PROBLEMS WITH FEATURE TESTING:
- 87. YOU CAN USEAN ABSTRACTION, FRAMEWORK OR LIBRARY THAT HAS SIMILAR FEATURES…
- 88. THE ES6 CONUNDRUM… • Wecan’t use it safely in the wild • We can use TypeScript or transpile it • We can feature test for it, but that can get complex quickly • Browsers that support it, will not get any ES6 that way (﴾but can use it internally)﴿ • The performance is bad right now (﴾which is a normal thing)﴿. To improve this, we need ES6 to be used in the wild… http://www.sitepoint.com/the-‐es6-‐conundrum/
- 89. YOU CAN HELP MAKETHIS BETTER!
- 90. BE ACTIVE! If youuse JavaScript in an environment you control, please use ES6 and feed back your experiences to the browser creators and the standard bodies.
- 91. THE JAVASCRIPT LEARNING PROCESS HASALWAYS BEEN INTERESTING… • Use view source to see what others are doing… • Copy and paste the bits that look like they are responsible for some things • Change some numbers around • Run into errors • Blame Internet Explorer
- 92. THIS, OF COURSE, WASWRONG AND WE GOT MORE PROFESSIONAL… • Search for a solution on Stackoverflow • Copy and paste the bits that look like they are responsible for some things • Change some numbers around • Run into errors • Blame JavaScript for being terrible and not a real language • For good measure, blame Internet Explorer.
- 93. WITH ES6 WEHAVE A CLEAN NEW SLATE… (﴾AND YOU CAN’T BLAME IE ANY MORE)﴿
- 94. SEE THE BABEL.JSDOCS AND TRY IT IN THE BROWSER… https://babeljs.io/docs/learn-‐es2015/
- 95.
- 96. READ THE EXCELLENT BOOK EXPLORINGES6 FOR FREE (﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿ http://exploringjs.com/es6/
- 97. LET’S ANALYSE AND CLEANUP. PUT THE WEB ON A DIET. ONE OUTDATED LIBRARY AT A TIME… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-‐code-‐scan
- 98. PLEASE, GO AND MAKEA BETTER WEB! • Analyse the speed of your products and improve it by simplifying them: webpagetest.org • Stop trying to guess what browser is in use and assume unknown browsers to be good, not terrible. • Keep up to date with what browsers can do: caniuse.com and use it! • File bugs, report issues, talk to us!
- 99. YOU MAKE THEWEB, LET US HEAR WHAT YOU NEED…
- 100.