An App For The Bookworms

Blog post cover image

I built a web app as a fun side project in order to experiment and try out a new web framework called Fresh. The full tech stack includes:

The web app allows you to search for books and find information about them, such as the author, publisher, number of pages, etc. This is done with the aid of the Google Books API.

If you create a profile, you can keep a record of books you have read, as well as books you wish to read.

The Fresh framework offers a very good developer experience. Some of the major features offered by the framework include the concept of “Islands architecture”, and zero JavaScript runtime shipped by default, which provided me with a new perspective on web performance and architecture. It makes you as a developer mindful of what you want to ship as interactive to the browser, by making you explicitly separate interactive components (Done using an islands directory) from static components/pages.

Fresh is suited for particular use cases and is still a young framework, so do be mindful of this before selecting to use it. The framework is better suited for more static content use cases like blogs, rather than apps with high interactivity, this is because the framework builds multi-page apps (Server-rendered), and as mentioned, ships zero JavaScript to the browser by default.

This book app actually has a fair amount of interactivity with the search, save, delete, etc. functionality, and so the Fresh framework in hindsight was not the best framework to use for the project. In this case that doesn’t matter because the goals of the project were learning and enjoyment.

Deno and Deno Deploy were also very enjoyable to use. There were no major issues with regard to workflow and deployment config, as this is mostly taken care of for you. The deploy speeds were also a highlight, being around 10 seconds for an edge deployment.

The biggest takeaway is that I feel that the idea of “Interactive islands” i.e. Only shipping JavaScript for areas that need it, is a clever approach to web applications. I think the popularity of this thinking will increase, and evidence of this is already seen with other frameworks such as Next.js, which uses a “use client” tag to mark components as client/interactive.

These innovations and new ways of thinking are exciting and will continue to push the web platform further.

Posted: October 15, 2023 (402 days ago)

Updated: September 8, 2024 (73 days ago)