Guida alla creazione di un progetto Javascript Moderno

Benvenuto a questa guida: Guida alla creazione di un progetto Javascript Moderno.

🎉 Questa è la seconda versione della guida, grosse modifiche sono state fatte rispetto alla prima. Controlla il Change Log!

Questa è una guida essenziale per la costruzione di uno stack Javascript utilizzando gli strumenti più attuali. Richiede qualche conoscienza generica di programmazione ed alcune basi di Javascript. È focalizzata sull'utilizzo in sequenza di alcuni tool e ti presenta l'esempio più semplice possibile per ogni tool. Puoi vedere questa guida come un modo per scrivere il tuo boilerplate personale partendo da zero. Siccome l'obiettivo di questa guida è l'utilizzo combinato di una serie di tool, non ti spiegherò nel dettaglio come funziona ciascun tool da solo. Fai riferimento alla loro documentazione o cerca altri tutorial se ti interessa approfondire maggiormente.

Chiaramente non avrai bisogno di utilizzare tutto lo stack se devi solo creare una semplice pagina web con poche interazioni in JS (una combinazione di Browserify/Webpack + Babel + jQuery è sufficiente per poter scrivere codice ES6 in file separati), ma se vuoi creare una web app scalabile, ed hai bisogno di un aiuto per configurare il tutto, questo tutorial farà proprio al tuo caso.

Una buona parte dello stack descritto in questa guida utilizza React. Se sei un principiante e vuoi solo imparare React, il progetto create-react-app ti permetterà di avere un ambiente React funzionante molto rapidamente, utilizzando una configurazione già pronta. Consiglierei questa strada a chi ad esempio entra in un team che utilizza già React e deve mettersi al passo utilizzando un ambiente semplice per fare delle prove. In questa guida non ti fornirò una configurazione già pronta perchè voglio che tu comprenda tutto il procedimento che c'è dietro.

Esempi di codice sono inclusi in ogni capitolo, puoi avviarli utilizzando i comandi yarn && yarn start. Ti consiglio comunque di riscrivere tutto per conto tuo seguendo le istruzioni passo a passo.

Il codice completo è disponibile in questo repository: JS-Stack-Boilerplate e nelle release. C'è anche una demo live

Funziona su Linux, macOS, e Windows.

Nota: Da quando questo tutorial è stato aggiornato a maggio 2017, alcune librerie hanno leggermente modificato le loro API. 95% del tutorial è ancora perfettamente valido, ma se riscontri dei problemi, assicurati di controllare gli open issues.

01 - Node, Yarn, package.json

02 - Babel, ES6, ESLint, Flow, Jest, Husky

03 - Express, Nodemon, PM2

04 - Webpack, React, HMR

05 - Redux, Immutable, Fetch

06 - React Router, Server-Side Rendering, Helmet

07 - Socket.IO

08 - Bootstrap, JSS

09 - Travis, Coveralls, Heroku