A call to JS Developers - Let’s stop trying to impress each other and start building
44 likes4,573 views
This document summarizes a talk given by Chris Heilmann calling on JavaScript developers to focus less on impressing each other and more on building. It discusses how developers prioritize convenience over user experience by using complex frameworks they don't understand to solve problems that don't exist. It encourages developers to embrace new JavaScript features like ES6, simplify their code, and focus on performance and the needs of all users.
A call to JS Developers - Let’s stop trying to impress each other and start building
- 1. Call to JavaScript developers: Let’s stop trying to impress each other and start building Chris Heilmann @codepo8, Web on the Edge, Helsinki, Nov 2015
- 2. Moore’s Law: (paraphrased) Computers get faster, better, cheaper and are more available every two years.
- 3. May’s Law: (paraphrased) Software efficiency halves every 18 months, compensating Moore’s law.
- 4. https://www.flickr.com/photos/56218409@N03/19216130670 WE MOVE FAST AND RUN IN CIRCLES
- 6. WE WORK WITH AMAZING HARDWARE…
- 7. WE WORK WITH GREAT CONNECTIVITY…
- 8. WE GET PAID WELL – FOR A JOB WE LIKE https://www.flickr.com/photos/31317832@N05/4326186183
- 9. WE WORK WITH AMAZING BROWSERS
- 10. BROWSERS THAT GIVE OUR USERS FUNCTIONALITY WE DON’T EVER USE BUT THEY APPRECIATE…
- 11. BROWSER DO AN INCREDIBLE AMOUNT OF WORK FOR US… • Display of all kind of media content • Fix minor mistakes in our code • Optimise our code to run smoothly • Provide us with developer tools • Provide us with deep insights what our code does to the computer • Allow us to automate testing in them and debug remotely on devices we don’t even own (using 3rd party services)
- 12. So how come we made the web all about May’s law?
- 13. CONVENIENCE BREEDS MORE CONVENIENCE • Browsers aren’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…
- 14. https://www.flickr.com/photos/38497891@N04/4151566643 WE LIVE IN A HYPE FUELLED ENVIRONMENT
- 15. WE KEEP PROJECTING… US OUR AUDIENCE TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
- 16. OR, ACTUALLY… US OUR AUDIENCE TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
- 17. 🐴💩
- 18. TIME TO GET REAL… US OUR ASSUMED AUDIENCE OUR AUDIENCE TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
- 19. THE WEB IS AN 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
- 20. ONE PERSON’S BEAUTY IS ANOTHER 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.
- 21. THE NEXT USERS ARE 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
- 22. THE NEXT CHALLENGE IS NOT IN COFFEE SHOPS IN THE SILICON VALLEY…
- 23. AS DEVELOPERS, WE ARE ASKED 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! • Use this analytics code you have no clue about - we need to know how people use our products
- 24. THE ANSWER IS ALWAYS JAVASCRIPT • 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
- 25. WHAT DOES THIS CODE DO?
- 26. https://www.flickr.com/photos/73645804@N00/2473052504 JUST FIND THE RIGHT BRICKS AND ASSEMBLE SOMETHING GREAT!
- 27. https://www.flickr.com/photos/27429206@N02/4290544535 THE AMAZING TECH OF TODAY IS THE RUBBISH OF TOMORROW…
- 28. I CURRENTLY WORK WITH A CLEANUP CREW… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-code-scan
- 29. A simple way to detect how old a part of our massive site is checking which version of jQuery was used in that part of it. It’s like rings in a tree trunk. https://www.flickr.com/photos/91183364@N08/13916636762 “
- 30. WE BREAK THE WEB FOR THE SAKE OF DEVELOPER CONVENIENCE…
- 31. WE’RE GOING FULL SPEED ON INNOVATION… • Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps
- 34. NSFW
- 35. https://www.flickr.com/photos/56844027@N05/5634567317 WE SHOULD WORRY A LOT MORE ABOUT COST…
- 36. WE USE CODE WE 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.
- 38. COST FOR DEVELOPERS… • Learning new frameworks • Re-learning frameworks • Cutting down on possible hires/ adding to onboarding time • Debugging frameworks • Setting up developer environments
- 40. IS DEPENDENCY HELL A PROBLEM OF THE TOO PRIVILEGED? https://www.youtube.com/watch?v=PA139CERNbc Stephan Bönnemann (JSConfEU 2015): Dependency Hell Just Froze Over
- 41. WAITING FOR NPM TO FINISH INSTALLING…
- 42. THE REAL IMPORTANT BIT IS THE COST FOR OUR USERS… • Time to load / execute • Bandwidth used • CPU usage • Frame rate (60 fps) • Memory usage • Battery
- 43. CONTROL OVER WHAT IS HAPPENING IN THE BROWSER #FFD700
- 44. REPLACING BUILT-IN FUNCTIONALITY FOR THE SAKE OF CONTROL…
- 45. IF WE BUILD CLIENT- SIDE SOLUTIONS WE DON’T CONTROL WHERE OUR CODE RUNS.
- 46. HOMEWORK / SNEAK PREVIEW OF GREAT INSIGHTS… PAUL LEWIS @AEROTWIST
- 47. THE DOM IS SLOW?
- 51. ANALYSING BROWSER RESULTS… npm install -g bigrig github.com/GoogleChrome/big-rig github.com/GoogleChrome/node-big-rig
- 53. THE JAVASCRIPT LEARNING PROCESS HAS ALWAYS 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
- 54. THIS, OF COURSE, WAS WRONG 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.
- 55. WE ARE RUNNING OUT OF BOTH EXCUSES…
- 56. 1997 2015 1998 1999 2000 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…
- 57. 1997 2015 1998 1999 2000 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 GREW UP… • 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
- 58. SUPPORT IS ENCOURAGING (EDGE, FIREFOX, CHROME, SAFARI (ON 9)) http://kangax.github.io/compat-table/es6/
- 59. NUMBERS! Current status (December 2015): Desktop: Edge 13: 84% Firefox 44: 74% Chrome 48/Opera 35: 65% Safari 9: 54% (former 21%!) Mobile: Android 5.1: 29% iOS9: 54% http://kangax.github.io/compat-table/es6/
- 60. WITH ES6 WE HAVE A CLEAN NEW SLATE…
- 61. this IS COMPLICATED *** ***
- 62. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
- 63. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
- 64. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
- 65. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
- 73. UTF-8, BABY…
- 74. THE NEW BASELINE IS HERE!
- 75. THE NEW BASELINE IS HERE!
- 76. MAYBE IT IS PRUDENT TO CALM THE F… DOWN A BIT!
- 77. FREE TIME PROJECTS USED TO BE ABOUT FUN AND EXPERIMENTATION… http://sephie-monster.deviantart.com/art/Mythbusters-153616339
- 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 JAVASCRIPT CATERS TO DIFFERENT AUDIENCES…
- 80. https://www.flickr.com/photos/48066826@N02/5034289376 TIME TO CALM DOWN AND CONCENTRATE ON THE GOOD THINGS…
- 81. BETTER BROWSERS ALLOW US TO WRITE SIMPLER HELPER LIBRARIES… http://lea.verou.me/2015/12/introducing-bliss-a-3kb-library-for-happier-vanilla-js/
- 82. COMPATIBILITY IS ON EVERY BROWSER MAKER’S RADAR…
- 85. • Open Source and cross platform • Written in JavaScript • Includes debugging and linting - learn your mistakes while you write code • GitHub integration VISUAL STUDIO CODE https://code.visualstudio.com/
- 86. TRANSPILATING FOR THE WEB OF YESTERDAY… 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
- 88. EXCELLENT RESOURCES ARE FREE AND ONLINE… https://ponyfoo.com/articles/es6
- 89. READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (OR BUY IT, AXEL DESERVES SUPPORT) http://exploringjs.com/es6/
- 90. • One hour free test server • Authenticate with Google, Facebook or Microsoft • Keep your code by forking or downloading it TRY NODE AND EXPRESS… https://www.christianheilmann.com/2015/10/27/testing-out-node-and-express-without-a-local-install-or-editor/
- 92. PLEASE, GO AND MAKE A 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!
- 93. JAVASCRIPT IS STILL THE SIMPLEST, MOST VERSATILE AND INVITING LANGUAGE OUT THERE…
- 95. YOU MAKE THE WEB, LET US HEAR WHAT YOU NEED…