Lit, Web Components & TailwindCSS (Day 5) - Creating a SaaS Startup in 30 Days

While digging around for what tech-stack to use for the frontend, I stumbled upon Lit. Lit is a web components library with a minimal footprint just under 6kb, specifically designed to simplify your workflow as it has almost a 0 learning curve.

I am not going to argue whether it is better than React or any other frontend library, but I am going to confidently explain all the reasons I decided to go with it.

Easy Setup

I have chosen Vite as my go-to hero, and with a simple command, I get a Lit project up and running. When I say Lit project, I mean just some vanilla JS; it does not differ that much from writing regular JavaScript.

pnpm create vite my-vue-app --template vue

In order for you to understand just have a look at my project dependencies. As you can see I only need one package installed. This was a game-changer for me because I was tired of spending time setting up my development environment and having to install 10 packages to just have my project running.

  "dependencies": {
    "lit": "^3.1.2"
  }

JSX

Web Components don't use JSX; you just write old-fashioned vanilla HTML and use default ECMAScript features like Template literals. I never understood why we need to abstract basic things like HTML.

One more reason Web Components are so powerful is that Javascript is trash in general, so the less Javascript you use, the better for you. When I say trash, I don't mean the language but the fact that the JS ecosystem is completely bloated with useless abstractions and packages you don't really need.

    render() {
        return html`
          <button class="bg-gray-950 text-white capitalize py-3 px-7 rounded-lg flex gap-2 text-sm items-center">
            ${this.startText} <span class="block border-2 border-amber-500 font-bold w-6 h-6 rounded-md">${this.key}</span> ${this.endText}
          </button>
        `
    }

Powerful

Lit can be powerful as well. If you need global state management with lit-element-state you can have just than. Also lifecycle methods exist just like react for element mount or update etc.

You should have a look at the Lit docs the are super-simple to understand.

Classes

Some might consider this a downside, but it isn't. Almost every developer uses classes on the backend, and if you want to apply functionality on the front, it is not a bad choice to use them, and you shouldn't be afraid of them at all.

Here is a custom button element. It is simple to understand and reusable.

Javascript is an OOP language; wanting to make it functional by adding 100 abstractions to our code doesn't make it better. It adds a learning curve, makes it harder to maintain, and harder to update.

import {LitElement, html, css, unsafeCSS} from 'lit'
import styles from '../index.css?inline'

export class CtoButton extends LitElement {
    static styles = css`${unsafeCSS(styles)}`;
    static properties = {
        startText: { type: String },
        endText: { type: String },
        key: { type: String },
    }

    constructor() {
        super()
        this.startText = 'PRESS'
        this.endText = 'TO GET YOURS'
        this.key = 'A'
    }

    render() {
        return html`
          <button class="bg-gray-950 text-white capitalize py-3 px-7 rounded-lg flex gap-2 text-sm items-center">
            ${this.startText} <span class="block border-2 border-amber-500 font-bold w-6 h-6 rounded-md">${this.key}</span> ${this.endText}
          </button>
        `
    }


}

customElements.define('cto-button', CtoButton)

Future Proof

Next.js just released App Router; it completely changes the way routing works. Now, when you search for docs, you find something that works with Page Router, but with App Router, it breaks.

That gives web components a powerful advantage; you don't have to worry about any big update that is going to complicate the way you work even more.

Web Components are native web features that are robust and stable, and they are going to stay like that.

Should you use them for your project ?

A few years ago, you could argue that web components had problems with SEO, performance, or browser compatibility, but this is a thing of the past. Google and Bing can crawl your website just fine, and their bots can run JavaScript as well.

For the 0.01% that uses Windows XP in 2024, I don't want you to use my website anyway.

Moving away from React, Next.js, or Vue for simple applications should be a no-brainer. Writing pure code with no learning curve at all allows us to utilize JavaScript and HTML's full features. I think that JavaScript, in the long run, should become a single entity that developers use only to create frontend applications, and with web components, it is heading that way.

So YES, if you want an answer use them for your next project and don't loose yourself on the framework chaos.

Final Words

In conclusion, embracing Lit and Web Components for your SaaS startup offers a streamlined, efficient approach to building your frontend. By leveraging these tools, you minimize dependency overhead and focus on pure, robust web development practices.

This choice not only simplifies the development process but also ensures your application remains lightweight and future-proof.

Thanks for reading, and I hope you found this article helpful. If you have any questions, feel free to email me at kourouklis@pm.me, and I will respond.

You can also keep up with my latest updates by checking out my X here: x.com/sotergreco