7-GUIs - Svelte
This project was an opportunity for me to kick the tires on Svelte 5, coming from v4. I love this classic challenge and set of varied front-end problems to solve, as it covers a lot of ground. It's my standard when learning a new framework.
Project Details
Technologies
Categories
Links
The Challenge
Complete the 7GUIs challenge using Svelte 5's new Runes and APIs. The project was a way for me to learn the new APIs and patterns coming from a Svelte 4 background.
Technology Used
- Svelte 5
- SvelteKit
- TailwindCSS
Features
The Project is entirely client side, although SvelteKit is server rendering some pieces (I am not forcing client side execution), but as this was primarily to test out Svelte 5, that was my focus. Each challenge as outlined in the brief linked above, gives guidelines for how each UI should function (statements from the page linked above).
- Counter: Challenge: Understanding the basic ideas of a language/toolkit.
- Temperature Converter: Challenges: bidirectional data flow, user-provided text input.
- Flight Booker: Challenge: Constraints.
- Timer: Challenges: concurrency, competing user/signal interactions, responsiveness.
- CRUD: Challenges: separating the domain and presentation logic, managing mutation, building a non-trivial layout.
- Circle Drawer: Challenges: undo/redo, custom drawing, dialog control.
- Cells: Challenges: change propagation, widget customization, implementing a more authentic/involved GUI application.
Development Process
For these tasks I was focused on learning the new Runes patterns, so I started with the docs! The Svelte 5 migration guide was also useful. I created a based layout using tailwind, and each challenge is primarily a single component. See the source for more details.
Challenges and Solutions
The most challenging tasks were Cells and Circle Drawer. I haven't had much opportunity to work with Canvas API, so that was a learning experience in and of itself. There are some improvements I'd like to make to Undo, as it's currently destructive (just erases in a circle of the same diameter and position as the last circles in sequence). Cells was a bit of a data structure challenge, solved by creative use of multi-dimensional arrays.
Result
I've recorded a short demo video, or feel free to head over to the projects URL above. Source code is also linked. I had a great time, and Svelte 5 is my primary frame work for any new projects as a result of my experience in this challenge.