Rust + Wasm + Tailwind + Svelte
Tags: rust, webassembly, svelte, tailwindcss
Published: 2021-01-03 20:49:05


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](https://thecostof.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](https://twitter.com/jsnewby) and making a few (unsuccessful) tries to start a project myself.

Finally I made the step to read the [rust book](https://doc.rust-lang.org/book/) and boy was it worth it. I mean, Rust is the [Dark Soul](https://en.wikipedia.org/wiki/Dark_Souls) 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 collection[^background]!

## 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](https://github.com/search?q=wasm)) plus the [tools](https://github.com/rustwasm/wasm-pack) to work with Rust+Wasm are just amazing. 

[Parity](https://github.com/paritytech) has done a lot of work with Rust+Wasm, [Cosmos](https://cosmos.network/) [smart contracts](https://github.com/CosmWasm/cosmwasm) are are written in Rust+Wasm, and a quick search for [npmjs](https://www.npmjs.com/search?q=wasm) shows that it's very popular with crypto stuff commonly used in blockchain tech   (fyi I work with [Ape Unit](https://apeunit.com) 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](https://www.infoq.com/news/2019/10/WebAssembly-wasm-malicious-usage/). 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](https://thecostof.life) for the subject project. I am definitely not a visual person, I cannot put together a website to save my life! 

But then [Enrico](https://twitter.com/ricricucit) (that does that for a living), recommended to drop any fancy idea and just stick with [tailwindcss](https://tailwindcss.com/) 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](https://en.wikipedia.org/wiki/Game_of_Thrones) and web frameworks are like characters in the serie, there are many but few survive. 

So we still have [Angular](https://angular.io/) for some reason I don't know, then [React](https://reactjs.org/), the current king ([Joffrey](https://gameofthrones.fandom.com/wiki/Joffrey_Baratheon) I guess ¯\_(ツ)_/¯) and what you **must** choose when outsourcing, [Vue](https://vuejs.org/) the underdog and [Svelte](https://svelte.dev/) 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](https://github.com/rustwasm), 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](https://www.npmjs.com/package/costoflife) with Svelte. 

There are some [issues](https://github.com/noandrea/costoflife.ui/issues/1) 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](https://github.com/noandrea/costoflife-rs/blob/f64d73e1618d1862f7fb96ea8c82c58398bfa8b4/src/lib.rs#L479), [2](https://github.com/noandrea/costoflife-rs/blob/f64d73e1618d1862f7fb96ea8c82c58398bfa8b4/Makefile#L47)
- Rollup+Tailwind: https://github.com/noandrea/costoflife.ui/tree/master

And of course, the [CostOf.Life](https://thecostof.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!


[^background]: I come from a Java background and I work mostly in Golang