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.
Making ES6 available to all with ChakraCore
Chris Heilmann @codepo8, JFokus, Stockholm, February 2015
Of innovation and impatience
Chris Heilmann @codepo8, Future Decoded, London, Nov 2015
CHRIS HEILMANN
@CODEPO8
LET’S TALK
JAVASCRIPT…
• Old issues
• The learning process
• The library/framework issue
• The ES6 buffet
• Standards and ...
OLD ISSUES OF JAVASCRIPT
JAVASCRIPT CLIENT-
SIDE HAS ISSUES…
• It is not fault-tolerant
• Many different parties mess with it
• You don’t know the ...
JAVASCRIPT THE
LANGUAGE HAS
ISSUES
(OPPORTUNITIES)…
• typeof NaN === number
• No type safety
• No classes
• “it feels rush...
ENGINE TROUBLE:
JAVASCRIPT IS
HUNGRY
HTTPS:// .WTF
THE JAVASCRIPT LEARNING PROCESS
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...
IT’S TRUE…
BUT OF COURSE IT CAN
BE IMPROVED…
WITH ES6 WE HAVE
A CLEAN NEW
SLATE…
(AND YOU CAN’T BLAME IE ANY MORE)
SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER…
https://babeljs.io/docs/learn-es2015/
350 BULLET POINTS
https://babeljs.io/docs/learn-es2015/
READ THE
EXCELLENT BOOK
EXPLORING ES6
FOR FREE
(OR BUY IT, AXEL DESERVES SUPPORT)
http://exploringjs.com/es6/
THE LIBRARY/FRAMEWORK ISSUE…
JAVASCRIPT ABUSE IS
RAMPANT…
SHOULD WE BUILD
EVERYTHING FROM
SCRATCH?
OLD ISSUES, NOW IN
THE NEXT LANGUAGE…
IS DEPENDENCY HELL
A PROBLEM OF THE
TOO PRIVILEGED?
https://www.youtube.com/watch?v=PA139CERNbc
Stephan Bönnemann (JSConfE...
WE’RE GOING
FULL SPEED ON
INNOVATION…
• Componentised Web
• Extensible Web Manifesto
• WebGL
• WebAssembly/ASM.js
• PostCS...
• We work around browser issues
• We make web standards of
tomorrow work today.
• We build solutions to clean up
others an...
NSFW
THAT’S COOL -
GO NUTS AND
PLAY WITH ANY
TECHNOLOGY
YOU WANT…
FRAMEWORKS
ARE GREAT…
• They are fun to use - achieve a
lot very quickly
• You build complex apps in a
matter of minutes
•...
…BUT THEY ALSO
COME WITH
DEVELOPER COST
• Learning new frameworks
• Re-learning new frameworks
• Debugging frameworks
• Se...
AND WE SHOULD
CONSIDER THE
EFFECTS WE HAVE
ON OUR END
USERS…
• Time to load / execute
• Bandwidth used
• CPU usage
• Frame...
HOMEWORK / SNEAK
PREVIEW OF GREAT
INSIGHTS…
PAUL LEWIS
@AEROTWIST
THE DOM IS SLOW?
ANALYSING
BROWSER RESULTS…
npm install -g bigrig
github.com/GoogleChrome/big-rig
github.com/GoogleChrome/node-big-rig
WE USE CODE WE
DON’T UNDERSTAND
TO FIX ISSUES WE
DON’T HAVE…
• Learning libraries and
frameworks beyond “hello
world” cost...
THE ES6 BUFFET…
1997 2015
1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
1997
ECMAScript1
1998
...
1997 2015
1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
1997
ECMAScript1
1998
...
this IS COMPLICATED *** ***
this IS COMPLICATED
*** ***
blog.getify.com/arrow-this/
this IS COMPLICATED
*** ***
blog.getify.com/arrow-this/
this IS COMPLICATED
*** ***
blog.getify.com/arrow-this/
this IS COMPLICATED
*** ***
blog.getify.com/arrow-this/
SAVING KEYSTROKES
• Arrow functions as a short-hand version of an
anonymous function.
• Block-level scope using let instead of var makes
var...
Library Builders
map, set & weakmap
__proto__
Proxies
Symbols
Sub7classable built7ins
Scalable Apps
let, const & block7
sc...
SUPPORT IS ENCOURAGING (EDGE, FIREFOX, CHROME, SAFARI (ON 9))
http://kangax.github.io/compat-table/es6/
THE PROBLEM: FOR
NON-SUPPORTING
ENGINES, ES6
FEATURES ARE
SYNTAX ERRORS…
THE SOLUTION: TRANSPILING INTO ES5…
https://babeljs.io
• Converts ES6 to older versions on the server or the client
• In u...
✘ Extra step between writing code
and running it in the browser.
✘ We don’t run or debug the code
we write.
✘ We hope the ...
TRANSPILED CODE…
THE VICIOUS
INNOVATION CYCLE…
https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016
PICK YOUR TRANSPIRATION T...
THE ES6
CONUNDRUM…
• We can’t use it safely in the wild
• We can use TypeScript or transpile it
• We can feature test for ...
STANDARDS AND INTEROP
WHAT DOES THIS CODE DO?
REPLACING BUILT-IN
FUNCTIONALITY
FOR THE SAKE OF
CONTROL…
SIMPLY BECAUSE WE CAN FIX ANYTHING WITH
JAVASCRIPT DOES NOT MEAN WE SHOULD!
THE COMPATIBILITY RACE…
THE VICIOUS
INNOVATION CYCLE…
OUT OF THE BOX BROWSER
DO NOT SUCK ANY LONGER!
COMPATIBILITY IS ON
EVERY BROWSER
MAKER’S RADAR…
BREAKING MONOPOLIES
NEW BROWSER, NEW JS ENGINE
SPEED COMPARISONS…
SURPRISES HAPPEN…
CHAKRACORE VS CHAKRA
HTTPS:// .WTF
TIME TRAVEL DEBUGGING
https://www.youtube.com/watch?v=1bfDB3YPHFI
NODE USING CHAKRACORE
https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
NODE USING CHAKRACORE
https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
NODE USING CHAKRACORE
https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
https://github.com/Microsoft/ChakraCore
COME AND PLAY
THANKS!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM
Making ES6 available to all with ChakraCore
Making ES6 available to all with ChakraCore
Making ES6 available to all with ChakraCore
Making ES6 available to all with ChakraCore
Upcoming SlideShare
Loading in …5
×

Making ES6 available to all with ChakraCore

4,364 views

Published on

JFokus2016

Published in: Automotive
  • Be the first to comment

Making ES6 available to all with ChakraCore

  1. 1. Making ES6 available to all with ChakraCore Chris Heilmann @codepo8, JFokus, Stockholm, February 2015
  2. 2. Of innovation and impatience Chris Heilmann @codepo8, Future Decoded, London, Nov 2015 CHRIS HEILMANN @CODEPO8
  3. 3. LET’S TALK JAVASCRIPT… • Old issues • The learning process • The library/framework issue • The ES6 buffet • Standards and interop • Breaking monopolies
  4. 4. OLD ISSUES OF JAVASCRIPT
  5. 5. JAVASCRIPT CLIENT- SIDE HAS ISSUES… • It is not fault-tolerant • Many different parties mess with it • You don’t know the environment it runs in • It has always been part of the browser and dependent on its release and upgrade cycle
  6. 6. JAVASCRIPT THE LANGUAGE HAS ISSUES (OPPORTUNITIES)… • typeof NaN === number • No type safety • No classes • “it feels rushed”
  7. 7. ENGINE TROUBLE: JAVASCRIPT IS HUNGRY
  8. 8. HTTPS:// .WTF
  9. 9. THE JAVASCRIPT LEARNING PROCESS
  10. 10. 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
  11. 11. 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.
  12. 12. IT’S TRUE…
  13. 13. BUT OF COURSE IT CAN BE IMPROVED…
  14. 14. WITH ES6 WE HAVE A CLEAN NEW SLATE… (AND YOU CAN’T BLAME IE ANY MORE)
  15. 15. SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER… https://babeljs.io/docs/learn-es2015/
  16. 16. 350 BULLET POINTS https://babeljs.io/docs/learn-es2015/
  17. 17. READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (OR BUY IT, AXEL DESERVES SUPPORT) http://exploringjs.com/es6/
  18. 18. THE LIBRARY/FRAMEWORK ISSUE…
  19. 19. JAVASCRIPT ABUSE IS RAMPANT…
  20. 20. SHOULD WE BUILD EVERYTHING FROM SCRATCH?
  21. 21. OLD ISSUES, NOW IN THE NEXT LANGUAGE…
  22. 22. 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
  23. 23. WE’RE GOING FULL SPEED ON INNOVATION… • Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps
  24. 24. • We work around 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…
  25. 25. NSFW
  26. 26. THAT’S COOL - GO NUTS AND PLAY WITH ANY TECHNOLOGY YOU WANT…
  27. 27. FRAMEWORKS ARE GREAT… • They are 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
  28. 28. …BUT THEY ALSO COME WITH DEVELOPER COST • Learning new frameworks • Re-learning new frameworks • Debugging frameworks • Setting up developer environments • Cutting down on possible hires/ adding to onboarding time
  29. 29. AND WE SHOULD CONSIDER THE EFFECTS WE HAVE ON OUR END USERS… • Time to load / execute • Bandwidth used • CPU usage • Frame rate (60 fps) • Memory usage • Battery hunger
  30. 30. HOMEWORK / SNEAK PREVIEW OF GREAT INSIGHTS… PAUL LEWIS @AEROTWIST
  31. 31. THE DOM IS SLOW?
  32. 32. ANALYSING BROWSER RESULTS… npm install -g bigrig github.com/GoogleChrome/big-rig github.com/GoogleChrome/node-big-rig
  33. 33. 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.
  34. 34. THE ES6 BUFFET…
  35. 35. 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…
  36. 36. 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 …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
  37. 37. this IS COMPLICATED *** ***
  38. 38. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
  39. 39. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
  40. 40. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
  41. 41. this IS COMPLICATED *** *** blog.getify.com/arrow-this/
  42. 42. SAVING KEYSTROKES
  43. 43. • Arrow functions as 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…
  44. 44. 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
  45. 45. SUPPORT IS ENCOURAGING (EDGE, FIREFOX, CHROME, SAFARI (ON 9)) http://kangax.github.io/compat-table/es6/
  46. 46. THE PROBLEM: FOR NON-SUPPORTING ENGINES, ES6 FEATURES ARE SYNTAX ERRORS…
  47. 47. THE SOLUTION: TRANSPILING INTO 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
  48. 48. ✘ Extra step between 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:
  49. 49. TRANSPILED CODE…
  50. 50. THE VICIOUS INNOVATION CYCLE… https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016 PICK YOUR TRANSPIRATION TOOLCHAIN…
  51. 51. THE ES6 CONUNDRUM… • We can’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/
  52. 52. STANDARDS AND INTEROP
  53. 53. WHAT DOES THIS CODE DO?
  54. 54. REPLACING BUILT-IN FUNCTIONALITY FOR THE SAKE OF CONTROL…
  55. 55. SIMPLY BECAUSE WE CAN FIX ANYTHING WITH JAVASCRIPT DOES NOT MEAN WE SHOULD!
  56. 56. THE COMPATIBILITY RACE…
  57. 57. THE VICIOUS INNOVATION CYCLE…
  58. 58. OUT OF THE BOX BROWSER DO NOT SUCK ANY LONGER!
  59. 59. COMPATIBILITY IS ON EVERY BROWSER MAKER’S RADAR…
  60. 60. BREAKING MONOPOLIES
  61. 61. NEW BROWSER, NEW JS ENGINE
  62. 62. SPEED COMPARISONS…
  63. 63. SURPRISES HAPPEN…
  64. 64. CHAKRACORE VS CHAKRA
  65. 65. HTTPS:// .WTF
  66. 66. TIME TRAVEL DEBUGGING https://www.youtube.com/watch?v=1bfDB3YPHFI
  67. 67. NODE USING CHAKRACORE https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
  68. 68. NODE USING CHAKRACORE https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
  69. 69. NODE USING CHAKRACORE https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
  70. 70. https://github.com/Microsoft/ChakraCore COME AND PLAY
  71. 71. THANKS! CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM

×