<blockquote>Quando hai bisogno di materiale per la tua campagna di Dungeon World, tira+CAR e apri <a href="https://www.dungeonworld-italia.it/">Dungeon World Italia</a>.</blockquote>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*HAsG4b9FONTM_M-nhiARFw.png"></figure>Ciao a tutti! Oggi vi scrivo per raccontarvi di un progetto nato dal cuore e dalla nostra profonda passione per un gioco che ci ha accompagnato in innumerevoli avventure: Dungeon World. Per me, questo non è solo un gioco di ruolo, ma una vera e propria esperienza di condivisione e creazione collettiva che ci ha fatto sognare, ridere e vivere storie indimenticabili.
Io e Samantha Liparota, che ha lavorato con me in questa impresa, abbiamo vissuto Dungeon World sia come giocatori che come master. Questo gioco ha davvero cambiato il nostro modo di vedere il mondo del GdR. Ci ha insegnato il valore delle storie che creiamo insieme, delle emozioni che condividiamo attorno a un tavolo o dietro uno schermo.
Ed è proprio questa ricchezza che ci ha spinto a voler restituire qualcosa alla community che ci ha regalato tanto. Così è nato Dungeon World Italia: un progetto che rappresenta il nostro modo di dare indietro un po’ della magia che abbiamo vissuto.
All’inizio, abbiamo iniziato traducendo le schede homebrew per il progetto EPICentrum, entrando ancora più in contatto con la community e scoprendo quanto materiale straordinario fosse già disponibile, ma spesso difficile da reperire o incompleto.
Da quel momento è nato il desiderio di fare di più: creare un punto di accesso unico, completo e facilmente consultabile, per raccogliere tutte le risorse tradotte di Dungeon World, dai materiali ufficiali a quelli homebrew, e renderli disponibili a chiunque voglia avventurarsi in questo fantastico mondo. Questo progetto è per la community, da parte di due appassionati che, come voi, amano Dungeon World e credono nella potenza delle storie condivise.
<a href="https://www.dungeonworld-italia.it/">Home - Dungeon World Italia</a>
<h3>🎯 Perché Dungeon World Italia?</h3>
La nascita di Dungeon World Italia è stata ispirata dal nostro amore per questo gioco e dal desiderio di mettere a disposizione di tutti una risorsa completa e ben organizzata. Ci siamo resi conto che, nonostante il grande lavoro già fatto da grandi progetti come dungeonworld.it e EPICentrum.it, mancava un punto di accesso unificato per rendere tutto il materiale facilmente reperibile e utilizzabile.
Il nostro obiettivo era semplice: creare un portale con la traduzione completa del manuale di Dungeon World e un archivio di materiali homebrew tradotti, oltre a risorse di gioco facili da consultare e stampare.
<h3>🔍 La Nostra Visione: Accesso Semplice e Contributo Aperto</h3>
Crediamo che ogni giocatore meriti strumenti ben tradotti e accessibili. Dungeon World Italia è una risorsa gratuita a disposizione di tutti, pensata per permettere a chiunque di immergersi nel gioco senza barriere. Volevamo integrare il meglio del materiale già esistente e aggiungere nuove risorse, organizzate in modo pratico e coerente.
Non ci siamo fermati qui. Abbiamo creato anche un repository su GitHub dove chiunque può accedere al sorgente del sito e ai materiali che abbiamo elaborato. Questo repository è aperto alla community, così chiunque voglia partecipare al progetto può farlo in maniera semplice e diretta.
Puoi trovare il repository su GitHub qui:
<a href="https://github.com/KernelPanic92/dungeonworld-ita">GitHub - KernelPanic92/dungeonworld-ita: Materiale e libretti per dungeon world in italiano</a>
<h3>📚 Cosa Abbiamo Fatto?</h3>
<h4>🔹 Traduzione Completa del Manuale</h4>
La traduzione del manuale di Dungeon World è al centro del nostro progetto. Partendo dal grande lavoro svolto da dungeonworld.it, ci siamo impegnati a integrare i contenuti mancanti, lavorando con cura fino a completare la traduzione. 🚀 Non essendo traduttori professionisti, ci siamo concentrati per rispettare il più possibile il testo originale, offrendo una versione in italiano fluida e fedele.
<h4>🔹 Materiali Homebrew Tradotti</h4>
Uno degli aspetti più emozionanti di Dungeon World è la community di creatori che ha sviluppato contenuti homebrew. Abbiamo iniziato a tradurre molte di queste schede, per offrirvi nuove possibilità di gioco. Alcuni materiali, come quelli presi da EPICentrum.it, non sono ancora stati completamente riadattati, ma sono già disponibili per essere utilizzati. La community può iniziare subito a sfruttarli e migliorarli insieme a noi!
<h4>🔹 Schede Adattate e Standardizzate</h4>
Per rendere le schede più pratiche, le abbiamo adattate al formato A4, ideale per la stampa. Abbiamo anche iniziato a lavorare su degli standard per la creazione e l’adattamento delle schede, così da offrire ai futuri contributori e ai giocatori strumenti uniformi e di facile utilizzo.
<h3>🔧 Sotto al Dungeon: Come Abbiamo Creato Dungeon World Italia</h3>
Dietro Dungeon World Italia c’è stato tanto lavoro, ma il nostro obiettivo era chiaro: fare qualcosa di utile per tutti noi, senza complicazioni. Abbiamo cercato di rendere il processo il più semplice possibile, così da permettere a chiunque di partecipare e contribuire.
<h4>🛠️ Materiali: Un Po’ di Creatività con Adobe InDesign</h4>
Tutti i libretti di gioco e le schede homebrew sono stati creati usando Adobe InDesign. Volevamo che i materiali fossero belli e pratici, pronti per essere stampati e usati facilmente. Ci siamo dedicati a ogni dettaglio con l’idea di offrire strumenti chiari e facili da usare per chiunque, senza complicazioni.
<h3>🌐 Il Sito: Nextra e Next.js con Qualche Piccolo Accrocchio</h3>
Il sito è stato costruito con Nextra su Next.js, un framework leggero che ci ha permesso di fare le cose in modo pratico e veloce. Per evitare che aggiornare i materiali diventasse complicato, abbiamo creato qualche automatismo, quindi ogni volta che carichiamo o aggiorniamo nuovi contenuti, questi vengono aggiunti automaticamente al sito, senza bisogno di fare tutto a mano.
In questo modo, chi contribuisce può concentrarsi sui contenuti e non preoccuparsi di come tutto verrà integrato nel sito.
<h3>🛠 Un Lavoro in Continua Evoluzione: La Community al Centro</h3>
Il nostro progetto è in continua evoluzione, e la tua partecipazione è fondamentale! Dungeon World Italia è un progetto open source, e chiunque voglia contribuire con traduzioni, adattamenti o nuove idee è il benvenuto. Attraverso il repository GitHub, chiunque può accedere ai file sorgenti del sito e ai materiali di gioco, proporre modifiche, segnalare errori o aggiungere contenuti.
Se hai idee per migliorare il sito, se trovi errori o se vuoi semplicemente contribuire, ti invitiamo a partecipare. Ogni contributo è importante e ci aiuterà a rendere Dungeon World Italia una risorsa ancora più completa e utile per tutti.
<h3>🤝 Il Nostro Invito alla Community</h3>
Samantha ed io abbiamo creato Dungeon World Italia con l’intento di restituire qualcosa alla community di Dungeon World, un gioco che mette al centro la narrazione, la collaborazione e la creatività. Vogliamo che il nostro sito sia gratuito e aperto a tutti, un punto di riferimento per ogni giocatore italiano, che tu sia un novizio o un veterano.
Visita Dungeon World Italia, esplora i contenuti, e se vuoi dare una mano o segnalarci qualcosa, non esitare a contattarci o a contribuire su GitHub. Ci auguriamo che il nostro lavoro possa aiutarti a vivere le tue avventure e creare storie memorabili nel fantastico mondo di Dungeon World!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c6bc67fcf746" width="1" height="1" alt="">

Dungeon World Italia: un nuovo progetto per la community

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*l9L6NyGZRH0ddbdM--yoRA.jpeg"></figure>The world of web development is constantly evolving, along with the techniques and strategies for optimizing the performance of our applications. One of the most common challenges Angular developers face is the initial loading time of their applications. As application size increases, it becomes increasingly important to find solutions that enhance performance and improve the user experience. This is where ngx-fastboot comes into play.
<h3>What is ngx-fastboot?</h3>
ngx-fastboot is a library designed to dynamically load Angular application configurations, optimizing startup time and reducing the size of the initial bundle 🎉
<a href="https://www.npmjs.com/package/ngx-fastboot">ngx-fastboot</a>
<h3>When to Use ngx-fastboot?</h3>
There are no restrictions on when to integrate ngx-fastboot into your Angular project. You can implement it right from the start or wait until the size of your bundle starts impacting performance 🤟
<h3>Why Use ngx-fastboot?</h3>
<ul>
<li>
Reduction in Initial Bundle Size: One of the main reasons to consider using ngx-fastboot is its ability to reduce the size of your application’s initial bundle. By loading configurations in separate chunks, it lightens the main bundle, allowing the application to start faster.</li>
<li>
Improved Performance: With smaller bundles, the initial loading time of the application is significantly reduced. This is especially crucial for users with slower connections, where every kilobyte matters. Enhancing performance also means delivering a better overall user experience.</li>
<li>
Meeting Recommended Budgets: Angular can generate warnings and errors if the initial bundle size exceeds recommended limits. By leveraging ngx-fastboot to distribute the load across multiple chunks, you can reduce the likelihood of running into these issues and keep your project aligned with Angular’s best practices.</li>
</ul>
<h3>Installation</h3>
Installing ngx-fastboot is quick and easy. You can add the library to your Angular project by running the following command in your terminal:
<pre>npm install ngx-fastboot</pre>
<h3>Usage</h3>
Once the library is installed, you can start using it to dynamically load your application’s configurations 🚀.
Create your first configuration file in src/configs/angular.configs.ts. ngx-fastboot natively supports both default and named imports; for convenience, we'll use the default import:
<pre>import { provideHttpClient } from '@angular/common/http'; import { EnvironmentProviders, Provider, provideZoneChangeDetection } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; export default [ provideHttpClient(), ReactiveFormsModule, provideZoneChangeDetection({ eventCoalescing: true }), ] satisfies Array&lt;Provider | EnvironmentProviders&gt;;</pre>
Now, import it into your src/main.ts:
<pre>import { AppComponent } from './app.component'; import { bootstrapApplication } from '@angular/platform-browser'; import { fast } from 'ngx-fastboot'; fast(bootstrapApplication, AppComponent, { providers: [ () =&gt; import('./configs/angular.configs.ts'), ] }).catch(error =&gt; { console.error('Error bootstrapping the app', error); });</pre>
ngx-fastboot allows us to include providers using the static bootstrapApplication approach, giving us precise control over which configurations to make dynamic and which to keep static. This flexibility helps optimize the performance and organization of our Angular application.
<pre>import { AppComponent } from './app.component'; import { bootstrapApplication } from '@angular/platform-browser'; import { fast } from 'ngx-fastboot'; fast(bootstrapApplication, AppComponent, { providers: [ { provide: 'BACKEND_BASE_URL', useValue: 'http://localhost:3000' }, () =&gt; import('./configs/angular.configs.ts'), ] }).catch(error =&gt; { console.error('Error bootstrapping the app', error); });</pre>
For illustration, let’s create an Angular application where we initialize AngularFire and Sentry using the traditional approach. After building the application, the bundle structure will be similar to the following:
<pre>Initial chunk files | Names | Raw size | Estimated transfer size main-P4HRQQFP.js | main | 659.65 kB | 180.05 kB chunk-7LRM2SDL.js | - | 53.90 kB | 15.44 kB polyfills-DXJ4KTXW.js | polyfills | 34.52 kB | 11.29 kB styles-5INURTSO.css | styles | 0 bytes | 0 bytes | Initial total | 748.07 kB | 206.78 kB Lazy chunk files | Names | Raw size | Estimated transfer size chunk-GV3HVVF4.js | index-esm | 121 bytes | 121 bytes Application bundle generation complete. [3.898 seconds] ▲ [WARNING] bundle initial exceeded maximum budget. Budget 512.00 kB was not met by 236.07 kB with a total of 748.07 kB.</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*TU81MIXn7-d96ZaWBeYNXQ.png"><figcaption>chunks piechart (classic method)</figcaption></figure>With this approach, we have already exceeded the bundle size limit, resulting in a warning during the Angular build process!
However, by applying ngx-fastboot, the final bundle structure will look something like this:
<pre>Initial chunk files | Names | Raw size | Estimated transfer size chunk-JNUXFHNR.js | - | 194.41 kB | 52.59 kB polyfills-DXJ4KTXW.js | polyfills | 34.52 kB | 11.29 kB main-7SK3ZYUR.js | main | 19.74 kB | 5.46 kB chunk-ACKELEN3.js | - | 898 bytes | 898 bytes styles-5INURTSO.css | styles | 0 bytes | 0 bytes | Initial total | 249.57 kB | 70.24 kB Lazy chunk files | Names | Raw size | Estimated transfer size chunk-OBCCKT3U.js | - | 238.00 kB | 68.07 kB chunk-YXL5OYKA.js | firebase-config | 207.55 kB | 57.22 kB chunk-4UC3UY4L.js | - | 53.03 kB | 15.14 kB chunk-5G2DL2YO.js | sentry-init | 365 bytes | 365 bytes chunk-J34TBXQP.js | sentry-config | 257 bytes | 257 bytes chunk-V4EU5ISS.js | index-esm | 149 bytes | 149 bytes chunk-DUM2C7A7.js | core-config | 143 bytes | 143 bytes Application bundle generation complete. [3.864 seconds]</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*KgNpM8TVd_sXZ0EkuQFc1w.png"><figcaption>chunks piechart (fast method)</figcaption></figure>The configurations for Firebase, Sentry, and Angular are separated into distinct chunks, resulting in a significantly more optimized outcome:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*S42_dwL0zsZcMqdoLXdQkg.png"><figcaption>classic vs fastboot initial bundle size</figcaption></figure>You can perform the same test on the two versions of the application within this GitHub repository:
<a href="https://github.com/KernelPanic92/ngx-fastboot-medium-examples">GitHub - KernelPanic92/ngx-fastboot-medium-examples</a>
<h3>Conclusions</h3>
ngx-fastboot is a simple yet powerful tool for optimizing the performance of Angular applications. By dynamically loading configurations, you can reduce the size of the initial bundle, improve load times, and mitigate compilation warnings. If you’re looking for a way to optimize your bundle and speed up your Angular application, ngx-fastboot is definitely a solution worth considering.
If you found this guide helpful, don’t forget to give it a 👏 and share it with others who might benefit from it 😃.
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b8e74e846bd1" width="1" height="1" alt="">

ngx-fastboot: How to increase Angular velocity at bootstrap

<h3>ngx-fastboot — Come aumentare la velocità di Angular all’avvio</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tkqxQ9JK4R3lU_IbGfHTgg.jpeg"></figure>Se preferisci leggere l’articolo in inglese, puoi trovarlo qui: <a href="https://iacopociao1992.medium.com/ngx-fastboot-how-to-increase-angular-velocity-at-bootstrap-b8e74e846bd1">https://iacopociao1992.medium.com/ngx-fastboot-how-to-increase-angular-velocity-at-bootstrap-b8e74e846bd1</a>.
Il mondo dello sviluppo web è in continua evoluzione, e con esso le tecniche e le strategie per ottimizzare le prestazioni delle nostre applicazioni. Uno dei problemi più comuni che gli sviluppatori Angular devono affrontare è il tempo di caricamento iniziale dell’applicazione. Con l’aumentare delle dimensioni dell’applicazione, diventa sempre più importante trovare soluzioni per migliorare le performance e l’esperienza utente. In questo contesto, entra in gioco ngx-fastboot.
<h3>Che cos’è ngx-fastboot?</h3>
ngx-fastboot è una libreria pensata per caricare dinamicamente le configurazioni delle applicazioni Angular, ottimizzando così il tempo di avvio e riducendo le dimensioni del bundle iniziale 🎉
<a href="https://www.npmjs.com/package/ngx-fastboot">ngx-fastboot</a>
<h3>Quando utilizzare ngx-fastboot?</h3>
Non ci sono limitazioni per integrare ngx-fastboot nel nostro progetto Angular: possiamo integrarlo fin da subito o aspettare fino a quando il peso del nostro bundle non comincia a farsi sentire 🤟
<h3>Perché usare ngx-fastboot?</h3>
<ul>
<li>
Riduzione della dimensione del bundle iniziale: Una delle principali ragioni per cui dovremmo considerare l’uso di ngx-fastboot è la capacità di ridurre le dimensioni del bundle iniziale della tua applicazione. Caricando le configurazioni in chunk separati, si riduce il peso del bundle principale, permettendo all’applicazione di avviarsi più velocemente.</li>
<li>
Miglioramento delle performance: Con bundle più piccoli, il tempo di caricamento iniziale dell’applicazione diminuisce notevolmente. Questo è particolarmente importante per gli utenti con connessioni lente, dove ogni kilobyte conta. Migliorare le performance significa anche migliorare l’esperienza utente complessiva.</li>
<li>
Rispettare i budget consigliati: Angular può generare warning e errori se le dimensioni del bundle iniziale superano i limiti consigliati. Utilizzando ngx-fastboot per distribuire il carico su più chunk, puoi ridurre la probabilità di incorrere in questi problemi e mantenere il tuo progetto conforme alle best practices di Angular.</li>
</ul>
<h3>Installazione</h3>
L’installazione di ngx-fastboot è semplice e veloce. Possiamo aggiungere la libreria al nostro progetto Angular eseguendo il seguente comando da terminale:
<pre>npm install ngx-fastboot</pre>
<h3>Utilizzo</h3>
Una volta installata la libreria, possiamo iniziare a usarla per caricare dinamicamente le configurazioni della nostra applicazione 🚀
Creiamo il nostro primo file di configurazione in src/configs/angular.configs.ts . ngx-fastboot supporta nativamente sia i default import che i named import, per comodità useremo quello di default:
<pre>import { provideHttpClient } from '@angular/common/http'; import { EnvironmentProviders, Provider, provideZoneChangeDetection } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; export default [ provideHttpClient(), ReactiveFormsModule, provideZoneChangeDetection({ eventCoalescing: true }), ] satisfies Array&lt;Provider | EnvironmentProviders&gt;;</pre>
Adesso importiamolo nel nostro src/main.ts:
<pre>import { AppComponent } from './app.component'; import { bootstrapApplication } from '@angular/platform-browser'; import { fast } from 'ngx-fastboot'; fast(bootstrapApplication, AppComponent, { providers: [ () =&gt; import('./configs/angular.configs.ts'), ] }).catch(error =&gt; { console.error('Error bootstrapping the app', error); });</pre>
ngx-fastboot ci consente di includere i provider utilizzando l’approccio statico di bootstrapApplication, permettendoci di controllare con precisione quali configurazioni rendere dinamiche e quali mantenere statiche:
<pre>import { AppComponent } from './app.component'; import { bootstrapApplication } from '@angular/platform-browser'; import { fast } from 'ngx-fastboot'; fast(bootstrapApplication, AppComponent, { providers: [ { provide: 'BACKEND_BASE_URL', useValue: 'http://localhost:3000' }, () =&gt; import('./configs/angular.configs.ts'), ] }).catch(error =&gt; { console.error('Error bootstrapping the app', error); });</pre>
<h3>Performance</h3>
A scopo di esempio, creiamo un’applicazione Angular in cui inizializziamo AngularFire e Sentry utilizzando l’approccio classico. Dopo la compilazione, il bundle avrà una struttura simile alla seguente:
<pre>Initial chunk files | Names | Raw size | Estimated transfer size main-P4HRQQFP.js | main | 659.65 kB | 180.05 kB chunk-7LRM2SDL.js | - | 53.90 kB | 15.44 kB polyfills-DXJ4KTXW.js | polyfills | 34.52 kB | 11.29 kB styles-5INURTSO.css | styles | 0 bytes | 0 bytes | Initial total | 748.07 kB | 206.78 kB Lazy chunk files | Names | Raw size | Estimated transfer size chunk-GV3HVVF4.js | index-esm | 121 bytes | 121 bytes Application bundle generation complete. [3.898 seconds] ▲ [WARNING] bundle initial exceeded maximum budget. Budget 512.00 kB was not met by 236.07 kB with a total of 748.07 kB.</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*TU81MIXn7-d96ZaWBeYNXQ.png"><figcaption>chunks piechart (classic method)</figcaption></figure>Con questo approccio abbiamo già superato il limite di dimensione del bundle, generando un avviso durante la compilazione di Angular!
Tuttavia, applicando ngx-fastboot, il bundle finale avrà una struttura simile alla seguente:
<pre>Initial chunk files | Names | Raw size | Estimated transfer size chunk-JNUXFHNR.js | - | 194.41 kB | 52.59 kB polyfills-DXJ4KTXW.js | polyfills | 34.52 kB | 11.29 kB main-7SK3ZYUR.js | main | 19.74 kB | 5.46 kB chunk-ACKELEN3.js | - | 898 bytes | 898 bytes styles-5INURTSO.css | styles | 0 bytes | 0 bytes | Initial total | 249.57 kB | 70.24 kB Lazy chunk files | Names | Raw size | Estimated transfer size chunk-OBCCKT3U.js | - | 238.00 kB | 68.07 kB chunk-YXL5OYKA.js | firebase-config | 207.55 kB | 57.22 kB chunk-4UC3UY4L.js | - | 53.03 kB | 15.14 kB chunk-5G2DL2YO.js | sentry-init | 365 bytes | 365 bytes chunk-J34TBXQP.js | sentry-config | 257 bytes | 257 bytes chunk-V4EU5ISS.js | index-esm | 149 bytes | 149 bytes chunk-DUM2C7A7.js | core-config | 143 bytes | 143 bytes Application bundle generation complete. [3.864 seconds]</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*KgNpM8TVd_sXZ0EkuQFc1w.png"><figcaption>chunks piechart (fast method)</figcaption></figure>Le configurazioni di Firebase, Sentry e Angular vengono suddivise in chunk separati, ottenendo un risultato decisamente più ottimizzato:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*S42_dwL0zsZcMqdoLXdQkg.png"><figcaption>classic vs fastboot initial bundle size</figcaption></figure>Potete effettuare lo stesso test sulle due versioni dell’applicazione all’interno di questo repository github:
<a href="https://github.com/KernelPanic92/ngx-fastboot-medium-examples">GitHub - KernelPanic92/ngx-fastboot-medium-examples</a>
<h3>Conclusioni</h3>
ngx-fastboot è uno strumento semplice e potente per ottimizzare le prestazioni delle applicazioni Angular. Caricando le configurazioni dinamicamente, puoi ridurre le dimensioni del bundle iniziale, migliorare il tempo di caricamento e mitigare i warning di compilazione. Se stai cercando un modo per ottimizzare il bundle e velocizzare la tua applicazione Angular, ngx-fastboot è sicuramente una soluzione da considerare.
Se hai apprezzato questa guida, non dimenticarti di 👏 e di condividerla con tutte le persone che potrebbero trarne beneficio 😃
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3149b42c1c0a" width="1" height="1" alt="">

ngx-fastboot — Come aumentare la velocità di Angular all’avvio

In this article, I’m going to explain you how to avoid wasting time building and assigning your reactive forms through RxFormMapper
<figure><img alt="" src="https://cdn-images-1.medium.com/max/671/1*S2svM73ryIysF_bqpGNofQ.png"></figure><h3>What’s RxFormMapper?</h3>
RxFormMapper is a framework developed for angular and allows you to convert, by annotation, classes into reactive form and vice versa.
<a href="https://github.com/KernelPanic92/rx-form-mapper">KernelPanic92/rx-form-mapper</a>
<h3>When to use RxFormMapper?</h3>
Sometimes you want to transform the classes you have into reactive forms, for example you have a user model that you want to have filled out by a form:
<pre>export class User { 	name: string; 	surname: string; 	age: number; }</pre>
So what to do? How to make a user form ? Solution is to create new instances of Reactive Form object and manually assign all properties to new object. But things may go wrong very fast once you have a more complex object hierarchy.
<pre>new FormGroup( 	name: new FormControl(user.name), 	surname: new FormControl(user.surname), 	age: new FormControl(user.age), );</pre>
To avoid all this you can use RxFormMapper:
<pre>export class User {</pre>
<pre>	@FormControl() 	name: string;</pre>
<pre>	@FormControl() 	surname: string;</pre>
<pre>	@FormControl() 	age: number; }</pre>
<h3>Why use RxFormMapper?</h3>
RxFormMapper speed up your form development avoiding redundant boilerplate in your code. The most important benefits are:
<ul>
<li>
Zero configuration: through annotations removes the boilerplate for creating and assigning forms.</li>
<li>
Dependency Injection: RxFormMapper take advantage from Angular DI container in order to resolves validators and custom mappers.</li>
<li>
Custom mappers: If you want to create custom forms for specific fields, you can do it simple by @CustomControl decorator.</li>
</ul>
<h3>Let’s start writing code</h3>
<h4>Install npm package</h4>
<pre>npm i rx-form-mapper --save</pre>
reflect-metadata is required (with angular+ you should already have this dependency installed.)
<pre>npm i reflect-metadata --save</pre>
<h4>Import the component modules</h4>
Import RxFormMapperModule in your AppModule
<a href="https://medium.com/media/9b504947db1f666bf86792a14305be56/href">https://medium.com/media/9b504947db1f666bf86792a14305be56/href</a><h4>Define your model</h4>
<a href="https://medium.com/media/298610e452ecb1b625a1fa92d2569f81/href">https://medium.com/media/298610e452ecb1b625a1fa92d2569f81/href</a><h4>Annotate it</h4>
RxFormMapper allow you to specify through annotations the type of AbstractControl for each field in your model, specifically: FormControl, FormGroup and FormArray.
<a href="https://medium.com/media/dab80eb3e9ba797285e5a90124e05b95/href">https://medium.com/media/dab80eb3e9ba797285e5a90124e05b95/href</a>You can read further informations about RxFormMapper annotations by consulting the github page attached at the beginning of this article.
<h4>Wait... AsyncValidators? How to inject services?!</h4>
Don’t panic: RxFormMapper automatically resolves all validators registered inside the Angular container for you! 😉
<a href="https://medium.com/media/6a2bffb94d7e010165b4863da3d98e4a/href">https://medium.com/media/6a2bffb94d7e010165b4863da3d98e4a/href</a><a href="https://medium.com/media/96b343de092f0d2208f62e216fe0cad4/href">https://medium.com/media/96b343de092f0d2208f62e216fe0cad4/href</a><h4>Build your form</h4>
<a href="https://medium.com/media/f074b72c95da53e8ba097e2d66160e1c/href">https://medium.com/media/f074b72c95da53e8ba097e2d66160e1c/href</a>You can find the sources of this article on stackblitz 😁
<a href="https://stackblitz.com/edit/rx-form-mapper-example?file=src/app/user-registration.ts">rx-form-mapper-example - StackBlitz</a>
<h3>Conclusion</h3>
RxFormMapper is a great tool that allows you to create reactive forms in a simple and declarative way through the annotations, allowing you to focus on your features. This type of framework is particularly suitable for crud-based applications as it drastically reduces the code to maintain.
If you enjoyed this guide, don’t forget to 👏 and share it with all the people who might benefit from it 😃
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=aae089861045" width="1" height="1" alt="">

Building reactive forms with RxFormMapper

Devi sviluppare una nuova funzionalità nella tua applicazione NestJS ma il tuo gatto non è d’accordo? Ecco come fare!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9t9hRZAgXiWgHJp7L1JVzw.jpeg"></figure>Nelle precedenti puntate, abbiamo creato la nostra prima applicazione con NestJS, sfruttando tutti i comandi messi a disposizione dalla CLI. Nel caso in cui te lo sia perso, eccoti il link all’articolo:
<a href="https://medium.com/@iacopociao1992/come-creare-la-tua-prima-applicazione-nestjs-fdecdbafd1c6">Come creare la tua prima applicazione NestJS</a>
Dopo aver generato ogni singolo componente tramite un comando della CLI, molto probabilmente ti sarai chiesto se c’è un modo più veloce per generare tutti quei file, vero?
<figure><img alt="" src="https://cdn-images-1.medium.com/max/900/1*wYWtO17t6dRbPj4fp_ol_w.jpeg"></figure>La risposta è sì: tramite il comando resource, NestJS ci permette di ridurre i comandi da eseguire a uno solo! 🎉
<blockquote>Un comando per domarli, un comando per trovarli, Un comando per ghermirli e nei moduli incatenarli.</blockquote>
<blockquote>[semicit]</blockquote>
Proviamo a sostituire i comandi utilizzati nel precedente articolo con il nuovo comando:
<pre>nest g resource todos</pre>
Ci verrà chiesto di scegliere quale transport layer utilizzare:
<ul>
<li>REST API</li>
<li>GraphQL (code first)</li>
<li>GraphQL (schema first)</li>
<li>Microservice (non-HTTP)</li>
<li>WebSockets</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4NzvFtJgQdWvKi0SR6lzRA.png"></figure>Nel nostro caso utilizzeremo REST API, per le altre tipologie puoi consultare la <a href="https://docs.nestjs.com/">documentazione NestJS</a>.
Una volta scelto il layer, ci verrà chiesto se vogliamo generare i CRUD entry points:
<ul>
<li>
Y: Verranno generati i DTO e i metodi CRUD all’interno del controller e del servizio.</li>
<li>
N: Non verranno generati i DTO e non verrà generato nessun metodo all’interno del controller e del servizio.</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*szGcc7eQMx-cLmbdQ7UUbA.png"></figure>Dal momento che noi vogliamo implementare esattamente un CRUD, sceglieremo Y.
Adesso la CLI si occuperà di generare tutto quanto senza che noi si tocchi niente:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Mm3Mhb7IGkWByIlGx3pCeQ.png"></figure>Adesso non ci resta altro da fare se non sviluppare la nostra business logic! 🎉
<h3>Conclusioni</h3>
La CLI di NestJS è un ottimo strumento che ci permette di rimanere concentrati sullo sviluppo della logica di business della nostra applicazione senza doverci occupare tutte le volte del boilerplate iniziale. Con il comando resource, NestJS riesce a dare un ulteriore spinta nello sviluppo riducendo il numero di operazioni necessarie alla creazione di una funzionalità a un singolo comando!
Se hai apprezzato questa breve guida, non dimenticarti di 👏 e di condividerla con tutte le persone che potrebbero trarne beneficio 😃
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=baad63076520" width="1" height="1" alt="">

NestJS: Generare features con un solo click

<h3>Creating your first NestJS application</h3>
In this article, I’m going to walk you through developing a simple todo rest application in NestJS and give you an overview of this framework.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9em36jjiwsQVwCko"><figcaption>Photo by <a href="https://unsplash.com/@kimtheris?utm_source=medium&amp;utm_medium=referral">Sereja Ris</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>What’s NestJS?</h3>
NestJS is a framework for a fast development of backend applications whose structure, inspired from Angular, makes it perfect for the realization of projects with MEAN stack.
<a href="https://nestjs.com/">NestJS - A progressive Node.js framework</a>
<h3>When to use NestJS?</h3>
Nest is most suitable for developing applications that manage a huge quantity of requests with a tiny amount of data processed on the server side and prompt response time (e-commerce, live chats, etc..).
<h3>Why use NestJS?</h3>
The benefits of using NestJS are innumerable. The most important (imho) to highlight are:
<ul>
<li>
Type checking: with Typescript we exploit all the power of javascript without running into type problems.</li>
<li>
Modular: through the division into modules we can isolate our components based on the domain boundary.</li>
<li>
Dependency Injection: thanks to the DI container we are able to write decoupled and testable code.</li>
<li>
Adapters: Nest integrates all the most used and community tested javascript / typescript libraries and provides all the tools developers need to contribute to the collection.</li>
<li>
Angular Like: the familiar structure allows us to easily switch from frontend to backend without having to change the development approach every time.</li>
<li>
CLI: we can develop our functionality without having to worry about the initial boilerplate.</li>
</ul>
<h3>Let’s start writing code</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/552/1*MyknCM460S7oSrRGwmWr1A.png"></figure><ul>
<li>retrieve the list of all todos</li>
<li>retrieve a single todo</li>
<li>insert a todo</li>
<li>edit a todo</li>
<li>delete a todo</li>
</ul>
therefore of the following APIs:
<ul>
<li>[GET] todos</li>
<li>[GET] todos/{id}</li>
<li>[POST] todos</li>
<li>[PUT] todos/{id}</li>
<li>[DELETE] todos/{id}</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/900/1*rkP7hzyAiRBqXsKieCABMw.png"><figcaption>Ehm 😅</figcaption></figure><h4>step 0: Setup</h4>
Setting up our project with two simple commands in terminal:
<pre>npm i -g @nestjs/cli nest new TodoBackend</pre>
Run $ npm run start in todo-backend folder to make sure everything is okay!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vgr5OvF4fEjBDDFCbyEutg.png"><figcaption>NestJS bootstrap logs</figcaption></figure><h4>step 1: Module</h4>
Modules are the mechanism that allows us to separate our components based on a domain they belong to and, in practice, to instruct the DI container about their interactions in the bootstrap phase.
The main module with which the bootstrap is performed is called root module and, in applications generated via CLI, we find it in the src folder under the AppModule name.
Our application, being very small and with a single functionality, could directly exploit the root module to manage its dependencies. There are at least two good reasons we won’t be doing this in this guide:
<ul>
<li>It’s not a typical case and consequently difficult to apply in a real context.</li>
<li>We would not be decoupled, thus losing the maintainability and portability of our code.</li>
</ul>
We create our module via CLI:
<pre>nest generate module todo</pre>
<a href="https://medium.com/media/951ea88095f08cd24e9f6499eeaa3475/href">https://medium.com/media/951ea88095f08cd24e9f6499eeaa3475/href</a>When it’s generated, the CLI will also take care of updating the AppModule by importing TodoModule as a feature module 🎉
<h4>step 2: Entity</h4>
An entity is a class that maps a table (or collection) of our database (very pragmatic definition).
We create our entity through CLI:
<pre>nest generate class todo/entities/Todo --no-spec</pre>
<a href="https://medium.com/media/d30e65c4b896158c902fbedbb8885cc3/href">https://medium.com/media/d30e65c4b896158c902fbedbb8885cc3/href</a><h4>step 3: Repository</h4>
Now that we have our entity we just have to persist it through an ORM!
For this guide I have decided to use Typeorm and setting up a basic connection to an <a href="https://www.sqlite.org/">sqlite</a> database.
<a href="https://github.com/typeorm/typeorm">GitHub - typeorm/typeorm: ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.</a>
First we install the dependencies:
<pre>npm i @nestjs/typeorm typeorm sqlite3</pre>
We modify AppModule by importing TypeOrmModule with the static method forRoot, inserting the configurations we need:
<a href="https://medium.com/media/e2e64581aa65cbdb2be8d5b722b2ab26/href">https://medium.com/media/e2e64581aa65cbdb2be8d5b722b2ab26/href</a>Let’s add TypeOrmModule also on TodoModule, this time using the forFeature method, specifying Todo as the entity to manage:
<a href="https://medium.com/media/66b049784d4fc5bd0ce80619240bfc5a/href">https://medium.com/media/66b049784d4fc5bd0ce80619240bfc5a/href</a>Now that we’ve configured Typeorm we can finally update our Todo entity with all the necessary annotations:
<a href="https://medium.com/media/0135d2b57912f8e9085ed3892703f0a8/href">https://medium.com/media/0135d2b57912f8e9085ed3892703f0a8/href</a>You can read further informations about Typeorm and its annotations by consulting the link attached at the beginning of the step. For TypeOrmModule forRoot and forFeature methods, you can consult the database section in the official NestJS documentation: <a href="https://docs.nestjs.com/techniques/database">https://docs.nestjs.com/techniques/database</a>
<h4>step 4: DTO</h4>
To avoid exposing our entities outside our business logic layer, we define a set of classes that will be used to manage the communication in and out of our services: the DTO (Data Transfer Objects).
<a href="https://medium.com/media/4195e363f435f53c303b22910f2c1866/href">https://medium.com/media/4195e363f435f53c303b22910f2c1866/href</a><h4>step 5: Service</h4>
The service is the “package” where we are going to encapsulate our business logic, exposing a set of ready-to-use features.
Let’s define the objects that will populate our service layer:
<pre>nest generate service todo/services/todo</pre>
In the created service, we implement the findAll, findOne, add, edit and delete methods which, through the DTOs, will be consumed by our controller.
To decouple the conversion logic from Entity to DTO (and vice versa) from the business logic, let’s create a TodoMapperService:
<pre>nest generate service todo/services/TodoMapper</pre>
<a href="https://medium.com/media/11bd51cda8e859d3dde1dbc84233da17/href">https://medium.com/media/11bd51cda8e859d3dde1dbc84233da17/href</a>Now let’s implement our TodoService: we inject, through Dependency Injection, the Todo Repository provided by Typeorm and our TodoMapperService:
<a href="https://medium.com/media/7acb1e93c0ed8943991442ae2e8f7ec6/href">https://medium.com/media/7acb1e93c0ed8943991442ae2e8f7ec6/href</a><h4>step 6: Controller</h4>
Here we are at the last layer of our climb to the NestJS stack! ⛰
To create our controller we will use our very useful CLI for the last time with this command:
<pre>nest generate controller todo/controllers/todo</pre>
Let’s implement the methods that will mirror the rest calls we listed at the beginning of the article, decorate them with routing annotations and hook them to the TodoService methods:
<a href="https://medium.com/media/8c89d3a086918023c9f4262930cab85f/href">https://medium.com/media/8c89d3a086918023c9f4262930cab85f/href</a>WARNING: DTO serialization is not active unless you decorate your controller method with ClassSerializerInterceptor
<pre>@Post() @UseInterceptors(ClassSerializerInterceptor) public add(@Body() todo: AddTodoDto): Promise&lt;TodoDto&gt; { </pre>
In the next step we will deepen this topic by developing a solution that allows us to centralize this interceptor 😉
<h4>step 7: Validation</h4>
Our DTOs are ready to travel as fast as Formula 1 cars under the http protocol but one last piece is missing: the validation of its data.
To handle the validation of our fields, NestJS provides a validation pipe that takes advantage of the class-transformer and class-validator libraries. To be able to use it however, we need to install its dependencies in the project:
<pre>npm i class-transformer class-validator</pre>
Let’s add the ValidationPipe to the global pipes:
<a href="https://medium.com/media/daadc7598b26c4b9c66547ed8264480d/href">https://medium.com/media/daadc7598b26c4b9c66547ed8264480d/href</a>And now let’s decorate our DTOs:
<a href="https://medium.com/media/d1598e8a1ab358fa57ab38cd0afbbb3f/href">https://medium.com/media/d1598e8a1ab358fa57ab38cd0afbbb3f/href</a>WARNING: Once our application has been compiled, all the DTOs we have defined so far will be converted into javascript objects, this means that no type check will be performed on the values of its fields!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/940/1*TaQyQXaxqXgBteYGuzWxWg.png"></figure>So will our validators only work as long as they are passed the right type values? NO.
The class-validator library also has a set of validators specifically designed to type check our fields at runtime:
<a href="https://medium.com/media/2fc0bb81ea3f0a9a5bfd23bc7b4ad641/href">https://medium.com/media/2fc0bb81ea3f0a9a5bfd23bc7b4ad641/href</a><h4>step 8: Run!</h4>
It’s time to run our application! 🎉
To execute it normally, just run the command:
<pre>npm run start</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3LSVAT2MihWr4CX53IfMbg.png"></figure>If we need to debug our code, we will have to run the command:
<pre>npm run start:debug</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vzc83_-lKibKNyEhNCI7bw.png"></figure><h4>step 9: Enable CORS</h4>
After developing our backend, we will most likely want to develop a frontend application and try to consume our todo-backend, here the CORS comes into play:
<blockquote>
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one <a href="https://developer.mozilla.org/en-US/docs/Glossary/origin">origin</a>, access to selected resources from a different origin. […] For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XmlHttpRequest and the Fetch API follow the same-origin policy.</blockquote>
<blockquote><a href="https://developer.mozilla.org/it/docs/Web/HTTP/CORS">https://developer.mozilla.org/en/docs/Web/HTTP/CORS</a></blockquote>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/609/1*ggx2KYeeNbja1Kmb8OxXxA.png"></figure>To enable CORS just edit main.ts again by invoking the enableCors() method with all the configuration parameters we need. For simplicity, we will enable everything! (Freedom! 🤟)
<a href="https://medium.com/media/9078255738062b8fadf479d8085baad4/href">https://medium.com/media/9078255738062b8fadf479d8085baad4/href</a><h4>step 10: Test</h4>
Tests are absolutely necessary when you want to build a maintainable application: they prevent us from the most common development errors and possible regressions due to the modification of an existing functionality.
When we generate a new component via CLI, its test file is also automatically generated. Let’s try to make one:
<a href="https://medium.com/media/9938279004538b20f748153a1338d85e/href">https://medium.com/media/9938279004538b20f748153a1338d85e/href</a>For test development, Nest uses Jest under the hood
<a href="https://jestjs.io/">Jest</a>
for more information see the NestJS documentation <a href="https://docs.nestjs.com/fundamentals/testing">https://docs.nestjs.com/fundamentals/testing</a>
You can find the sources of this article on my Github repository, feel free to put a ⭐️ 😁
<a href="https://github.com/KernelPanic92/nestjs-todo-app">KernelPanic92/nestjs-todo-app</a>
️
<h3>Conclusion</h3>
By creating the application described in this article, I was able to see firsthand how fast and powerful this framework is: it allows you to be extremely fast and flexible without having to give up absolutely anything. NestJS passes exams with top votes and can deservedly occupy its place in the top list of frameworks for web development.
If you enjoyed this guide, don’t forget to 👏 and share it with all the people who might benefit from it 😃
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1f24a79619b9" width="1" height="1" alt="">

Creating your first  NestJS application

In questo articolo, ti guiderò attraverso lo sviluppo di una semplice applicazione rest per TODO, fornendoti una panoramica sul framework NestJS.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9em36jjiwsQVwCko"><figcaption>Photo by <a href="https://unsplash.com/@kimtheris?utm_source=medium&amp;utm_medium=referral">Sereja Ris</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>Che cos’è NestJS?</h3>
NestJS è un framework per lo sviluppo rapido di applicazioni backend la cui struttura, fortemente ispirata a quella di Angular, lo rende perfetto per la realizzazione di progetti con stack MEAN.
<a href="https://nestjs.com/">NestJS - A progressive Node.js framework</a>
<h3>Quando utilizzare NestJS?</h3>
Nest è particolarmente indicato per lo sviluppo di applicazioni che gestiscono un’enorme quantità di richieste con una piccolissima quantità di dati elaborati lato server e tempi di risposta istantanei (e-commerce, live chat, ecc ..).
<h3>Perché usare NestJS?</h3>
I vantaggi nell’utilizzo di NestJS sono innumerevoli. I più importanti (imho) che voglio evidenziare sono:
<ul>
<li>
Type checking: con il Typescript sfruttiamo tutta la potenza del javascript senza incorrere nei problemi di tipizzazione.</li>
<li>
Modulare: tramite la suddivisione in moduli possiamo isolare i nostri componenti in base al domain boundary.</li>
<li>
Dependency Injection: grazie al container DI siamo in grado di scrivere codice disaccoppiato e testabile.</li>
<li>
Adapters: Nest integra al suo interno tutte le librerie javascript/typescript più utilizzate e testate dalla community e fornisce agli sviluppatori tutti gli strumenti necessari per poter contribuire alla raccolta.</li>
<li>
Angular Like: la struttura familiare ci permette di passare facilmente da frontend a backend senza dover cambiare l’approccio di sviluppo ad ogni iterazione.</li>
<li>
CLI: possiamo sviluppare le nostre funzionalità senza doverci preoccupare del boilerplate iniziale</li>
</ul>
<h3>Cominciamo a scrivere codice</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/552/1*MyknCM460S7oSrRGwmWr1A.png"></figure><ul>
<li>recuperare la lista di tutti i todo</li>
<li>recuperare un todo singolo</li>
<li>inserire un todo</li>
<li>modificare un todo</li>
<li>eliminare un todo</li>
</ul>
Di conseguenza delle seguenti API:
<ul>
<li>[GET] todos</li>
<li>[GET] todos/{id}</li>
<li>[POST] todos</li>
<li>[PUT] todos/{id}</li>
<li>[DELETE] todos/{id}</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/900/1*rkP7hzyAiRBqXsKieCABMw.png"><figcaption>Ehm 😅</figcaption></figure><h4>step 0: Setup</h4>
Configuriamo il nostro progetto con due semplici comandi da terminale:
<pre>npm i -g @nestjs/cli nest new TodoBackend</pre>
Per essere sicuri che tutto sia okay, eseguiamo $ npm run start nella cartella todo-backend:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vgr5OvF4fEjBDDFCbyEutg.png"><figcaption>NestJS bootstrap logs</figcaption></figure><h4>step 1: Module</h4>
I moduli sono il meccanismo che ci permette di separare i nostri componenti in base a un dominio di appartenenza e, nell’atto pratico, di istruire il container DI sulle loro interazioni nella fase di bootstrap.
Il modulo principale con cui viene eseguito il bootstrap viene definito modulo radice e, nelle applicazioni generate tramite CLI, lo troviamo nella cartella src sotto il nome di AppModule.
La nostra applicazione, essendo molto piccola e con un’unica funzionalità, potrebbe sfruttare direttamente il modulo radice per gestire le proprie dipendenze. Ci sono almeno due buone ragioni per cui non lo faremo in questa guida:
<ul>
<li>Non è un caso tipico e di conseguenza difficilmente applicabile in un contesto reale.</li>
<li>Non saremmo disaccoppiati, perdendo quindi in manutenibilità e in portabilità del nostro codice.</li>
</ul>
Creiamo il nostro modulo tramite la CLI:
<pre>nest generate module todo</pre>
<a href="https://medium.com/media/951ea88095f08cd24e9f6499eeaa3475/href">https://medium.com/media/951ea88095f08cd24e9f6499eeaa3475/href</a>Appena generato, la CLI si occuperà anche di aggiornare AppModule importando TodoModule come modulo feature 🎉
<h4>step 2: Entity</h4>
Una entity è una classe che mappa una tabella (o collezione) del nostro database (definizione molto pragmatica).
Creiamo la nostra entity tramite la CLI:
<pre>nest generate class todo/entities/Todo --no-spec</pre>
<a href="https://medium.com/media/d30e65c4b896158c902fbedbb8885cc3/href">https://medium.com/media/d30e65c4b896158c902fbedbb8885cc3/href</a><h4>step 3: Repository</h4>
Adesso che abbiamo la nostra entity non ci resta che persisterla attraverso un ORM!
Per questa guida ho deciso di utilizzare Typeorm e di limitarci a configurare una connessione a un database <a href="https://www.sqlite.org/">sqlite</a>.
<a href="https://github.com/typeorm/typeorm">GitHub - typeorm/typeorm: ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.</a>
Per prima cosa installiamo le dipendenze:
<pre>npm i @nestjs/typeorm typeorm sqlite3</pre>
Modifichiamo AppModule andando ad importare TypeOrmModule con il metodo statico forRoot, inserendo le configurazioni che ci servono:
<a href="https://medium.com/media/e2e64581aa65cbdb2be8d5b722b2ab26/href">https://medium.com/media/e2e64581aa65cbdb2be8d5b722b2ab26/href</a>Aggiungiamo TypeOrmModule anche sul nostro , questa volta utilizzando il metodo forFeature, specificando Todo come entity da gestire:
<a href="https://medium.com/media/66b049784d4fc5bd0ce80619240bfc5a/href">https://medium.com/media/66b049784d4fc5bd0ce80619240bfc5a/href</a>Ora che abbiamo configurato Typeorm possiamo finalmente aggiornare il nostro Todo con tutte le annotazioni necessarie:
<a href="https://medium.com/media/0135d2b57912f8e9085ed3892703f0a8/href">https://medium.com/media/0135d2b57912f8e9085ed3892703f0a8/href</a>Typeorm e le sue annotazioni potete approfondirli consultando il link allegato a inizio step. Per i metodi forRoot e forFeature di TypeOrmModule, potete consultare la sezione database nella documentazione ufficiale di NestJS: <a href="https://docs.nestjs.com/techniques/database">https://docs.nestjs.com/techniques/database</a>
<h4>step 4: DTO</h4>
Per evitare di esporre le nostre entities al di fuori del nostro business logic layer, definiamo un set di oggetti che verranno utilizzati per gestire la comunicazione in entrata e in uscita dai nostri servizi: i DTO (Data Transfer Object).
<a href="https://medium.com/media/4195e363f435f53c303b22910f2c1866/href">https://medium.com/media/4195e363f435f53c303b22910f2c1866/href</a><h4>step 5: Service</h4>
Il service è il “pacchetto” dove andremo a incapsulare la nostra logica di business, esponendo un set di funzionalità pronte all’utilizzo.
Definiamo gli oggetti che popoleranno il nostro service layer:
<pre>nest generate service todo/services/todo</pre>
Nel service appena creato, implementiamo i metodi findAll, findOne, add, edit e delete che, attraverso i DTO, verranno consumati dal nostro controller.
Per disaccoppiare la logica di conversione da Entity a DTO e viceversa dalla business logic, creiamo un TodoMapperService:
<pre>nest generate service todo/services/TodoMapper</pre>
<a href="https://medium.com/media/11bd51cda8e859d3dde1dbc84233da17/href">https://medium.com/media/11bd51cda8e859d3dde1dbc84233da17/href</a>Adesso implementiamo il nostro TodoService: iniettiamo, tramite Dependency Injection, il Todo Repository fornito da Typeorm e il nostro TodoMapperService:
<a href="https://medium.com/media/7acb1e93c0ed8943991442ae2e8f7ec6/href">https://medium.com/media/7acb1e93c0ed8943991442ae2e8f7ec6/href</a><h4>step 6: Controller</h4>
Eccoci arrivati all’ultimo layer della nostra scalata allo stack di NestJS! Per creare il nostro controller utilizzeremo per l’ultima volta la nostra utilissima CLI con questo comando:
<pre>nest generate controller todo/controllers/todo</pre>
Implementiamo i metodi che rispecchieranno le chiamate rest che abbiamo elencato all’inizio dell’articolo, decoriamoli con le routing annotations e agganciamoli ai metodi di TodoService:
<a href="https://medium.com/media/8c89d3a086918023c9f4262930cab85f/href">https://medium.com/media/8c89d3a086918023c9f4262930cab85f/href</a>ATTENZIONE: la serializzazione dei DTO non è attiva a meno che non decoriate il metodo del vostro controller con ClassSerializerInterceptor
<pre>@Post() @UseInterceptors(ClassSerializerInterceptor) public add(@Body() todo: AddTodoDto): Promise&lt;TodoDto&gt; {</pre>
Nel prossimo step approfondiremo questo argomento andando a sviluppare una soluzione che ci permetta di centralizzare questo interceptor 😉
<h4>step 7: Validation</h4>
I nostri DTO sono pronti per viaggiare spediti come macchine di formula 1 all’interno del protocollo http ma manca un ultimo pezzo: la validazione dei suoi dati.
per gestire la validazione dei nostri campi, NestJS fornisce una pipe per la validazione che sfrutta le librerie class-transformer e class-validator. Per poterla utilizzare però, dobbiamo installare le sue dipendenze nel progetto:
<pre>npm i class-transformer class-validator</pre>
Aggiungiamo nelle pipes globali il validatore ValidationPipe:
<a href="https://medium.com/media/daadc7598b26c4b9c66547ed8264480d/href">https://medium.com/media/daadc7598b26c4b9c66547ed8264480d/href</a>E adesso decoriamo i nostri DTO:
<a href="https://medium.com/media/d1598e8a1ab358fa57ab38cd0afbbb3f/href">https://medium.com/media/d1598e8a1ab358fa57ab38cd0afbbb3f/href</a>ATTENZIONE: Una volta compilata la nostra applicazione, tutti i DTO che abbiamo definito fino ad adesso verranno convertiti in oggetti javascript, questo significa che non verrà effettuato nessun type check sui valori che verranno assegnati ai suoi campi!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/940/1*TaQyQXaxqXgBteYGuzWxWg.png"></figure>Quindi inostri validatori funzioneranno solo fino a quando gli verranno passati i valori del tipo giusto? NO.
La libreria class-validator possiede al suo interno anche un set di validatori atti appositamente a eseguire il type check dei nostri campi a runtime:
<a href="https://medium.com/media/2fc0bb81ea3f0a9a5bfd23bc7b4ad641/href">https://medium.com/media/2fc0bb81ea3f0a9a5bfd23bc7b4ad641/href</a><h4>step 8: Run!</h4>
È arrivato finalmente il momento di eseguire la nostra applicazione! 🎉
Per eseguirla normalmente basterà lanciare il comando
<pre>npm run start</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3LSVAT2MihWr4CX53IfMbg.png"></figure>Se invece abbiamo bisogno di entrare in debug nel nostro codice, dovremo eseguire il comando
<pre>npm run start:debug</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vzc83_-lKibKNyEhNCI7bw.png"></figure><h4>step 9: Enable CORS</h4>
Dopo aver sviluppato il nostro backend, molto probabilmente vorremo sviluppare una applicazione frontend e provare a contattarlo, qui entra in gioco il CORS:
<blockquote>Il Cross-Origin Resource Sharing (CORS) è un meccanismo che usa header HTTP addizionali per indicare a un browser che un’applicazione Web in esecuzione su un’origine (dominio) dispone dell’autorizzazione per accedere alle risorse selezionate da un server di origine diversa. […] Per ragioni di sicurezza, i browser limitano le cross-origin HTTP requests che vengono generate all’interno degli scripts.</blockquote>
<blockquote><a href="https://developer.mozilla.org/it/docs/Web/HTTP/CORS">https://developer.mozilla.org/it/docs/Web/HTTP/CORS</a></blockquote>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/609/1*ggx2KYeeNbja1Kmb8OxXxA.png"></figure>Per abilitare CORS basta intervenire nuovamente nel main.ts invocando il metodo enableCors() con tutti i parametri di configurazione di cui necessitiamo. Per semplicità, noi abiliteremo tutto! (Freedom! 🤟)
<a href="https://medium.com/media/9078255738062b8fadf479d8085baad4/href">https://medium.com/media/9078255738062b8fadf479d8085baad4/href</a><h4>step 10: Test</h4>
I test sono assolutamente necessari quando si desidera realizzare un’applicazione manutenibile: ci prevengono dai più comuni errori di sviluppo e dalle possibili regressioni dovute alla modifica di una funzionalità esistente.
Quando generiamo un nuovo componente tramite CLI, viene generato automaticamente anche il suo file di test. Proviamo a farne uno:
<a href="https://medium.com/media/9938279004538b20f748153a1338d85e/href">https://medium.com/media/9938279004538b20f748153a1338d85e/href</a>Per lo sviluppo dei test, Nest utilizza sotto al cofano Jest
<a href="https://jestjs.io/">Jest</a>
per ulteriori informazioni visionate la documentazione NestJS <a href="https://docs.nestjs.com/fundamentals/testing">https://docs.nestjs.com/fundamentals/testing</a>
Potete trovare i sorgenti di questo articolo sul mio repository Github, sentitevi liberi di mettere una ⭐️ 😁
<a href="https://github.com/KernelPanic92/nestjs-todo-app">KernelPanic92/nestjs-todo-app</a>
️
<h3>Conclusioni</h3>
Realizzando l’applicazione descritta in questo articolo ho potuto constatare in prima persona quanto sia veloce e potente questo framework: ti permette di essere estremamente rapido e flessibile senza dover rinunciare assolutamente a nulla. NestJS passa a pieni voti gli esami e può occupare meritatamente il suo posto nella top list dei framework per lo sviluppo web.
Se hai apprezzato questa guida, non dimenticarti di 👏 e di condividerla con tutte le persone che potrebbero trarne beneficio 😃
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=fdecdbafd1c6" width="1" height="1" alt="">

Blog

Dungeon World Italia: un nuovo progetto per la community

2024-09-25 19:09:55

#community #open-source #dungeon-world #traduzione #giochi-di-ruolo

ngx-fastboot: How to increase Angular velocity at bootstrap

2024-09-10 17:32:24

#angular #library-usage #npm-package #ngx-fastboot #fastboot

ngx-fastboot — Come aumentare la velocità di Angular all’avvio

2024-09-10 17:32:21

#library-usage #npm-package #angular #ngx-fastboot #fastboot

Building reactive forms with RxFormMapper

2021-04-20 17:44:32

#angular #typescript #reactive-forms #mapper #decorator-pattern

NestJS: Generare features con un solo click

2020-09-22 21:09:03

#javascript #nodejs #typescript #nestjs #tutorial

Creating your first NestJS application

2020-09-21 16:42:13

#nestjs #nodejs #typescript #javascript #tutorial

Come creare la tua prima applicazione NestJS

2020-09-21 16:40:21

#javascript #nestjs #typescript #tutorial #nodejs