1. Transpiling Pharo Classes to JS
ECMAScript 5 versus ECMAScript 6
Noury Bouraqadi & Dave Mason
International Workshop on Smalltalk Technologies Lyon, France; August 29th-31st, 2023

2. 100%
Pharo
Javascript
100%
Development Production
Development Production
2

3. 100%
Pharo
Javascript
100%
Development Production
Development Production
3
ECMAScript
5

4. 100%
Pharo
Javascript
100%
Development Production
Development Production
4
ECMAScript
5
ECMAScript
6?

5. vs
5
EcmaScript 5
● Prototypes Only
● Dynamic Object Structure
● Whitebox Objects
● Reified Functions
● this Pseudo-variable
● Constructor Functions
● new Operator
ES5
+
Class Related Constructs
● Classes Definition
● Class Inheritance
● Instance Methods
● Class Methods (static)
● super Pseudo-variable
EcmaScript 6

6. Class Transpilation by Example
6

7. ES6: Class Definition + Instance Methods
7

8. ES6: Class Methods
8

9. JS “Instance Side” Object Graph
9

10. JS “Instance Side” Object Graph
10
new Counter()

11. JS “Class Side” Object Graph
11

12. ES5: Class Definition + Instance Methods
12

13. ES5: Class Methods
13

14. Subclass Transpilation by Example
14

15. 15
ES6: Subclass Definition

16. 16
ES6: Subclass Overriding Instance Methods

17. 17
ES6: Subclass Methods

18. 18
JS Subclass “Instance Side” Object Graph

19. 19
JS Subclass “Class Side” Object Graph

20. 20
ES5: Subclass Definition

21. 21
ES5: Subclass Instance Methods

22. 22
ES5: Subclass Methods

23. 23
JS Subclass Access Superclass IV
let c1 = Counter.getDefaultInstance();
let c2 = CircularCounter.getDefaultInstance();
c1 === c2; // true!

24. 24
Property Sharing Fix
Same solution for
both ES5 and ES6

25. 25
JS Subclass Access Superclass IV
let c1 = Counter.getDefaultInstance();
let c2 = CircularCounter.getDefaultInstance();
c1 === c2; // false!

26. ● Mac Book Pro
○ CPU 8 Intel Core i9, 2.3 GHz,
○ RAM 32 GB, 2667 MHz DDR4
○ Hard drive 1 TB SSD, PCI-Express with APFS File System
○ Mac OS X Ventura 13.2.1
● Pharo 10
● Pharo VM 100 Darwin x86 64-bit
● JS Targets
○ Node
○ Web Browser
26
Benchmark Procedure

27. 27
Improved Transpilation Time + File Size
Improvement
~8%
Improvement
1% - 5%

28. 28
Significantly Faster Load Time
Improvement
25% - 33%

29. ● 5 warm up runs
● 10 runs
● Richards: 50 iterations / run
● Delta Blue: 300 iterations / run
29
Run-time Benchmark Procedure

30. 30
Improved Runtime Performance
Improvement
3% - 10%

31. 31
Improved Runtime Performance vs Pharo 10
ES6 vs Pharo10
Improvement
16% - 24%

32. 32
Improved Runtime Performance vs Pharo 10
ES6 vs Pharo10
Improvement
35% - 43%

33. 33
Summary
● PharoJS is a viable solution to reuse JS Ecosystem
● Transition from ES5 to ES6 is Beneficial
○ Significantly faster Load time
○ Improved other benchmarks
○ More idiomatic code with ES6

34. ● JS white box model = no encapsulation
○ Generate accessors on the fly for third party classes
● Inherited Instance Variables e.g CircularCounter example
○ Force IV Creation
● Metaclass inheritance for third party classes
○ class X {...} vs class X extends Object {...}
● Support full Pharo is still a Challenge
○ DoesNotUnderstand
○ superclass - subclasses relationship
○ thisContext, become:, …
34
Getting exact Smalltalk Semantics is Still tricky

35. Develop in Pharo, Run on JavaScript
PharoJS.org
Kindly Supported by
Thanks to all the contributors!
M
IT
License