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
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
870
Redux: A Predictable State Container for JavaScript Apps
tgriesser
2
420
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
NW運用の工夫と発明
recuraki
1
800
令和最新版TypeScriptでのnpmパッケージ開発
lycorptech_jp
PRO
0
110
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
いまさら聞けない Git 超入門 〜Gitって結局なに?から始める第一歩〜
devops_vtj
0
170
GitHub Copilot Use Cases at ZOZO
horie1024
0
110
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
740
GitHub Coding Agent 概要
kkamegawa
1
1.7k
CSS polyfill とその未来
ken7253
0
140
積み上げられた技術資産と向き合いながら、プロダクトの信頼性をどう守るか
plaidtech
PRO
0
950
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
yamamotoyuta
0
250
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Language of Interfaces
destraynor
158
25k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Six Lessons from altMBA
skipperchong
28
3.8k
Designing Experiences People Love
moore
142
24k
RailsConf 2023
tenderlove
30
1.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.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?