I set out to learn hands-on about some of the hot topics of modern web development. I decided to try out one of the popular JS frameworks, to see what the fuzz is all about. I had heard about serverless functions so I wanted to explore that as well. Being a documentarian, whatever I created had to be about docs in one way or another. I ended up creating a listing app for open source doc generators. In this post I share my experiences and learnings from this project.
OK, a couple disclaimers to start with: I am not a developer. I’ve dabbled with various scripting languages for a long time, but I couldn’t good code if my life depended on it. I just enjoy exploring new tech and learning new things! 😄
Another disclaimer regarding the data set. I populated the data about the various doc tools for this application manually, based on my own testing and what I could gather from the documentation for these projects. If you find any issue with the data, please reach out and I’ll make sure it gets fixed.
I have published a demo of the result I ended up with at docstack.netlify.app
The source code is available here: github.com/dvdksn/docstack
The stack I used to create this consists of:
For the kind of site/app I created, using serverless functions and database backend is 100% unnecessary and bloat. I used it here simply as a learning exercise.
I ended up picking Svelte as my JS framework, and more specifically the bleeding-edge meta-framework, SvelteKit. I had no real experience with any JS framework prior, I had only run through a couple of tutorials with React and Vue. I opted for Svelte because, as a beginner, it was super-intuitive and fun to use. The documentation and interactive tutorial is also amazing.
There’s no documentation for SvelteKit yet at this point, which made it somewhat more difficult. But with the existing Svelte docs, plus some helpful blog posts, it was easy enough to figure out how to piece it together.
Using TypeScript wasn’t actually an objective for my project at the outset. But as I was setting up, I thought I might as well give it a try, since it is getting so much praise. To be honest, like a lot of people I was skeptical initially. On the face of it, it seemed like it would add overhead that I didn’t really need.
Serverless functions allow you to run server-side code, in my case reading from a database, without having to set up, pay for, and manage a dedicated server. I like to think of it like at tiny, single-purpose server that only runs on-demand, when you need it to.
I started out setting this up on Vercel. From reading the docs, the Vercel workflow seemed easier to get up and running. But just as I was getting started with Vercel, Netlify announced improvements to their serverless workflow. As I’m already a Netlify user and I was looking for ways to integrate their Forms feature, I moved the project over to Netlify.
Vercel and Netlify both use AWS Lambda under the hood, which is by far the most popular serverless provider. From the little testing I’ve done in this project, serverless development is very straight-forward, and it’s supposedly great for scalability as well. Looking forward to trying it out more in the future.
Creating this project was a lot of fun, and it introduced me to all of the above concepts in a nice way. While I only scratched the surface of things like TypeScript and serverless, I look forward to delving into it more in the future.
Next up for the docstack site itself, I was planning to add integration with Netlify forms, to allow user submissions of new items. I should probably do something about data validation as well. On the front-end, I’m thinking of adding Tailwind for a chance to try that out, and to make it look nicer.
I used Mongo as the database for this project, I kind of regret not going fully open source. I might swap it out in favor of something like postgres at some point, maybe coupled with a graphql API. (More learning opportunities!)