For this winter lockdown season I took some time to learn Rust and to pack it up with WASM, Tailwind and Svelte. The big absent tech here is TypeScript, but there is already a lot to unpack.
This post is about the experience of building the CostOf.Life project from scratch using the tech stack in the title (the sources for everything is provided in the project website).
CostOf.Life is a command line client and a web interface to model your personal finance over time by giving it a daily cost perspective.
Number #1: Rust
I have been exposed to rust for a couple of years by now, working alongside John and making a few (unsuccessful) tries to start a project myself.
Finally I made the step to read the rust book and boy was it worth it. I mean, Rust is the Dark Soul of modern programming languages, not because it is intrinsically difficult, but because how unforgiving the compiler is.
Turns out that I have now joined the chorus of the ones singing Rust praises: once you get the theoretical basis it is a joy to work with it and you start to really appreciate the compiler (and especially its suggestions); plus you get a memory safe language with no garbage collection1!
Number #2: WebAssembly (Wasm)
This was a big one also driving the choice of using Rust in the first place, Rust is one of the language that has embraced WebAssembly the most (just search Wasm in GitHub) plus the tools to work with Rust+Wasm are just amazing.
Parity has done a lot of work with Rust+Wasm, Cosmos smart contracts are are written in Rust+Wasm, and a quick search for npmjs shows that it's very popular with crypto stuff commonly used in blockchain tech (fyi I work with Ape Unit a blockchain consulting agency in Berlin).
So what about it? The current most popular usage of Wasm (end of 2020) seems to be for malicious purposes. As I see it, for 99% of use cases for common web purposes Wasm is just not necessary, plus it's not so easily integrated (see point #4) so for the moment I am skeptic about adoption beside the crypto nice.
Number #3: Tailwind
As I mentioned there is a web interface for the subject project. I am definitely not a visual person, I cannot put together a website to save my life!
But then Enrico (that does that for a living), recommended to drop any fancy idea and just stick with tailwindcss and I have never looked back (it is that great).
Number #4: Svelte
If you are an adult in 2020 chances are that you know about Game of Thrones and web frameworks are like characters in the serie, there are many but few survive.
So we still have Angular for some reason I don't know, then React, the current king (Joffrey I guess ¯_(ツ)_/¯) and what you must choose when outsourcing, Vue the underdog and Svelte the snobby one.
I end up choosing Svelte: it is my first experience with any web frameworks and I must say that I have enjoyed very much working with Svelte + Tailwind + Rollup, but again, I am very novice in the field so not very relevant.
Putting all together
Building rust command line client, the rust library and building + testing + publishing the wasm npm package was a breeze. Fantastic tooling, super easy and straightforward.
Building the web app with Svelte + Tailwindcss also quite easy, the project is not very simple but anyway a nice de experience.
And now the ugly: I could not manage to actually use the published wasm package with Svelte.
There are some issues with rollup/webpack and wasm that I could not overcome.
But worthwhile are:
- Rust+Wasm lib: https://github.com/noandrea/costoflife-rs
- Wasm testing: 1, 2
- Rollup+Tailwind: https://github.com/noandrea/costoflife.ui/tree/master
And of course, the CostOf.Life project.
I am sure in the following months the issues that prevent this experiment to be successful will be resolved, I would love to contribute to that but my knowledge in the field is not enough, but if you can and have the will, I would be thrilled to know your opinion on the matter!
-
I come from a Java background and I work mostly in Golang ↩
Top comments (3)
Hey there! I see that your post is 1 year old, but I'm very much interested in getting Svelte and WASM to work together. Was your webpack problem the same as mine, in that the Svelte webpack version is 5.x.x which does not support WASM by default? If so, have you tried finding compatible dependency configs that work? I'm about to go down that road and just wanted to know if it's worth giving it a shot or I'm just wasting my time
TBH I have not tried since then to make it work, I may try again sometime soon but no promises
I decided to try it in the meantime all the same. After some trial and error, managed to get it to work. Managed to pack it in Electron+Vite too! I recommend Vite over Webpack, Vite has a plugin for wasm that is relatively pain free!