Skip to content
Sandro Maglione

NewsletterIssue #232 min read

Architecture and libraries to implement a web app

This is how I implement a web app: local first and PWA (progressive web apps) as architecture, and libraries like effect, XState, tailwindcss to implement the core of the app, state management, and styling.

Contents
  1. Note: Be willing to experiment
  2. Architecture: going local
  3. Local first libraries
  4. PWA is easy (and awesome)
  5. Libraries: few greats

I am always on the lookout for new releases 👀

On the web even just a few months are enough for your stack to become outdated 💁🏼‍♂️

Some recent examples:

What about app architecture? My picks:

  • Local first
  • PWA (Progressive Web Apps)

This is how it all looks like in practice 👇

Note: Be willing to experiment

My tech stack at every single point in time seemed perfect. Until I took the time to try some new option 💁🏼‍♂️

Software development (and web especially) keeps evolving, it's crucial as a developer to be always on the lookout for new (better) technologies 💡

This practice for me comes in the form of small just-to-learn projects:

I have a folder called "learning" where I build small interesting projects to experiment with new technologies
I have a folder called "learning" where I build small interesting projects to experiment with new technologies

Architecture: going local

I create web apps to be as local as possible:

  • Local storage (with possibly periodic syncs with a remote database)
  • Working offline
  • Both web and mobile (PWA)

This architecture is called local-first: the app lives on the user device, and information are shared online to enable collaboration between devices

Local first libraries

Here are some libraries on my TODO list:

PWA is easy (and awesome)

I recently created an app using vite and preact.

Adding PWA support was as easy as installing a new package (vite-plugin-pwa) and adding some icons:

vite.config.ts

import preact from "@preact/preset-vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [
    preact(),
    tailwindcss(),
    VitePWA({
      registerType: "autoUpdate",
      includeAssets: [
        "favicon.ico",
        "icon.png",
        "icon192x192.png",
        "apple-touch-icon.png",
        "favicon.svg",
      ],
      manifest: {
        name: "...",
        short_name: "...",
        description: "...",
        theme_color: "#ffffff",
        icons: [
          {
            src: "icon192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "icon.png",
            sizes: "512x512",
            type: "image/png",
          },
        ],
      },
    }),
  ],
});

PWA is great:

  • Completely bypass any hassle with App Store or Play Store
  • Live updates for users without installing a new version
  • Smaller apps
  • It looks and works "just like" a native mobile app

Libraries: few greats

Any web app I build now has effect installed (together with @effect/schema, and sometimes @effect/platform).

State management for me comes in the form of either useState or full on XState.

I went into full details on how I use Effect + XState

Styling for me is all with TailwindCSS. I am trying v4 alpha and for now it's working great:

  • No more configuration file
  • Closer to CSS (css variables)
  • x10 faster

I also started using shadcn-ui: just copy and paste fully functional, accessible, and customizable components 🪄

The goal is to have full control, full power, and few dependencies:

  • effect: core and standard library
  • XState: state management
  • TailwindCSS: styling

Being a web developer is great: I am always working on/with something new, my job changes every day and I never get bored 🚀

The same can be said for other areas of software development: mobile, games, iot, cloud. It's really the best time ever to be into tech 🔥

See you next 👋