By Daniel Ehrenberg. Slides at https://docs.google.com/presentation/d/1bpvESaWtNnhXV0a95b6GWHhhqUVnGCIPcs37ngqx4Uo/edit#slide=id.g38b91fc952_0_103 Following ES6, TC39 is working with the broader JS developer community to continue evolving the JavaScript programming language. The pipeline operator `x |> f |> g` is an early stage, community-driven proposal to make it easier to compose multiple functions, inspired by similar syntax in other programming language and frameworks like RxJS. In this talk, I'll explain how TC39 works and how this proposal is being carefully developed with extensive feedback and opportunities for you to get involved. (c) WorkerConf 2018 28th June 2018 (Dornbirn, Austria) https://worker.sh/

1. Community-driven design:
|> in TC39
Daniel Ehrenberg @littledan
Igalia, in partnership with Bloomberg
TC39 delegate
WorkerConf 2018

2. Method chaining:
Awesome, right?

3. const cities = [
{ name: "Madrid", population: 3166000 },
{ name: "Barcelona", population: 1609000 },
{ name: "Valencia", population: 790000 }
];

4. const cities = [
{ name: "Madrid", population: 3166000 },
{ name: "Barcelona", population: 1609000 },
{ name: "Valencia", population: 790000 }
];
cities.filter(city => city.population > 1000000);
===>
[
{ name: "Madrid", population: 3166000 },
{ name: "Barcelona", population: 1609000 },
]

5. const cities = [
{ name: "Madrid", population: 3166000 },
{ name: "Barcelona", population: 1609000 },
{ name: "Valencia", population: 790000 }
];
cities.filter(city => city.population > 1000000)
.sort((a, b) => a.population - b.population);
===>
[
{ name: "Barcelona", population: 1609000 },
{ name: "Madrid", population: 3166000 },
]

6. const cities = [
{ name: "Madrid", population: 3166000 },
{ name: "Barcelona", population: 1609000 },
{ name: "Valencia", population: 790000 }
];
cities.filter(city => city.population > 1000000)
.sort((a, b) => a.population - b.population)
.map(city => city.name);
===>
["Barcelona", "Madrid"]

7. OK, let's make our own!

8. function sortByPop(arr) {
return arr.sort(
(a, b) => a.population - b.population);
}
sortByPop(cities.filter(
city => city.population > 1000000))
.map(city => city.name);

9. Array.prototype.sortByPop = function () {
return this.sort(
(a, b) => a.population - b.population);
}
const cities = [
{ name: "Madrid", population: 3166000 },
{ name: "Barcelona", population: 1609000 },
{ name: "Valencia", population: 790000 }
];
cities.filter(city => city.population > 1000000)
.sortByPop()
.map(city => city.name);

10. Combining modules

11. cities.js
// Highest population cities
Array.prototype.sortByPop =
function () {
return this.sort((a, b) =>
a.population - b.population);
}
export function bigCities(cities) {
return cities.filter(city =>
city.population > 1000000)
.sortByPop()
.map(city => city.name);
}
combined.js
import { bigCities } from "cities.js";
import { manyFans } from "music.js";
// CLASH
music.js
// Most popular musicians
Array.prototype.sortByPop =
function () {
return this.sort((a, b) =>
a.popularity - b.popularity);
}
export function manyFans(musicians) { … }

12. function sortByPop(arr) {
return arr.sort(
(a, b) => a.population - b.population);
}
sortByPop(cities.filter(
city => city.population > 1000000))
.map(city => city.name);

13. function sortByPop() {
return this.sort(
(a, b) => a.population - b.population);
}
const cities = // ...
cities.filter(city => city.population > 1000000)
::sortByPop()
.map(city => city.name);

14. function f(x) {
// ...
}
// Bind operator
obj::f(x)
===>
f.call(obj, x)

16. Maybe soon!
We are looking into it
Pipeline/bind is at Stage 1

17. // ES6 Destructuring Assignment
let x = 1, y = 2;
[y, x] = [x, y];
⇒ x === 2
y === 1

18. Who is TC39?
● A committee of Ecma, with…
● JS developers
● Implementers
● Frameworks
● Academics
● etc

21. Meetings
● Every two months
● For three days
● Summarize/review GitHub activity
● Move proposals through stages

22. TC39 stages
● Stage 1: An idea
● Stage 2: Agreed-on first draft
● Stage 3: Details worked out
● Stage 4: Battle-tested and standard

23. History of ::
● Discussed :: in 2012 and earlier
● Developed by Dave Herman, Kevin Smith
● Implemented in Babel, 2015 by Ingvar Stepanyan
● Deferred until post-ES6

25. this ??!!?!?!?!

26. library.js
export function doubleSay(str) {
return str + ", " + str;
}
export function capitalize(str) {
return str[0].toUpperCase() +
str.substring(1);
}
export function exclaim(str) {
return str + "!";
}
with-pipeline.js
import { doubleSay, capitalize, exclaim }
from "library.js";
let result = "hello"
|> doubleSay
|> capitalize
|> exclaim;
// ===> "Hello, hello!"
ordinary.js
import { doubleSay, capitalize, exclaim }
from "library.js";
let result =
exclaim(capitalize(doubleSay("hello")));
// ===> "Hello, hello!"

27. History of |>
● Gilbert created |> repository, November 2015
● Reached Stage 1, September 2017
● Implemented in Babel, late 2017
by Henry Zhu, Justin Ridgewell
● Pursue two paths, March 2018

28. Async/await integration

29. Example
function doubleSay (str) {
return str + ", " + str;
}
function capitalize (str) {
return str[0].toUpperCase() +
str.substring(1);
}
function exclaim (str) {
return str + '!';
}
...the following invocations are equivalent:
let result = exclaim(capitalize(
doubleSay("hello")));
result //=> "Hello, hello!"
let result = "hello"
|> doubleSay
|> capitalize
|> exclaim;
result //=> "Hello, hello!"

30. Evolving to async...
function doubleSay (str) {
return str + ", " + str;
}
async function capitalize (str) {
let response = await
capitalizeOnTheServer(str);
return response.getCapitalized();
}
function exclaim (str) {
return str + '!';
}
let result = exclaim(capitalize(
doubleSay("hello")));
result //=> [Object Promise]!
let result = "hello"
|> doubleSay
|> capitalize
|> exclaim;
result //=> [Object Promise]!

31. Oops, how can we fix it?
function doubleSay (str) {
return str + ", " + str;
}
async function capitalize (str) {
let response = await
capitalizeOnTheServer(str);
return response.getCapitalized();
}
function exclaim (str) {
return str + '!';
}
let result = exclaim(await capitalize(
doubleSay("hello")));
result //=> "Hello, hello!"
let result = ("hello"
|> doubleSay
|> capitalize)
.then(exclaim);
result //=> resolves to “Hello”

32. Or, this would also work
function doubleSay (str) {
return str + ", " + str;
}
async function capitalize (str) {
let response = await
capitalizeOnTheServer(str);
return response.getCapitalized();
}
function exclaim (str) {
return str + '!';
}
let result = exclaim(await capitalize(
doubleSay("hello")));
result //=> "Hello, hello!"
let result = await (
"hello"
|> doubleSay
|> capitalize)
|> exclaim;
result //=> "Hello, hello!"

33. A prettier solution (PR; proposed for C#)
function doubleSay (str) {
return str + ", " + str;
}
async function capitalize (str) {
let response = await
capitalizeOnTheServer(str);
return response.getCapitalized();
}
function exclaim (str) {
return str + '!';
}
let result = exclaim(await capitalize(
doubleSay("hello")));
result //=> "Hello, hello!"
let result = "hello"
|> doubleSay
|> await capitalize
|> exclaim;
result //=> "Hello, hello!"

34. However, this would be different…
function doubleSay (str) {
return str + ", " + str;
}
async function capitalize (str) {
let response = await
capitalizeOnTheServer(str);
return response.getCapitalized();
}
function exclaim (str) {
return str + '!';
}
let result = exclaim(await capitalize(
doubleSay("hello")));
result //=> "Hello, hello!"
let result = "hello"
|> doubleSay
|> (await capitalize)
|> exclaim;
result //=> [Object Promise]!

35. Another nice solution
function doubleSay (str) {
return str + ", " + str;
}
async function capitalize (str) {
let response = await
capitalizeOnTheServer(str);
return response.getCapitalized();
}
function exclaim (str) {
return str + '!';
}
let result = exclaim(await capitalize(
doubleSay("hello")));
result //=> "Hello, hello!"
let result = "hello"
|> doubleSay
|> capitalize
|> await
|> exclaim;
result //=> "Hello, hello!"

36. Plan from here
● Pursue two options ("F#" and "smart pipeline")
● Write specifications and documentation
● Implement both in Babel, different flags
● Develop community consensus on F#, smart, and ::
● Propose a choice to TC39

37. Steps needed for Stage 2
● First draft spec text ✔
● Decide which variant …
● Agreement that we want the proposal …

38. Steps needed for Stage 3
● Complete spec text …
● Signoff from reviewers, editor …
● Ready to pass off to native implementers …

39. Steps needed for Stage 4
● Two implementations …
● Conformance tests …
● PR with editor signoff …

40. Getting involved

41. Feedback on GitHub issues
● Does this work for you?
● Missing pieces?
● Handle a case differently?

42. Pipeline GitHub feedback
● Proposal scope
● :: vs |>
● Await integration
● Avoiding currying
● Semantic details

43. Test262 tests
● Tests shared between JS engines
● “If it’s not tested, it’s not compatible”
● Finds edge cases

45. Pipeline test262 tests
● ...None yet
● Could be useful for Babel development
● Wanna help?

46. Documentation/Education
● Explain the feature to contributors, learners
● Understand mental models for JS

47. Pipeline documentation
● "Explainer documents" for each variant
● Wanted: Better introductory materials
● Wanted: Educators' perspective on the alternatives

48. Implementation
● Open-source projects accepting contributions:
○ Babel
○ TypeScript
○ V8
○ Acorn
● Features developed behind a flag/in a plugin
○ JSC
○ ChakraCore
○ SpiderMonkey
○ And many more

49. Pipeline implementations
● Babel transforms
● Want to write more?

50. Attending TC39 as a delegate
● Join Ecma to come to TC39 meetings
● Contact me for more info, littledan@igalia.com

51. ● Get involved in TC39:
https://tc39.github.io/
● |> is at Stage 1
for compositional chaining
● Daniel Ehrenberg
● Twitter/GitHub @littledan
● littledan@igalia.com