The document discusses the differences between ECMAScript and JavaScript, highlights the work of the TC39 committee in evolving JavaScript through various proposal stages, and outlines upcoming features such as async iterations, private fields, decorators, optional chaining, and numeric separators. It emphasizes the need for tools like Babel to handle these language features before they are widely adopted. Additionally, it provides practical examples and references to the proposals in development.

1. From Back-end to Front-end
Киев 2018
ES X
Виталий Ратушный, YouWe

2. Front-end developer at

3. ECMAScript vs JavaScript
Who is TC-39?
Why we still need Babel?
Upcoming ES features

4. What’s difference between
ECMAScript and JavaScript?
https://indesignmedia.net/blog/whats-the-difference-between-javas-and-ecma/

5. Ecma International
An organization that creates
standards for technologies

6. ECMA-262
This is a standard
published by Ecma International

7. ECMA-262 === ECMAScript

8. JavaScript implements ECMAScript

9. ECMAScript
how to
CREATE
scripting language
JavaScript
how to
USE
scripting language

10. Who is TC-39?
Ecma International Technical Committee 39

11. Who in TC-39?
https://github.com/orgs/tc39/people

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. Everyone
Who can create proposal?
https://esdiscuss.org

14. Just committee every 2 months
Who votes for proposals?

15. Why do we need

16. Babel implements TC-39 Stages

19. Async iterators/generators
Stage 4
https://github.com/tc39/proposal-async-iteration
Domenic Denicola (Google)

20. Have you ever used streams?

21. stream.on('readable', () => {
let row;
while (row = parser.read()) {
values += row;
}
});
stream.on('error', err => {…});
stream.on('finish', () => {…});

22. Callbacks? C’mon 2018
Promises!

24. for-await-of
async function streamingRead() {
const response = await fetch(‘…');
for await (const chunk of streamAsyncIterator(response.body)) {
console.log(`chunk`, chunk);
}
}

25. 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();
}
}

26. Async iterators syntax
for await(const valueName of iterableObject) {
handler(valueName);
}

27. Readable streams is to async iterable as array is to sync iterable
https://github.com/whatwg/streams/blob/master/FAQ.md

28. https://twitter.com/matteocollina/status/978586956761321472?s=19

29. Not faster, but cleaner

30. Private fields and methods
https://github.com/tc39/proposal-private-methods
Stage 3 now
Daniel Ehrenberg (Igalia)

31. For what?

32. Encapsulation

33. How we did this before?

34. Conventions

35. _ / $$ / this.$vue

36. Closures

37. WeakMaps

38. We need language-level privacy

39. Private fields
class Foo {
#bar;
methodName() {
this.#bar; // Works
}
}
let foo = new Foo();
foo.#bar; // Invalid!
foo.bar; // Return public field!

40. Private methods
class User {
#name = ‘’;
setName(value) {
this.#name = value;
this.#render();
}
#render () {
this.el.textContent = this.#name.toString();
}
}

41. private vs #

42. Reasons to use # instead of private
Same public and private fields
class Foo {
private baz;
public baz;
method() {
this.baz;
this.baz;
}
}

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

44. 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;
}

45. JAVASCRIPT

46. Decorators
https://github.com/tc39/proposal-decorators
Stage 2 now
Daniel Ehrenberg (Igalia), Yehuda Katz (Tilde), and Brian Terlson (MicroSoft)

47. Why we need it?

48. Сonciseness

49. Decorators in use
@checkPermission(‘authorized’)
@log
function handler () {
// handle something
}
function handler () {
// check permission
// handle something
// log
}

50. Decorators are high order functions

51. @log decorator
function log(f, log) {
return function wrapper() {
log.push(f, arguments);
return f.apply(this, …arguments);
}
}

52. @defineElement decorator
function decoratorName(target, value, descriptor) {
abstract syntax
}
41/50

53. Who already use decorators

54. Moving forward

55. Optional chaining
https://github.com/tc39/proposal-optional-chaining
Stage 1 now
Claude Pache (no company), Gabe Isenberg (GoDaddy)

56. What potential errors you could face?
user.address.zipcode

57. How to prevent it?
if (user && user.address && user.address.zipcode) {
return user.address.zipcode;
}

58. Optional chainging proposal
if (user?.address?.zipcode){
…
}

59. Optional chaining syntax
obj?.prop // optional static property access
obj?.[expr] // optional dynamic property access

60. isClear?.next()

61. Numeric Separators
https://github.com/tc39/proposal-numeric-separator
Stage 3 now
Christophe Porteneuve(Delicious Insights)

62. 1000000000

63. At the end of 2017, Kiev has 2933537
inhabitants.

64. Grouping digits to make long numbers more readable
const inhabitantsOfKiev = 2_933_537;
const price = 120,000.00;

65. https://esdiscuss.org
Investigate on your own
Create Proposals
Change JS world
Conclusion

66. 66

67. Contacts
Vitalii Ratushnyi
Email: v.ratyshnij@gmail.com
SkypeID: misreadable