Sébastien TIMONER
Esperto nello sviluppo web e nella gestione di team tecnici, mi specializzo nella creazione e ottimizzazione di soluzioni digitali performanti. Grazie a una profonda padronanza di tecnologie moderne come React.js, Node.js, TypeScript, Symfony e Zephyr OS per IoT, garantisco il successo di progetti SaaS e IoT complessi, dalla progettazione alla messa in produzione, per aziende di diversi settori, all'interno di offroadLabs.
In offroadLabs, offro servizi di sviluppo su misura, combinando competenza tecnica e approccio collaborativo. Che si tratti di creare una soluzione SaaS innovativa, sviluppare sistemi IoT con Zephyr OS, modernizzare un'applicazione esistente o accompagnare la crescita professionale di un team, mi impegno a fornire soluzioni robuste e performanti, adattate alle esigenze specifiche di ogni progetto.
Sono disponibile per incarichi intorno ad Aix-en-Provence o in full remote.
Come strutturare un'applicazione web moderna? Come assicurarsi che rimanga manutenibile nel tempo? In questa guida, creeremo un'applicazione Next.js utilizzando l'architettura esagonale e una robusta validazione dei form. Per rendere l'apprendimento più divertente, creeremo un sistema di registrazione per l'Accademia Jedi!
Il codice sorgente è disponibile su GitHub.
L'Architettura Esagonale, nota anche come "Ports and Adapters", è un pattern architetturale che permette di creare applicazioni dove i componenti di business sono:
L'architettura è divisa in tre strati principali:
[Il contenuto continua...]
bash
Quando crei il progetto, rispondi alle seguenti domande:
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
Using Next.js version 15.0.0+ with Turbopack
Una volta creato il progetto, installa le dipendenze:
bash
Durante l'inizializzazione di shadcn/ui, rispondi alle seguenti domande:
Would you like to use TypeScript (recommended)? Yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › src/app/globals.css
Would you like to use CSS variables for colors? › Yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › Yes
# Installa i componenti necessari
npx shadcn@latest add form input select textarea button card toast table
bash
src/
├── app/
│ ├── actions/
│ │ └── register-padawan.ts
│ ├── components/
│ │ ├── ui/ # componenti shadcn/ui
│ │ ├── jedi-form.tsx
│ │ └── padawan-list.tsx
│ ├── lib/
│ │ └── utils.ts # utilità shadcn/ui
│ └── page.tsx
├── core/
│ ├── domain/
│ │ ├── models/
│ │ │ └── padawan.ts
│ │ ├── ports/
│ │ │ └── padawan-repository.ts
│ │ ├── services/
│ │ │ └── padawan-eligibility.ts
│ │ ├── validation/
│ │ │ └── padawan-schema.ts
│ │ └── events/
│ │ └── padawan-registered.ts
│ └── usecases/
│ └── register-padawan.ts
└── infrastructure/
└── db/
├── prisma/
│ ├── migrations/
│ └── schema.prisma
├── prisma.ts
└── repositories/
└── prisma-padawan-repository.ts
Questa struttura segue una chiara architettura esagonale con:
app/
- Strato interfaccia utente Next.jsactions/
- Server Actions per la gestione dei formcomponents/
- Componenti React con separazione UI/businesslib/
- Utilità condivisecore/
- Logica di business puradomain/
- Modelli, porte e servizi di businessusecases/
- Casi d'uso dell'applicazioneinfrastructure/
- Implementazioni tecnichedb/
- Configurazione Prisma e implementazioni repositoryIl dominio è il cuore della nostra applicazione. Qui traduciamo le regole di business in codice, indipendentemente da qualsiasi considerazione tecnica. Nel nostro caso, il dominio rappresenta tutte le regole che governano la registrazione all'Accademia Jedi.
I modelli rappresentano concetti fondamentali di business.
typescript
Gli eventi rappresentano fatti importanti che sono accaduti nel dominio.
typescript
Le porte definiscono come il dominio interagisce con il mondo esterno.
typescript
I servizi del dominio incapsulano la logica di business che non si adatta naturalmente in un'entità.
typescript
I casi d'uso orchestrano le interazioni tra diversi elementi del dominio per raggiungere una funzionalità di business.
typescript
L'infrastruttura implementa le porte definite nel dominio per interagire con il mondo esterno.
prisma
typescript
La validazione dei dati di input utilizza Zod per garantire la coerenza con il nostro dominio.
typescript
Ora possiamo generare il db.
bash
Per ulteriori esplorazioni, Prisma fornisce un client per visualizzare il db.
bash
typescript
typescript
typescript
Questi componenti utilizzano shadcn/ui per creare un'interfaccia utente moderna e accessibile, con:
Tutto si integra perfettamente nella nostra architettura esagonale rimanendo nello strato di presentazione, senza logica di business.
typescript
typescript
L'architettura esagonale ci ha permesso di creare un'applicazione che è:
Per andare oltre, potresti:
Ricorda: una buona architettura è come la Forza - deve essere in equilibrio! 🌟
[Fine della traduzione]