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.1k
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
81
Embracing the Power of GraphQL
tgriesser
2
750
Redux: A Predictable State Container for JavaScript Apps
tgriesser
2
400
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
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
AWSでRAGを作る法方
sonoda_mj
1
140
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
Featured
See All Featured
Speed Design
sergeychernyshev
9
270
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Typedesign – Prime Four
hannesfritz
37
2.2k
Building Your Own Lightsaber
phodgson
101
5.9k
The Cult of Friendly URLs
andyhume
75
5.9k
Building Adaptive Systems
keathley
34
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Design by the Numbers
sachag
277
18k
Embracing the Ebb and Flow
colly
81
4.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Thoughts on Productivity
jonyablonski
64
4.1k
GraphQLとの向き合い方2022年版
quramy
36
13k
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?