Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
- 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
- 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
- 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
- 14. Subclass Transpilation by Example 14
- 16. 16 ES6: Subclass Overriding Instance Methods
- 18. 18 JS Subclass “Instance Side” Object Graph
- 19. 19 JS Subclass “Class Side” Object Graph
- 21. 21 ES5: Subclass Instance 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
- 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