Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Future is Now: JavaScript, ES6, and Babel JS
Search
Tim Griesser
February 20, 2015
Technology
7
1.2k
The Future is Now: JavaScript, ES6, and Babel JS
ConFoo, Feb. 2015
http://babeljs.io
Tim Griesser
February 20, 2015
Tweet
Share
More Decks by Tim Griesser
See All by Tim Griesser
SDL as an Artifact: Code-First Schemas in TS & JS
tgriesser
0
120
SDL as an Artifact: Code-First Schemas and GraphQL Nexus
tgriesser
0
140
End-to-End Testing for the Modern Web
tgriesser
0
140
Paving a New Path for GraphQL Schemas
tgriesser
1
82
Embracing the Power of GraphQL
tgriesser
2
770
Redux: A Predictable State Container for JavaScript Apps
tgriesser
2
410
Making Relational Cool Again (or: JavaScript on ACID)
tgriesser
1
400
Data Based JavaScript
tgriesser
1
240
Nodevember - Making Relational Cool Again
tgriesser
1
180
Other Decks in Technology
See All in Technology
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
210
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
360
QAに対する超個人的な解釈 / Personal Take on QA
toma_sm
1
140
やってやろうじゃないかメカアジャイル! / Let's do it, mechanical agile!
psj59129
1
700
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
220
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
270
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
160
eBPFのこれまでとこれから
yutarohayakawa
10
3.3k
GC24 Recap: Interface Internals
task4233
0
260
『GRANBLUE FANTASY Relink』キャラクターの魅力を支えるリグ・シミュレーション制作事例
cygames
0
170
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
OR学会2024秋_短期収益と将来のオフ方策評価性能を考慮したクーポン割当方策混合比の決定
recruitengineers
PRO
4
480
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
How to train your dragon (web standard)
notwaldorf
85
5.6k
The Mythical Team-Month
searls
218
43k
Agile that works and the tools we love
rasmusluckow
327
20k
Happy Clients
brianwarren
96
6.6k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Transcript
The Future Is Now! JavaScript, ES6 and Traceur @tgriesser
The Future Is Now! JavaScript, ES6 and Traceur @tgriesser ^6-to-5
The Future Is Now! JavaScript, ES6 and @tgriesser
JavaScript isn't the best language…
None
"Future proof" convenience
What? How? Why?
babeljs.io
Terminology
Transpile: Source-to-Source Compilation
None
Transform: Simple syntax conversion
Transform:
Transform:
Polyfill: Providing language features that would expect to be available
natively
None
IE8: Object doesn’t support property or method ‘indexOf’
None
IE8: // 1
Some New Features • Arrow Functions • Strings / Template
Strings • Default Parameters • Rest / Spread Params • Destructuring Assignment • Object literal extensions • Modules • Classes • Symbols • Iterators • Generators • Promises
Arrow Functions
Arrow Functions
Arrow Functions
Arrow Functions
Arrow Functions
Arrow Functions
Arrow Functions
Arrow Functions
New String Functions
New String Functions str.codePointAt: unicode codepoint str.normalize: unicode normalization, not
polyfilled by default - github.com/walling/unorm
Template Strings
Template Strings
Default Parameters
Default Parameters
Rest arguments
Spread Arguments
Destructuring Assignment
Object Literal Extensions
Object Literal Extensions
Object Literal Extensions
Object Literal Extensions
const
let
let
Modules • Unify the experience of separating & including code
from multiple files (modules) • Similar to CommonJS • Can work with various module formats (UMD, AMD)
None
None
Class Syntax • Syntax "Sugar" to Prototype Classes • Sets
up proper inheritance chain • Reference inherited methods with super.methodName() • Cannot have prototype or static props
• No static or prototype properties • Getters & setters
will only work in IE 9+ Class Syntax
Class Syntax • No static or prototype properties • Getters
& setters will only work in IE 9+
Symbol() • New primitive type, unique • Access control for
property state • Also used for new protocols "Symbol.iterator"
Symbols • No static or prototype properties • Getters &
setters will only work in IE 9+
Symbols • No static or prototype properties • Getters &
setters will only work in IE 9+
Iterators • Ability to treat any value as a collection
with a standard API • Allows for use with for-of loop
Iterators
Iterators
Iterators
Promises, Generators • Simplify Async (callback hell)
Promises, Generators • Simplify Async (callback hell)
Promises, Generators • Simplify Async (callback hell) • Promises: like
async try / catch in JavaScript • Generators: Async / Await • Utilize iterators
Kangax compat table
How to Get Started?
Try it out
In the Browser
Node.js
None
Suggestions for Adoption • Introduce into test suites • Gradually
introduce different new features • Check support if you have questions
Support:
June 18, 2015 "…when the ECMA General Assembly will vote
on and approve the 6th edition of Ecma-262 and usher in the next era of JavaScript." http://bocoup.com/weblog/stabilizing-es6/
None
@tgriesser Questions?