Architecture and libraries to implement a web app
Sandro Maglione
Get in touch with meWeb development
10 April 2024
โข4 min read
Sandro Maglione
Web 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 technologies
There is more.
Every week I build a new open source project, with a new language or library, and teach you how I did it, what I learned, and how you can do the same. Join me and other 600+ readers.
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:
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
The ecosystem for web apps in 2024 is ๐ฏ Just created a new project โ @nextjs โ @tailwindcss (v4) โ @storybookjs โ shadcn-ui @shadcn All working together, minimal config, full control ๐
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 ๐