Recommended
More Related Content
Similar to PharoJS for Real World Applications
Similar to PharoJS for Real World Applications (20)
More from ESUG
More from ESUG (20)
Recently uploaded
Recently uploaded (20)
PharoJS for Real World Applications
- 1. for Real World Applications Noury Bouraqadi & Dave Mason ESUG 2022, Нови Сад (Novi Sad), Србија (Serbia)
- 2. New to Smalltalk ? 3
- 3. Smalltalk is dangerous. It is a drug. My advice to you would be don’t try it. It could ruin your life – Andy Bower, CEO of Object Arts Ltd.
- 5. We want to develop in Smalltalk All the Time Everywhere
- 6. What to do with 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
- 10. 11
- 11. 12 Javascript
- 12. ● Develop in Pharo Smalltalk all the time! ● Reuse existing JS libraries ● JS Portability ● JS Run-time Speed 13
- 13. ● Transpiler: Converts Pharo 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
- 17. 100% Pharo Javascript 100% Development Production 1. Write Tests 3. Export to JS 2. Pass the tests
- 18. Testing JS Generated Code 19
- 19. 1. Start Server 20 Tests Talk 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 System Call 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 System Call 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 System Call 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 System Call 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 System Call 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
- 27. https://pharojs.org/repl HTML is a String in the image 28 HTML String Zinc HTTP Server GET
- 28. https://pharojs.org/repl HTML is a String 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 the HTML 30 Zinc HTTP Server <!DOCTYPE html> <html> … <img alt="Logo" src=... … <script src="repl/index.js"> </script> </body> </html>
- 30. Browser Loads Resources 31 Zinc HTTP Server <!DOCTYPE html> <html> … <img alt="Logo" src= … <script src="repl/index.js"> </script> </body> </html>
- 31. Browser Requests JavaScript Code 32 Zinc HTTP Server GET <script src="repl/index.js"> </script> </body> </html>
- 32. REPL Client JS Code is Generated 33 PharoJS Transpiler Zinc HTTP Server GET <script src="repl/index.js"> </script> </body> </html> REPL Client
- 33. REPL Client JS Code 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 and Links DOM Elements 35 Zinc HTTP Server <script src="repl/index.js"> </cript> </body> </html>
- 35. Client Sends ST Code Snippet 36 Zinc HTTP Server POST
- 36. Server Compiles ST Code Snippet 37 Zinc HTTP Server POST Opal Compiler ST Code String
- 37. PharoJS Transpiles AST 38 PharoJS Transpiler Zinc HTTP Server POST Opal Compiler ST Code String AST
- 38. Server Sends Generated JS 39 PharoJS Transpiler Zinc HTTP Server POST Opal Compiler ST Code String AST Generated JS Code
- 39. Client Executes Generated JS 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 PLC Programming & 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
- 46. PLC3000.com Clients Run in Web Browsers 47
- 47. PLC3000.com Client JS Code 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 the Client Side = 50 Generated JS
- 50. 51 is for Server Side 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 now Beta ;-) 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