Download as PDF, PPTX
![initModel super initModel. model -@ #countPort => [ :newCount | self displayCount: newCount ]. self updateDisplay updateDisplay display textContent: model count asString 30 Component Links Model to View Update View When Model Changes](https://image.slidesharecdn.com/webst-esug-v06-09-final-240711130052-ecd3e771/75/WebST-Framework-Tools-for-Test-Driven-Development-of-Web-Components-with-Smalltalk-30-2048.jpg)
![initModel super initModel. model -@ #countPort => [ :newCount | self displayCount: newCount ]. self updateDisplay updateDisplay display textContent: model count asString 31 View Observes the Model Subscribe to count changes](https://image.slidesharecdn.com/webst-esug-v06-09-final-240711130052-ecd3e771/75/WebST-Framework-Tools-for-Test-Driven-Development-of-Web-Components-with-Smalltalk-31-2048.jpg)
![initView | incrementButton decrementButton resetButton | super initView. display := view querySelector: '.display'. incrementButton := view querySelector: '.increment'. self onClickElement: incrementButton do: [ model increment ]. decrementButton := … 32 Component Links View to Model Clicks on View Increment Model](https://image.slidesharecdn.com/webst-esug-v06-09-final-240711130052-ecd3e771/75/WebST-Framework-Tools-for-Test-Driven-Development-of-Web-Components-with-Smalltalk-32-2048.jpg)
![initView | incrementButton decrementButton resetButton | super initView. display := view querySelector: '.display'. incrementButton := view querySelector: '.increment'. self onClickElement: incrementButton do: [ model increment ]. decrementButton := … 33 Navigating the DOM JavaScript API ! 😰](https://image.slidesharecdn.com/webst-esug-v06-09-final-240711130052-ecd3e771/75/WebST-Framework-Tools-for-Test-Driven-Development-of-Web-Components-with-Smalltalk-33-2048.jpg)
Uploaded byNoury Bouraqadi
WebST: Framework & Tools for Test-Driven Development of Web Components with Smalltalk
The document outlines a presentation on web components in Smalltalk, focusing on their integration and development for web applications. It discusses the structure of web components, their encapsulation, and how to implement them using Smalltalk's MVC design pattern. The presentation emphasizes the use of test-driven development and the potential for creating fully functional web clients and servers in Smalltalk.
WebST: Framework & Tools for Test-Driven Development of Web Components with Smalltalk
- 1. 1 WebST 30th ESUG Conference EuropeanSmalltalk Users Group Lille, France, 8 - 11 July 2024
- 2. 2 I want to makethis web page
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. ● Custom HTMLtags ● HTML + CSS + JS ● Encapsulation = No collisions 10 Web Components = W3C Standard webcomponents.org
- 11. 11 <countdown-timer date="2024-07-08T09:00:00" heading="ESUG 2024"…></countdown-timer> <countdown-timer date="2024-10-18T18:00:00" heading="Smalltalk ...></countdown-timer> <script src="./countdown-timer.min.js"></script>
- 12. 12 But, what if Ihave special requirements?
- 13.
- 14.
- 15. 15 Web Browsers BuildObjects from HTML HtmlElement … html body head … … Children
- 16. 16 Web Browsers BuildObjects from HTML HtmlElement … html body head … … Children The DOM (Document Object Model)
- 17. 17 Adding a Component= Adding a Subclass <ws-counter></ws-counter> HtmlElement … html body head ws-counter … … …
- 18. 18 Component = View+ Model WsCounterComponent WsCounterModel WsCounterView
- 19. Component View =HTML + CSS 😒 19 WsCounterView WsCounterComponent WsCounterModel
- 20. Component View =HTML + CSS 😒 20 WsCounterView WsCounterComponent WsCounterModel Not Smalltalk!
- 21.
- 22. 22 ❤ The force you must use Thanksto Master Johan Brichau & to the other Jedis!
- 23. 23 ● Client: HTMLGeneration ● Server: Requests Handling Web Apps in Smalltalk
- 24. 24 Counter View RequiredHTML <div class="display me-1 text-center fs-1">42</div> <button class="increment btn btn-primary" type="button">+</button> <button class="decrement btn btn-info" type="button">-</button> <button class="reset btn btn-danger" type="button">x</button>
- 25. 25 Counter View Definition renderOuterHtmlOn:html html div class: 'display me-1 text-center fs-1'. html button class: 'increment btn btn-primary'; value: '+'. html button class: 'decrement btn btn-info'; value: '-'. html button class: 'reset btn btn-danger'; value: 'x'
- 26. 26 Component Model =Business as Usual 😉 WsCounterComponent WsCounterModel WsCounterView
- 27. 27 Component Model increment self count:self count + 1. count ^count count: newCount count := newCount. countPort notifyWith: newCount Trivial 😉
- 28. 28 Model = Subjectin the Observer Design Pattern increment self count: self count + 1. count ^count count: newCount count := newCount. countPort notifyWith: newCount Announcer
- 29. 29 Component Links View& Model = MVC WsCounterComponent WsCounterModel WsCounterView
- 30. initModel super initModel. model -@#countPort => [ :newCount | self displayCount: newCount ]. self updateDisplay updateDisplay display textContent: model count asString 30 Component Links Model to View Update View When Model Changes
- 31. initModel super initModel. model -@#countPort => [ :newCount | self displayCount: newCount ]. self updateDisplay updateDisplay display textContent: model count asString 31 View Observes the Model Subscribe to count changes
- 32. initView | incrementButton decrementButtonresetButton | super initView. display := view querySelector: '.display'. incrementButton := view querySelector: '.increment'. self onClickElement: incrementButton do: [ model increment ]. decrementButton := … 32 Component Links View to Model Clicks on View Increment Model
- 33. initView | incrementButton decrementButtonresetButton | super initView. display := view querySelector: '.display'. incrementButton := view querySelector: '.increment'. self onClickElement: incrementButton do: [ model increment ]. decrementButton := … 33 Navigating the DOM JavaScript API ! 😰
- 34. 12 34 ❤ The force you must use Develop 100%Pharo Run 100% JavaScript
- 35. 35 ● Generate JavaScriptfrom Smalltalk ● Link JavaScript Third Party Libraries ● Test JavaScript + Web Clients Develop 100% Pharo Run 100% JavaScript
- 36.
- 37.
- 38. 38 HTML ✅ JavaScript ✅ CSS❓ Reuse youmust! The JavaScript force you must use!
- 39.
- 40. A View canLink Resources 40 WsCounterView WsCounterComponent WsCounterModel Bootstrap CSS Bootstrap JS
- 41. 41 to Render CSSResources renderTagOn: html ^ html link beStylesheet; url: self url; yourself
- 42. 42 to Render JavaScriptResources renderTagOn: html ^ html script defer; type: 'text/javascript'; url: self url; yourself
- 43.
- 44.
- 45.
- 46.
- 47. 47 How to Make Complex Components? 21 PlayerB 18 Player A Game Score
- 48. 48 How to make complex components? 21 PlayerB 18 Player A Game Score Composite Design Pattern You must use!
- 49. 49 21 Player B 18 Player A GameScore Editable Text Component Counter Component
- 50.
- 51. 51 html render: EditableTextComponent dataAttributes: {#text -> 'Game Score' }. View Rendering Sub-Components <ws-editable-text data-text="Game Score"> </ws-editable-text> Generated HTML Smalltalk
- 52. 52 I want more! I wantto develop 100% in Smalltalk ALL THE TIME!
- 53. 53 ❤ Export Full Web Clients+ Server You Can
- 54.
- 55. 55 ❤ The TDD force you mustuse Test Client-Server Interaction from Both Sides!
- 56. 100% Pharo HTML + JavaScript DevelopmentProduction 1. Write tests 3. Export 2. Pass the tests 56 Server + Clients 100%
- 57.
- 58.
- 59.
- 60.