We Are All Brothers Here & Stay Where There Are Songs Exhibition Comments
Transpiler’s are here to stay
-
Upload
ryan-blunden -
Category
Technology
-
view
242 -
download
0
Transcript of Transpiler’s are here to stay
![Page 1: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/1.jpg)
Modern JavaScript Transpiler’s are here to stay
Ryan Blunden, October 2015
![Page 2: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/2.jpg)
QUESTIONCan we reliably enjoy the new features of ECMAScript
2015 without a transpiler?
https://kangax.github.io/compat-table/es6/
![Page 3: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/3.jpg)
ANSWER
Not most of them!
![Page 4: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/4.jpg)
Ryan BlundenDeveloper. Teacher. Guitarist. Motorbike Rider.
![Page 5: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/5.jpg)
GOAL OF THIS PRESENTATIONTo show that Transpiler's and "Modern
JS" are now forever bound together.
![Page 6: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/6.jpg)
SO WHAT IS A TRANSPILER?A source-to-source compiler
![Page 7: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/7.jpg)
SO WHAT IS MODERN JS?Simplest answer: ECMAScript >= 2015
![Page 8: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/8.jpg)
ES6 === ECMAScript 2015❝The official name of the latest JavaScript
version is ECMAScript 2015, and ECMA intends to release new versions in smaller increments more often, the next one being
planned for the next year and called ECMAScript 2016. From now on, the name of
the new versions will include ECMAScript followed by the year of their release.❞
V
Source: InfoQ - http://www.infoq.com/news/2015/06/ecmascript-2015-es6
![Page 9: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/9.jpg)
TRANSPILERS IN ACTIONCoffeeScript. TypeScript.
There’s (many) more - https://goo.gl/p3BMWe
![Page 10: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/10.jpg)
MODERN JS AND TRANSPILER’SDo we really need a transpiler for ECMAScript 2015?
YES!
https://kangax.github.io/compat-table/es6/
![Page 11: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/11.jpg)
REASON 1When Polyfill’s can’t take you there
Many new ES6 features are syntactical enhancements.
![Page 12: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/12.jpg)
REASON 2When Polyfills “could” take you there,
but not “there” exactly.
Are you sure your polyfill is spec compliant?
![Page 13: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/13.jpg)
POLYFILL’s CAN BE USEFUL…But we need a transpiler to really embrace
ECMAScript 2015.
![Page 14: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/14.jpg)
BUT IS MODERN JS THE “BEST" OPTION?
![Page 15: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/15.jpg)
CoffeeScript vs. TypeScript vs. ECMAScript 2015Let’s briefly compare the mainstream contenders.
![Page 16: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/16.jpg)
CoffeeScript - 1.6.3 (JUNE 2, 2013)No outwardly visible plans to add new language features.
Version 2 is a compiler reimplementation.
![Page 17: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/17.jpg)
TypeScript - 1.6 (16 Sep 2015)TypeScript is a typed superset of JavaScript.
Behind ECMAScript 2015 but catching up fast!
![Page 18: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/18.jpg)
ECMAScript 2015 - June 2015Transpiler (Traceur or Babel).
Babel has most comprehensive ECMAScript 2015 support.
Not just transpiling (Facebook Flow, JSX)
![Page 19: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/19.jpg)
HOW TO DECIDE
1. Ignore the hype
2. Be pragmatic
3. Be thoughtful
4. Think long-term
![Page 20: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/20.jpg)
BUT HOWEVER YOU CHOOSE…You’re going to need a transpiler!
![Page 21: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/21.jpg)
WHAT IF I WAIT? WON’T BROWSERS CATCH-UP?
Yes! But not for a very long time, and never at the same time.
![Page 22: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/22.jpg)
SO I SHOULD START TRANSPILING NOW RIGHT?Let’s take it slow…
![Page 23: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/23.jpg)
WHY > HOW > WHATHarder, not as fun, but better outcomes in the long run.
![Page 24: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/24.jpg)
LEARN > EXPERIMENT > IMPLEMENTThink slow, learn thoughtfully, enjoy the journey.
![Page 25: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/25.jpg)
LEARN > EXPERIMENT > IMPLEMENTThink slow, learn thoughtfully, enjoy the journey.
![Page 26: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/26.jpg)
WHY, WHAT’S THE RISK?
![Page 27: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/27.jpg)
1. Pragmatic usage of new language featuresConflicting opinions on usage of many new features.
![Page 28: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/28.jpg)
2. Code size increaseIt will happen and will happen immediately.
![Page 29: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/29.jpg)
3. Building, debugging, packaging and testing complexities
Things are more complicated. No way around it.
![Page 30: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/30.jpg)
4. PerformanceThere will be perf issues.
![Page 31: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/31.jpg)
LET’S PRESUME YOU’RE GOING WITH ECMASCRIPT 2015
![Page 32: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/32.jpg)
1. CREATE AN IMPLEMENTATION PLANRally support, socialise, train, support, test, learn, deploy.
![Page 33: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/33.jpg)
2. CREATE A MAINTENANCE PLANHow old and new code will co-exist together.
![Page 34: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/34.jpg)
2. RESEARCH AND LEARN FROM OTHERSBootstrap 4 re-wrote all their plugins in ECMAScript 2015.
![Page 35: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/35.jpg)
3. CREATE A BUILDING, DEBUGGING, PACKAGING AND AUTOMATED TESTING PLAN
There will be many changes.
![Page 36: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/36.jpg)
4. START SMALLTest your plans, tools and assumptions at a small scale.
![Page 37: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/37.jpg)
LEARN > EXPERIMENT > IMPLEMENT
![Page 38: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/38.jpg)
TO SUMMARISETranspiler’s are here to stay. It’s just a matter of when you jump in.
![Page 39: Transpiler’s are here to stay](https://reader031.fdocuments.us/reader031/viewer/2022022414/5872e7b01a28abfa548b64b5/html5/thumbnails/39.jpg)
@ryan_blunden
Thank you!