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
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
390
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
350
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
4
1.5k
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
150
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.4k
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
250
DSPy入門
tomehirata
2
350
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
130
abema-trace-sampling-observability-cost-optimization
tetsuya28
0
210
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
4
1.2k
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
Featured
See All Featured
It's Worth the Effort
3n
187
28k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Building Applications with DynamoDB
mza
96
6.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Code Review Best Practice
trishagee
72
19k
Become a Pro
speakerdeck
PRO
29
5.6k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Pragmatic Product Professional
lauravandoore
36
7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Balancing Empowerment & Direction
lara
5
700
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
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?