From the proposal to
ECMAScript
Step by step
@romulocintra
Hello 👋👋👋👋👋
0 #JetBrains
JS Day Folks
I’m Romulo Cintra
∎ Doing Web Stuff -
● Browsers and Client-side Web Technologies
○ Webkit , Wolvic, WPE , JSC , Chromium, V8 ,
SpiderMonkey,…
● Standards
○ WASM , TC39 , Unicode , W3C …
● Compilers, Graphics, Multimedia, Device
Drivers
What’s Standards
BODY and TC39 ?
1
Do you remember 🧀?
@romulocintra
They’re Avenues for
unification & uniformization
● WHATWG
● W3C
● ISO
● ECMA
● Unicode
● …
@romulocintra
Marvel Studios
@romulocintra
TC39 is the
Technical committee
that defines the
JavaScript language
Glossary …
❏ ECMA
❏ ECMA-262 …
❏ ECMAScript
❏ JavaScript
❏ TC-XX (TC39 , TC45)
@romulocintra
How
TC39 works?
2
@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
@romulocintra
STAGES
Steps where proposal evolves and receives
feedback
1 + 4 Stages
When & How
4-8 Plenary
Meetings a year
Online or In person
Focus Groups and Incubator
Calls
Monthly or Biweekly
TG2/TG4 / Editors / Outreach /
Proposals / Educators / Tools
Monthly or Biweekly
The Process
3 Stage-by-stage
@romulocintra
STAGE 0 💡
Strawperson
Just an Idea
Explainer, Idea under discussion,
Strawperson Proposal
@romulocintra
@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
STAGE 1
Types Annotations
Daniel Rossenwaver, Rob Palmer,
Romulo Cintra
STAGE 1
Pattern Matching
Daniel Rosenwasser, Jack Works, Jordan Harband,
Mark Cohen, Ross Kirsling, Tab Atkins-Bittner,
Yulia Startsev
const res = await fetch(jsonService);
match (res) {
when ({ status: 200, headers: { 'Content-Length': s } }):
console.log(`size is ${s}`);
when ({ status: 404 }):
console.log('JSON not found');
when ({ status }) if (status >= 400): do {
throw new RequestError(res);
}
};
@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
@romulocintra
STAGE 2
Deferring Module
Evaluation
Yulia Startsev, Nicolò Ribaudo
// Eagerly load&link mod and its dependencies
import defer * as ns from "mod";
function rarelyUsed() {
// Later, ns.someValue triggers the evaluation of mod
doSomethingWith(ns.someValue);
}
@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
test262.fyi
Test262(Github)
STAGE 3 Intl.DurationFormat
Younies Mahmoud, Ujjwal Sharma
const duration = { seconds: 12, milliseconds: 345, microseconds: 600 } ;
new Intl.DurationFormat('en', { style: "digital", fractionalDigits: 2 }).format(duration);
// "0:00:12.35"
new Intl.DurationFormat('en', { seconds: "numeric", fractionalDigits: 2
}).format(duration);
// "12.35"
> new Intl.DurationFormat('en', { seconds: "numeric", fractionalDigits: 5
}).format(duration);
// "12.34560"
> new Intl.DurationFormat('en', { seconds: "numeric"}).format(duration);
// "12.3456"
new Intl.DurationFormat("fr-FR", { style: "long" }).format({
hours: 1,
minutes: 46,
seconds: 40,
});
// => "1 heure, 46 minutes et 40 secondes"
STAGE 3 Temporal
Philipp Dunkel , Maggie Johnson-Pint,
Matt Johnson-Pint, Brian Terlson, Shane
Carr, Ujjwal Sharma, Philip Chimento,
Jason Williams, Justin Grant
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
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
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
@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
STAGE 4 Change Array By Copy
Robin Ricard
Ashley Claymore
const original = [1, 2, 3, 4];
const reversed = original.toReversed();
// -> [ 4, 3, 2, 1 ]
const sorted = original.toSorted();
// -> [ 1, 2, 3, 4 ]
const spliced = original.toSpliced(0, 4, 2 , 3, 5 );
// -> [ 2, 3, 5]
const withThree = original.with(3, 10);
original.with(2, 3);
// -> [1, 2, 3, 10]
Error: .cause Symbols as
WeakMap keys
Top-level await
Array find from last
Search : T39 finished-proposals.md
ECMAScript 2024
ES.next
June 2024
Collaboration & Help
Get involved !!!
4
@romulocintra
Write test262 conformance tests
Refine proposals in GitHub issues
Write documentation and
educational materials
Provide feedback on GitHub
��
��
��
��
Muchas Gracias
Thanks
Obrigado
Спасибо
@romulocintra

From the proposal to ECMAScript, step by step

  • 1.
    From the proposalto ECMAScript Step by step @romulocintra
  • 2.
  • 3.
    I’m Romulo Cintra ∎Doing Web Stuff - ● Browsers and Client-side Web Technologies ○ Webkit , Wolvic, WPE , JSC , Chromium, V8 , SpiderMonkey,… ● Standards ○ WASM , TC39 , Unicode , W3C … ● Compilers, Graphics, Multimedia, Device Drivers
  • 4.
  • 5.
  • 6.
    @romulocintra They’re Avenues for unification& uniformization ● WHATWG ● W3C ● ISO ● ECMA ● Unicode ● …
  • 7.
  • 8.
    @romulocintra TC39 is the Technicalcommittee that defines the JavaScript language
  • 9.
    Glossary … ❏ ECMA ❏ECMA-262 … ❏ ECMAScript ❏ JavaScript ❏ TC-XX (TC39 , TC45) @romulocintra
  • 10.
  • 11.
    @romulocintra Consensus-based decision Diverse setof people in the committee Implementers , Practitioners, Community Experts Objections and concerns to satisfy everyone’s No stakeholder kept over another and , Backing rationales
  • 12.
    @romulocintra STAGES Steps where proposalevolves and receives feedback 1 + 4 Stages
  • 13.
    When & How 4-8Plenary Meetings a year Online or In person Focus Groups and Incubator Calls Monthly or Biweekly TG2/TG4 / Editors / Outreach / Proposals / Educators / Tools Monthly or Biweekly
  • 14.
  • 15.
    @romulocintra STAGE 0 💡 Strawperson Justan Idea Explainer, Idea under discussion, Strawperson Proposal
  • 16.
  • 17.
    @romulocintra STAGE 1 Describe theshape of a solution it’s an idea under discussion Proposal �� Devote time and have a “Champion” Demos / Polyfills Major changes
  • 18.
    STAGE 1 Types Annotations DanielRossenwaver, Rob Palmer, Romulo Cintra
  • 21.
    STAGE 1 Pattern Matching DanielRosenwasser, Jack Works, Jordan Harband, Mark Cohen, Ross Kirsling, Tab Atkins-Bittner, Yulia Startsev
  • 22.
    const res =await fetch(jsonService); match (res) { when ({ status: 200, headers: { 'Content-Length': s } }): console.log(`size is ${s}`); when ({ status: 404 }): console.log('JSON not found'); when ({ status }) if (status >= 400): do { throw new RequestError(res); } };
  • 23.
    @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
  • 24.
  • 25.
  • 26.
    // Eagerly load&linkmod and its dependencies import defer * as ns from "mod"; function rarelyUsed() { // Later, ns.someValue triggers the evaluation of mod doSomethingWith(ns.someValue); }
  • 27.
    @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
  • 28.
  • 29.
  • 30.
    const duration ={ seconds: 12, milliseconds: 345, microseconds: 600 } ; new Intl.DurationFormat('en', { style: "digital", fractionalDigits: 2 }).format(duration); // "0:00:12.35" new Intl.DurationFormat('en', { seconds: "numeric", fractionalDigits: 2 }).format(duration); // "12.35" > new Intl.DurationFormat('en', { seconds: "numeric", fractionalDigits: 5 }).format(duration); // "12.34560" > new Intl.DurationFormat('en', { seconds: "numeric"}).format(duration); // "12.3456"
  • 31.
    new Intl.DurationFormat("fr-FR", {style: "long" }).format({ hours: 1, minutes: 46, seconds: 40, }); // => "1 heure, 46 minutes et 40 secondes"
  • 32.
    STAGE 3 Temporal PhilippDunkel , Maggie Johnson-Pint, Matt Johnson-Pint, Brian Terlson, Shane Carr, Ujjwal Sharma, Philip Chimento, Jason Williams, Justin Grant
  • 33.
    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
  • 34.
    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
  • 35.
    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
  • 36.
    @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
  • 37.
    STAGE 4 ChangeArray By Copy Robin Ricard Ashley Claymore
  • 38.
    const original =[1, 2, 3, 4]; const reversed = original.toReversed(); // -> [ 4, 3, 2, 1 ] const sorted = original.toSorted(); // -> [ 1, 2, 3, 4 ] const spliced = original.toSpliced(0, 4, 2 , 3, 5 ); // -> [ 2, 3, 5] const withThree = original.with(3, 10); original.with(2, 3); // -> [1, 2, 3, 10]
  • 39.
    Error: .cause Symbolsas WeakMap keys Top-level await Array find from last Search : T39 finished-proposals.md
  • 40.
  • 41.
  • 42.
    @romulocintra Write test262 conformancetests Refine proposals in GitHub issues Write documentation and educational materials Provide feedback on GitHub �� �� �� ��
  • 43.