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
Гармония кода с ECMAScript 6
Search
Андрей Листочкин (Andrey Listochkin)
April 16, 2015
Programming
0
79
Гармония кода с ECMAScript 6
Андрей Листочкин (Andrey Listochkin)
April 16, 2015
Tweet
Share
More Decks by Андрей Листочкин (Andrey Listochkin)
See All by Андрей Листочкин (Andrey Listochkin)
Everybody Stand Back! I Know Regular Expressions
listochkin
0
190
Command-line scripting with Rust. Wait, what?!
listochkin
0
400
Server Memory - BuildStuff Ukraine 2019
listochkin
0
49
Server Memory - Chernivtsi JS 2019
listochkin
1
150
10 Years Later
listochkin
0
370
Managing Managers - DevTalks iHUB
listochkin
0
62
Time, Numbers, Text
listochkin
1
600
Software Licensing: A Minefield Guide
listochkin
0
150
We Make Bots. For Real
listochkin
0
430
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
450
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
960
技術的負債の正体を知って向き合う
irof
0
240
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
340
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
310
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
800
CSC509 Lecture 07
javiergs
PRO
0
240
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
220
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
110
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
240
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Music & Morning Musume
bryan
46
6.9k
RailsConf 2023
tenderlove
30
1.3k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How to Ace a Technical Interview
jacobian
280
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
A designer walks into a library…
pauljervisheath
209
24k
Balancing Empowerment & Direction
lara
5
700
Transcript
None
None
JavaScript
Mongo, Riak,PostgreSQL Node.js, Nashorn Browsers, Windows, OS X iOS, Android,
Firefox OS Tessel
ECMAScript
1995 JavaScript
1996 ECMA
1999 EcmaScript 3
2008 EcmaScript 4
2009 EcmaScript 5
2015 EcmaScript 6
ES6
EcmaScript 2015
1997 1998 1999 2009 2015
2015 2016 2017 2018 ...
None
None
Ember 2013
transpilers
ES6 => ES5/ES3
compile-to-JS language
GWT CoffeeScript TypeScript ...
Traceur es-next 6to5
None
Not all features can be transpiled
Proxy API
None
ES 2017 ES 2016 Babel ES6
ES.Next
None
Modules Classes Generators Promises Destructuring ...
"Toy" Language
"Real" language
Fixes
f.apply(null, args)
f(...args)
var self = this; getJson('/posts', function (xhr) { self.posts =
xhr.data; });
getJson('/posts', (xhr) => { this.posts = xhr.data; });
function UserService(baseUrl) { this.baseUrl = baseUrl; } UserService.prototype.getUser = function
getUser(id, callback) { ... }; var userService = new UserService('/users');
class UserService { constructor(baseUrl) { this.baseUrl = baseUrl; } getUser
(id, callback) { ... } } let userService = new UserService('/users');
None
define(function (require) { var _ = require('lodash'); var UserService =
require('services').UserService; function UserController() { ... } return UserController; });
import * as _ from 'lodash'; import UserService from 'services';
class UserController { ... } export default UserController;
Symbols Classes Modules
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
iterators generators promises Object.assign
let fibonacci = { [Symbol.iterator]: function* () { let pre
= 0, cur = 1; for (;;) { let temp = pre; pre = cur; cur += temp; yield cur; } } } for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
let fibonacci = { [Symbol.iterator]: function* () { let pre
= 0, cur = 1; for (;;) { let temp = pre; pre = cur; cur += temp; yield cur; } } } for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
let fibonacci = { [Symbol.iterator]: function* () { let pre
= 0, cur = 1; for (;;) { let temp = pre; pre = cur; cur += temp; yield cur; } } } for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
Maps, Sets
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
Math.max(...numbers); let set = new Set([12, 45, 12, 7]); let
array = [...set];
ES7 / 2016
Decorators Async Functions Object.observe
Ember React Angular Aurelia iojs
None
frontendua.im github.com/dev-ua