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
130
SDL as an Artifact: Code-First Schemas and GraphQL Nexus
tgriesser
0
170
End-to-End Testing for the Modern Web
tgriesser
0
140
Paving a New Path for GraphQL Schemas
tgriesser
0
87
Embracing the Power of GraphQL
tgriesser
2
880
Redux: A Predictable State Container for JavaScript Apps
tgriesser
2
430
Making Relational Cool Again (or: JavaScript on ACID)
tgriesser
1
410
Data Based JavaScript
tgriesser
1
250
Nodevember - Making Relational Cool Again
tgriesser
1
190
Other Decks in Technology
See All in Technology
AIエージェントのフレームワークを見るときの個人的注目ポイント
os1ma
1
380
ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か? - DORA Report 10年の変遷を追って - #開発生産性_findy
takabow
1
280
從開發到架構設計的可觀測性實踐
philipz
0
190
Vibe Codingの裏で、 考える力をどう取り戻すか
csekine
2
540
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
34
18k
データ戦略部門 紹介資料
sansan33
PRO
1
3.2k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
FASTと向き合うことで見えた、大規模アジャイルの難しさと楽しさ
wooootack
0
300
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/03 - 2025/05
oracle4engineer
PRO
1
130
プロジェクトマネージャーに最後まで残るたった一つの仕事は交渉
ichimichi
1
180
Java で学ぶ 代数的データ型
ysknsid25
2
1.2k
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
270
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Git: the NoSQL Database
bkeepers
PRO
430
65k
GraphQLとの向き合い方2022年版
quramy
46
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Docker and Python
trallard
44
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Designing for Performance
lara
609
69k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Embracing the Ebb and Flow
colly
85
4.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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?