Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/keynmol/scalajs-talk-at-imperial
Presentation about frontend development with Scala.js Originally made for students at Imperial College London
https://github.com/keynmol/scalajs-talk-at-imperial
Last synced: 2 months ago
JSON representation
Presentation about frontend development with Scala.js Originally made for students at Imperial College London
- Host: GitHub
- URL: https://github.com/keynmol/scalajs-talk-at-imperial
- Owner: keynmol
- Created: 2024-05-15T15:25:03.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-21T14:26:36.000Z (8 months ago)
- Last Synced: 2024-10-24T11:47:33.183Z (2 months ago)
- Language: Scala
- Homepage: https://scalajs-talk-at-imperial.fly.dev/
- Size: 5.21 MB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Scala.js application
- [Scala.js application](#scalajs-application)
- [V1](#v1)
- [V2](#v2)
- [V3](#v3)
This is a simple Scala.js application that I created as supporting material
for a presentation at [Imperial College London](https://www.imperial.ac.uk/).
Main purpose of presentation was introducing Scala.js and Laminar (see below), showcasing interop features with JavaScript libraries and briefly touching upon packaging and deployment. Final version of an application uses browser storage for data, but has a JVM backend that invokes OpenAI API to generate titles from descriptions.
[**Live version**](https://scalajs-talk-at-imperial.fly.dev/) | [**Slides**](./Scala.js_At_Imperial.pdf)
The final app is built on these languages, technologies, and frameworks:
- Scala parts:
- [Scala 3](https://scala-lang.org), specifically Scala 3.4.2
- [Scala.js](https://www.scala-js.org)
- [Scala CLI](https://scala-cli.virtuslab.org/)
- Libraries: [Laminar](https://laminar.dev/) (main UI library), [Upickle](https://com-lihaoyi.github.io/upickle/) for JSON, [Cask](https://com-lihaoyi.github.io/cask/) for HTTP server (**v3** only), [STTP OpenAI](https://github.com/softwaremill/sttp-openai) for OpenAI API access (**v3** only)
- Frontend tooling
- [Vite](https://vitejs.dev/) for bundling and live reload
- [TailwindCSS](https://tailwindcss.com/) for styling
- [ECharts](https://echarts.apache.org/en/index.html) (from **v2**) for chart visualisation
- Deployment
- [Fly.io](https://fly.io/) hosting provider
- [Docker](https://docs.docker.com/build/building/multi-stage/) for packaging
The authors behind those tools and libraries walked so I could at least crawl, I'm deeply grateful.
## V1
[Code](https://github.com/keynmol/scalajs-talk-at-imperial/commit/5463474bc81b8b849375fed1ffb89437c0c16672)
This version only has the basic frontend functionality, and is a pure Scala.js frontend. The Dockerfile that deploys it just creates a container that serves static content build by Vite.
## V2
[Code](https://github.com/keynmol/scalajs-talk-at-imperial/commit/46d5b1b5c6b6325fd34c99bd9cbb01dddff74991)
This version is same as V1, but adds an integration with Apache ECharts – a library for charts and plotting. It's a good example to showcase very basic interop with JS libraries. Deployment is the same as V1 – it's still a frontend-only application.
## V3
[Code](https://github.com/keynmol/scalajs-talk-at-imperial/commit/c25a7bfa563fab0902c44a905c9da04c85903efe) | [**Live version**](https://scalajs-talk-at-imperial.fly.dev/)
The most involved version, builds upon V2 and adds a JVM backend (using Cask) which exposes an endpoint that generates a title for a description using OpenAI API. The app is packaged as a self-contained JAR file, which serves Vite's bundle and exposes the API at the same time.
