Do ever wonder how ECMAScript evolves and it's available almost everywhere? We gonna do a walkthrough of how TC39 (the technical committee responsible for the ECMAScript) works, how to participate, contribute, and how an idea can make it through to the language, all step-by-step. Together with a sneak pick and debate about some recent and interesting proposals in different stages. (c) Fest.js Porto 2023 April 20, 2023 Porto, Portugal https://fest.dev/events/js/porto-2023/

1. From the proposal to
ECMAScript
Step by step
@romulocintra

2. What’s Standards
BODY and TC39 ?
1

3. @romulocintra
They’re Avenues for
unification & uniformization
● WHATWG
● W3C
● ISO
● ECMA
● Unicode
● …

4. @romulocintra
TC39 is the
Technical committee
that defines the
JavaScript language

5. @romulocintra
Marvel Studios

6. 13
Delegates
● Implementers (Apple, Google, Mozilla, Microsoft …)
● Big Companies (Sony, PayPal, Netflix)
● Students and NPF (Universities, OpenJS F …)
Invited Experts
● Subject matter experts
● Community representatives
Contributors, Editors, Reviewers & Community
Who are they ?

7. Glossary …
❏ ECMA
❏ ECMA-262 …
❏ ECMAScript
❏ JavaScript
❏ TC-XX (TC39 , TC45)
@romulocintra

8. How
TC39 works?
2

9. @romulocintra
Consensus-based decision
Diverse set of people in the committee
Implementers , Practitioners, Community Experts
Objections and concerns to satisfy everyone’s
No stakeholder kept over another and , Backing rationales

10. @romulocintra
STAGES
Steps where proposal evolves and receives
feedback
1 + 4 Stages

11. When
4-8 Plenary
Meetings a year
Online or In person
Focus Groups and Incubator
Calls
Monthly or Biweekly
TG2 / Editors / Outreach /
Proposals / Educators / Tools
Monthly or Biweekly

12. Where

13. Where

14. The Process
3 Stage-by-stage

15. @romulocintra
STAGE 0 💡
Strawperson
Just an Idea
Explainer, Idea under discussion,
Strawperson Proposal

16. @romulocintra

17. @romulocintra
STAGE 1
Describe the shape of a solution it’s an idea
under discussion
Proposal ��
Devote time and have a “Champion”
Demos / Polyfills
Major changes

18. 25

19. STAGE 1
Decimal
Philip Chimento, Andrew Paprocki, Jesse
Alama

20. function calculateBill(items, tax) {
let total = 0m;
for (let {price, count} of items) {
total += price * BigDecimal(count);
}
return BigDecimal.round(total * (1m + tax),
{maximumFractionDigits: 2, round: "up"});
}
let items = [{price: 1.25m, count: 5}, {price: 5m, count: 1}];
let tax = .0735m;
console.log(calculateBill(items, tax));

21. STAGE 1
Pattern Matching
Daniel Rosenwasser, Jack Works, Jordan Harband,
Mark Cohen, Ross Kirsling, Tab Atkins-Bittner

22. match (res) {
when ({ status: 200, body, ...rest }): handleData(body, rest)
when ({ status, destination: url }) if (300 <= status && status < 400):
handleRedirect(url)
when ({ status: 500 }) if (!this.hasRetried): do {
retry(req);
this.hasRetried = true;
}
default: throwSomething();
}

23. // Using Combinators `and` , `or` , `with`
match (command) {
when ([ 'go', dir and ('north' or 'east' or 'south' or 'west')]): go(dir);
when ([ 'take', item and /[a-z]+ ball/ and { weight }]): take(item);
default: lookAround()
}

24. // Built-in custom matchers
match (value) {
when (${Number}): ...
when (${BigInt}): ...
when (${String}): ...
when (${Array}): ...
default: ...
}

25. STAGE 1
Types Annotations
Daniel Rossenwaver, Rob Palmer,
Romulo Cintra

29. Optional ergonomic type annotations in JavaScript code
Types that don’t change JavaScript semantics
Direct execution of statically typed code
✅
✅
✅
Independent evolution of JavaScript and type-checkers
✅

30. Runtime effects
100% Compatible with TS, Flow…
❌
❌

31. @romulocintra
STAGE 2 Draft ��
Describe syntactic and semantic details
Form spec language - Initial Spec Text
Semantics and API are covered - not completed
TC39 Expects that feature would be developed in future
Experimental

32. @romulocintra

33. STAGE 2
Record & Tuple
Robin Ricard, Rick Button

34. const record = #{ prop: 1 };
const tuple = #[1, 2, 3];
// Simple Equality
#{ a: 1 } === #{ a:1 } // or #[1] === #[1]
// Nested Equality
#{ a: #{ b: 123 }} === #{ a: #{ b: 123 }}
// Order Independent
#{ a: 1, b: 2 } === #{ b: 2, a: 1}

35. @romulocintra
STAGE 3 Candidate ��
Refinement phase(Feedback from
implementers and users), almost ready to go
Completed Spec Text
Have Reviewers and Editors Signed off the spec
Coverage on Test262
Spec Compliant
Some browser might implement under a flag

36. Test262(Report)

38. STAGE 3 Intl.DurationFormat
Younies Mahmoud, Ujjwal Sharma

39. new Intl.DurationFormat("fr-FR", { style: "long" }).format({
hours: 1,
minutes: 46,
seconds: 40,
});
// => "1 heure, 46 minutes et 40 secondes"

40. STAGE 3 Temporal
Philipp Dunkel , Maggie Johnson-Pint,
Matt Johnson-Pint, Brian Terlson, Shane
Carr, Ujjwal Sharma, Philip Chimento,
Jason Williams, Justin Grant

41. const yearMonth = Temporal.PlainYearMonth.from({ year: 2020, month: 10 });
yearMonth.toString() => 2020-10
yearMonth.daysInMonth; // => 31
yearMonth.daysInYear; // => 366
const monthDay = Temporal.PlainMonthDay.from({ month: 7, day: 14 });
const date = monthDay.toPlainDate({ year: 2030 });
date.dayOfWeek; // => 7
date.dayOfYear // => 195
date.daysInMonth // => 31
date.daysInYear // => 365
date.inLeapYear // => false

42. let calcDate = Temporal.Now.plainDateISO(); // => 2021-11-29
calcDate.add({ days : 15 }); // => 2021-12-14
calcDate.subtract({ days : 15 }); // => 2021-11-14
calcDate.equals(calcDate); // => true
calcDate.equals(calcDate.add({ days : 2})); // => false

43. const time = Temporal.Instant.fromEpochSeconds(new Date);
Temporal.TimeZone.from('Europe/Berlin').getOffsetStringFor(time);
// => +01:00
Temporal.TimeZone.from('America/Vancouver').getOffsetStringFor(time);
// => -08:00
Temporal.TimeZone.from('Europe/Moscow').getOffsetStringFor(time);
// => +03:00

44. @romulocintra
STAGE 4 Finished ��
About to be include in the upcoming edition
of ECMAScript®
Merged into the Spec text
Two implementations that passes acceptance tests
Will be included on the upcoming Spec
Shipping

45. STAGE 4 NumberFormatV3*
Shane Carr

46. const nf = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "CHF",
maximumFractionDigits: 0,
});
nf.formatRange(3, 5); // "CHF 3–5"

47. STAGE 4 Change array by Copy
^
Robin Ricard, Ashley Claymore

48. const sequence = [1, 2, 3];
sequence.toReversed(); // => [3, 2, 1]
sequence; // => [1, 2, 3]
const outOfOrder = new Uint8Array([3, 1, 2]);
outOfOrder.toSorted(); // => Uint8Array [1, 2, 3]
outOfOrder; // => Uint8Array [3, 1, 2]
const correctionNeeded = [1, 1, 3];
correctionNeeded.with(1, 2); // => [1, 2, 3]
correctionNeeded; // => [1, 1, 3]

49. Error: .cause Class Fields,
Private Instance
fields & methods…
.at()
Object: .hasOwn()
Intl.Segmenter

50. ECMAScript 2023
ES.next
June 2023

51. Collaboration & Help
Get involved !!!
4

52. @romulocintra
Write test262 conformance tests
Refine proposals in GitHub issues
Write documentation and
educational materials
Provide feedback on GitHub
��
��
��
��

53. Muchas Gracias
Thanks
Obrigado
Спасибо
@romulocintra