# webside

<div align="center"><img src="https://1267314878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F295xUbh3gGDox8cpP5nS%2Fuploads%2Fgit-blob-faf76a2d8e93175a8aa26d88a72042469c86c87b%2FLogo.svg?alt=media" alt="" height="200" width="400"></div>

[**Explore the docs »**](readme/docs)\
\
[View Demo](https://ide.webside.app) · [Report defect](https://github.com/guillermoamaral/Webside/issues/new?labels=Type%3A+Defect) · [Request feature](https://github.com/guillermoamaral/Webside/issues/new?labels=Type%3A+Feature)

Webside is both the specification of an [API](api) to interact with an Smalltalk system (backend), and a web [IDE](readme/docs) (frontend) built on top of such API.

The API definition follows this principle: _assume as less as possible from the underlying Smalltalk system_. This leads to keep a healthy distance from the particularities of a given dialect and its tooling, in favor of enabling the implementation of a common, yet useful set of tools (IDE) for every Smalltalk implementation.\
Of course, some assumptions are made and these impose some degree of _adaptation_ in the implementation of the API for a particular Smallalk.

Provided the API is implemented according to the specification, the IDE is fully operational on the Smalltalk at hand, offering traditional Smalltalk IDE tools such as code browsers, workspaces, inspectors, debugger and more.

![Webside on Bee](https://1267314878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F295xUbh3gGDox8cpP5nS%2Fuploads%2Fgit-blob-dc1567d1f496c692d7291ad6c903019e1936f76b%2FWebsideBee.png?alt=media)

![Webside on Pharo](https://1267314878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F295xUbh3gGDox8cpP5nS%2Fuploads%2Fgit-blob-e4f720c53f85825619029c62a2c8c223590b576d%2FWebsidePharo.png?alt=media)

![Webside on Dolphin](https://1267314878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F295xUbh3gGDox8cpP5nS%2Fuploads%2Fgit-blob-9b910750e28aef5294637d10050faf9bdd53eccc%2FWebsideDolphin.png?alt=media)

Read more [here](readme/docs).

#### Getting Started

**Prerequisites (for development)**

The following steps will demand both time and space, and are only intended to recreate the development environment in your local machine. In case you only want to use Webside to connect to some Smalltalk backend, you can skip these steps and go directly to [Usage](#usage).

* npm

```sh
npm install npm@latest -g
```

* Your Smalltalk image implementing the [API](api)

**Installation**

1. Clone the repo

```sh
git clone https://github.com/guillermoamaral/Webside.git
```

2. Install dependencies

```sh
npm install
```

3. Launch Webside

```sh
npm start
```

#### Usage

The last step will open a web browser on a page like the one shown below, asking for the `URL` of the target Smalltalk system and the `username` to be used inside your Webside session (this is used as the `author` of modifications, and to be identified by peers in the same session)

![Connection](https://1267314878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F295xUbh3gGDox8cpP5nS%2Fuploads%2Fgit-blob-d542305adf07a6b2be73c4ae9856cb00a5f8577c%2FConnection.png?alt=media)

The URL (port and base URI) will correspond to the one chosen by the web server running inside the Smalltalk system (for instance, the default configuration of Webside for Pharo at the moment of writing this documentation is http://{hostname}:9001/pharo)

#### Demo

There is an online version available [here](https://ide.webside.app). As mentioned above, it will prompt the URL where a Smalltalk system is listening. You can setup and launch Webside in Pharo as described in [Pharo-Webside](https://github.com/guillermoamaral/Pharo-Webside).

Also, here are some talks I gave about this project:

* [ESUG 2024](https://youtu.be/OGQYdKu4kvI?si=EGNSW0FINCKA6s7B)
* [ESUG 2022](https://youtu.be/Q4gmWTTFoww)
* [FAST 2021](https://www.youtube.com/live/tM4mcTtajGQ?feature=share)

#### License

Distributed under the MIT License. See `LICENSE` for more information.

#### Contact

Guille Amaral - guillermoamaral@gmail.com

Project Link: [https://github.com/guillermoamaral/Webside](https://github.com/guillermoamaral/Webside)
