Successfully reported this slideshow.
Your SlideShare is downloading. ×

Overboard.js - where are we going with with jsconfasia / devfestasia

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

YouTube videos are no longer supported on SlideShare

View original on YouTube

OVERBOARD.JS
Where are we going with this?
Chris Heilmann @codepo8, JSConf Asia, Singapore, Nov 2015
https://www.flickr.com...
CHRIS HEILMANN
@CODEPO8
Loading in …3
×

Check these out next

1 of 73 Ad

More Related Content

Slideshows for you (20)

Similar to Overboard.js - where are we going with with jsconfasia / devfestasia (20)

Advertisement

More from Christian Heilmann (20)

Advertisement

Overboard.js - where are we going with with jsconfasia / devfestasia

  1. 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
  2. 2. CHRIS HEILMANN @CODEPO8
  3. 3. DEVELOPER, WRITER, PRESENTER, TRAINER, MANAGER…
  4. 4. CHRIS HEILMANN @CODEPO8
  5. 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. 6. JAVASCRIPT IS A VERSATILE, CREATIVE AND EASY TO LEARN PICK AND MIX ENVIRONMENT…
  7. 7. WE KEEP TREATING JS LIKE A “ONE SIZE FITS ALL” ENVIRONMENT WE CAN CONTROL… ttps://www.flickr.com/photos/49503073847@N01/3250153332
  8. 8. LATELY, WE GO OVERBOARD WITH JS https://www.flickr.com/photos/13963375@N00/138745886
  9. 9. WE’RE GOING FULL SPEED ON INNOVATION… • Componentised Web • Modules/Packages • Extensible Web Manifesto • WebAssembly/ASM.js • PostCSS • Progressive Apps
  10. 10. THE VICIOUS INNOVATION CYCLE…
  11. 11. WE FORCE RULES ONTO OURSELVES THAT MIGHT BE OVERKILL… https://egghead.io/series/how-‐to-‐write-‐an-‐open-‐source-‐javascript-‐library
  12. 12. https://www.flickr.com/photos/38497891@N04/4151566643 WE LIVE IN A HYPE FUELLED ENVIRONMENT
  13. 13. Moore’s Law: (﴾paraphrased)﴿ Computers get faster, better, cheaper and are more available every two years.
  14. 14. WE WORK WITH AMAZING HARDWARE…
  15. 15. WE WORK WITH GREAT CONNECTIVITY…
  16. 16. WE GET PAID WELL – FOR A JOB WE LIKE https://www.flickr.com/photos/31317832@N05/4326186183
  17. 17. WE WORK WITH AMAZING BROWSERS
  18. 18. May’s Law: (﴾paraphrased)﴿ Software efficiency halves every 18 months, compensating Moore’s law.
  19. 19. https://www.flickr.com/photos/56218409@N03/19216130670 WE MOVE FAST AND RUN IN CIRCLES
  20. 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. 21. "https://www.flickr.com/photos/80835334@N07/14860543478 WAITING ISN’T FUN…
  22. 22. ESPECIALLY WHEN IT COSTS YOU…
  23. 23. https://www.flickr.com/photos/37996646802@N01/16637071998 HOW DOES THIS HAPPEN?
  24. 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. 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. 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. 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. 28. GROWTH HAPPENS WHERE MOORE’S LAW ISN’T A REALITY
  29. 29. MOORE’S LAW STOPPED WORKING WHEN WE HARD-‐ WIRED HARDWARE AND SOFTWARE…
  30. 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. 31. https://www.flickr.com/photos/73645804@N00/2473052504 JUST FIND THE RIGHT BRICKS AND ASSEMBLE SOMETHING GREAT!
  32. 32. WHAT DOES THIS CODE DO?
  33. 33. https://www.flickr.com/photos/27429206@N02/4290544535 THE AMAZING TECH OF TODAY IS THE RUBBISH OF TOMORROW…
  34. 34. I CURRENTLY WORK WITH A CLEANUP CREW… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-‐code-‐scan
  35. 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. 36. WE BREAK THE WEB FOR THE SAKE OF DEVELOPER CONVENIENCE…
  37. 37. https://aerotwist.com/blog/the-cost-of-frameworks/ A GREAT READ AND TALK VIDEO…
  38. 38. THE DOM IS SLOW?
  39. 39. 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)﴿
  40. 40. ANALYSING BROWSER RESULTS… npm install -‐g bigrig github.com/GoogleChrome/big-‐rig github.com/GoogleChrome/node-‐big-‐rig
  41. 41. FIXING EVERYTHING WITH A LOT OF JAVASCRIPT HELPS US, NOT NECESSARILY OUR AUDIENCE…
  42. 42. https://www.flickr.com/photos/56844027@N05/5634567317 WE SHOULD WORRY A LOT MORE ABOUT COST…
  43. 43. COST FOR DEVELOPERS… • Learning new frameworks • Re-‐learning frameworks • Debugging frameworks • Setting up developer environments • Cutting down on possible hires/ adding to onboarding time
  44. 44. 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
  45. 45. IT’S TIME TO CLEAN UP AND LEARN THE BASICS… https://twitter.com/magnars/status/666961875683405824
  46. 46. 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
  47. 47. 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.
  48. 48. WE ARE RUNNING OUT OF BOTH EXCUSES…
  49. 49. 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
  50. 50. SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿ http://kangax.github.io/compat-table/es6/
  51. 51. 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/
  52. 52. WITH ES6 WE HAVE A CLEAN NEW SLATE…
  53. 53. THE NEW BASELINE IS HERE!
  54. 54. THE NEW BASELINE IS HERE!
  55. 55. MAYBE IT IS PRUDENT TO CALM DOWN A BIT!
  56. 56. CONTROLLED ENVIRONMENTS ALLOW US TO USE THE NEWEST AND COOLEST AND FIND BEST PRACTICES
  57. 57. LET’S NOT MAKE THE JAVASCRIPT WORLD OVERLY COMPLEX AND SCARY…
  58. 58. 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…
  59. 59. PLAY WITH IT AND FIND OUT WHICH PARTS MATTER TO YOU… http://sephie-‐monster.deviantart.com/art/Mythbusters-‐153616339
  60. 60. BABELJS ALLOWS YOU TO LEARN AND USE IT NOW… https://babeljs.io/docs/learn-‐es2015/
  61. 61. THERE IS NO SHORTAGE OF GREAT ONLINE RESOURCES https://babeljs.io/docs/learn-‐es2015/
  62. 62. READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿ http://exploringjs.com/es6/
  63. 63. https://www.flickr.com/photos/48066826@N02/5034289376 BUT ALSO LET’S CALM DOWN AND FIX AND REMOVE WHAT’S BROKEN
  64. 64. 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
  65. 65. LEND A HELPING HAND…
  66. 66. LET’S TURN COMPETITION INTO EDUCATION AND FUN AGAIN!
  67. 67. THANKS! CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM

×