upgrading javascript to es6 and using typescript as a shortcut
TRANSCRIPT
![Page 1: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/1.jpg)
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
Chris Heilmann @codepo8, NDC, Oslo, June 2016
![Page 2: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/2.jpg)
Of innovation and impatience
Chris Heilmann @codepo8, Future Decoded, London, Nov 2015
CHRIS HEILMANN @CODEPO8
![Page 3: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/4.jpg)
OLD ISSUES OF JAVASCRIPT
![Page 5: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/6.jpg)
JAVASCRIPT THE LANGUAGE HAS ISSUES (OPPORTUNITIES)…
• typeof NaN === number
• No type safety
• No classes
• “it feels rushed”
![Page 7: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/7.jpg)
ENGINE TROUBLE: JAVASCRIPT IS HUNGRY
![Page 8: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/8.jpg)
HTTPS:// .WTF
![Page 9: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/9.jpg)
THE JAVASCRIPT LEARNING PROCESS
![Page 10: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/12.jpg)
SHORTCUTS…
![Page 13: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/13.jpg)
WITH ES6 WE HAVE A CLEAN NEW SLATE… (AND YOU CAN’T BLAME IE ANY MORE)
![Page 14: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/14.jpg)
SEE THE BABEL.JS DOCS AND TRY IT IN THE BROWSER…
https://babeljs.io/docs/learn-es2015/
![Page 16: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/16.jpg)
READ THE EXCELLENT BOOK EXPLORING ES6 FOR FREE (OR BUY IT, AXEL DESERVES SUPPORT)
http://exploringjs.com/es6/
![Page 17: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/17.jpg)
THE TOOLING ISSUE…
![Page 18: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/18.jpg)
JAVASCRIPT TOOLING FEELS RUDIMENTARY
![Page 19: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/19.jpg)
AND IT DIFFERS FROM BROWSER TO BROWSER…
![Page 20: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/20.jpg)
THE LIBRARY/FRAMEWORK ISSUE…
![Page 21: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/21.jpg)
JAVASCRIPT ABUSE IS RAMPANT…
![Page 22: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/23.jpg)
PAUL LEWIS @AEROTWIST
![Page 24: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/24.jpg)
![Page 25: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/25.jpg)
![Page 26: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/26.jpg)
![Page 27: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/32.jpg)
ES6 AND ITS PROMISES…
![Page 33: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/37.jpg)
SUPPORT IS ENCOURAGING (EDGE, FIREFOX, CHROME, SAFARI (ON 9))
http://kangax.github.io/compat-table/es6/
![Page 38: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/38.jpg)
ES6 AND ITS REALITIES…
![Page 39: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/39.jpg)
THE PROBLEM: FOR NON-SUPPORTING ENGINES, ES6 FEATURES ARE SYNTAX ERRORS…
![Page 40: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/41.jpg)
TRANSPILED CODE…
![Page 42: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/44.jpg)
TYPESCRIPT
![Page 45: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/45.jpg)
TypeScript http://typescriptlang.org/
![Page 46: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/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: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/47.jpg)
THE CHAKRACORE THING
![Page 48: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/48.jpg)
NEW BROWSER, NEW JS ENGINE
![Page 49: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/49.jpg)
SPEED COMPARISONS…
![Page 50: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/50.jpg)
SURPRISES HAPPEN…
![Page 51: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/51.jpg)
CHAKRACORE VS CHAKRA
![Page 52: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/52.jpg)
HTTPS:// .WTF
![Page 53: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/53.jpg)
NODE USING CHAKRACORE
https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
![Page 54: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/54.jpg)
NODE USING CHAKRACORE
https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
![Page 55: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/55.jpg)
NODE USING CHAKRACORE
https://blogs.windows.com/msedgedev/2016/01/19/nodejs-chakracore-mainline/
![Page 56: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/56.jpg)
https://github.com/Microsoft/ChakraCore
COME AND PLAY
![Page 57: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/57.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…
![Page 59: Upgrading JavaScript to ES6 and using TypeScript as a shortcut](https://reader034.vdocument.in/reader034/viewer/2022042600/58cf6f6e1a28abe6688b4e87/html5/thumbnails/59.jpg)