Download as PDF, PPTX
Uploaded byNoury Bouraqadi
PharoJS for Real World Applications
The document discusses the integration of Pharo Smalltalk with JavaScript for real-world applications, emphasizing the development of web applications using both Pharo and existing JS libraries. It highlights success stories and various testing approaches while showcasing the architecture and steps required to develop, generate, and debug JavaScript code from Pharo code. The potential for future development and improvements in middleware and support for JavaScript constructs is also noted.
More Related Content
Similar to PharoJS for Real World Applications
![20260201 [FOSDEM] gomodjail - library sandboxing for Go modules.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/20260201fosdemgomodjail-librarysandboxingforgomodules-260201225659-76609ec4-thumbnail.jpg?width=640&height=640&fit=bounds)
![谷歌留痕技术教程[ 𝙩𝙤𝙥 𝟮𝟯𝟯. 𝙘 𝙤𝙢 ]](https://cdn.slidesharecdn.com/ss_thumbnails/top233-260130173900-2eb784f9-thumbnail.jpg?width=640&height=640&fit=bounds)
PharoJS for Real World Applications
- 1. for Real World Applications NouryBouraqadi & Dave Mason ESUG 2022, Нови Сад (Novi Sad), Србија (Serbia)
- 2.
- 3. Smalltalk is dangerous. Itis a drug. My advice to you would be don’t try it. It could ruin your life – Andy Bower, CEO of Object Arts Ltd.
- 4.
- 5. We want todevelop in Smalltalk All the Time Everywhere
- 6. What to dowith non-Smalltalk Resources? 7
- 7. Real World Application“Architecture” 8
- 8. Real World Application“Architecture” 9 Javascript Javascript Javascript html css Javascript html css Javascript html css
- 9.
- 10.
- 11.
- 12. ● Develop inPharo Smalltalk all the time! ● Reuse existing JS libraries ● JS Portability ● JS Run-time Speed 13
- 13. ● Transpiler: ConvertsPharo Code to JavaScript ● Framework: Develop JS applications in Pharo ● Libraries: Extend JS Objects with Pharo’s Behavior ● Tools: Playground + Inspector for JS Objects ● Test Framework: Test JS Code 14
- 14.
- 15.
- 16.
- 17. 100% Pharo Javascript 100% Development Production 1. WriteTests 3. Export to JS 2. Pass the tests
- 18. Testing JS GeneratedCode 19
- 19. 1. Start Server 20 TestsTalk to Web Browsers
- 20. 1. Start Server 2.Generate App’s JS Code Connect to Server Link to HTML 21 Tests Talk to Web Browsers
- 21. 1. Start Server SystemCall 3. Open Web Browser 2. Generate App’s JS Code Connect to Server Link to HTML 22 Tests Talk to Web Browsers
- 22. 1. Start Server SystemCall 3. Open Web Browser 4. Open URL 2. Generate App’s JS Code Connect to Server Link to HTML 23 Tests Talk to Web Browsers
- 23. 1. Start Server SystemCall 3. Open Web Browser 4. Open URL 5. Load HTML 2. Generate App’s JS Code Connect to Server Link to HTML 24 Tests Talk to Web Browsers
- 24. 1. Start Server SystemCall 3. Open Web Browser 4. Open URL 5. Load HTML 2. Generate App’s JS Code Connect to Server Link to HTML 6. Open Web Socket 25 Tests Talk to Web Browsers
- 25. 1. Start Server SystemCall 3. Open Web Browser 4. Open URL 5. Load HTML 2. Generate App’s JS Code Connect to Server Link to HTML 6. Open Web Socket Web Socket 26 Tests Talk to Web Browsers
- 26.
- 27. https://pharojs.org/repl HTML is aString in the image 28 HTML String Zinc HTTP Server GET
- 28. https://pharojs.org/repl HTML is aString in the image 29 HTML String Zinc HTTP Server GET <!DOCTYPE html> <html> … <img alt="Logo" src= … <script src="repl/index.js"> </script> </body> </html>
- 29. https://pharojs.org/repl Browser Processes theHTML 30 Zinc HTTP Server <!DOCTYPE html> <html> … <img alt="Logo" src=... … <script src="repl/index.js"> </script> </body> </html>
- 30. Browser Loads Resources 31 ZincHTTP Server <!DOCTYPE html> <html> … <img alt="Logo" src= … <script src="repl/index.js"> </script> </body> </html>
- 31. Browser Requests JavaScriptCode 32 Zinc HTTP Server GET <script src="repl/index.js"> </script> </body> </html>
- 32. REPL Client JSCode is Generated 33 PharoJS Transpiler Zinc HTTP Server GET <script src="repl/index.js"> </script> </body> </html> REPL Client
- 33. REPL Client JSCode is Generated 34 Zinc HTTP Server GET <script src="repl/index.js"> </script> </body> </html> Generated JavaScript Code PharoJS Transpiler REPL Client
- 34. Client Creates andLinks DOM Elements 35 Zinc HTTP Server <script src="repl/index.js"> </cript> </body> </html>
- 35. Client Sends STCode Snippet 36 Zinc HTTP Server POST
- 36. Server Compiles STCode Snippet 37 Zinc HTTP Server POST Opal Compiler ST Code String
- 37. PharoJS Transpiles AST 38 PharoJS Transpiler ZincHTTP Server POST Opal Compiler ST Code String AST
- 38. Server Sends GeneratedJS 39 PharoJS Transpiler Zinc HTTP Server POST Opal Compiler ST Code String AST Generated JS Code
- 39. Client Executes GeneratedJS Code 40 Zinc HTTP Server
- 40. 41 Small App ● Client+Server ○10 classes ○ 64 methods ● Tests ○ 1 class ○ 20 methods Generated JS 267KB (+3KB)
- 41. Larger App: PLC3000.com 42 Teaching PLCProgramming & Factory Automation
- 42. PLC3000.com Metrics 43 ● Tests ○108 classes ○ 1184 methods ○ 876 test runs ● Client+Server ○ 342 classes ○ 2529 methods
- 43. 44 3 Programming Languages 7 (4+3) Physics Simulations PLC Simulator PLC3000.com =Educational Software + Contents 27 (13 + 14) Exercises & Tutorials
- 44. 45 3 Programming Languages 7 (4+3) Physics Simulations PLC Simulator PLC3000.com =Educational Software + Contents 27 (13 + 14) Exercises & Tutorials
- 45.
- 46. PLC3000.com Clients Runin Web Browsers 47
- 47. PLC3000.com Client JSCode 48 Generated JS 655KB (+391KB)
- 48. Summary ● Write 100%Pharo Code ● Reuse JS Libraries ● Tests + debugging in Pharo ○ Pharo talks to JavaScript ● Different Architectures are Possible 49 Supports Real World Applications
- 49. Pharo on theClient Side = 50 Generated JS
- 50. 51 is for ServerSide Too! Generated JS
- 51. 52 Supports Different Workflows ●HTML, CSS ○ Handwritten Files ○ Generated ○ DOM Elements Creation & Setup ○ Reuse Third-Party Libraries ○ ● Javascript ○ Generated ○ Reuse Third-Party Libraries Development-Time Run-Time vs
- 52. for Pharo X is nowBeta ;-) 53 April 1st, 2021
- 53. ● Improved Middleware ○Framework for Client-Server Apps ● Support latest JS constructs to reuse JS Frameworks ● Support more Pharo concepts (threads, slots, …) ● Extended Support for Live/Interactive Programming ○ Hot code update : easy ○ Debugging generated JS code : complex 54 Future Development
- 54. Develop in Pharo,Run on JavaScript PharoJS.org Kindly supported by Thanks to all the contributors