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.
OVERBOARD.JS
Where are we going with this?
Chris Heilmann @codepo8, JSConf Asia, Singapore, Nov 2015
https://www.flickr.com...
CHRIS HEILMANN
@CODEPO8
DEVELOPER,
WRITER,
PRESENTER,
TRAINER,
MANAGER…
CHRIS HEILMANN
@CODEPO8
• Authoring web sites and enhancing
them with JS
• Scripting/Extending applications
(﴾Illustrator, Homesite, Visual Studio...
JAVASCRIPT IS A
VERSATILE, CREATIVE
AND EASY TO LEARN
PICK AND MIX
ENVIRONMENT…
WE KEEP TREATING JS
LIKE A “ONE SIZE FITS
ALL” ENVIRONMENT WE
CAN CONTROL…
ttps://www.flickr.com/photos/49503073847@N01/325...
LATELY, WE GO OVERBOARD WITH JS
https://www.flickr.com/photos/13963375@N00/138745886
WE’RE GOING
FULL SPEED ON
INNOVATION…
• Componentised Web
• Modules/Packages
• Extensible Web Manifesto
• WebAssembly/ASM....
THE VICIOUS
INNOVATION CYCLE…
WE FORCE RULES
ONTO OURSELVES
THAT MIGHT BE
OVERKILL…
https://egghead.io/series/how-‐to-‐write-‐an-‐open-‐source-‐javascri...
https://www.flickr.com/photos/38497891@N04/4151566643
WE LIVE IN A HYPE FUELLED ENVIRONMENT
Moore’s Law:
(﴾paraphrased)﴿
Computers get faster,
better, cheaper and
are more available
every two years.
WE WORK WITH AMAZING HARDWARE…
WE WORK WITH GREAT CONNECTIVITY…
WE GET PAID WELL – FOR A JOB WE LIKE
https://www.flickr.com/photos/31317832@N05/4326186183
WE WORK WITH AMAZING BROWSERS
May’s Law:
(﴾paraphrased)﴿
Software efficiency halves every
18 months, compensating
Moore’s law.
https://www.flickr.com/photos/56218409@N03/19216130670
WE MOVE FAST AND RUN IN CIRCLES
http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/
THE WEB IS IN A
SORRY STATE…
• The median page’s tim...
"https://www.flickr.com/photos/80835334@N07/14860543478
WAITING ISN’T FUN…
ESPECIALLY WHEN IT COSTS YOU…
https://www.flickr.com/photos/37996646802@N01/16637071998
HOW DOES THIS HAPPEN?
WE KEEP PROJECTING…
US
OUR
AUDIENCE
TECHNICAL PROFICIENCY,
INTEREST IN CHANGE AND UPGRADES,
INTEREST IN SPENDING MONEY ON ...
AND WE CONSIDER OURSELVES
BETTER…
US
OUR
AUDIENCE
TECHNICAL PROFICIENCY,
INTEREST IN CHANGE AND UPGRADES,
INTEREST IN SPEN...
TIME TO GET REAL…
US
OUR
ASSUMED
AUDIENCE
OUR
AUDIENCE
TECHNICAL PROFICIENCY,
INTEREST IN CHANGE AND UPGRADES,
INTEREST IN...
THE NEXT USERS ARE
NOT THOSE WHO
COMPLAIN THE WEB
IS NOT AS GOOD AS
NATIVE APPS…
https://vimeo.com/139312920
https://bruce...
GROWTH HAPPENS WHERE
MOORE’S LAW ISN’T A
REALITY
MOORE’S LAW
STOPPED WORKING
WHEN WE HARD-‐
WIRED HARDWARE
AND SOFTWARE…
AS DEVELOPERS, WE
ARE ASKED TO DO
THE IMPOSSIBLE…
• Make it work the same in every
browser
• Make it easy to maintain and ...
https://www.flickr.com/photos/73645804@N00/2473052504
JUST FIND THE RIGHT
BRICKS AND ASSEMBLE
SOMETHING GREAT!
WHAT DOES THIS CODE DO?
https://www.flickr.com/photos/27429206@N02/4290544535
THE AMAZING TECH OF
TODAY IS THE RUBBISH OF
TOMORROW…
I CURRENTLY WORK
WITH A CLEANUP
CREW…
http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-‐code...
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....
WE BREAK THE WEB
FOR THE SAKE OF
DEVELOPER
CONVENIENCE…
https://aerotwist.com/blog/the-cost-of-frameworks/
A GREAT READ AND TALK VIDEO…
THE DOM IS SLOW?
BROWSER DO AN
INCREDIBLE AMOUNT
OF WORK FOR US…
• Display of all kind of media content
• Fix minor mistakes in our code
• ...
ANALYSING
BROWSER RESULTS…
npm install -‐g bigrig
github.com/GoogleChrome/big-‐rig
github.com/GoogleChrome/node-‐big-‐rig
FIXING EVERYTHING WITH A LOT OF JAVASCRIPT
HELPS US, NOT NECESSARILY OUR AUDIENCE…
https://www.flickr.com/photos/56844027@N05/5634567317
WE SHOULD WORRY A LOT
MORE ABOUT COST…
COST FOR
DEVELOPERS…
• Learning new frameworks
• Re-‐learning frameworks
• Debugging frameworks
• Setting up developer
env...
THE REAL
IMPORTANT BIT IS
THE COST FOR OUR
USERS…
• Time to load / execute
• Bandwidth used
• CPU usage
• Frame rate (﴾60 ...
IT’S TIME TO CLEAN
UP AND LEARN THE
BASICS…
https://twitter.com/magnars/status/666961875683405824
THE JAVASCRIPT
LEARNING PROCESS
HAS ALWAYS BEEN
INTERESTING…
• Use view source to see what
others are doing…
• Copy and pa...
THIS, OF COURSE,
WAS WRONG AND
WE GOT MORE
PROFESSIONAL…
• Search for a solution on
Stackoverflow
• Copy and paste the bit...
WE ARE RUNNING OUT OF
BOTH EXCUSES…
1997 2015
1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
1997
ECMAScript1
1998
...
SUPPORT IS ENCOURAGING (﴾EDGE, FIREFOX, CHROME, SAFARI (﴾ON 9)﴿)﴿
http://kangax.github.io/compat-table/es6/
NUMBERS!
Current status (﴾October 2015)﴿:
Desktop:
Edge 13: 80%
Firefox 42: 71%
Chrome 47/Opera 34: 63 %
Safari 9: 54% (﴾f...
WITH ES6 WE HAVE
A CLEAN NEW
SLATE…
THE NEW BASELINE
IS HERE!
THE NEW BASELINE
IS HERE!
MAYBE IT IS PRUDENT
TO CALM DOWN A
BIT!
CONTROLLED
ENVIRONMENTS
ALLOW US TO USE
THE NEWEST AND
COOLEST AND FIND
BEST PRACTICES
LET’S NOT MAKE THE
JAVASCRIPT WORLD OVERLY
COMPLEX AND SCARY…
Library Builders
map, set & weakmap
__proto__
Proxies
Symbols
Sub7classable built7ins
Scalable Apps
let, const & block7
sc...
PLAY WITH IT AND
FIND OUT WHICH
PARTS MATTER TO
YOU…
http://sephie-‐monster.deviantart.com/art/Mythbusters-‐153616339
BABELJS ALLOWS YOU TO LEARN AND USE IT NOW…
https://babeljs.io/docs/learn-‐es2015/
THERE IS NO SHORTAGE OF GREAT ONLINE RESOURCES
https://babeljs.io/docs/learn-‐es2015/
READ THE
EXCELLENT BOOK
EXPLORING ES6
FOR FREE
(﴾OR BUY IT, AXEL DESERVES SUPPORT)﴿
http://exploringjs.com/es6/
https://www.flickr.com/photos/48066826@N02/5034289376
BUT ALSO LET’S CALM
DOWN AND FIX AND
REMOVE WHAT’S BROKEN
LET’S ANALYSE AND
CLEAN UP.
PUT THE WEB ON A
DIET.
ONE TOO
CONVENIENT
SOLUTION AT A
TIME…
http://dev.modern.ie/tools/stati...
LEND A HELPING HAND…
LET’S TURN
COMPETITION
INTO EDUCATION
AND FUN AGAIN!
THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM
Overboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasia
Upcoming SlideShare
Loading in …5
×

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

4,877 views

Published on

I like cheese. But not too late.

Published in: Food
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×