•

newsletter

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.

Sandro Maglione

Sandro Maglione

Software development

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 technologiesI have a folder called "learning" where I build small interesting projects to experiment with new technologies

There is more 🤩

Timeless coding principles, practices, and tools that make a difference, regardless of your language or framework, delivered in your inbox every week.

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 👋

Start here.

Timeless coding principles, practices, and tools that make a difference, regardless of your language or framework, delivered in your inbox every week.