Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Fest 2018. Виталий Ратушный. ES X

78 views

Published on

Что нас ждет дальше? Этот вопрос время от времени возникает в различных сферах жизни, говоря же о вебе, мы рассуждаем над тем кто-же будет следующим большим игроком WebAssembly или технология X, вместе с тем на данный момент JavaScript занимает львиную долю на рынке и отступать не собирается. Какие изменения ждут JS в ближайшем будущем? Приходи и узнай!

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2018. Виталий Ратушный. ES X

  1. 1. From Back-end to Front-end Киев 2018 ES X Виталий Ратушный, YouWe
  2. 2. Front-end developer at
  3. 3. ECMAScript vs JavaScript Who is TC-39? Why we still need Babel? Upcoming ES features
  4. 4. What’s difference between ECMAScript and JavaScript? https://indesignmedia.net/blog/whats-the-difference-between-javas-and-ecma/
  5. 5. Ecma International An organization that creates standards for technologies
  6. 6. ECMA-262 This is a standard published by Ecma International
  7. 7. ECMA-262 === ECMAScript
  8. 8. JavaScript implements ECMAScript
  9. 9. ECMAScript how to CREATE scripting language JavaScript how to USE scripting language
  10. 10. Who is TC-39? Ecma International Technical Committee 39
  11. 11. Who in TC-39? https://github.com/orgs/tc39/people
  12. 12. TC-39 working process https://www.sitepen.com/blog/2017/04/06/tc39-open-and-incremental-approach-improves-standards-process/ Stage 0: Strawman Proposal Stage 1: Proposal Stage 2: Draft Stage 4: Finished Stage 3: Candidate https://docs.google.com/document/d/1QbEE0BsO4lvl7NFTn5WXWeiEIBfaVUF7Dk0hpPpPDzU/edit
  13. 13. Everyone Who can create proposal? https://esdiscuss.org
  14. 14. Just committee every 2 months Who votes for proposals?
  15. 15. Why do we need
  16. 16. Babel implements TC-39 Stages
  17. 17. Async iterators/generators Stage 4 https://github.com/tc39/proposal-async-iteration Domenic Denicola (Google)
  18. 18. Have you ever used streams?
  19. 19. stream.on('readable', () => { let row; while (row = parser.read()) { values += row; } }); stream.on('error', err => {…}); stream.on('finish', () => {…});
  20. 20. Callbacks? C’mon 2018 Promises!
  21. 21. for-await-of async function streamingRead() { const response = await fetch(‘…'); for await (const chunk of streamAsyncIterator(response.body)) { console.log(`chunk`, chunk); } }
  22. 22. Async Generators async function* streamAsyncIterator(stream) { const reader = stream.getReader(); try { while (true) { // Read from the stream const {done, value} = await reader.read(); // Exit if we're done if (done) return; // Else yield the chunk yield value; } } finally { reader.releaseLock(); } }
  23. 23. Async iterators syntax for await(const valueName of iterableObject) { handler(valueName); }
  24. 24. Readable streams is to async iterable as array is to sync iterable https://github.com/whatwg/streams/blob/master/FAQ.md
  25. 25. https://twitter.com/matteocollina/status/978586956761321472?s=19
  26. 26. Not faster, but cleaner
  27. 27. Private fields and methods https://github.com/tc39/proposal-private-methods Stage 3 now Daniel Ehrenberg (Igalia)
  28. 28. For what?
  29. 29. Encapsulation
  30. 30. How we did this before?
  31. 31. Conventions
  32. 32. _ / $$ / this.$vue
  33. 33. Closures
  34. 34. WeakMaps
  35. 35. We need language-level privacy
  36. 36. Private fields class Foo { #bar; methodName() { this.#bar; // Works } } let foo = new Foo(); foo.#bar; // Invalid! foo.bar; // Return public field!
  37. 37. Private methods class User { #name = ‘’; setName(value) { this.#name = value; this.#render(); } #render () { this.el.textContent = this.#name.toString(); } }
  38. 38. private vs #
  39. 39. Reasons to use # instead of private Same public and private fields class Foo { private baz; public baz; method() { this.baz; this.baz; } }
  40. 40. Reasons to use # instead of private Public fields in JavaScript can be referenced via this.field or this.['field']. class Foo { … } const foo = new Foo(); foo['field'] // works just for static fields
  41. 41. Reasons to use # instead of private You'd need expensive checks equals(other) { // other could be anything return this.#x === other.#x && this.#y === other.#y; }
  42. 42. JAVASCRIPT
  43. 43. Decorators https://github.com/tc39/proposal-decorators Stage 2 now Daniel Ehrenberg (Igalia), Yehuda Katz (Tilde), and Brian Terlson (MicroSoft)
  44. 44. Why we need it?
  45. 45. Сonciseness
  46. 46. Decorators in use @checkPermission(‘authorized’) @log function handler () { // handle something } function handler () { // check permission // handle something // log }
  47. 47. Decorators are high order functions
  48. 48. @log decorator function log(f, log) { return function wrapper() { log.push(f, arguments); return f.apply(this, …arguments); } }
  49. 49. @defineElement decorator function decoratorName(target, value, descriptor) { abstract syntax } 41/50
  50. 50. Who already use decorators
  51. 51. Moving forward
  52. 52. Optional chaining https://github.com/tc39/proposal-optional-chaining Stage 1 now Claude Pache (no company), Gabe Isenberg (GoDaddy)
  53. 53. What potential errors you could face? user.address.zipcode
  54. 54. How to prevent it? if (user && user.address && user.address.zipcode) { return user.address.zipcode; }
  55. 55. Optional chainging proposal if (user?.address?.zipcode){ … }
  56. 56. Optional chaining syntax obj?.prop // optional static property access obj?.[expr] // optional dynamic property access
  57. 57. isClear?.next()
  58. 58. Numeric Separators https://github.com/tc39/proposal-numeric-separator Stage 3 now Christophe Porteneuve(Delicious Insights)
  59. 59. 1000000000
  60. 60. At the end of 2017, Kiev has 2933537 inhabitants.
  61. 61. Grouping digits to make long numbers more readable const inhabitantsOfKiev = 2_933_537; const price = 120,000.00;
  62. 62. https://esdiscuss.org Investigate on your own Create Proposals Change JS world Conclusion
  63. 63. 66
  64. 64. Contacts Vitalii Ratushnyi Email: v.ratyshnij@gmail.com SkypeID: misreadable

×