Monorepo con React, Typescript, Tailwind

Il miglior stack front-end per un'applicazione web ora (JUL 2021).

Se stai iniziando un nuovo progetto di medie dimensioni e puoi scegliere qualsiasi stack front-end. Cosa sceglieresti?

Guardando il titolo dell'articolo potresti aver già capito la mia risposta. Questo articolo spiega perché ho scelto lo stack MRTT e come configurarlo.

Battaglia di armi pesanti (React vs Angular vs Vue)
Anche se questo merita un altro articolo a parte, voglio riassumere perché ho scelto di usare React rispetto ad altri.
In poche parole, i vantaggi di React superano gli svantaggi.
Angular è ottimo di per sé funziona bene per i grandi team. Tuttavia, è così fortemente supponente e pesante che a volte può diventare noioso lavorare come sviluppatore. Quindi escludiamo Angular.
React, essendo Vue leggero e aperto, diventa il miglior contendente per gettare le basi per qualsiasi progetto. Tuttavia, poiché Vue non è efficiente nel gestire la struttura a livello aziendale, le complessità si autoregolano.
Vincitore: Reagisci

Cosa e perché un Monorepo?
Con una grande piattaforma come React, tendiamo a creare librerie. Avere queste librerie come repository diversi rende più difficile la manutenzione e la distribuzione può diventare ingombrante. Con Monorepos tutte le librerie, le applicazioni possono utilizzare un'unica fonte per componenti o modalità comuni che possono far risparmiare molto tempo e fatica. Con sempre più enfasi sulla qualità del codice, un processo di revisione è importante quanto il test stesso. Con Monorepo un revisore viene presentato con tutte le modifiche coinvolte in una volta, il che fa risparmiare tempo e velocizza il processo di revisione. Tutto ciò che fa risparmiare tempo fa soldi nell'industria del software. Quindi Monorepo = moolah.

Perché dattiloscritto?
React in sé è molto forte, è flessibile, personalizzabile e facile da codificare. Tuttavia, il codice può diventare disordinato molto presto con il suo singolo file per il modello, CSS e la struttura JS. Con l'aumento del numero di sviluppatori nel team, diventa molto difficile mantenere la qualità del codice. Quindi introduciamo Typescript. La sua natura fortemente strutturale spinge gli sviluppatori ad essere simili con il loro codice pur essendo diversi con la logica. Un migliore IntelliSense, l'accesso alle versioni più recenti di ES, l'uso dell'interfaccia Type, ecc. sono come le ciliegie sulla torta.

Ora impostare Monorepo, React + Typescript è abbastanza semplice. Useremo Nx per farlo. Questo è un ottimo strumento per creare e gestire i tuoi Monorepos, fornisce modelli per la maggior parte dei linguaggi di programmazione. Useremo quello per React ma con una piccola aggiunta di Typescript.

Installa Nx

npm i nx

npx create-nx-workspace --preset=react --template=typescript

Woohoo, è il momento di Tailwind?
Tailwind (Tailwind CSS) è una nuova libreria di stili creata pensando ai siti Web moderni, ad esempio la componentizzazione. Ha un ampio elenco di classi e la sua capacità di personalizzare le classi direttamente in HTML lo rende una scelta ovvia da usare con React. È più leggero e non credo che sia più necessario scaricare la reattività su un framework come Bootstrap (grazie a Flexbox, Grid layout).

Aggiungere Tailwind al tuo Monorepo e usarlo nella tua app

Installa Tailwind e le dipendenze nella cartella principale

npm i tailwindcss autoprefixer postcss postcss-cli postcss-nested -D

1.
Crea un file tailwind.config.js nella tua directory apps/{{ appName}} e copia il contenuto qui sotto, questo file è dove puoi aggiungere plugin Tailwind ed effettuare personalizzazioni in futuro.

module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}','./public/index.html'],
darkMode: false,
theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: [],
};

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
};

@tailwind base;
@tailwind components;
@tailwind utilities;

Evviva, la configurazione dello stack MRTT è completa, quindi procedi con il commit del codice: D
Ho creato un repository nel caso ne avessi bisognohttps://github.com/samyadh/mrtt

Riferimenti:
Nx:https://nx.dev/
Vento in coda: https://tailwindcss.com/
Sistema di calcolo: https://www.reckonsys.com/

Ti è piaciuto l'articolo? Vuoi parlare con me? Clicca sul link qui sotto
https://samyadh.github.io/