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
190
End-to-End Testing for the Modern Web
tgriesser
0
140
Paving a New Path for GraphQL Schemas
tgriesser
0
93
Embracing the Power of GraphQL
tgriesser
2
920
Redux: A Predictable State Container for JavaScript Apps
tgriesser
2
430
Making Relational Cool Again (or: JavaScript on ACID)
tgriesser
1
430
Data Based JavaScript
tgriesser
1
250
Nodevember - Making Relational Cool Again
tgriesser
1
190
Other Decks in Technology
See All in Technology
組織全員で向き合うAI Readyなデータ利活用
gappy50
3
1.2k
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
370
Kubernetes self-healing of your workload
hwchiu
0
570
.NET 10のBlazorの期待の新機能
htkym
0
150
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
220
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
280
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
540
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
350
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
160
RemoteFunctionを使ったコロケーション
mkazutaka
1
130
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
BBQ
matthewcrist
89
9.9k
Documentation Writing (for coders)
carmenintech
75
5.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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?