Гармония кода с ECMAScript 6

Transcript

3. JavaScript
4. Mongo, Riak,PostgreSQL Node.js, Nashorn Browsers, Windows, OS X iOS, Android, Firefox OS Tessel
5. ECMAScript
6. 1995 JavaScript
7. 1996 ECMA
8. 1999 EcmaScript 3
9. 2008 EcmaScript 4
10. 2009 EcmaScript 5
11. 2015 EcmaScript 6
12. ES6
13. EcmaScript 2015
14. 1997 1998 1999 2009 2015
15. 2015 2016 2017 2018 ...
18. Ember 2013
19. transpilers
20. ES6 => ES5/ES3
21. compile-to-JS language
22. GWT CoffeeScript TypeScript ...
23. Traceur es-next 6to5
25. Not all features can be transpiled
26. Proxy API
28. ES 2017 ES 2016 Babel ES6
29. ES.Next
31. Modules Classes Generators Promises Destructuring ...
32. "Toy" Language
33. "Real" language
34. Fixes
35. f.apply(null, args)
36. f(...args)
37. var self = this; getJson('/posts', function (xhr) { self.posts = xhr.data; });
38. getJson('/posts', (xhr) => { this.posts = xhr.data; });
39. function UserService(baseUrl) { this.baseUrl = baseUrl; } UserService.prototype.getUser = function getUser(id, callback) { ... }; var userService = new UserService('/users');
40. class UserService { constructor(baseUrl) { this.baseUrl = baseUrl; } getUser (id, callback) { ... } } let userService = new UserService('/users');
42. define(function (require) { var _ = require('lodash'); var UserService = require('services').UserService; function UserController() { ... } return UserController; });
43. import * as _ from 'lodash'; import UserService from 'services'; class UserController { ... } export default UserController;
44. Symbols Classes Modules
45. const secret = Symbol(); export class Box extends Holder { get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
46. const secret = Symbol(); export class Box extends Holder { get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
47. const secret = Symbol(); export class Box extends Holder { get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
48. const secret = Symbol(); export class Box extends Holder { get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
49. const secret = Symbol(); export class Box extends Holder { get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
50. const secret = Symbol(); export class Box extends Holder { get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
51. const secret = Symbol(); export class Box extends Holder { get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
52. iterators generators promises Object.assign
53. 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); }
54. 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); }
55. 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); }
56. 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}`; } });
57. 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}`; } });
58. 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}`; } });
59. 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}`; } });
60. 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}`; } });
61. 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}`; } });
62. 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}`; } });
63. 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}`; } });
64. 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}`; } });
65. 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}`; } });
66. 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}`; } });
67. 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}`; } });
68. 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}`; } });
69. 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}`; } });
70. 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}`; } });
71. Maps, Sets
72. 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) { .. } }
73. 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) { .. } }
74. 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) { .. } }
75. 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) { .. } }
76. 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) { .. } }
77. 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) { .. } }
78. Math.max(...numbers); let set = new Set([12, 45, 12, 7]); let array = [...set];
79. ES7 / 2016
80. Decorators Async Functions Object.observe
81. Ember React Angular Aurelia iojs
83. frontendua.im github.com/dev-ua