Byg en fuldstack task manager med Gleam: Én kodebase til alle platforme

Drømmen om at skrive kode én gang og køre den overalt har jaget os udviklere i årtier. Vi har prøvet Java applets, Electron, React Native og Flutter. Men måske handler det ikke om rammeværker. Måske handler det om at vælge det rigtige sprog fra starten.

Her kommer Gleam ind. Et statisk typet sprog, der kompilerer til Erlang på backend og JavaScript på frontend. Det giver ægte fuldstack-udvikling i ét sprog. I dag kigger vi på et konkret eksempel: en task manager-app, der viser, hvordan det fungerer i praksis.

Visionen: Én kildekode, flere platforme

De fleste rammeværker lover "skriv én gang, kør overalt" – men kun til specifikke deploymenter. Gleam går videre. Den kompilerer den samme kode til helt forskellige runtime-miljøer.

Vores task manager – lad os kalde den Doable – er simpel. Den håndterer create, read, update og delete på tasks. Men bag den simple CRUD-grænseflade sidder en hel arkitektur:

• JSON HTTP API på Erlang med PostgreSQL
• Browser-frontend med reaktiv state
• Desktop-apps til Windows, macOS og Linux via Tauri
• Mobil-apps til iOS og Android, også via Tauri

Alt fra samme sprog. Samme typer. Samme validering.

Arkitektur: Dev vs. produktion

Sådan arbejder udviklere

I dev-fasen skal du have hurtig feedback. Docker til database og API. Hot-reload på alle frontends. Integrationstests uden rebuild.

Setuppet er rent:

• PostgreSQL i Docker – separate db'er til dev og test
• Gleam API-server i Docker eller lokalt
• Én Lustre dev-server til hot reload på browser, desktop og mobil
• API-proxy undgår CORS-problemer – alt går gennem ét indgangspunkt
• Tests kører direkte mod routeren med test-db

Det booster hastigheden. 30 sekunders ventetid pr. ændring er ren tortur.

Sådan kører produktion

I produktion forsvinder kompleksiteten. Alt i Docker-containere. Caddy som enkelt entry point – proxy til API og filserver for frontend.

Browser-klienter henter frontend fra Caddy og kalder API via proxy. Tauri-apps bundler frontend lokalt, men rammer API via Tauris HTTP-plugin. Samme app, optimeret per platform.

Tekniske komponenter

Backend: Erlangs styrke

API-serveren kompilerer til Erlang med Wisp og Mist. Du arver telecom-styrke: concurrency, fault tolerance og distribution. PostgreSQL sikrer solid relational lagring.

Delte kode: Den store gevinst

Gleams killer-feature er shared-projektet. En multi-target bibliotek til Erlang og JavaScript. Typer, validering, serialisering – alt deles. Ændr en task-struktur, så opdateres alt automatisk.

Ingen type-forskelle mellem front og back. Kompilatoren fanger fejl tidligt.

Frontend: Elm-mønstre

Web-frontend bruger Lustre med Elm Architecture. Predictable UI-state, let at teste. Desktop og mobil følger samme mønster, bare på andre targets.

Hvorfor det betyder noget for dit næste projekt

Fuldstack type-sikkerhed bliver vigtigere, når apps vokser. Her er ændringerne:

Refactoring uden frygt. Ændr et db-felt, opdater shared-typer – kompilatoren peger på alle steder.

Konsistens gratis. Én validering i Gleam, kompileret til alle platforme.

Hurtigere onboarding. Et sprog, ét typesystem – ikke tre økosystemer.

Enklere drift. Færre afhængigheder, færre deployment-typer, færre overraskelser.

Realiteten i praksis

Er Gleam fremtiden for alt web-dev? Sandsynligvis ikke. Økosystemet er mindre end TypeScript eller Python – det tæller for ansættelse og libs.

Men til greenfield fuldstack-apps med fokus på type-sikkerhed? Det fjerner bug-kategorier fra starten.

Task manageren er simpel med vilje. Den beviser, at arkitekturen holder. Komplekse apps tilføjer lag, men princippet står: kompiler én gang, valider overalt, deploy til mange.

Kom i gang

Learning curve? Hanterbar. Syntax ligner JavaScript, Python, Rust. Typerne er stærke, men ikke krævende fra dag ét.

Start med Erlang-backend. Byg API. Tilføj Lustre-frontend og se shared-typer fange bugs. Når du mærker unified fuldstack, føles de gamle metoder forældede.

Fuldstack-fremtiden handler måske ikke om flere værktøjer. Den handler om ét sprog til alle lag.

Klar til fuldstack Gleam? Tjek Gleam-dokumentationen og overvej, hvordan dit næste projekt kan drage fordel af type-sikker compilation på tværs af platforme.