|> playground-elm

My playground I use for playing with fancy and exciting technologies. This one's for elm.

🎯 Purpose

The purpose of this playground is to explore, study and assess the elm language — a delightful language for reliable webapps.

The showcases are intended to be:

• simple: Fairly simple and understandable. Every showcase is implemented in a single elm file.
• exploratory:
  • Highlight some aspects of the elm language, like immutability, reactiveness, performance and interoperability with other JS libraries and CSS frameworks.
  • Explore some architectural/design patterns around reactive static/serverless SPA
• playable: As much as possible, provides a useful and enjoyable content.

🍿 Showcases

Visit the 🔹 demo site and play in your browser.

The demo is a pure SPA (100% clientside application) written in elm.

List of showcases:

• asteroids: A simple Asteroids clone in Elm using the ECS pattern and SVG for rendering.
• term: A terminal which evaluates JavaScript code using elm ports.
• physics-engine: Very simple physics engine using Verlet Integration algorithm and rendered through an HTML5 canvas.
• maze: A maze generator using a recursive backtracking algorithm.
• digital-clock: A demo rendering a digital clock in SVG.
• lissajous: Animated Lissajous figures in SVG
• calc: A very simple and basic calculator.

🛠 Building and Running

Elm 0.19

Elm 0.19 broke me as many other coders, due to a lot of changes on topics I used in this project with previous version:

• elm.json file
• JSON decoding
• String / Int / Float conversions
• Browser application, routing
• Url management
• date time (Posix, Zone)
• lots of incompatible packages
• ...

I finally managed to migrate to this new version but instabilities can be noticed though.

Prerequisites

Be sure to have the following properly installed:

• Node.js v18.17 (hydrogen)
• pnpm v8.3

Build

The project now relies on parceljs, a web application bundler which handles elm builds at free.

At first, all the node packages this project depends on must be installed locally. This can be done with the following command:

pnpm install

The build can be launched with:

pnpm build

Then, open ./dist/index.html file in your browser.

If you prefer, the site can be published by a local HTTP server. In this mode, if any change is detected, the build of the project will be started again, and the site automatically updated in the browser; which is nice during the development phases.

The publication is launched with the following command:

pnpm serve

The site is accessible through the "/ endpoint.

🔋 Technologies

• elm: ELM

  With the following (main and non exhaustive) packages:

  • Chadtech/elm-vector
  • avh4/elm-color
  • cuducos/elm-format-number
  • elm-explorations/markdown
  • simonh1000/elm-colorpicker
  • joakin/elm-canvas
  • wsowens/term
  • MacCASOutreach/graphicsvg
  • harmboschloo/elm-ecs
  • BrianHicks/elm-particle

• parceljs: Web application bundler

• bulma: The modern CSS framework

📜 License

MIT © Chris Camel