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

Гармония кода с 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