Daniele Irsuti
frontend developer

Ho letto Fullstack web development with React and Graphql

Long story short: un tutorial che guida il lettore alla creazione, configurazione, sviluppo e deploy di un’applicazione web.

Questo libro è un tutorial, che guida il lettore alla creazione, configurazione, sviluppo e deploy su AWS di un’applicazione web (Grapbook, una sorta di social simil twitter) dotata di tutto. Una guida onnicomprensiva di backend, frontend e testing in javascript, passando per Webpack, React, GraphQL, Apollo, Express JS, Sequelize, Docker, Mocha.
Vista la tematica trattata, abbastanza vasta e raccolta in appena 473 pagine (ci sono tantissimi snippet di codice) non ci si può aspettare un certo livello di approfondimento su tutto.

Non c’è spazio per minuzie di UI, per pattern raffinati o per spiegazioni brillanti che fanno urlare allo strepitoso: è un grande tutorial che offre la possibilità di mettere in piedi tutto, frontend e backend nel minor tempo possibile, facendo passo passo.

Cosa non mi è piaciuto

L’autore si avventura in configurazioni da 0 ma poi risulta sbrigativo.

Per esempio, all'inizio l'autore sceglie di utilizzare un module bundler per utilizzare React con babel, configurando Webpack passo dopo passo. Non amo particolarmente questo tipo di approccio perché porta via molto tempo e occorre fare innumerevoli configurazioni via via che si introducono funzionalità.

Questa scelta costringe il lettore ad un ripetuto copia ed incolla di snippet di codice (posso immaginare la felicità di chi ha scelto di comprarlo cartaceo 😁), i passaggi di nuovo, spiegati, ma molto superficialmente e senza particolari approfondimenti.

Ah, ho trovato questo snippet

// ⛔️ Non ok, su devtools verrebbe fuori come "_default"
export default ({ trigger, children }) => {...}

Non è una buona idea creare componenti nel primo modo, perché se volessimo ispezionare questo componente su React devtools, figurerebbe con il nome autogenerato _default .

Questo perché ogni componente ha una proprietà denominata displayName e solitamente è autodefinita in base al nome della variabile o funzione assegnato al componente.

// ✅ Ok, su devtools vedresti "Component"
const Component = ({ trigger, children }) => {...}
export default Component;

Cosa mi è piaciuto

L’autore dedica una piccola parte al SSR (sono circa una trentina di pagine). Questa parte la trovo didatticamente molto valida e l'approccio va inquadrato in un contesto esemplificativo quindi difficilmente applicabile in un'applicazione di grandi dimensioni. La soluzione infatti è molto grezza e non tiene conto (volutamente e per brevità) dei drawback che il SSR comporta - banalmente, troppo carico spostato lato server senza l'adozione strategie di ottimizzazione.

Vi è anche una una buona spiegazione sulla gestione di cookie e localStorage per l'autenticazione, un piccolo approfondimento che ho trovato interessante specialmente in quel particolare contesto.

Cons

  • è un tutorial, l'obsolescenza è da mettere in conto

  • non ci sono particolari approfondimenti, c'è poca parte teorica e molta pratica passo passo

  • non offre particolari soluzioni per progetti di grossa entità

Pros

  • guida il lettore nella scelta dello stack e lo fa con senso critico

  • c’è un repository Github strutturato per capitoli che vede l'evoluzione dell'app che si sta sviluppando

  • offre un buono spunto da cui cominciare perché tocca innumerevoli tecnologie specialmente sullo stack backend

  • buona la parte sul SSR a livello didattico

Lo consiglierei?

Sì se piace il genere “tutorial” e a chi ha familiarità (anche ad alto livello) con un po' delle tecnologie citate sopra e vuole combinarle per coprire lo stack frontend e backend, anche per avere una panoramica e non per forza una conoscienza approfondita su tutto.

Link utili

Daniele Irsuti

Note sull'autore

Daniele irsuti è specializzato in applicazioni React, React Native e vanilla. È un appassionato di grafica, psicologia e scrittura