This article describes my side-project which you can use here: https://poker.danieleisenhardt.nl/ If you want to try the experience of multiple users by yourself, use multiple browsers.
A little over a year ago my colleagues and I used an online tool for our refinement meetings. For those who don’t know: a unit of work is discussed, and everyone chooses a number that describes how complex they think the work is going to be. Unless everyone chose the same number you discuss why your estimations are different and try to reach a consensus. The tool would let everyone pick a number, but only reveal the numbers after everyone has made their pick. This prevents you from being influenced by other people’s picks. The only problem was the project manager sharing their screen during those (online) meetings did not use an ad-blocker.
So a colleague and I considered building our own tool without ads. It seemed like a good opportunity to build a SvelteKit project on Firebase and learn more about both technologies, but we never got around to it.
Now, a year later, I am working in a different team at a different company. Here we do not use an online tool, because it is considered to be too much of a hassle. Instead we have an online meeting where everyone posts their estimated number in the chat. This leads to the rather obvious downside that everyone is tempted to copy the number of the most experienced team member. This got to a point where the person facilitating the meetings has to ask those team members to give their estimation last.
This time I decided to build it by myself. It took me about 30 hours during evenings and weekends, but it’s done. No more distracting ads via screen-share, no more estimating in a chat window. And I learned some things about SvelteKit, Firebase and Firestore in the process.
Why SvelteKit? Link to heading
My prior javascript experience was mostly with Angular. I still like Angular, but it does introduce a lot of complexity to a project. I tried React in the past, but decided it is not something I could ever use for fun.
During the time leading up to this a year ago I first found out about SvelteKit from a Fireship video on Youtube and listened to an interview with its creator Rich Harris on ThePrimeTime. It seemed like an interesting framework and a good fit for this project. Both my colleague and I were interested in getting some practical experience with it.
Why Firebase? Link to heading
Firebase, and especially Firestore is the perfect match for this project. It has a javascript SDK and allows reading directly from the Firestore database from the browser without writing your own server-side code for it. (And without paying for the execution of that server-side code.) This may seem like a security risk but access management is handled by configuration. The best part is the onSnapShot() function which lets you subscribe to a document and runs your callback function whenever the document changes.
Firebase also offers a good authentication system out of the box. It has an anonymous login feature which ensures the application knows which requests are made by the same user, but without knowing anything about the user. This way users can immediately use my tool without having to create an account and providing personal details.
Probably the most important reason is that I was already familiar with Firebase. My preferred setup for new projects is to combine something I already know with something new. This way I am on the edge of my comfort zone, between the boundaries of bored and overwhelmed. Which is the place where I learn the most.
How do SvelteKit and Firebase combine? Link to heading
I set up my Firebase project with the experimental adapter for web frameworks. SvelteKit is not officially supported but it works fine. If this is something you want to try yourself I recommend these instructions: https://gist.github.com/coehne/caf0b3934455d842dfbfe1f4c1544348 Thanks Christian Oehne, you saved me hours of research there.
Firebase will automatically create a firebase function for server side rendering and name it something-something-ssr. This function will execute any server-side SvelteKit code you write as well as pre-render pages. Any frontend assets and code are served by static hosting, which is cost effective. This means you can write SvelteKit code and forget about the details of infrastructure.
I opted to disable pre-rendering pages by adding export const ssr = false; to my layout.ts file. Initial load is not a concern for my use-case, but cost is as I am not running ads. However, that’s me and my choices. Every project is unique and you should do what works for you.
Both the Firebase Javascript SDK for frontend and the Firebase Admin SDK for backend worked fine within the SvelteKit code and did not require much tinkering to set up.
How much time does this take? Link to heading
About 30 hours. I logged my time during the project and spent 28 hours and 36 minutes of deep work on it. This does not include taking breaks to get a cup of tea or thinking about it in the shower.
If I were to do a project of similar complexity with the same technology I think I could do it in under 20 hours. There are still things to learn and things to improve, but I got a much better grasp of SvelteKiSvelteKit by now and I learned some things about using Firestore from the frontend as well.
If this were the stack I used every day for a year on a full-time basis I might get it under 10 hours, but I don’t think it would go much further than that. Even simple projects like this one take time to think through architecture and interface design which can not be reduced by knowing your tools better.
Conclusion Link to heading
This is good tech.
Svelte allowed me to get a project started quickly, because it didn’t get in my way with too much configuration. It has an easy to understand syntax and file structure where what you see is what you get.
The firebase web SDK lets me get live updates on a document, without which this project would have required me to set up and maintain a server to host web-sockets. Combined with the low cost of firebase infrastructure which is operated as a service. (if you click a button one million times google will bill me $0.40)
I believe that the svelte server side rendering functionality could increase the amount of code execution on Firebase which would be less of a problem if I had built a statically hosted application in Angular, using firebase function only for write operations. If this project ever scales to the point that Google sends me a big bill for platform usage I will consider rebuilding it in Angular to see if that makes a difference, but for now I am happy with the result.