making es6 available to all with chakracore and typescript
TRANSCRIPT
![Page 1: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/1.jpg)
Making ES6 available to all with ChakraCore and Typescript
Chris Heilmann @codepo8, Great Wide Open, Atlanta, March 2015
![Page 2: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/2.jpg)
Of innovation and impatience
Chris Heilmann @codepo8, Future Decoded, London, Nov 2015
CHRIS HEILMANN @CODEPO8
![Page 3: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/3.jpg)
LET’S TALK JAVASCRIPT…
• Old issues • The learning process • The tooling issue • The library/framework issue • ES6 and its promises • ES6 and its realities • Typescript • The ChakraCore thing
![Page 4: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/4.jpg)
OLD ISSUES OF JAVASCRIPT
![Page 5: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/5.jpg)
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
![Page 6: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/6.jpg)
JAVASCRIPT THE LANGUAGE HAS ISSUES (OPPORTUNITIES)…
• typeof NaN === number • No type safety • No classes • “it feels rushed”
![Page 7: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/7.jpg)
ENGINE TROUBLE: JAVASCRIPT IS HUNGRY
![Page 8: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/8.jpg)
HTTPS:// .WTF
![Page 9: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/9.jpg)
THE JAVASCRIPT LEARNING PROCESS
![Page 10: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/10.jpg)
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
![Page 11: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/11.jpg)
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.
![Page 12: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/12.jpg)
SHORTCUTS…
![Page 13: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/13.jpg)
WITH ES6 WE HAVE A CLEAN NEW SLATE… (AND YOU CAN’T BLAME IE ANY MORE)
![Page 14: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/14.jpg)
SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER…
https://babeljs.io/docs/learn-es2015/
![Page 16: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/16.jpg)
READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (OR BUY IT, AXEL DESERVES SUPPORT)
http://exploringjs.com/es6/
![Page 17: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/17.jpg)
THE TOOLING ISSUE…
![Page 18: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/18.jpg)
JAVASCRIPT TOOLING FEELS RUDIMENTARY
![Page 19: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/19.jpg)
AND IT DIFFERS FROM BROWSER TO BROWSER…
![Page 20: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/20.jpg)
THE LIBRARY/FRAMEWORK ISSUE…
![Page 21: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/21.jpg)
JAVASCRIPT ABUSE IS RAMPANT…
![Page 22: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/22.jpg)
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
“
![Page 23: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/23.jpg)
PAUL LEWIS @AEROTWIST
![Page 24: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/24.jpg)
![Page 25: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/25.jpg)
![Page 26: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/26.jpg)
![Page 27: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/27.jpg)
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
![Page 28: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/28.jpg)
…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
![Page 29: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/29.jpg)
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
![Page 30: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/30.jpg)
WE’RE GOING FULL SPEED ON INNOVATION…
• Componentised Web • Extensible Web Manifesto • WebGL • WebAssembly/ASM.js • PostCSS • Progressive Apps
![Page 31: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/31.jpg)
• 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…
![Page 32: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/32.jpg)
ES6 AND ITS PROMISES…
![Page 33: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/33.jpg)
1997 20151998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
1997ECMAScript1
1998ECMAScript2
1999ECMAScript3
2005 - 2007ECMAScript4 - Abandoned
2009ECMAScript5
2015ECMAScript6
JAVASCRIPT EVOLVES…
![Page 34: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/34.jpg)
1997 20151998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
1997ECMAScript1
1998ECMAScript2
1999ECMAScript3
2005 - 2007ECMAScript4 - Abandoned
2009ECMAScript5
2015ECMAScript6
…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
![Page 35: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/35.jpg)
• 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…
![Page 36: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/36.jpg)
Library Builders
map, set & weakmap__proto__ProxiesSymbols
Sub7classable built7ins
Scalable Apps
let, const & block7scoped bindings
ClassesPromisesIterators
GeneratorsTyped arrays
Modules
Syntactic Sugar
Arrow functionsEnhanced object literals
Template stringsDestructuring
Rest, Spread, DefaultString, Math, Number, Object, RegExp APIs
ALL OF THESE PARTS HAVE DIFFERENT AUDIENCES
![Page 37: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/37.jpg)
SUPPORT IS ENCOURAGING (EDGE, FIREFOX, CHROME, SAFARI (ON 9))
http://kangax.github.io/compat-table/es6/
![Page 38: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/38.jpg)
ES6 AND ITS REALITIES…
![Page 39: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/39.jpg)
THE PROBLEM: FOR NON-SUPPORTING ENGINES, ES6 FEATURES ARE SYNTAX ERRORS…
![Page 40: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/40.jpg)
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
![Page 41: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/41.jpg)
TRANSPILED CODE…
![Page 42: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/42.jpg)
THE VICIOUS INNOVATION CYCLE…
https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016
PICK YOUR TRANSPIRATION TOOLCHAIN…
![Page 43: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/43.jpg)
✘ 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:
![Page 44: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/44.jpg)
TYPESCRIPT
![Page 45: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/45.jpg)
TypeScript http://typescriptlang.org/
![Page 46: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/46.jpg)
THE NEXT ES* NOW, WITHOUT THE TOOLCHAIN OVERHEAD…
• Works in the browser, creates JavaScript
• Class based, type safe • Editor/tooling support • Used to write large frameworks and
libraries (Dojo, Angular) • Used heavily in Microsoft
![Page 47: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/47.jpg)
THE CHAKRACORE THING
![Page 48: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/48.jpg)
NEW BROWSER, NEW JS ENGINE
![Page 49: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/49.jpg)
SPEED COMPARISONS…
![Page 50: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/50.jpg)
SURPRISES HAPPEN…
![Page 51: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/51.jpg)
CHAKRACORE VS CHAKRA
![Page 52: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/52.jpg)
HTTPS:// .WTF
![Page 53: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/53.jpg)
TIME TRAVEL DEBUGGING
https://www.youtube.com/watch?v=1bfDB3YPHFI
![Page 54: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/54.jpg)
NODE USING CHAKRACORE
https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
![Page 55: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/55.jpg)
NODE USING CHAKRACORE
https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
![Page 56: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/56.jpg)
NODE USING CHAKRACORE
https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
![Page 57: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/57.jpg)
https://github.com/Microsoft/ChakraCore
COME AND PLAY
![Page 58: Making ES6 available to all with ChakraCore and Typescript](https://reader036.vdocument.in/reader036/viewer/2022081605/58f9b9041a28abb84d8b4573/html5/thumbnails/58.jpg)
🐝 JavaScript is now ES6 🐝 JavaScript moved beyond the
browser 🐝We have a tooling problem - now
we have too many options 🐝 JavaScript needs to cater for a lot
of different developer needs 🐝 Help the language by picking
what makes you effective and doesn’t hurt your users.
🐝 Help improve the tools that are being built right now!
IN SUMMARY…