https://github.com/tatut/liveweb

LiveWeb: web app framework for Smalltalk
https://github.com/tatut/liveweb

pharo

Last synced: 3 months ago
JSON representation

LiveWeb: web app framework for Smalltalk

• Host: GitHub
• URL: https://github.com/tatut/liveweb
• Owner: tatut
• License: mit
• Created: 2021-12-26T08:01:43.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-02-01T15:19:37.000Z (11 months ago)
• Last Synced: 2024-02-01T17:19:34.412Z (11 months ago)
• Topics: pharo
• Language: Smalltalk
• Homepage:
• Size: 442 KB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# LiveWeb

![test workflow](https://github.com/tatut/LiveWeb/actions/workflows/test.yml/badge.svg)

LiveWeb is a server side rendered web application framework for Smalltalk.

It is based on Zinc HTTP server and WebSockets.

The components live on the server and can send updates to clients through the web socket.

## Quick start guide

### Try docker examples

You can try the examples in a docker with

`docker run -p 8080:8080 antitadex/liveweb-examples`

and opening examples: `http://localhost:8080/examples/clock` (and `counter`, `wordle`).

### Installation

```smalltalk

 Metacello new

   repository: 'github://tatut/LiveWeb/src';

   baseline: 'LiveWeb';

   load.

```

### Creating a page and component.

The main endpoint is an instance of `LWPage` subclass. The page will create the head (optional) and

body (required) components for each page render. The page will register itself with a random UUID

so the client can connect to it.

Creating a simple counter component.

```smalltalk

LWPage subclass: #CounterPage.

CounterPage >> body: args [

  ^ CounterComponent new

]

```

The create the component.

```smalltalk

LWComponent subclass: #CounterComponent

  instanceVariableNames: 'counter'.

CounterComponent >> initialize [

  super initialize.

  counter := 0

]

CounterComponent >> renderOn: h [

  h div: { #id->'myBody' } with: [

    h button: { #onclick -> [ self counter: counter - 1] } with: '-';

      div: counter asString;

      button: { #onclick -> [ self counter: counter + 1] } with: '+'

  ]

]

CounterComponent >> counter: newValue [

  counter := newValue.

  self changed "this causes the component to rerender"

]

```

Then you need to register the page into the Zinc server delegate.

```smalltalk

ZnServer default delegate

  map: #counter

  to: [:req | CounterPage new value: req ].

```

See the `LiveWeb-Examples` package for more elaborate examples and

examples of using the styling package.