Overboard.js - where are we going with with jsconfasia / devfestasia
7 likes5,401 views
This document summarizes a talk given by Chris Heilmann on the current state and future of JavaScript. It notes that while JavaScript has become incredibly versatile, developers have a tendency to over-engineer solutions and add unnecessary complexity. This bloat slows down sites and hurts users. The document advocates taking a step back to focus on fundamentals and cleanup. It highlights upcoming ES6 features that provide a cleaner baseline and encourages using them responsibly while also fixing existing broken code.
Ad
More Related Content
What's hot (20)
Similar to Overboard.js - where are we going with with jsconfasia / devfestasia (20)
Ad
More from Christian Heilmann (20)
Ad
Recently uploaded (20)
Overboard.js - where are we going with with jsconfasia / devfestasia
- 1. OVERBOARD.JS Where are we going with this? Chris Heilmann @codepo8, JSConf Asia, Singapore, Nov 2015 https://www.flickr.com/photos/116261672@N04/19015989685
- 5. • Authoring web sites and enhancing them with JS • Scripting/Extending applications (﴾Illustrator, Homesite, Visual Studio Code, Sublime…)﴿ • Authoring re-‐usable widgets for people who don’t know JS • Working on libraries/frameworks • Working on browsers and JS engines • Working on server-‐side JavaScript • Designing APIs for JS consumption
- 6. JAVASCRIPT IS A VERSATILE, CREATIVE AND EASY TO LEARN PICK AND MIX ENVIRONMENT…
- 7. WE KEEP TREATING JS LIKE A “ONE SIZE FITS ALL” ENVIRONMENT WE CAN CONTROL… ttps://www.flickr.com/photos/49503073847@N01/3250153332
- 8. LATELY, WE GO OVERBOARD WITH JS https://www.flickr.com/photos/13963375@N00/138745886
- 9. WE’RE GOING FULL SPEED ON INNOVATION… • Componentised Web • Modules/Packages • Extensible Web Manifesto • WebAssembly/ASM.js • PostCSS • Progressive Apps
- 11. WE FORCE RULES ONTO OURSELVES THAT MIGHT BE OVERKILL… https://egghead.io/series/how-‐to-‐write-‐an-‐open-‐source-‐javascript-‐library
- 12. https://www.flickr.com/photos/38497891@N04/4151566643 WE LIVE IN A HYPE FUELLED ENVIRONMENT
- 13. Moore’s Law: (﴾paraphrased)﴿ Computers get faster, better, cheaper and are more available every two years.
- 14. WE WORK WITH AMAZING HARDWARE…
- 15. WE WORK WITH GREAT CONNECTIVITY…
- 16. WE GET PAID WELL – FOR A JOB WE LIKE https://www.flickr.com/photos/31317832@N05/4326186183
- 17. WE WORK WITH AMAZING BROWSERS
- 18. May’s Law: (﴾paraphrased)﴿ Software efficiency halves every 18 months, compensating Moore’s law.
- 19. https://www.flickr.com/photos/56218409@N03/19216130670 WE MOVE FAST AND RUN IN CIRCLES
- 20. http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/ THE WEB IS IN A SORRY STATE… • 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
- 21. "https://www.flickr.com/photos/80835334@N07/14860543478 WAITING ISN’T FUN…
- 22. ESPECIALLY WHEN IT COSTS YOU…
- 23. https://www.flickr.com/photos/37996646802@N01/16637071998 HOW DOES THIS HAPPEN?
- 24. WE KEEP PROJECTING… US OUR AUDIENCE TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
- 25. AND WE CONSIDER OURSELVES BETTER… US OUR AUDIENCE TECHNICAL PROFICIENCY, INTEREST IN CHANGE AND UPGRADES, INTEREST IN SPENDING MONEY ON THE WEB FOR WEB SERVICES…
- 26. 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…
- 27. 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
- 28. GROWTH HAPPENS WHERE MOORE’S LAW ISN’T A REALITY
- 29. MOORE’S LAW STOPPED WORKING WHEN WE HARD-‐ WIRED HARDWARE AND SOFTWARE…
- 30. 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
- 31. https://www.flickr.com/photos/73645804@N00/2473052504 JUST FIND THE RIGHT BRICKS AND ASSEMBLE SOMETHING GREAT!
- 32. WHAT DOES THIS CODE DO?
- 33. https://www.flickr.com/photos/27429206@N02/4290544535 THE AMAZING TECH OF TODAY IS THE RUBBISH OF TOMORROW…
- 34. I CURRENTLY WORK WITH A CLEANUP CREW… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-‐code-‐scan
- 35. 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 “
- 36. WE BREAK THE WEB FOR THE SAKE OF DEVELOPER CONVENIENCE…
- 37. https://aerotwist.com/blog/the-cost-of-frameworks/ A GREAT READ AND TALK VIDEO…
- 38. THE DOM IS SLOW?
- 42. 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)﴿
- 43. ANALYSING BROWSER RESULTS… npm install -‐g bigrig github.com/GoogleChrome/big-‐rig github.com/GoogleChrome/node-‐big-‐rig
- 45. FIXING EVERYTHING WITH A LOT OF JAVASCRIPT HELPS US, NOT NECESSARILY OUR AUDIENCE…
- 46. https://www.flickr.com/photos/56844027@N05/5634567317 WE SHOULD WORRY A LOT MORE ABOUT COST…
- 47. COST FOR DEVELOPERS… • Learning new frameworks • Re-‐learning frameworks • Debugging frameworks • Setting up developer environments • Cutting down on possible hires/ adding to onboarding time
- 48. 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
- 49. IT’S TIME TO CLEAN UP AND LEARN THE BASICS… https://twitter.com/magnars/status/666961875683405824
- 50. 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
- 51. 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.
- 52. WE ARE RUNNING OUT OF BOTH EXCUSES…
- 53. 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
- 54. SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿ http://kangax.github.io/compat-table/es6/
- 55. NUMBERS! Current status (﴾October 2015)﴿: 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/
- 56. WITH ES6 WE HAVE A CLEAN NEW SLATE…
- 57. THE NEW BASELINE IS HERE!
- 58. THE NEW BASELINE IS HERE!
- 59. MAYBE IT IS PRUDENT TO CALM DOWN A BIT!
- 60. CONTROLLED ENVIRONMENTS ALLOW US TO USE THE NEWEST AND COOLEST AND FIND BEST PRACTICES
- 61. LET’S NOT MAKE THE JAVASCRIPT WORLD OVERLY COMPLEX AND SCARY…
- 62. 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 ES* CATERS TO DIFFERENT AUDIENCES…
- 63. PLAY WITH IT AND FIND OUT WHICH PARTS MATTER TO YOU… http://sephie-‐monster.deviantart.com/art/Mythbusters-‐153616339
- 64. BABELJS ALLOWS YOU TO LEARN AND USE IT NOW… https://babeljs.io/docs/learn-‐es2015/
- 65. THERE IS NO SHORTAGE OF GREAT ONLINE RESOURCES https://babeljs.io/docs/learn-‐es2015/
- 66. READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿ http://exploringjs.com/es6/
- 67. https://www.flickr.com/photos/48066826@N02/5034289376 BUT ALSO LET’S CALM DOWN AND FIX AND REMOVE WHAT’S BROKEN
- 68. LET’S ANALYSE AND CLEAN UP. PUT THE WEB ON A DIET. ONE TOO CONVENIENT SOLUTION AT A TIME… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-‐code-‐scan
- 69. LEND A HELPING HAND…
- 70. LET’S TURN COMPETITION INTO EDUCATION AND FUN AGAIN!