Preview of WebST Web Components with Smalltalk

WebST aims to simplify the development of web clients using web components. A web component is created by defining a web DOM (Document Object Model) class that is instantiated by web browsers upon parsing specific custom HTML tags. WebST facilitates the creation and testing of such classes using Pharo Smalltalk. It leverages Seaside for HTML generation, with code for web component classes transpiled from Smalltalk to JavaScript using PharoJS.

1. 1
WebST

Web Components with Smalltalk
Zürich Smalltalk Meetup, April 26th 2024
Preview of

2. 2
Noury
Bouraqadi

3. Run on JavaScript
Develop in Pharo
MIT
License

4. 100%
Pharo
Javascript
100%
Development Production
1. Write Tests
3. Export to JS
2. Pass the tests
4

5. 5
Building Mobile Apps with
CSS
HTML

6. 6
Web Apps with

7. PLC3000.com
7

8. 8
How to build a Web UI?
HTML = Structure
CSS = Look
JS = Behavior

9. 9
Simple UI with HTML + CSS + JS
<span class="bestLanguage" onclick="announceFan(this)">
Smalltalk </span>
<style> .bestLanguage {
color:blue; } </style>

<script> function announceFan(htmlElement) {
window.alert("I love " + htmlElement.textContent);
} </script>
Demo

10. <h1><span class="bestLanguage" onclick="announceFan(this)">
Smalltalk </span> Fans attending ESUG 2024:
<span id="fansCount">102</span></h1>
<style> .bestLanguage {
color:blue;
text-decoration: underline;}

#fansCount { color: red; } </style>

<script> function announceFan(htmlElement) {
window.alert("I love " + htmlElement.textContent);
let counter = document.getElementById("fansCount");
counter.textContent = Number(counter.textContent) + 1;
} </script>
10
Reuse with HTML + CSS + JS
Demo

11. ●Reuse only via Copy/Paste
○Pure Evil!
○No inheritance
●Complex web pages
○no abstractions/boundaries = it's all mixed
●Collisions and unwanted side-effects with CSS and JS
●No Smalltalk ;-)
11
What’s Wrong

12. ●Custom HTML tags
●Encapsulation
●Supported by all web browsers
12
Web Components W3C Standard

13. ●Develop & Test Web Components within the Image
●Deploy Standalone code HTML + CSS + JS
●Static Generation of HTML & JS
13
WebST = Web Components with Smalltalk

14. 14
WebST = Web Components with Smalltalk
Demo

15. 15
WebST

Web Components with Smalltalk
https://github.com/bouraqadi/WebST