Home

Awesome

ATTENZIONE: QUESTO REPOSITORY NON È AGGIORNATO!!!

NUOVA VERSIONE AGGIORNATA QUI: https://github.com/fbertone/guida-javascript-moderno

Stack JavaScript da Zero

Build Status Entra in chat (in inglese) su https://gitter.im/js-stack-from-scratch/Lobby

Yarn React Gulp Redux ESLint Webpack Mocha Chai Flow

Benvenuto a questa guida sul Javascript moderno: Stack Javascript da zero.

ATTENZIONE: QUESTO REPOSITORY NON È AGGIORNATO!!!

NUOVA VERSIONE AGGIORNATA QUI: https://github.com/fbertone/guida-javascript-moderno

Puoi trovare la versione originale della guida, in inglese, qua: JavaScript Stack from Scratch.

Questa è una guida rapida per la creazione da zero di uno stack Javascript. Per seguire questa guida dovresti avere già qulche fondamento di programmazione generica e alcune basi di Javascript. Questa guida é focalizzata su come collegare assieme vari tool di sviluppo e fornesce un esempio il piú semplice possibile per ogni strumento trattato. Puoi vedere questa guida come un modo per costruirti da zero il tuo boilerplate personalizzato.

Non avrai bisogno di utilizzare interamente questo stack se vuoi realizzare una semplice pagina web con alcune interazioni JS (una combinazione di Browserify/Webpack + Babel + jQuery é sufficiente per scrivere codice ES6 in diversi file con compilazione da linea di comando), ma se vuoi realizzare una web app scalabile questo tutorial sará perfetto.

Siccome lo scopo di questa guida è di utilizzare vari strumenti in sequenza, non entrerò nei dettagli di ciascuno strumento. Se ti interessano dei dettagli maggiori o vuoi imparare più a fondo il funzionamento di un tool specifico puoi fare riferimento alla sua documentazione ufficiale o puoi cercare altri tutorial più specifici.

Una parte sostanziosa di questa guida fa riferimento a React. Se stai iniziando adesso e vuoi solo imparare React, create-react-app ti preparerá molto rapidamente con un ambiente React preconfigurato. Consiglierei questo approccio ad esempio a qualcuno che entra in un team che sta giá utilizzando React e deve mettersi al passo utilizzando un ambiente per fare delle prove. In questa guida non ti faró utilizzare una configurazione prefabbricata, perché voglio che tu comprenda realmente quello che sta succedendo.

Esempi di codice sono disponibili in ogni capitolo e puoi avviarli utilizzando il comando yarn && yarn start oppure npm install && npm start. Ti suggerisco di riscrivere tu tutto da zero seguendo le istruzioni passo a passo di ogni capitolo.

Ogni capitolo contiene il codice dei capitoli precedenti, se ti interessa unicamente creare un progetto di base contenente tutto puoi semplicemente clonare l'ultimo capitolo e sarai pronto per iniziare.

Nota: l'ordine dei capitoli non è necessariamente il più didattico. Ad esempio, i test potrebbero essere stati spiegati prima di introdurre React. È abbastanza complicato riordinare i capitoli o modificare quelli passati perchè devo replicare ogni modifica sui capitoli successivi. Quando il tutto sarà più stabile potrei riorganizzare la guida in modo migliore.

Il codice presentato in questa guida funziona in Linux, macOS e Windows.

Indice

1 - Node, NPM, Yarn, e package.json

2 - Installare e utilizzare un pacchetto

3 - Configurare ES6 con Babel e Gulp

4 - Usare la sintassi di ES6 con una classe

5 - La sintassi di ES6 per i moduli

6 - ESLint

7 - App client con Webpack

8 - React

9 - Redux

10 - Immutable JS e Migliorie di Redux

11 - Testare con Mocha, Chai, e Sinon

12 - Type Checking con Flow

Prossimamente

Ambienti di sviluppo e produzione, Express, React Router, Server-Side Rendering, Styling, Enzyme, Git Hooks.

Traduzioni

Se vuoi aggiungere una traduzione fai riferimento a translation recommendations per cominciare!

Credits

Creato da @verekiaverekia.com. Tradotto da Fabrizio Bertone

Licenza: MIT