It was the opportunity for me to continue my Rust learning journey, and I think I’m finally starting to feel a bit comfortable with the language, especially ownership :). I also wanted to discover what was possible when using Rust for frontend development, and I must say I was so impressed by Yew! I didn’t think it would be so nice to use, especially since I have quite some experience with React.
A big difference compared to the various implementations you can find (often in Rust and Yew tutorials) is that the grid is infinite. This means that you can drag it to move in all directions, but also zoom in and out. This was probably the most challenging part of my project and involved a lot of calculus and doodles in my notebook! Also, since I used a canvas to draw the grid (and not DOM elements), the simulation is pretty fast even when a lot of cells are displayed :D
What I learned during this project:
- Use Yew [1] for frontend development: not very different from writing React components, with the advantages of Rust as a plus!
- Serialize/deserialize data: the available Game of Life patterns are extracted from the official Lexicon [2]; I parsed the text version to generate a serialized version (separate library: [3]) that I then import and deserialize in the app.
- Build the web app using GitHub actions and deploy it using Netlify: pretty straightforward using Trunk [4] as a bundler (also used for development).
You can find the source code of the app on GitHub [5]. Please tell me what you think of it! ;)
[1] https://yew.rs/ [2] https://bitstorm.org/gameoflife/lexicon/ [3] https://github.com/scastiel/lexicon-rs [4] https://trunkrs.dev/ [5] https://github.com/scastiel/lifeee-rs