*this post is the 4th of a 4 part series of posts exploring Supabase, Vercel & Svelte. This post goes deeper into Svelte (and its application framework SvelteKit)
Part 1: Intro
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte
In a previous post, I explored why a trio of technologies—Supabase, Vercel, and Svelte (along with its framework, SvelteKit)—constitute my ideal tech stack presently.
This time, I’m turning the spotlight on Svelte and SvelteKit. Both have rekindled my passion for front-end development, presenting a fresh perspective on building interactive web applications.
The Pursuit of Developer Happiness
I’ve considered myself to be a “full stack developer” for a long time, but the front-end web development part of the stack was always my “weak” area. I always neglected this part of my arsenal because it didn’t bring me joy. Doing “more with less” is the mantra that brings happiness to my work, and web development, up until recently, just seemed to get in the way of my productivity.
Recently, I’ve fallen back in love with front-end development due to Svelte (and SvelteKit).
It Should’nt be this Difficult
Over the years I’ve seen websites and apps become more complicated.
I’ve gone through several iterations of JavaScript frameworks, tools and libraries to catch up with this complexity. Over these iterations, unfortunately, the developer experience (DX) has not significantly improved and has become arguably worse.
The situation is exacerbated by the need to support an ever-growing array of devices and screen sizes, requiring responsive and adaptive design techniques.
User expectations for rich, app-like experiences have soared, demanding more sophisticated front-end and back-end logic, including real-time interactions and improved performance.
Additionally, the importance of SEO, accessibility, and security has led to yet further layers of complexity.
Lastly, development workflows have become more intricate. Developers need to be aware of CI/CD pipelines, cloud-based services, and the necessity for cross-disciplinary skills spanning design, development, and deployment.
All these factors have contributed to a landscape where web development demands a broader, more sophisticated skill set.
Developers need to constantly have a deeper understanding of a rapidly changing technology ecosystem.
Using an “opinionated” application framework has helped me to manage these complexities and increase my productivity.
For complex web apps, vanilla JavaScript is arguably always an option. However, I can imagine being highly frustrated by the verbosity of the resulting code. To reduce the amount of code, I could imagine ending up writing a pseudo framework to abstract most of the verbosity. For those who dare, I salute you. But I’d personally rather skip straight to using a battle-tested framework to reduce code complexity.
However, not all frameworks are created equal.
For me, an ideal framework is one that can do more with less code without compromising on flexibility and speed. A great developer experience is also a must to maximize developer productivity.
In Svelte, and its application framework SvelteKit, I feel that I’ve got a great mix.
My Svelte Discovery: From Experimentation to Production
My adventure with Svelte began as a weekend experiment.
After liking a recent foray into using VueJS, I was curious to explore a framework that compiled down to vanilla JS but promised a declarative coding experience.
The initial trial was for a small project aimed at enhancing a local community initiative. The objective was straightforward: deliver an engaging, performant web experience with minimal overhead for both the developers and the end-users.
To my delight, the project was not only a success in terms of its community impact but also a revelation in web development efficiency and simplicity.
Svelte, coupled with SvelteKit for seamless full-stack integration, transformed how I now approach front-end development, leading me to adopt it for several subsequent production projects.
Workflow Integration and Development Joy
Svelte’s integration into the developer workflow is seamless.
Its component-based architecture—enhanced by reactivity and compile-time optimizations—fits perfectly with modern development practices.
Furthermore, SvelteKit enriches this experience by offering a convention-over-configuration approach to building applications, from static sites to SEO-friendly SSR (Server-Side Rendered) applications and everything in between.
This framework has a unique proposition: write less code, without losing expressiveness or functionality.
For a developer who values both productivity and performance, Svelte’s proposition is incredibly appealing.
Unified App and API Development
A pivotal moment for me was utilizing SvelteKit’s ability to cohesively handle application logic, SSR, and backend APIs within the same project repository.
SvelteKit’s file-based routing and server-side capabilities mean that an application’s front end and its backend API can live side by side. This co-location streamlines the development process, especially for small teams or projects where agility and speed are paramount.
Performance Outsourced
SvelteKit, the application framework built on top of Svelte, offers several performance advantages over other JavaScript frameworks. These advantages can make it an attractive choice for developers focused on building highly efficient and fast web applications.
Here are some of the notable performance benefits:
- Compilation Step: Unlike frameworks that rely heavily on runtime interpretation (like React or Vue), Svelte moves much of the work to compile time. This means Svelte compiles components into highly optimized vanilla JavaScript at build time, reducing the need for a heavy runtime library. As a result, the final code shipped to the browser is leaner and faster to execute.
- Less Boilerplate Code: Svelte’s design philosophy emphasizes simplicity and minimalism, resulting in less boilerplate code. This not only makes development faster but also leads to smaller bundle sizes, which directly impacts load times and performance.
- Built-in Page Routing and SSR: SvelteKit comes with built-in support for page routing and server-side rendering (SSR). SRR can significantly improve the performance of web applications. SSR ensures that pages are rendered quickly on the server, reducing the initial load time. Client-side routing allows for seamless navigation without reloading the page. All this helps to create a smoother user experience.
- Efficient Reactivity Model: Svelte’s reactivity model is designed to be very efficient. It updates the DOM directly when the state changes, without the need for a virtual DOM diffing algorithm. This results in faster updates and interactions, as there is less computational overhead involved in making UI changes.
- Integrated Tooling: SvelteKit offers an integrated development environment. With features like hot module reloading, development time is sped up and optimizations are easier to implement.
These advantages make SvelteKit an appealing option for developers prioritising performance and efficiency in their web projects. However, the best choice of framework also depends on specific project requirements, existing developer skill sets, and other factors.
However, for myself, working with small team greenfield startups, the choice has been simple.
Embracing Svelte: A Testament to Developer-Focused Design
In conclusion, my journey with Svelte and SvelteKit has been nothing short of transformative.
These tools have not only simplified the development process and codebase size. Using Svelte has also resulted in superior end-user experiences—fast, engaging, and accessible web applications.
For developers and teams navigating the complexities of modern web development, looking for a balance between productivity, performance, and user experience, Svelte and SvelteKit offer a compelling, developer-friendly pathway.
*this post is the 4th of a 4 part series of posts exploring Supabase, Vercel & Svelte.