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

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