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

Transcript

1. None
2. None

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 ...

16. None
17. None

18. Ember 2013

19. transpilers

20. ES6 => ES5/ES3

21. compile-to-JS language

22. GWT CoffeeScript TypeScript ...

23. Traceur es-next 6to5

24. None

25. Not all features can be transpiled

26. Proxy API

27. None

28. ES 2017 ES 2016 Babel ES6

29. ES.Next

30. None

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');
41. None

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

82. None

83. frontendua.im github.com/dev-ua