├── .gitignore
├── .travis.yml
├── README.md
├── how-to-translate.md
├── img
├── chai.png
├── eslint.png
├── flow.png
├── gulp.png
├── js.png
├── mocha.png
├── npm.png
├── react.png
├── redux.png
├── webpack.png
└── yarn.png
├── mdlint.js
├── package.json
├── tutorial
├── 1-node-npm-yarn-package-json
│ ├── README.md
│ ├── index.js
│ └── package.json
├── 10-immutable-redux-improvements
│ ├── .gitignore
│ ├── README.md
│ ├── dist
│ │ └── index.html
│ ├── gulpfile.babel.js
│ ├── package.json
│ ├── src
│ │ ├── client
│ │ │ ├── actions
│ │ │ │ └── dog-actions.js
│ │ │ ├── app.jsx
│ │ │ ├── components
│ │ │ │ ├── button.jsx
│ │ │ │ └── message.jsx
│ │ │ ├── containers
│ │ │ │ ├── bark-button.js
│ │ │ │ └── bark-message.js
│ │ │ └── reducers
│ │ │ │ └── dog-reducer.js
│ │ ├── server
│ │ │ └── index.js
│ │ └── shared
│ │ │ └── dog.js
│ ├── webpack.config.babel.js
│ └── yarn.lock
├── 11-testing-mocha-chai-sinon
│ ├── .gitignore
│ ├── README.md
│ ├── dist
│ │ └── index.html
│ ├── gulpfile.babel.js
│ ├── package.json
│ ├── src
│ │ ├── client
│ │ │ ├── actions
│ │ │ │ └── dog-actions.js
│ │ │ ├── app.jsx
│ │ │ ├── components
│ │ │ │ ├── button.jsx
│ │ │ │ └── message.jsx
│ │ │ ├── containers
│ │ │ │ ├── bark-button.js
│ │ │ │ └── bark-message.js
│ │ │ └── reducers
│ │ │ │ └── dog-reducer.js
│ │ ├── server
│ │ │ └── index.js
│ │ ├── shared
│ │ │ └── dog.js
│ │ └── test
│ │ │ ├── client
│ │ │ └── state-test.js
│ │ │ └── shared
│ │ │ └── dog-test.js
│ ├── webpack.config.babel.js
│ └── yarn.lock
├── 12-flow
│ ├── .flowconfig
│ ├── .gitignore
│ ├── README.md
│ ├── dist
│ │ ├── client-bundle.js.map
│ │ └── index.html
│ ├── gulpfile.babel.js
│ ├── package.json
│ ├── src
│ │ ├── client
│ │ │ ├── actions
│ │ │ │ └── dog-actions.js
│ │ │ ├── app.jsx
│ │ │ ├── components
│ │ │ │ ├── button.jsx
│ │ │ │ └── message.jsx
│ │ │ ├── containers
│ │ │ │ ├── bark-button.js
│ │ │ │ └── bark-message.js
│ │ │ └── reducers
│ │ │ │ └── dog-reducer.js
│ │ ├── server
│ │ │ └── index.js
│ │ ├── shared
│ │ │ └── dog.js
│ │ └── test
│ │ │ ├── client
│ │ │ └── state-test.js
│ │ │ └── shared
│ │ │ └── dog-test.js
│ ├── webpack.config.babel.js
│ └── yarn.lock
├── 2-packages
│ ├── .gitignore
│ ├── README.md
│ ├── index.js
│ ├── package.json
│ └── yarn.lock
├── 3-es6-babel-gulp
│ ├── .gitignore
│ ├── README.md
│ ├── gulpfile.js
│ ├── package.json
│ ├── src
│ │ └── index.js
│ └── yarn.lock
├── 4-es6-syntax-class
│ ├── .gitignore
│ ├── README.md
│ ├── gulpfile.js
│ ├── package.json
│ ├── src
│ │ ├── dog.js
│ │ └── index.js
│ └── yarn.lock
├── 5-es6-modules-syntax
│ ├── .gitignore
│ ├── README.md
│ ├── gulpfile.babel.js
│ ├── package.json
│ ├── src
│ │ ├── dog.js
│ │ └── index.js
│ └── yarn.lock
├── 6-eslint
│ ├── .gitignore
│ ├── README.md
│ ├── gulpfile.babel.js
│ ├── package.json
│ ├── src
│ │ ├── dog.js
│ │ └── index.js
│ └── yarn.lock
├── 7-client-webpack
│ ├── .gitignore
│ ├── README.md
│ ├── dist
│ │ └── index.html
│ ├── gulpfile.babel.js
│ ├── package.json
│ ├── src
│ │ ├── client
│ │ │ └── app.js
│ │ ├── server
│ │ │ └── index.js
│ │ └── shared
│ │ │ └── dog.js
│ ├── webpack.config.babel.js
│ └── yarn.lock
├── 8-react
│ ├── .gitignore
│ ├── README.md
│ ├── dist
│ │ └── index.html
│ ├── gulpfile.babel.js
│ ├── package.json
│ ├── src
│ │ ├── client
│ │ │ └── app.jsx
│ │ ├── server
│ │ │ └── index.js
│ │ └── shared
│ │ │ └── dog.js
│ ├── webpack.config.babel.js
│ └── yarn.lock
└── 9-redux
│ ├── .gitignore
│ ├── README.md
│ ├── dist
│ └── index.html
│ ├── gulpfile.babel.js
│ ├── package.json
│ ├── src
│ ├── client
│ │ ├── actions
│ │ │ └── dog-actions.js
│ │ ├── app.jsx
│ │ ├── components
│ │ │ ├── button.jsx
│ │ │ └── message.jsx
│ │ ├── containers
│ │ │ ├── bark-button.js
│ │ │ └── bark-message.js
│ │ └── reducers
│ │ │ └── dog-reducer.js
│ ├── server
│ │ └── index.js
│ └── shared
│ │ └── dog.js
│ ├── webpack.config.babel.js
│ └── yarn.lock
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | npm-debug.log
3 | node_modules
4 |
5 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | "6"
4 |
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | **ATTENZIONE: QUESTO REPOSITORY NON È AGGIORNATO!!!**
3 |
4 | **NUOVA VERSIONE AGGIORNATA QUI: https://github.com/fbertone/guida-javascript-moderno**
5 |
6 | # Stack JavaScript da Zero
7 |
8 | [](https://travis-ci.org/verekia/js-stack-from-scratch) [](https://gitter.im/js-stack-from-scratch/Lobby)
9 |
10 | [](https://yarnpkg.com/)
11 | [](https://facebook.github.io/react/)
12 | [](http://gulpjs.com/)
13 | [](http://redux.js.org/)
14 | [](http://eslint.org/)
15 | [](https://webpack.github.io/)
16 | [](https://mochajs.org/)
17 | [](http://chaijs.com/)
18 | [](https://flowtype.org/)
19 |
20 | Benvenuto a questa guida sul Javascript moderno: **Stack Javascript da zero**.
21 |
22 | **ATTENZIONE: QUESTO REPOSITORY NON È AGGIORNATO!!!**
23 |
24 | **NUOVA VERSIONE AGGIORNATA QUI: https://github.com/fbertone/guida-javascript-moderno**
25 |
26 | Puoi trovare la versione originale della guida, in inglese, qua: [**JavaScript Stack from Scratch**](https://github.com/verekia/js-stack-from-scratch).
27 |
28 | 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*.
29 |
30 |
31 | 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.
32 |
33 | 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.
34 |
35 | Una parte sostanziosa di questa guida fa riferimento a React. Se stai iniziando adesso e vuoi solo imparare React, [create-react-app](https://github.com/facebookincubator/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.
36 |
37 | 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.
38 |
39 | **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.
40 |
41 | 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.
42 |
43 | Il codice presentato in questa guida funziona in Linux, macOS e Windows.
44 |
45 | ## Indice
46 |
47 | [1 - Node, NPM, Yarn, e package.json](/tutorial/1-node-npm-yarn-package-json)
48 |
49 | [2 - Installare e utilizzare un pacchetto](/tutorial/2-packages)
50 |
51 | [3 - Configurare ES6 con Babel e Gulp](/tutorial/3-es6-babel-gulp)
52 |
53 | [4 - Usare la sintassi di ES6 con una classe](/tutorial/4-es6-syntax-class)
54 |
55 | [5 - La sintassi di ES6 per i moduli](/tutorial/5-es6-modules-syntax)
56 |
57 | [6 - ESLint](/tutorial/6-eslint)
58 |
59 | [7 - App client con Webpack](/tutorial/7-client-webpack)
60 |
61 | [8 - React](/tutorial/8-react)
62 |
63 | [9 - Redux](/tutorial/9-redux)
64 |
65 | [10 - Immutable JS e Migliorie di Redux](/tutorial/10-immutable-redux-improvements)
66 |
67 | [11 - Testare con Mocha, Chai, e Sinon](/tutorial/11-testing-mocha-chai-sinon)
68 |
69 | [12 - Type Checking con Flow](/tutorial/12-flow)
70 |
71 | ## Prossimamente
72 |
73 | Ambienti di sviluppo e produzione, Express, React Router, Server-Side Rendering, Styling, Enzyme, Git Hooks.
74 |
75 | ## Traduzioni
76 |
77 | - [English](https://github.com/verekia/js-stack-from-scratch) by [@verekia](https://twitter.com/verekia)
78 | - [中文](https://github.com/pd4d10/js-stack-from-scratch) by [@pd4d10](http://github.com/pd4d10)
79 | - [Italiano](https://github.com/fbertone/js-stack-from-scratch) by [Fabrizio Bertone](https://github.com/fbertone)
80 | - [日本語](https://github.com/takahashim/js-stack-from-scratch) by [@takahashim](https://github.com/takahashim)
81 |
82 | Se vuoi aggiungere una traduzione fai riferimento a [translation recommendations](https://github.com/verekia/js-stack-from-scratch/how-to-translate.md) per cominciare!
83 |
84 | ## Credits
85 |
86 | Creato da [@verekia](https://twitter.com/verekia) – [verekia.com](http://verekia.com/).
87 | Tradotto da Fabrizio Bertone
88 |
89 | Licenza: MIT
90 |
--------------------------------------------------------------------------------
/how-to-translate.md:
--------------------------------------------------------------------------------
1 | # How to translate this tutorial
2 |
3 | Thank you for your interest in translating my tutorial! Here are a few recommendations to get started.
4 |
5 | This tutorial is in constant evolution to provide the best learning experience to readers. Both the code and `README.md` files will change over time. It is great if you do a one-shot translation that won't evolve, but it would be even better if you could try to keep up with the original English version as it changes!
6 |
7 | Here is what I think is a good workflow:
8 |
9 | - Check if there is already a translation issue open for your language. If that's the case, get in touch with the folks who opened it and consider collaborating. All maintainers will be mentioned on the English repo, so team work is encouraged! You can open issues on their translation fork project to offer your help on certain chapters for instance.
10 |
11 | - Join the [Translations Gitter room](https://gitter.im/js-stack-from-scratch/Translations) if you're feeling chatty.
12 |
13 | - Fork the main [English repository](https://github.com/verekia/js-stack-from-scratch).
14 |
15 | - Open an issue on the English repo to show you're currently working on a translation.
16 |
17 | - Translate the `README.md` files.
18 |
19 | - Add a note somewhere explaining on the main `README.md` that this is a translation, with a link to the English repository. If you don't plan to make the translation evolve over time, you can maybe add a little note saying to refer to the English one for an up-to-date version of the tutorial. I'll leave that up to your preference.
20 |
21 | - Submit a Pull Request to the English repo to add a link to your forked repository under the Translations section of the main `README.md`. It could look like this:
22 |
23 | ```md
24 | ## Translations
25 |
26 | - [Language](http://github.com/yourprofile/your-fork) by [You](http://yourwebsite.com)
27 | or
28 | - [Language](http://github.com/yourprofile/your-fork) by [@You](http://twitter.com/yourprofile)
29 | or
30 | - [Language](http://github.com/yourprofile/your-fork) by [@You](http://github.com/yourprofile)
31 | ```
32 |
33 | Since I want to reward you for your good work as much as possible, you can put any link you like on your name (to your personal website, Twitter profile, or Github profile for instance).
34 |
35 | - After your original one-shot translation, if you want to update your repo with the latest change from the main English repo, [sync your fork](https://help.github.com/articles/syncing-a-fork/) with my repo. To make it easy to see what changed since your initial translation, you can use Github's feature to [compare commits](https://help.github.com/articles/comparing-commits-across-time/#comparing-commits). Set the **base** to the last commit from the English repo you used to translate, and compare it to **master**, like so:
36 |
37 |
38 | https://github.com/verekia/js-stack-from-scratch/compare/dfab78b581a3da800daeb3686b900dd9ea972da0...master
39 |
40 |
41 | That should give you a easy-to-read diff to see exactly what changed in `README.md` files since your translation!
42 |
--------------------------------------------------------------------------------
/img/chai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/chai.png
--------------------------------------------------------------------------------
/img/eslint.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/eslint.png
--------------------------------------------------------------------------------
/img/flow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/flow.png
--------------------------------------------------------------------------------
/img/gulp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/gulp.png
--------------------------------------------------------------------------------
/img/js.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/js.png
--------------------------------------------------------------------------------
/img/mocha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/mocha.png
--------------------------------------------------------------------------------
/img/npm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/npm.png
--------------------------------------------------------------------------------
/img/react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/react.png
--------------------------------------------------------------------------------
/img/redux.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/redux.png
--------------------------------------------------------------------------------
/img/webpack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/webpack.png
--------------------------------------------------------------------------------
/img/yarn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbertone/js-stack-from-scratch/b67673bcb69b04abb91f9d4946a527dee8667c50/img/yarn.png
--------------------------------------------------------------------------------
/mdlint.js:
--------------------------------------------------------------------------------
1 | const glob = require('glob');
2 | const markdownlint = require('markdownlint');
3 |
4 | const config = {
5 | 'default': true,
6 | 'line_length': false,
7 | 'no-emphasis-as-header': false
8 | }
9 |
10 | const files = glob.sync('**/*.md', { ignore: '**/node_modules/**' });
11 |
12 | markdownlint({ files, config }, (err, result) => {
13 | if (!err) {
14 | const resultString = result.toString();
15 | console.log('== Linting Markdown Files...');
16 | if (resultString) {
17 | console.log(resultString);
18 | process.exit(1);
19 | } else {
20 | console.log('== OK!');
21 | }
22 | }
23 | });
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "test": "yarn run mdlint && cd tutorial/1-node-npm-yarn-package-json && yarn && yarn run tutorial-test && cd ../2-packages && yarn && yarn run tutorial-test && cd ../3-es6-babel-gulp && yarn && yarn run tutorial-test && cd ../4-es6-syntax-class && yarn && yarn run tutorial-test && cd ../5-es6-modules-syntax && yarn && yarn run tutorial-test && cd ../6-eslint && yarn && yarn run tutorial-test && cd ../7-client-webpack && yarn && yarn run tutorial-test && cd ../8-react && yarn && yarn run tutorial-test && cd ../9-redux && yarn && yarn run tutorial-test && cd ../10-immutable-redux-improvements && yarn && yarn run tutorial-test && cd ../11-testing-mocha-chai-sinon && yarn && yarn run tutorial-test && cd ../12-flow && yarn && yarn run tutorial-test",
7 | "mdlint": "node mdlint.js"
8 | },
9 | "devDependencies": {
10 | "glob": "^7.1.1",
11 | "markdownlint": "^0.3.0",
12 | "yarn": "^0.16.1"
13 | },
14 | "repository": "verekia/js-stack-from-scratch",
15 | "author": "Jonathan Verrecchia - @verekia",
16 | "license": "MIT"
17 | }
18 |
--------------------------------------------------------------------------------
/tutorial/1-node-npm-yarn-package-json/README.md:
--------------------------------------------------------------------------------
1 | # 1 - Node, NPM, Yarn, e package.json
2 |
3 | In questa sezione configureremo Node, NPM, Yarn e un file `package.json` di base.
4 |
5 | Prima di tutto dobbiamo installare Node, che non è utilizzato solo per il back-end ma è la base di tutti gli strumenti necessari per creare uno stack Javascript moderno lato Front-End.
6 |
7 | Vai alla [pagina di download](https://nodejs.org/en/download/current/) per installare su Windows o mac oppure segui le istruzioni sulla [pagina di installazione](https://nodejs.org/en/download/package-manager/) per le distribuzioni Linux.
8 |
9 |
10 | Ad esempio, su **Ubuntu / Debian**, devi eseguire i seguenti comandi per installare Node:
11 |
12 | ```bash
13 | curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
14 | sudo apt-get install -y nodejs
15 | ```
16 | Ti serve una qualsiasi versione di Node > 6.5.0.
17 |
18 | `npm`, il package manager standard di Node, viene installato automaticamente assieme a Node, non devi quindi installarlo tu a mano.
19 |
20 | **Nota**: Se Node è già installato, installa `nvm` ([Node Version Manager](https://github.com/creationix/nvm)), utilizza `nvm` per installare in automatico l'ultima versione di Node.
21 |
22 | [Yarn](https://yarnpkg.com/) è un nuovo package manager ed è molto più veloce rispetto ad NPM, mantiene una cache dei pacchetti installati, e gestisce le dipendenze in modo più [prevedibile](https://yarnpkg.com/en/docs/yarn-lock). Da quando è [uscito](https://code.facebook.com/posts/1840075619545360) a ottobre 2016, è stato adottato molto rapidamente e sta diventando il package manager di riferimento per la comunità Javascript. In questo tutorial utilizzeremo Yarn. Se tu preferisci rimanere con NPM puoi sostituire tutti i comandi `yarn add` e `yarn add --dev` in questo tutorial rispettivamente con `npm install --save` e `npm install --dev`.
23 |
24 | - Installa Yarn seguendo le [istruzioni](https://yarnpkg.com/en/docs/install). Puoi utilizzare `npm install -g yarn` o `sudo npm install -g yarn` (si, stiamo sfruttando NPM per installare Yarn, proprio come utilizzeresti Internet Explorer o Safari per installare Chrome!).
25 |
26 | - Crea una nuova cartella di base ed entraci `cd` dentro.
27 | - Esegui `yarn init` e rispondi alle domande (`yarn init -y` per saltare tutte le domande), per generare automaticamente un file `package.json`.
28 | - Crea un file `index.js` contenente `console.log('Hello world')`.
29 | - Esegui `node .` in questa cartella (`index.js` è il file che Node cerca automaticamente all'interno della cartella corrente). Dovrebbe scrivere "Hello world".
30 |
31 | Eseguire `node .` per lanciare il nostro programma è un po' troppo di basso livello. Utilizzeremo invece uno script NPM/Yarn per avviare l'esecuzione del nostro programma. Questo ci permetterà di avere un livello di astrazione tale da poter sempre utilizare `yarn start`, anche quando il nostro programma si farà più complesso.
32 |
33 | - In `package.json`, aggiungi un oggetto `scripts` all'oggetto di base, strutturato cosí:
34 |
35 | ```json
36 | "scripts": {
37 | "start": "node ."
38 | }
39 | ```
40 |
41 | `package.json` deve essere un file JSON valido, il che significa che non puoi avere delle virgole "finali" che sono invece utilizzabili nei normali oggetti Javascript. Fai quindi molta attenzione quando modifichi a mano il tuo file `package.json`.
42 |
43 | - Esegui `yarn start`. Dovrebbe scrivere `Hello world`.
44 |
45 | - Crea un file `.gitignore` ed aggiungici le seguenti righe:
46 |
47 | ```gitignore
48 | npm-debug.log
49 | yarn-error.log
50 | ```
51 |
52 | **Nota**: Se dai un'occhiata a file `package.json` che fornisco, vedrai uno script `tutorial-test` in ogni capitolo. Questi script mi permettono di verificare che i capitoli sono a posto eseguendo `yarn && yarn start`. Puoi cancellarli tranquillamente nei tuoi progetti.
53 |
54 | Prossima sezione: [2 - Installare ed usare un pacchetto](/tutorial/2-packages)
55 |
56 | Torna all'[indice](https://github.com/fbertone/js-stack-from-scratch).
57 |
--------------------------------------------------------------------------------
/tutorial/1-node-npm-yarn-package-json/index.js:
--------------------------------------------------------------------------------
1 | console.log('Hello world');
2 |
--------------------------------------------------------------------------------
/tutorial/1-node-npm-yarn-package-json/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "node .",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "yarn start"
9 | },
10 | "repository": "verekia/js-stack-from-scratch",
11 | "author": "Jonathan Verrecchia - @verekia",
12 | "license": "MIT"
13 | }
14 |
--------------------------------------------------------------------------------
/tutorial/10-immutable-redux-improvements/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | yarn-error.log
4 | /lib/
5 | /dist/client-bundle.js*
6 |
--------------------------------------------------------------------------------
/tutorial/10-immutable-redux-improvements/README.md:
--------------------------------------------------------------------------------
1 | # 10 - Immutable JS e Migliorie Redux
2 |
3 | ## Immutable JS
4 |
5 | A differenza del capitolo precedente, questo é abbastanza semplice e consiste in piccoli miglioramenti.
6 |
7 | Per prima cosa aggiungeremo **Immutable JS** al nostro codice. Immutable é una libreria per manipolare oggetti senza modificarli. Invece di fare:
8 |
9 | ```javascript
10 | const obj = { a: 1 };
11 | obj.a = 2; // Mutates `obj`
12 | ```
13 |
14 | Faresti:
15 |
16 | ```javascript
17 | const obj = Immutable.Map({ a: 1 });
18 | obj.set('a', 2); // Returns a new object without mutating `obj`
19 | ```
20 |
21 | Questo approccio segue il paradigma della **programmazione funzionale**, che funziona molto bene con Redux. Le tue funzioni reducer *devono* essere funzioni pure che non alterano lo stato passato come parametro, ma ritornano invece un nuovo oggetto. Usiamo Immutable per assicurarci che sia cosí.
22 |
23 | - Esegui `yarn add immutable`
24 |
25 | Utilizzeremo `Map` nel nostro codice, ma ESLint e la configurazione Airbnb si lamenteranno dell'utilizzo di una dell'iniziale maiuscola per quella che non é una classe. Aggiungi questo al `package.json` sotto `eslintConfig`:
26 |
27 | ```json
28 | "rules": {
29 | "new-cap": [
30 | 2,
31 | {
32 | "capIsNewExceptions": [
33 | "Map",
34 | "List"
35 | ]
36 | }
37 | ]
38 | }
39 | ```
40 |
41 | Questo fa in modo che `Map` e `List` (i due oggetti di Immutable che utilizzeremo in continuazione) siano delle eccezioni alle regole di ESLint. Questa formattazione JSON cosí prolissa é generata automaticamente da Yarn/NPM, non possiamo quindi renderla piú compatta.
42 |
43 | Ad ogni modo, torniamo a Immutable:
44 |
45 | Modifica `dog-reducer.js` in modo che diventi cosí:
46 |
47 | ```javascript
48 | import Immutable from 'immutable';
49 | import { MAKE_BARK } from '../actions/dog-actions';
50 |
51 | const initialState = Immutable.Map({
52 | hasBarked: false,
53 | });
54 |
55 | const dogReducer = (state = initialState, action) => {
56 | switch (action.type) {
57 | case MAKE_BARK:
58 | return state.set('hasBarked', action.payload);
59 | default:
60 | return state;
61 | }
62 | };
63 |
64 | export default dogReducer;
65 | ```
66 |
67 | Lo stato iniziale viene adesso creato utilizzando una Map di Immutable, e il nuovo stato viene generato utilizzando `set()`, impedendo ogni modifica allo stato precedente.
68 |
69 | In `containers/bark-message.js`, aggiorna la funzione `mapStateToProps` in modo da usare `.get('hasBarked')` al posto di `.hasBarked`:
70 |
71 | ```javascript
72 | const mapStateToProps = state => ({
73 | message: state.dog.get('hasBarked') ? 'The dog barked' : 'The dog did not bark',
74 | });
75 | ```
76 |
77 | L'app dovrebbe ancora comportarsi esattamente come prima.
78 |
79 | **Nota**: Se Babel si lamenta del fatto che Immutable supera i 100KB, aggiungi `"compact": false` nel `package.json` alla voce `babel`.
80 |
81 | Come puoi vedere dal pezzo di codice precedente, il nostro oggetto di stato contiene ancora l'attributo `dog` che non é immutabile. Va bene cosí, ma se vuoi manipolare esclusivamente oggetti immutabili, puoi installare il pacchetto `redux-immutable` per sostituire la funzione `combineReducers` di Redux.
82 |
83 | **Opzionale**:
84 |
85 | - Esegui `yarn add redux-immutable`
86 | - Sostituisci la funzione `combineReducers` in `app.jsx` per usare quella importata da `redux-immutable`.
87 | - In `bark-message.js` sostituisci `state.dog.get('hasBarked')` con `state.getIn(['dog', 'hasBarked'])`.
88 |
89 | ## Azioni Redux
90 |
91 | Man mano che aggiungi sempre piú azioni alla tua app, ti accorgerai che stai scrivendo molto codice ripetuto. Il pacchetto `redux-actions` ti aiuterá a ridurre le ripetizioni. Con `redux-actions` puoi riscrivere il file `dog-actions.js` in modo piú compatto:
92 |
93 | ```javascript
94 | import { createAction } from 'redux-actions';
95 |
96 | export const MAKE_BARK = 'MAKE_BARK';
97 | export const makeBark = createAction(MAKE_BARK, () => true);
98 | ```
99 |
100 | `redux-actions` implementa il modello di [Azione Standard Flux](https://github.com/acdlite/flux-standard-action), proprio come l'azione che abbiamo scritto precedentemente, quindi integrare `redux-actions` sará del tutto lineare se segui questo modello.
101 |
102 | - Non dimenticarti di eseguire `yarn add redux-actions`.
103 |
104 | Prossima sezione: [11 - Testare con Mocha, Chai e Sinon](/tutorial/11-testing-mocha-chai-sinon)
105 |
106 | Torna alla [sezione precedente](/tutorial/9-redux) o all'[indice](https://github.com/fbertone/js-stack-from-scratch).
107 |
--------------------------------------------------------------------------------
/tutorial/10-immutable-redux-improvements/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/tutorial/10-immutable-redux-improvements/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 |
3 | import gulp from 'gulp';
4 | import babel from 'gulp-babel';
5 | import eslint from 'gulp-eslint';
6 | import del from 'del';
7 | import webpack from 'webpack-stream';
8 | import webpackConfig from './webpack.config.babel';
9 |
10 | const paths = {
11 | allSrcJs: 'src/**/*.js?(x)',
12 | serverSrcJs: 'src/server/**/*.js?(x)',
13 | sharedSrcJs: 'src/shared/**/*.js?(x)',
14 | clientEntryPoint: 'src/client/app.jsx',
15 | clientBundle: 'dist/client-bundle.js?(.map)',
16 | gulpFile: 'gulpfile.babel.js',
17 | webpackFile: 'webpack.config.babel.js',
18 | libDir: 'lib',
19 | distDir: 'dist',
20 | };
21 |
22 | gulp.task('lint', () =>
23 | gulp.src([
24 | paths.allSrcJs,
25 | paths.gulpFile,
26 | paths.webpackFile,
27 | ])
28 | .pipe(eslint())
29 | .pipe(eslint.format())
30 | .pipe(eslint.failAfterError())
31 | );
32 |
33 | gulp.task('clean', () => del([
34 | paths.libDir,
35 | paths.clientBundle,
36 | ]));
37 |
38 | gulp.task('build', ['lint', 'clean'], () =>
39 | gulp.src(paths.allSrcJs)
40 | .pipe(babel())
41 | .pipe(gulp.dest(paths.libDir))
42 | );
43 |
44 | gulp.task('main', ['lint', 'clean'], () =>
45 | gulp.src(paths.clientEntryPoint)
46 | .pipe(webpack(webpackConfig))
47 | .pipe(gulp.dest(paths.distDir))
48 | );
49 |
50 | gulp.task('watch', () => {
51 | gulp.watch(paths.allSrcJs, ['main']);
52 | });
53 |
54 | gulp.task('default', ['watch', 'main']);
55 |
--------------------------------------------------------------------------------
/tutorial/10-immutable-redux-improvements/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "gulp",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "gulp main"
9 | },
10 | "eslintConfig": {
11 | "extends": "airbnb",
12 | "plugins": [
13 | "import"
14 | ],
15 | "env": {
16 | "browser": true
17 | },
18 | "rules": {
19 | "new-cap": [
20 | 2,
21 | {
22 | "capIsNewExceptions": [
23 | "Map",
24 | "List"
25 | ]
26 | }
27 | ]
28 | }
29 | },
30 | "babel": {
31 | "presets": [
32 | "latest",
33 | "react"
34 | ],
35 | "compact": false
36 | },
37 | "dependencies": {
38 | "babel-polyfill": "^6.16.0",
39 | "immutable": "^3.8.1",
40 | "react": "^15.3.2",
41 | "react-dom": "^15.3.2",
42 | "react-redux": "^4.4.5",
43 | "redux": "^3.6.0",
44 | "redux-actions": "^0.12.0",
45 | "redux-immutable": "^3.0.8"
46 | },
47 | "devDependencies": {
48 | "babel-loader": "^6.2.5",
49 | "babel-preset-latest": "^6.16.0",
50 | "babel-preset-react": "^6.16.0",
51 | "del": "^2.2.2",
52 | "eslint": "^3.8.1",
53 | "eslint-config-airbnb": "^12.0.0",
54 | "eslint-plugin-import": "^2.0.1",
55 | "eslint-plugin-jsx-a11y": "^2.2.3",
56 | "eslint-plugin-react": "^6.4.1",
57 | "gulp": "^3.9.1",
58 | "gulp-babel": "^6.1.2",
59 | "gulp-eslint": "^3.0.1",
60 | "webpack-stream": "^3.2.0"
61 | },
62 | "repository": "verekia/js-stack-from-scratch",
63 | "author": "Jonathan Verrecchia - @verekia",
64 | "license": "MIT"
65 | }
66 |
--------------------------------------------------------------------------------
/tutorial/10-immutable-redux-improvements/src/client/actions/dog-actions.js:
--------------------------------------------------------------------------------
1 | import { createAction } from 'redux-actions';
2 |
3 | export const MAKE_BARK = 'MAKE_BARK';
4 | export const makeBark = createAction(MAKE_BARK, () => true);
5 |
--------------------------------------------------------------------------------
/tutorial/10-immutable-redux-improvements/src/client/app.jsx:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill';
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { createStore } from 'redux';
6 | import { Provider } from 'react-redux';
7 | import { combineReducers } from 'redux-immutable';
8 | import dogReducer from './reducers/dog-reducer';
9 | import BarkMessage from './containers/bark-message';
10 | import BarkButton from './containers/bark-button';
11 |
12 | const store = createStore(combineReducers({
13 | dog: dogReducer,
14 | }));
15 |
16 | ReactDOM.render(
17 |
18 |
;
6 |
7 | Message.propTypes = {
8 | message: PropTypes.string.isRequired,
9 | };
10 |
11 | export default Message;
12 |
--------------------------------------------------------------------------------
/tutorial/12-flow/src/client/containers/bark-button.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import { connect } from 'react-redux';
4 | import Button from '../components/button';
5 | import { makeBark } from '../actions/dog-actions';
6 |
7 | const mapDispatchToProps = dispatch => ({
8 | action: () => { dispatch(makeBark()); },
9 | actionLabel: 'Bark',
10 | });
11 |
12 | export default connect(null, mapDispatchToProps)(Button);
13 |
--------------------------------------------------------------------------------
/tutorial/12-flow/src/client/containers/bark-message.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import { connect } from 'react-redux';
4 | import Message from '../components/message';
5 |
6 | const mapStateToProps = state => ({
7 | message: state.getIn(['dog', 'hasBarked']) ? 'The dog barked' : 'The dog did not bark',
8 | });
9 |
10 | export default connect(mapStateToProps)(Message);
11 |
--------------------------------------------------------------------------------
/tutorial/12-flow/src/client/reducers/dog-reducer.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as Immutable from 'immutable';
4 | import { MAKE_BARK } from '../actions/dog-actions';
5 |
6 | const initialState = Immutable.Map({
7 | hasBarked: false,
8 | });
9 |
10 | const dogReducer = (state: Object = initialState, action: Object) => {
11 | switch (action.type) {
12 | case MAKE_BARK:
13 | return state.set('hasBarked', action.payload);
14 | default:
15 | return state;
16 | }
17 | };
18 |
19 | export default dogReducer;
20 |
--------------------------------------------------------------------------------
/tutorial/12-flow/src/server/index.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | /* eslint-disable no-console */
4 |
5 | import Dog from '../shared/dog';
6 |
7 | const toby = new Dog('Toby');
8 |
9 | console.log(toby.bark());
10 |
--------------------------------------------------------------------------------
/tutorial/12-flow/src/shared/dog.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | class Dog {
4 | name: string;
5 |
6 | constructor(name: string) {
7 | this.name = name;
8 | }
9 |
10 | bark(): string {
11 | return `Wah wah, I am ${this.name}`;
12 | }
13 |
14 | barkInConsole() {
15 | /* eslint-disable no-console */
16 | console.log(this.bark());
17 | /* eslint-enable no-console */
18 | }
19 |
20 | }
21 |
22 | export default Dog;
23 |
--------------------------------------------------------------------------------
/tutorial/12-flow/src/test/client/state-test.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | /* eslint-disable import/no-extraneous-dependencies, no-unused-expressions */
4 |
5 | import { createStore } from 'redux';
6 | import { combineReducers } from 'redux-immutable';
7 | import { should } from 'chai';
8 | import { describe, it, beforeEach } from 'mocha';
9 | import dogReducer from '../../client/reducers/dog-reducer';
10 | import { makeBark } from '../../client/actions/dog-actions';
11 |
12 | should();
13 | let store;
14 |
15 | describe('App State', () => {
16 | describe('Dog', () => {
17 | beforeEach(() => {
18 | store = createStore(combineReducers({
19 | dog: dogReducer,
20 | }));
21 | });
22 | describe('makeBark', () => {
23 | it('should make hasBarked go from false to true', () => {
24 | store.getState().getIn(['dog', 'hasBarked']).should.be.false;
25 | store.dispatch(makeBark());
26 | store.getState().getIn(['dog', 'hasBarked']).should.be.true;
27 | });
28 | });
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/tutorial/12-flow/src/test/shared/dog-test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies, no-console */
2 |
3 | import chai from 'chai';
4 | import { stub } from 'sinon';
5 | import sinonChai from 'sinon-chai';
6 | import { describe, it } from 'mocha';
7 | import Dog from '../../shared/dog';
8 |
9 | chai.should();
10 | chai.use(sinonChai);
11 |
12 | describe('Shared', () => {
13 | describe('Dog', () => {
14 | describe('barkInConsole', () => {
15 | it('should print a bark string with its name', () => {
16 | stub(console, 'log');
17 | new Dog('Test Toby').barkInConsole();
18 | console.log.should.have.been.calledWith('Wah wah, I am Test Toby');
19 | console.log.restore();
20 | });
21 | });
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/tutorial/12-flow/webpack.config.babel.js:
--------------------------------------------------------------------------------
1 | export default {
2 | output: {
3 | filename: 'client-bundle.js',
4 | },
5 | devtool: 'source-map',
6 | module: {
7 | loaders: [
8 | {
9 | test: /\.jsx?$/,
10 | loader: 'babel-loader',
11 | exclude: [/node_modules/],
12 | },
13 | ],
14 | },
15 | resolve: {
16 | extensions: ['', '.js', '.jsx'],
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/tutorial/2-packages/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | yarn-error.log
4 |
--------------------------------------------------------------------------------
/tutorial/2-packages/README.md:
--------------------------------------------------------------------------------
1 | # 2 - Installare ed usare un pacchetto
2 |
3 | In questa sezione imparerai come installare ed utilizzare un pacchetto. Un "pacchetto" è semplicemente del codice che qualcuno ha scritto e messo a disposizione, e che tu puoi sfruttare all'interno delle tue applicazioni. In questo esempio utilizzeremo un pacchetto per la manipolazione dei colori.
4 |
5 | - Installa il pacchetto chiamato `color` utilizzando il comando `yarn add color`.
6 |
7 | Apri `package.json` per vedere come Yarn ha automaticamente aggiunto `color` nella sezione `dependencies`, che contiene le "dipendenze" esterne della tua applicazione.
8 |
9 | La cartella `node_modules` è stata creata per salvare i pacchetti installati.
10 |
11 | - Aggiungi `node_modules/` al tuo file `.gitignore` (ed esegui `git init` per creare un nuovo repository git, se non l'hai ancora fatto).
12 |
13 | Ti accorgerai inoltre che Yarn ha creato anche un file `yarn.lock`. Dovresti assicurarti che questo file venga aggiunto al tuo repository git, in questo modo tutti i collaboratori del tuo progetto utilizzeranno la stessa versione del pacchetto. Se stai continuando ad utilizzare NPM invece di Yarn, l'equivalente di questo file è lo *shrinkwrap*.
14 |
15 | - Aggiungi `const Color = require('color');` nel file `index.js`
16 | - Puoi utilizzare il pacchetto in questo modo: `const redHexa = Color({r: 255, g: 0, b: 0}).hexString();`
17 | - Aggiungi `console.log(redHexa)`.
18 | - Se esegui `yarn start` dovresti ottenere `#FF0000`.
19 |
20 | Complimenti, hai installato ed utilizzato un pacchetto esterno!
21 |
22 | Abbiamo utilizzato il pacchetto `color` come esempio di installazione di un semplice pacchetto. Nelle sezioni successive non lo utilizzeremo più, puoi quindi disinstallarlo così:
23 |
24 | - Esegui `yarn remove color`
25 |
26 | **Nota**: Ci sono due tipi differenti di dipendenze, `"dependencies"` e `"devDependencies"`. `"dependencies"` è più generale di `"devDependencies"`, che contiene pacchetti utilizzati unicamente durante la fase di sviluppo, non in produzione (tipicamente, pacchetti per creare le build, linters, etc). Per le `"devDependencies"`, utilizzeremo il comando `yarn add --dev [package]`.
27 |
28 | Prossima sezione: [3 - Configurazione di ES6 con Babel e Gulp](/tutorial/3-es6-babel-gulp)
29 |
30 | Torna alla [sezione precedente](/tutorial/1-node-npm-yarn-package-json) o all'[indice](https://github.com/fbertone/js-stack-from-scratch).
31 |
--------------------------------------------------------------------------------
/tutorial/2-packages/index.js:
--------------------------------------------------------------------------------
1 | const Color = require('color');
2 |
3 | const redHexa = Color({r: 255, g: 0, b: 0}).hexString();
4 |
5 | console.log(redHexa);
6 |
--------------------------------------------------------------------------------
/tutorial/2-packages/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "node .",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "yarn start"
9 | },
10 | "dependencies": {
11 | "color": "^0.11.3"
12 | },
13 | "repository": "verekia/js-stack-from-scratch",
14 | "author": "Jonathan Verrecchia - @verekia",
15 | "license": "MIT"
16 | }
17 |
--------------------------------------------------------------------------------
/tutorial/2-packages/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | clone@^1.0.2:
4 | version "1.0.2"
5 | resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
6 |
7 | color-convert@^1.3.0:
8 | version "1.5.0"
9 | resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.5.0.tgz#7a2b4efb4488df85bca6443cb038b7100fbe7de1"
10 |
11 | color-name@^1.0.0:
12 | version "1.1.1"
13 | resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
14 |
15 | color-string@^0.3.0:
16 | version "0.3.0"
17 | resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
18 | dependencies:
19 | color-name "^1.0.0"
20 |
21 | color@^0.11.3:
22 | version "0.11.3"
23 | resolved "https://registry.yarnpkg.com/color/-/color-0.11.3.tgz#4bad1d0d52499dd00dbd6f0868442467e49394e6"
24 | dependencies:
25 | clone "^1.0.2"
26 | color-convert "^1.3.0"
27 | color-string "^0.3.0"
28 |
29 |
--------------------------------------------------------------------------------
/tutorial/3-es6-babel-gulp/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | yarn-error.log
4 | /lib/
5 |
--------------------------------------------------------------------------------
/tutorial/3-es6-babel-gulp/README.md:
--------------------------------------------------------------------------------
1 | # 3 - Configurazione di ES6 con Babel e Gulp
2 |
3 | Adesso utilizzeremo la nuova sintassi di ES6, che rappresenta un notevole miglioramento rispetto alla "vecchia" sintassi ES5. Tutti i browser sono in grado di comprendere la sintassi ES5, ma per il momento non supportano ancora ES6. Utilizzeremo un tool chiamato Babel per trasformere il codice ES6 in codice compatibile con ES5. Per eseguire Babel, utilizzeremo Gulp, un task runner. È simile ai comandi presenti nella sezione `scripts` del `package.json`, ma scrivere i tuoi task in un file JS è più facile e pulito rispetto e scriverli in un file JSON, installeremo quindi Gulp, ed il suo plugin per Babel:
4 |
5 | - Esegui `yarn add --dev gulp`
6 | - Esegui `yarn add --dev gulp-babel`
7 | - Esegui `yarn add --dev babel-preset-latest`
8 | - Esegui `yarn add --dev del` (per il task `clean` come vedrai fra poco)
9 | - Nel `package.json`, aggiungi un campo `babel` per la configurazione di Babel. Fagli utilizzare l'ultima versione di Babel inserendo:
10 |
11 | ```json
12 | "babel": {
13 | "presets": [
14 | "latest"
15 | ]
16 | },
17 | ```
18 |
19 | **Nota**: Un file `.babelrc` nella cartella principale del tuo progetto può essere utilizzato al posto del campo `babel` nel `package.json`. La cartella principale del tuo progetto diventerà sempre più piena con l'avanzare dello sviluppo, cerca quindi di utilizzare `package.json` per mantenere la configurazione di Babel.
20 |
21 | - Sposta il file `index.js` in una nuova cartella `src`. Là dentro è dove scriverai tutto il tuo codice ES6. La cartella `lib` conterrà il codice ricompilato in ES5. Gulp e Babel si occuperanno di creare il tutto. Rimuovi tutti il codice precedente relativo a `color`-related nel file `index.js`, e sostituiscilo con:
22 |
23 | ```javascript
24 | const str = 'ES6';
25 | console.log(`Hello ${str}`);
26 | ```
27 |
28 | Stiamo utilizzando un *modello* (template) di stringa, si tratta di una nuova funzionalità di ES6 che permette di inserire variabili direttamente all'interno di una stringa, senza concatenazioni, utilizzando `${}`. Fai attenzione che le stringhe template vengono create utilizzando gli **apici inversi**.
29 |
30 | - Crea un file `gulpfile.js` contenente:
31 |
32 | ```javascript
33 | const gulp = require('gulp');
34 | const babel = require('gulp-babel');
35 | const del = require('del');
36 | const exec = require('child_process').exec;
37 |
38 | const paths = {
39 | allSrcJs: 'src/**/*.js',
40 | libDir: 'lib',
41 | };
42 |
43 | gulp.task('clean', () => {
44 | return del(paths.libDir);
45 | });
46 |
47 | gulp.task('build', ['clean'], () => {
48 | return gulp.src(paths.allSrcJs)
49 | .pipe(babel())
50 | .pipe(gulp.dest(paths.libDir));
51 | });
52 |
53 | gulp.task('main', ['build'], (callback) => {
54 | exec(`node ${paths.libDir}`, (error, stdout) => {
55 | console.log(stdout);
56 | return callback(error);
57 | });
58 | });
59 |
60 | gulp.task('watch', () => {
61 | gulp.watch(paths.allSrcJs, ['main']);
62 | });
63 |
64 | gulp.task('default', ['watch', 'main']);
65 |
66 | ```
67 |
68 | Cerchiamo di capire il contenuto di questo file.
69 |
70 | Le API di Gulp sono abbastanza lineari. Definiscono dei `gulp.task`, che possono fare riferimento a dei file sorgente `gulp.src`, applicandogli una catena di modificatori tramite `.pipe()` (ad esempio nel nostro caso `babel()`) e inserisce il file di outputi in `gulp.dest`. Può inoltre utilizzare `gulp.watch` per controllare i cambiamenti nei file. I task i Gulppossono eseguire degli altri task preparatori, utilizzando un array in questo formato (es: `['build']`) come secondo parametro di `gulp.task`. Fai riferimento alla [documentazione](https://github.com/gulpjs/gulp) per una spiegazione più articolata.
71 |
72 | Prima definiamo un oggetto `paths` per memorizzare tutti i percorsi dei file e mantenere una configurazione pulita.
73 |
74 | Definiamo poi 5 task: `build`, `clean`, `main`, `watch`, e `default`.
75 |
76 | - `build` è dove viene chiamato Babel per trasformare tutti i nostri file sorgente nella cartella `src` e scrivere quelli trasformati in `lib`.
77 | - `clean` cancella tutti i file autogenerati in `lib`, prima di eseguire un task `build`. Questo è utile per ripulire tutti i file compilati che non sono più necessari, ad esempio perchè gli originali in `src` sono stati cancellati o rinominati , o per assicurarci che la cartella `lib` sia sempre sincronizzata con `src` nel caso in cui la build fallisca. Utilizziamo il pacchetto `del` per cancellare i file in un modo che si integra bene con il flusso di processamento di Gulp (questo è il metodo [raccomandato](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) per cancellare file con Gulp).
78 | - `main` è l'equivalente di `node .` che abbiamo utilizzato nel capitolo precedente, con l'eccezione che questa volta vogliamo eseguirlo sul file `lib/index.js`. Siccome `index.js` è il file che Node cerca di default, possiamo semplicemente scrivere `node lib` (utilizziamo la variabile `libDir` per mantenere la configurazione pulita). `require('child_process').exec` e `exec` sono delle funzioni native di Node per l'esecuzione di comandi su shell. Redirigiamo `stdout` su `console.log()` ritorniamo eventuali errori tramite la callback di `gulp.task`. Non preoccuparti se non capisci nei dettagli quello che sta succedendo, ricordati che è semplicemente l'equivalente di eseguire `node lib`.
79 | - `watch` esegue il task `main` quando vengono riscontrate delle modifiche nei file elencati.
80 | - `default` è un task specifico che viene eseguito se esegui semplicemente `gulp` da terminale. Nel nostro caso vogliamo fargli eseguire sia `watch` che `main` (per la prima esecuzione).
81 |
82 | **Nota**: Potresti chiederti perchè stiamo utilizzando direttamente del codice ES6 nel file Gulp, senza convertirlo in ES5 con Babel. È perchè stiamo utilizzando una versione di Node che supporta nativamente ES6 (assicurati di utilizzare Node > 6.5.0 con il comando `node -v`).
83 |
84 | OK! Vediamo se funziona tutto.
85 |
86 | - Nel `package.json`, cambia lo script `start` con: `"start": "gulp"`.
87 | - Esegui `yarn start`. Dovrebbe scrivere "Hello ES6" ed iniziare a controllare le modifiche sui file. Prova ad inserire del codice non funzionante in `src/index.js` per verificare che Gulp ti mostra automaticamente l'errore appena salvi il file.
88 |
89 | - Aggiungi `/lib/` al tuo `.gitignore`
90 |
91 | Prossima sezione: [4 - Utilizzare la sintassi ES6 con una classe](/tutorial/4-es6-syntax-class)
92 |
93 | Torna alla [sezione precedente](/tutorial/2-packages) o all'[indice](https://github.com/fbertone/js-stack-from-scratch).
94 |
--------------------------------------------------------------------------------
/tutorial/3-es6-babel-gulp/gulpfile.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 | const babel = require('gulp-babel');
3 | const del = require('del');
4 | const exec = require('child_process').exec;
5 |
6 | const paths = {
7 | allSrcJs: 'src/**/*.js',
8 | libDir: 'lib',
9 | };
10 |
11 | gulp.task('clean', () => {
12 | return del(paths.libDir);
13 | });
14 |
15 | gulp.task('build', ['clean'], () => {
16 | return gulp.src(paths.allSrcJs)
17 | .pipe(babel())
18 | .pipe(gulp.dest(paths.libDir));
19 | });
20 |
21 | gulp.task('main', ['build'], (callback) => {
22 | exec(`node ${paths.libDir}`, (error, stdout) => {
23 | console.log(stdout);
24 | return callback(error);
25 | });
26 | });
27 |
28 | gulp.task('watch', () => {
29 | gulp.watch(paths.allSrcJs, ['main']);
30 | });
31 |
32 | gulp.task('default', ['watch', 'main']);
33 |
--------------------------------------------------------------------------------
/tutorial/3-es6-babel-gulp/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "gulp",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "gulp main"
9 | },
10 | "babel": {
11 | "presets": [
12 | "latest"
13 | ]
14 | },
15 | "devDependencies": {
16 | "babel-preset-latest": "^6.16.0",
17 | "del": "^2.2.2",
18 | "gulp": "^3.9.1",
19 | "gulp-babel": "^6.1.2"
20 | },
21 | "repository": "verekia/js-stack-from-scratch",
22 | "author": "Jonathan Verrecchia - @verekia",
23 | "license": "MIT"
24 | }
25 |
--------------------------------------------------------------------------------
/tutorial/3-es6-babel-gulp/src/index.js:
--------------------------------------------------------------------------------
1 | const str = 'ES6 now';
2 | console.log(`Hello ${str}`);
3 |
--------------------------------------------------------------------------------
/tutorial/4-es6-syntax-class/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | yarn-error.log
4 | /lib/
5 |
--------------------------------------------------------------------------------
/tutorial/4-es6-syntax-class/README.md:
--------------------------------------------------------------------------------
1 | # 4 - Utilizzare la sintassi ES6 con una classe
2 |
3 | - Crea un nuovo file, `src/dog.js`, contenente la seguente classe ES6:
4 |
5 | ```javascript
6 | class Dog {
7 | constructor(name) {
8 | this.name = name;
9 | }
10 |
11 | bark() {
12 | return `Wah wah, I am ${this.name}`;
13 | }
14 | }
15 |
16 | module.exports = Dog;
17 | ```
18 |
19 | Non dovrebbe sorprenderti se hai già fatto della programmazione ad oggetti in un qualsiasi linguaggio. È comunque abbastanza recente nell'ecosistema Javascript. La classe viene esposta al mondo esterno tramite l'assegnazione a `module.exports`.
20 |
21 | Tipicamente il codice ES6 utilizza le classi, `const` e `let`, "modelli di stringhe" (utilizzando gli apici inversi) ad esempio `bark()`, e le arrow function (`(param) => { console.log('Hi'); }`), anche se non ne utilizziamo nessuna in questo semplice esempio.
22 |
23 | In `src/index.js`, scrivi questo:
24 |
25 | ```javascript
26 | const Dog = require('./dog');
27 |
28 | const toby = new Dog('Toby');
29 |
30 | console.log(toby.bark());
31 | ```
32 |
33 | Come puoi vedere, a differenza del pacchetto `color` che abbiamo utilizzato in precedenza, quando utilizziamo un modulo scritto da noi utilizziamo il prefisso `./` nella funzione `require()`.
34 |
35 | - Esegui `yarn start` e dovresti ottenere 'Wah wah, I am Toby'.
36 |
37 | - Dai un'occhiata al codice generato in `lib` per vedere com'è il codice generato (`var` al posto di `const` ad esempio).
38 |
39 | Prossima sezione: [5 - La sintassi ES6 per i moduli](/tutorial/5-es6-modules-syntax)
40 |
41 | Torna alla [sezione precedente](/tutorial/3-es6-babel-gulp) o all'[indice](https://github.com/fbertone/js-stack-from-scratch).
42 |
--------------------------------------------------------------------------------
/tutorial/4-es6-syntax-class/gulpfile.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 | const babel = require('gulp-babel');
3 | const del = require('del');
4 | const exec = require('child_process').exec;
5 |
6 | const paths = {
7 | allSrcJs: 'src/**/*.js',
8 | libDir: 'lib',
9 | };
10 |
11 | gulp.task('clean', () => {
12 | return del(paths.libDir);
13 | });
14 |
15 | gulp.task('build', ['clean'], () => {
16 | return gulp.src(paths.allSrcJs)
17 | .pipe(babel())
18 | .pipe(gulp.dest(paths.libDir));
19 | });
20 |
21 | gulp.task('main', ['build'], (callback) => {
22 | exec(`node ${paths.libDir}`, (error, stdout) => {
23 | console.log(stdout);
24 | return callback(error);
25 | });
26 | });
27 |
28 | gulp.task('watch', () => {
29 | gulp.watch(paths.allSrcJs, ['main']);
30 | });
31 |
32 | gulp.task('default', ['watch', 'main']);
33 |
--------------------------------------------------------------------------------
/tutorial/4-es6-syntax-class/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "gulp",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "gulp main"
9 | },
10 | "babel": {
11 | "presets": [
12 | "latest"
13 | ]
14 | },
15 | "devDependencies": {
16 | "babel-preset-latest": "^6.16.0",
17 | "del": "^2.2.2",
18 | "gulp": "^3.9.1",
19 | "gulp-babel": "^6.1.2"
20 | },
21 | "repository": "verekia/js-stack-from-scratch",
22 | "author": "Jonathan Verrecchia - @verekia",
23 | "license": "MIT"
24 | }
25 |
--------------------------------------------------------------------------------
/tutorial/4-es6-syntax-class/src/dog.js:
--------------------------------------------------------------------------------
1 |
2 | class Dog {
3 | constructor(name) {
4 | this.name = name;
5 | }
6 |
7 | bark() {
8 | return `Wah wah, I am ${this.name}`;
9 | }
10 | }
11 |
12 | module.exports = Dog;
13 |
--------------------------------------------------------------------------------
/tutorial/4-es6-syntax-class/src/index.js:
--------------------------------------------------------------------------------
1 | const Dog = require('./dog');
2 |
3 | const toby = new Dog('Toby');
4 |
5 | console.log(toby.bark());
6 |
--------------------------------------------------------------------------------
/tutorial/5-es6-modules-syntax/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | yarn-error.log
4 | /lib/
5 |
--------------------------------------------------------------------------------
/tutorial/5-es6-modules-syntax/README.md:
--------------------------------------------------------------------------------
1 | # 5 - La sintassi ES6 per i moduli
2 |
3 | Sostituiamo semplicemente `const Dog = require('./dog')` con `import Dog from './dog'`, che è la nuova sintassi ES6 per i modili (a deifferenza della sintassi "CommonJS").
4 |
5 | In `dog.js`, sostituiamo inoltre `module.exports = Dog` con `export default Dog`.
6 |
7 | Nota che in `dog.js`, il nome `Dog` è usato unicamente nell'`export`. Sarebbe quindi possibile esportare direttamente una funzione anonima utilizzando la seguente sintassi:
8 |
9 | ```javascript
10 | export default class {
11 | constructor(name) {
12 | this.name = name;
13 | }
14 |
15 | bark() {
16 | return `Wah wah, I am ${this.name}`;
17 | }
18 | }
19 | ```
20 |
21 | Puoi quindi immaginare che il nome 'Dog' usato nell'`import` in `index.js` è a tua discrezione. Funzionerebbe ugualmente:
22 |
23 | ```javascript
24 | import Cat from './dog';
25 |
26 | const toby = new Cat('Toby');
27 | ```
28 |
29 | Ovviamente la maggiorparte delle volte utilizzerai lo stesso nome utilizzato dalle classe/modulo che stai importando.
30 | Un esempio in cui non lo facciamo è `const babel = require('gulp-babel')` nel nostro file Gulp.
31 |
32 | Allora cosa sono questi `require()` nel nostro `gulpfile.js`? Possiamo sostituirli con `import`? L'ultima versione di Node supporta la maggiorparte delle feature di ES6, ma non ancora i moduli. Fortunatamente per noi Gulp può utilizzare Babel per aiutarci. Se rinominiamo `gulpfile.js` in `gulpfile.babel.js`, Babel si occuperà di passare i moduli in `import`a Gulp.
33 |
34 | - Rinomina `gulpfile.js` come `gulpfile.babel.js`
35 |
36 | - Sostituisci i `require()` con:
37 |
38 | ```javascript
39 | import gulp from 'gulp';
40 | import babel from 'gulp-babel';
41 | import del from 'del';
42 | import { exec } from 'child_process';
43 | ```
44 |
45 | Nota il modo in cui abbiamo estatto la funzione `exec` direttamente da `child_process`. Abbastanza elegante!
46 |
47 | - `yarn start` dovrebbe continuare a scrivere "Wah wah, I am Toby".
48 |
49 | Prossima sezione: [6 - ESLint](/tutorial/6-eslint)
50 |
51 | Torna alla [sezione precedente](/tutorial/4-es6-syntax-class) o all'[indice](https://github.com/fbertone/js-stack-from-scratch).
52 |
--------------------------------------------------------------------------------
/tutorial/5-es6-modules-syntax/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import babel from 'gulp-babel';
3 | import del from 'del';
4 | import { exec } from 'child_process';
5 |
6 | const paths = {
7 | allSrcJs: 'src/**/*.js',
8 | libDir: 'lib',
9 | };
10 |
11 | gulp.task('clean', () => {
12 | return del(paths.libDir);
13 | });
14 |
15 | gulp.task('build', ['clean'], () => {
16 | return gulp.src(paths.allSrcJs)
17 | .pipe(babel())
18 | .pipe(gulp.dest(paths.libDir));
19 | });
20 |
21 | gulp.task('main', ['build'], (callback) => {
22 | exec(`node ${paths.libDir}`, (error, stdout) => {
23 | console.log(stdout);
24 | return callback(error);
25 | });
26 | });
27 |
28 | gulp.task('watch', () => {
29 | gulp.watch(paths.allSrcJs, ['main']);
30 | });
31 |
32 | gulp.task('default', ['watch', 'main']);
33 |
--------------------------------------------------------------------------------
/tutorial/5-es6-modules-syntax/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "gulp",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "gulp main"
9 | },
10 | "babel": {
11 | "presets": [
12 | "latest"
13 | ]
14 | },
15 | "devDependencies": {
16 | "babel-preset-latest": "^6.16.0",
17 | "del": "^2.2.2",
18 | "gulp": "^3.9.1",
19 | "gulp-babel": "^6.1.2"
20 | },
21 | "repository": "verekia/js-stack-from-scratch",
22 | "author": "Jonathan Verrecchia - @verekia",
23 | "license": "MIT"
24 | }
25 |
--------------------------------------------------------------------------------
/tutorial/5-es6-modules-syntax/src/dog.js:
--------------------------------------------------------------------------------
1 |
2 | class Dog {
3 | constructor(name) {
4 | this.name = name;
5 | }
6 |
7 | bark() {
8 | return `Wah wah, I am ${this.name}`;
9 | }
10 | }
11 |
12 | export default Dog;
13 |
--------------------------------------------------------------------------------
/tutorial/5-es6-modules-syntax/src/index.js:
--------------------------------------------------------------------------------
1 | import Dog from './dog';
2 |
3 | const toby = new Dog('Toby');
4 |
5 | console.log(toby.bark());
6 |
--------------------------------------------------------------------------------
/tutorial/6-eslint/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | yarn-error.log
4 | /lib/
5 |
--------------------------------------------------------------------------------
/tutorial/6-eslint/README.md:
--------------------------------------------------------------------------------
1 | # 6 - ESLint
2 |
3 | Utilizzeremo un linter per controllare il nostro codice contro potenziali problemi. ESLint è il linter di riferimento per il codice ES6. Invece di configurare da soli li regole per il nostro codice, utilizzeremo la configurazione creata da Airbnb. Questa configurazione utilizza alcuni plugin esterni, dobbiamo quindi installarli perchè tutto funzioni correttamente.
4 |
5 | - Esegui `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react`
6 |
7 | Come puoi vedere, è possibile installare vari pacchetti contemporaneamente con un unico comando. Tutti verranno aggiunti al file `package.json`, come di consueto.
8 |
9 | Nel `package.json`, aggiungi un campo `eslintConfig`:
10 |
11 | ```json
12 | "eslintConfig": {
13 | "extends": "airbnb",
14 | "plugins": [
15 | "import"
16 | ]
17 | },
18 | ```
19 |
20 | La sezione `plugins` serve a comunicare a ESLint che vogliamo utilizzare la sintassi ES6 per gli import.
21 |
22 | **Nota**: Un file `.eslintrc.js`, `.eslintrc.json`, oppure `. eslintrc.yaml` inserito nella cartella base del progetto può essere utilizzato in alternativa alla sezione `eslintConfig` nel `package.json`. Come per la configurazione di Babel stiamo cercando di mantenere pulita la cartella del progetto, tuttavia se hai una configurazione di ESLint complessa puoi considerare la creazione di questo file come alternativa.
23 |
24 | Creiamo adesso un task Gulp che eseguirà ESLint per noi. Installiamo il plugin ESLint per Gulp:
25 |
26 | - Esegui `yarn add --dev gulp-eslint`
27 |
28 | Aggiungi questo task nel `gulpfile.babel.js`:
29 |
30 | ```javascript
31 | import eslint from 'gulp-eslint';
32 |
33 | const paths = {
34 | allSrcJs: 'src/**/*.js',
35 | gulpFile: 'gulpfile.babel.js',
36 | libDir: 'lib',
37 | };
38 |
39 | // [...]
40 |
41 | gulp.task('lint', () => {
42 | return gulp.src([
43 | paths.allSrcJs,
44 | paths.gulpFile,
45 | ])
46 | .pipe(eslint())
47 | .pipe(eslint.format())
48 | .pipe(eslint.failAfterError());
49 | });
50 | ```
51 |
52 | Stiamo dicendo a Gulp che per questo task vogliamo includere `gulpfile.babel.js` e i file JS contenuti in `src`.
53 |
54 | Modifica il task `build` inserendo `lint` come prerequisito, in questo modo:
55 |
56 | ```javascript
57 | gulp.task('build', ['lint', 'clean'], () => {
58 | // ...
59 | });
60 | ```
61 |
62 | - Esegui `yarn start`, e dovresti vedere numerosi errori di linting in questo Gulpfile, e un warning per aver utilizzato `console.log()` in `index.js`.
63 |
64 | Un problema che vedrai è `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)`. In questo caso si tratta di un falso problema. ESLint non è in graado di riconoscere quali file JS fanno parte della nostra build, e quali no, dovremo aiutarlo un po' utilizzando degli appositi commenti all'interno del codice. Nel `gulpfile.babel.js`, all'inizio del file aggiungi:
65 |
66 | ```javascript
67 | /* eslint-disable import/no-extraneous-dependencies */
68 | ```
69 |
70 | In questo modo ESLint non applicherà la regola `import/no-extraneous-dependencies` per questo file.
71 |
72 | Adesso ci rimane la segnalazione di `Unexpected block statement surrounding arrow body (arrow-body-style)`. Questa è molto utile. ESLint ci sta dicendo che esiste un modo migliore per scrivere:
73 |
74 | ```javascript
75 | () => {
76 | return 1;
77 | }
78 | ```
79 |
80 | Dovrebbe essere sostituito con:
81 |
82 | ```javascript
83 | () => 1
84 | ```
85 |
86 | Perchè quando una funzione contiene unicamente un return, in ES6 puoi omettere le parentesi, la parole "return" ed il punto e virgola.
87 |
88 | Aggiorniamo quindi il file Gulp:
89 |
90 | ```javascript
91 | gulp.task('lint', () =>
92 | gulp.src([
93 | paths.allSrcJs,
94 | paths.gulpFile,
95 | ])
96 | .pipe(eslint())
97 | .pipe(eslint.format())
98 | .pipe(eslint.failAfterError())
99 | );
100 |
101 | gulp.task('clean', () => del(paths.libDir));
102 |
103 | gulp.task('build', ['lint', 'clean'], () =>
104 | gulp.src(paths.allSrcJs)
105 | .pipe(babel())
106 | .pipe(gulp.dest(paths.libDir))
107 | );
108 | ```
109 |
110 | L'ultima segnalazione rimasta si riferisce all'uso di `console.log()`. Diciamo che vogliamo veramente utilizzare la `console.log()` in `index.js` senza ricevere un warning. Come puoi immaginare, inseriremo `/* eslint-disable no-console */` all'inizio del nostro `index.js`.
111 |
112 | - Esegui `yarn start` e saremo nuovamente a posto.
113 |
114 | **Nota**: Questa sezione ti permette di configurare ESLint nella console. È utile poter eseguire il lint durante la build / prima di eseguire il push del codice, ma probabilmente vorrei integrarlo anche nel tuo IDE. NON utilizzare il linter nativo del tuo IDE quando usi ES6. Configuralo in modo che il linter da eseguire sia quello contenuto all'interno della cartella `node_modules`. In questo modo può utilizzare tutte le configurazioni del tuo progetto, il preset di Airbnb, etc. In caso contrario utilizzesti un linter generico.
115 |
116 | Prossima sezione: [7 - App Client con Webpack](/tutorial/7-client-webpack)
117 |
118 | Torna alla [sezione precedente](/tutorial/5-es6-modules-syntax) o all'[indice](https://github.com/fbertone/js-stack-from-scratch).
119 |
--------------------------------------------------------------------------------
/tutorial/6-eslint/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies, no-console */
2 |
3 | import gulp from 'gulp';
4 | import babel from 'gulp-babel';
5 | import eslint from 'gulp-eslint';
6 | import del from 'del';
7 | import { exec } from 'child_process';
8 |
9 | const paths = {
10 | allSrcJs: 'src/**/*.js',
11 | gulpFile: 'gulpfile.babel.js',
12 | libDir: 'lib',
13 | };
14 |
15 | gulp.task('lint', () =>
16 | gulp.src([
17 | paths.allSrcJs,
18 | paths.gulpFile,
19 | ])
20 | .pipe(eslint())
21 | .pipe(eslint.format())
22 | .pipe(eslint.failAfterError())
23 | );
24 |
25 | gulp.task('clean', () => del(paths.libDir));
26 |
27 | gulp.task('build', ['lint', 'clean'], () =>
28 | gulp.src(paths.allSrcJs)
29 | .pipe(babel())
30 | .pipe(gulp.dest(paths.libDir))
31 | );
32 |
33 | gulp.task('main', ['build'], (callback) => {
34 | exec(`node ${paths.libDir}`, (error, stdout) => {
35 | console.log(stdout);
36 | return callback(error);
37 | });
38 | });
39 |
40 | gulp.task('watch', () => {
41 | gulp.watch(paths.allSrcJs, ['main']);
42 | });
43 |
44 | gulp.task('default', ['watch', 'main']);
45 |
--------------------------------------------------------------------------------
/tutorial/6-eslint/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "gulp",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "gulp main"
9 | },
10 | "eslintConfig": {
11 | "extends": "airbnb",
12 | "plugins": [
13 | "import"
14 | ]
15 | },
16 | "babel": {
17 | "presets": [
18 | "latest"
19 | ]
20 | },
21 | "devDependencies": {
22 | "babel-preset-latest": "^6.16.0",
23 | "del": "^2.2.2",
24 | "eslint": "^3.8.1",
25 | "eslint-config-airbnb": "^12.0.0",
26 | "eslint-plugin-import": "^2.0.1",
27 | "eslint-plugin-jsx-a11y": "^2.2.3",
28 | "eslint-plugin-react": "^6.4.1",
29 | "gulp": "^3.9.1",
30 | "gulp-babel": "^6.1.2",
31 | "gulp-eslint": "^3.0.1"
32 | },
33 | "repository": "verekia/js-stack-from-scratch",
34 | "author": "Jonathan Verrecchia - @verekia",
35 | "license": "MIT"
36 | }
37 |
--------------------------------------------------------------------------------
/tutorial/6-eslint/src/dog.js:
--------------------------------------------------------------------------------
1 |
2 | class Dog {
3 | constructor(name) {
4 | this.name = name;
5 | }
6 |
7 | bark() {
8 | return `Wah wah, I am ${this.name}`;
9 | }
10 | }
11 |
12 | export default Dog;
13 |
--------------------------------------------------------------------------------
/tutorial/6-eslint/src/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import Dog from './dog';
4 |
5 | const toby = new Dog('Toby');
6 |
7 | console.log(toby.bark());
8 |
--------------------------------------------------------------------------------
/tutorial/7-client-webpack/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | yarn-error.log
4 | /lib/
5 | /dist/client-bundle.js*
6 |
--------------------------------------------------------------------------------
/tutorial/7-client-webpack/README.md:
--------------------------------------------------------------------------------
1 | # 7 - App Client con Webpack
2 |
3 | ## Struttura della nostra app
4 |
5 | - Crea una cartella `dist` nella cartella principale del progetto, e aggiungi il seguente `index.html` al suo interno:
6 |
7 | ```html
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | ```
18 |
19 | Nella cartella `src`, crea le seguenti cartelle: `server`, `shared`, `client`, e sposta il file `index.js` che stai utilizzando all'interno di `server`, e `dog.js` dentro `shared`. Crea `app.js` in `client`.
20 |
21 | Per il momento non creeremo nessun backend in Node, ma questa suddivisione ti aiuterà a capire meglio come verranno struttirati i vari moduli. Dovrai sostituire `import Dog from './dog';` in `server/index.js` con `import Dog from '../shared/dog';` altrimenti ESLint si accorgerà che alcuni moduli non sono presenti.
22 |
23 | Scrivi questo codice in `client/app.js`:
24 |
25 | ```javascript
26 | import Dog from '../shared/dog';
27 |
28 | const browserToby = new Dog('Browser Toby');
29 |
30 | document.querySelector('.app').innerText = browserToby.bark();
31 | ```
32 |
33 | Aggiungi all'interno di `package.json`, in `eslintConfig`:
34 |
35 | ```json
36 | "env": {
37 | "browser": true
38 | }
39 | ```
40 |
41 | In questo modo potremo utilizzare variabili come `window` o `document`, che sono sempre accessibili nel browser, senza che ESLint si lamenti.
42 |
43 | Se vuoi utilizzare alcune delle funzionalità più recenti di ES nel tuo client, come le `Promise`, dovrei includere i [Polyfill di Babel](https://babeljs.io/docs/usage/polyfill/) nel tuo codice.
44 |
45 | - Esegui `yarn add babel-polyfill`
46 |
47 | E in `app.js`, prima di qualunque altra cosa, aggiungi:
48 |
49 | ```javascript
50 | import 'babel-polyfill';
51 | ```
52 |
53 | Includere i polyfill aumenterà la dimensione finale tuo client, quindi aggiungili solo se devi utilizzare le funzionalità che ricopre. Per fornire un codice robusto in questa guida, io li includo, appariranno in alcuni esempi nei prossimi capitoli.
54 |
55 | ## Webpack
56 |
57 | In ambiente Node, puoi liberamente fare `import` di differenti file e Node si occuperà di trovare questi file all'interno del tuo filesystem. In un browser, non c'è filesystem, quindi i tuoi `import` non puntano a nessun file. Per fare in modo che `app.js` riesca ad avere accesso a tutti moduli di cui necessita, andremo ad impacchettare tutte le dipendenze all'interno di un unico file. Webpack è uno strumento che ci permette di fare questo.
58 |
59 | Webpack utilizza un file di configurazione, come Gulp, chiamato `webpack.config.js`. È possibile utilizzare import ed export ES6 al suo interno sfruttando Babel, esattamente come abbiamo fatto per Gulp, chiamando quindi il file `webpack.config.babel.js`.
60 |
61 | - Crea un file `webpack.config.babel.js` vuoto
62 |
63 | - Mentre ci sei, aggiungi `webpack.config.babel.js` al task `lint` di Gulp assieme ad alcune costanti di `paths`:
64 |
65 | ```javascript
66 | const paths = {
67 | allSrcJs: 'src/**/*.js',
68 | gulpFile: 'gulpfile.babel.js',
69 | webpackFile: 'webpack.config.babel.js',
70 | libDir: 'lib',
71 | distDir: 'dist',
72 | };
73 |
74 | // [...]
75 |
76 | gulp.task('lint', () =>
77 | gulp.src([
78 | paths.allSrcJs,
79 | paths.gulpFile,
80 | paths.webpackFile,
81 | ])
82 | .pipe(eslint())
83 | .pipe(eslint.format())
84 | .pipe(eslint.failAfterError())
85 | );
86 | ```
87 |
88 | Dobbiamo spiegare a Webpack come processare file ES6 tramite Babel (come abbiamo fatto per Gulp e `gulp-babel`). In Webpack, quando devi processare dei file che non sono i classici JavaScript standard, dovrai utilizzare dei *loader*. Installiamo il loader di Babel per Webpack:
89 |
90 | - Esegui `yarn add --dev babel-loader`
91 |
92 | - Aggiungi quanto segue in `webpack.config.babel.js`:
93 |
94 | ```javascript
95 | export default {
96 | output: {
97 | filename: 'client-bundle.js',
98 | },
99 | devtool: 'source-map',
100 | module: {
101 | loaders: [
102 | {
103 | test: /\.jsx?$/,
104 | loader: 'babel-loader',
105 | exclude: [/node_modules/],
106 | },
107 | ],
108 | },
109 | resolve: {
110 | extensions: ['', '.js', '.jsx'],
111 | },
112 | };
113 | ```
114 |
115 | Analizziamo:
116 |
117 | Questo file deve fare `export` di cose in modo che Webpack possa accedervi. `output.filename` è il nome del file che vogliamo generare. `devtool: 'source-map'` attiverà le source map per permettere un debug più agevole nel browser. In `module.loaders`, abbiamo un `test`, che è l'espressione regolare (regex) JavaScript regex che verrà utilizzata per definire quali file verranno processati tramite `babel-loader`. Siccome utilizzeremo sia file di tipo `.js` che `.jsx` (per React) nei prossimi capitoli, applichiamo questa regex: `/\.jsx?$/`. La cartella `node_modules` viene esclusa perchè non dovremo fare nessuna manipolazione ai moduli presenti la dentro. In questo modo, quando il tuo codice fa degli `import` di pacchetti presenti in `node_modules`, Babel non si preoccuperà di processare tutti i file, in che riducerà i tempi di build. La sezione `resolve` serve a spiegare a Webpack quale tipi di file vogliamo poter `import`are nel nostro codice utilizzando dei percorsi semplici senza parte finale, ad esempio: `import Foo from './foo'` dove `foo` potrebbe essere `foo.js` oppure `foo.jsx`.
118 |
119 | Okay adesso abbiamo configurato Webpack ma ci serve ancora una maniera per *eseguirlo*.
120 |
121 | ## Integrare Webpack in Gulp
122 |
123 | Webpack può svolgere molti compiti. Può anche rimpiazzare completamente Gulp se il tuo è un progetto principalmente client-side. Gulp, essendo un tool più generico, è migliore per svolgere compiti quali linting, test, e task di back-end. È inoltre più intuitivo e semplice da capire per chi sta iniziando rispetto alla configurazione di Webpack. Abbiamo già creato una solida configurazione di Gulp, integrare Webpack sarà quindi un gioco da ragazzi.
124 |
125 | Creiamo il task di Gulp per eseguire Webpack. Apri `gulpfile.babel.js`.
126 |
127 | Non abbiamo più bisogno che il task `main` esegua `node lib/` perchè apriremo `index.html` per eseguire la nostra app.
128 |
129 | - Rimuovi `import { exec } from 'child_process'`.
130 |
131 | In modo simile ai plugin di Gulp, il modulo `webpack-stream` ci permette di integrare molto semplicemente Webpack all'interno di Gulp.
132 |
133 | - Installa il modulo con: `yarn add --dev webpack-stream`
134 |
135 | - Aggiungi i seguenti `import`:
136 |
137 | ```javascript
138 | import webpack from 'webpack-stream';
139 | import webpackConfig from './webpack.config.babel';
140 | ```
141 |
142 | La seconda linea prende semplicemente la configurazione di webpack.
143 |
144 | Come ho già detto, nei prossimi capitoli utilizzeremo dei file `.jsx` (lato client, e successivamente anche lato server), iniziamo a configurarli adesso in modo da partire preparati.
145 |
146 | - Cambia le costanti in questo modo:
147 |
148 | ```javascript
149 | const paths = {
150 | allSrcJs: 'src/**/*.js?(x)',
151 | serverSrcJs: 'src/server/**/*.js?(x)',
152 | sharedSrcJs: 'src/shared/**/*.js?(x)',
153 | clientEntryPoint: 'src/client/app.js',
154 | gulpFile: 'gulpfile.babel.js',
155 | webpackFile: 'webpack.config.babel.js',
156 | libDir: 'lib',
157 | distDir: 'dist',
158 | };
159 | ```
160 |
161 | Il `.js?(x)` è semplicemente un pattern per considerare sia i file `.js` che `.jsx`.
162 |
163 | Adesso abbiamo delle costanti per le varie sezioni dell'app ed un entrypoint da cui iniziare l'esecuzione.
164 |
165 | - Modifica il task `main` in questo modo:
166 |
167 | ```javascript
168 | gulp.task('main', ['lint', 'clean'], () =>
169 | gulp.src(paths.clientEntryPoint)
170 | .pipe(webpack(webpackConfig))
171 | .pipe(gulp.dest(paths.distDir))
172 | );
173 | ```
174 |
175 | **Nota**: Il nostro task `build` attualmente transpila il codice ES6 a ES5 per ogni file `.js` contenuti in `src`. Adesso che abbiamo suddiviso il nostro codice in `server`, `shared`, e `client`, possiamo fare in modo che questo task compili unicamente `server` e `shared` (visto che Webpacksi occupa di `client`). Tuttavia, nel capitolo dedicato al Testing, avremo bisogno di far compilare a Gulp anche la parte `client` in modo da testarlo al di fuori di Webpack. Quindi, fino a quando non raggiungerai quel capitolo, alcune fasi di build saranno duplicate. Sonon sicuro che possiamo essere tutti d'accordo che non ci sono problemi. Effettivamente non utilizzeremo più il task `build` e la cartella `lib` fino a reggiungere quel capitolo, perchè per il momento ci occuperemo unicamente di impacchettare il codice client.
176 |
177 | - Esegui `yarn start`, dovresti vedere Webpack che costruisce il file `client-bundle.js`. Aprendo `index.html`nel browser dovresti vederey "Wah wah, I am Browser Toby".
178 |
179 | Un'ultima cosa: a differenza della cartella `lib` i file `dist/client-bundle.js` e `dist/client-bundle.js.map` non vengono cancellati dal nostro task `clean` prima di ogni build.
180 |
181 | - Aggiungi `clientBundle: 'dist/client-bundle.js?(.map)'` alla sezione `paths` e modifica il task `clean` in questo modo:
182 |
183 | ```javascript
184 | gulp.task('clean', () => del([
185 | paths.libDir,
186 | paths.clientBundle,
187 | ]));
188 | ```
189 |
190 | - Aggiungi `/dist/client-bundle.js*` al file `.gitignore`:
191 |
192 | Prossima sezione: [8 - React](/tutorial/8-react)
193 |
194 | Torna alla [sezione precedente](/tutorial/6-eslint) o all'[indice](https://github.com/fbertone/js-stack-from-scratch).
195 |
--------------------------------------------------------------------------------
/tutorial/7-client-webpack/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/tutorial/7-client-webpack/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 |
3 | import gulp from 'gulp';
4 | import babel from 'gulp-babel';
5 | import eslint from 'gulp-eslint';
6 | import del from 'del';
7 | import webpack from 'webpack-stream';
8 | import webpackConfig from './webpack.config.babel';
9 |
10 | const paths = {
11 | allSrcJs: 'src/**/*.js?(x)',
12 | serverSrcJs: 'src/server/**/*.js?(x)',
13 | sharedSrcJs: 'src/shared/**/*.js?(x)',
14 | clientEntryPoint: 'src/client/app.js',
15 | clientBundle: 'dist/client-bundle.js?(.map)',
16 | gulpFile: 'gulpfile.babel.js',
17 | webpackFile: 'webpack.config.babel.js',
18 | libDir: 'lib',
19 | distDir: 'dist',
20 | };
21 |
22 | gulp.task('lint', () =>
23 | gulp.src([
24 | paths.allSrcJs,
25 | paths.gulpFile,
26 | paths.webpackFile,
27 | ])
28 | .pipe(eslint())
29 | .pipe(eslint.format())
30 | .pipe(eslint.failAfterError())
31 | );
32 |
33 | gulp.task('clean', () => del([
34 | paths.libDir,
35 | paths.clientBundle,
36 | ]));
37 |
38 | gulp.task('build', ['lint', 'clean'], () =>
39 | gulp.src(paths.allSrcJs)
40 | .pipe(babel())
41 | .pipe(gulp.dest(paths.libDir))
42 | );
43 |
44 | gulp.task('main', ['lint', 'clean'], () =>
45 | gulp.src(paths.clientEntryPoint)
46 | .pipe(webpack(webpackConfig))
47 | .pipe(gulp.dest(paths.distDir))
48 | );
49 |
50 | gulp.task('watch', () => {
51 | gulp.watch(paths.allSrcJs, ['main']);
52 | });
53 |
54 | gulp.task('default', ['watch', 'main']);
55 |
--------------------------------------------------------------------------------
/tutorial/7-client-webpack/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "gulp",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "gulp main"
9 | },
10 | "eslintConfig": {
11 | "extends": "airbnb",
12 | "plugins": [
13 | "import"
14 | ],
15 | "env": {
16 | "browser": true
17 | }
18 | },
19 | "babel": {
20 | "presets": [
21 | "latest"
22 | ]
23 | },
24 | "devDependencies": {
25 | "babel-loader": "^6.2.5",
26 | "babel-preset-latest": "^6.16.0",
27 | "del": "^2.2.2",
28 | "eslint": "^3.8.1",
29 | "eslint-config-airbnb": "^12.0.0",
30 | "eslint-plugin-import": "^2.0.1",
31 | "eslint-plugin-jsx-a11y": "^2.2.2",
32 | "eslint-plugin-react": "^6.4.1",
33 | "gulp": "^3.9.1",
34 | "gulp-babel": "^6.1.2",
35 | "gulp-eslint": "^3.0.1",
36 | "webpack-stream": "^3.2.0"
37 | },
38 | "dependencies": {
39 | "babel-polyfill": "^6.16.0"
40 | },
41 | "repository": "verekia/js-stack-from-scratch",
42 | "author": "Jonathan Verrecchia - @verekia",
43 | "license": "MIT"
44 | }
45 |
--------------------------------------------------------------------------------
/tutorial/7-client-webpack/src/client/app.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill';
2 |
3 | import Dog from '../shared/dog';
4 |
5 | const browserToby = new Dog('Browser Toby');
6 |
7 | document.querySelector('.app').innerText = browserToby.bark();
8 |
--------------------------------------------------------------------------------
/tutorial/7-client-webpack/src/server/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import Dog from '../shared/dog';
4 |
5 | const toby = new Dog('Toby');
6 |
7 | console.log(toby.bark());
8 |
--------------------------------------------------------------------------------
/tutorial/7-client-webpack/src/shared/dog.js:
--------------------------------------------------------------------------------
1 |
2 | class Dog {
3 | constructor(name) {
4 | this.name = name;
5 | }
6 |
7 | bark() {
8 | return `Wah wah, I am ${this.name}`;
9 | }
10 | }
11 |
12 | export default Dog;
13 |
--------------------------------------------------------------------------------
/tutorial/7-client-webpack/webpack.config.babel.js:
--------------------------------------------------------------------------------
1 | export default {
2 | output: {
3 | filename: 'client-bundle.js',
4 | },
5 | devtool: 'source-map',
6 | module: {
7 | loaders: [
8 | {
9 | test: /\.jsx?$/,
10 | loader: 'babel-loader',
11 | exclude: [/node_modules/],
12 | },
13 | ],
14 | },
15 | resolve: {
16 | extensions: ['', '.js', '.jsx'],
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/tutorial/8-react/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | yarn-error.log
4 | /lib/
5 | /dist/client-bundle.js*
6 |
--------------------------------------------------------------------------------
/tutorial/8-react/README.md:
--------------------------------------------------------------------------------
1 | # 8 - React
2 |
3 | Adesso utilizzeremo React per la visualizzazione della nostra app.
4 |
5 | Prima di tutto installiamo React e ReactDOM:
6 |
7 | - Esegui `yarn add react react-dom`
8 |
9 | Questi due pacchetti vanno nella sezione `"dependencies"` e non `"devDependencies"` perche a differenza dei tool utilizzati per lo sviluppo, il client in produzione ne avra bisogno.
10 |
11 | Rinominiamo il nostro file `src/client/app.js` in `src/client/app.jsx` e scriviamoci un po' di codice React e JSX:
12 |
13 | ```javascript
14 | import 'babel-polyfill';
15 |
16 | import React, { PropTypes } from 'react';
17 | import ReactDOM from 'react-dom';
18 | import Dog from '../shared/dog';
19 |
20 | const dogBark = new Dog('Browser Toby').bark();
21 |
22 | const App = props => (
23 |
24 | The dog says: {props.message}
25 |
26 | );
27 |
28 | App.propTypes = {
29 | message: PropTypes.string.isRequired,
30 | };
31 |
32 | ReactDOM.render(, document.querySelector('.app'));
33 | ```
34 |
35 | **Nota**: Se non sei pratico di React o le PropTypes, studia prima il funzionamento di React e ritorna a seguire questo tutorial dopo. Nei capitoli successivi utilizzeremo parecchio React, assicurati quindi di riuscire a seguire quello che faremo.
36 |
37 | Nel Gulpfile, cambia il valore di `clientEntryPoint` modificandone l'estensione a `.jsx`:
38 |
39 | ```javascript
40 | clientEntryPoint: 'src/client/app.jsx',
41 | ```
42 |
43 | Siccome utilizzeremo la sintassi JSX, dobbiamo dire a Babel che deve occuparsi anche di questa conversione.
44 | Installa il preset React Babel, che permettera a Babel di convertire la sintassi JSX:
45 | `yarn add --dev babel-preset-react` e cambia la voce `babel` nel `package.json` in questo modo:
46 |
47 | ```json
48 | "babel": {
49 | "presets": [
50 | "latest",
51 | "react"
52 | ]
53 | },
54 | ```
55 |
56 | Adesso, dopo aver eseguito `yarn start`, se apriamo `index.html` dovremmo vedere la scritta "The dog says: Wah wah, I am Browser Toby" inserita da React.
57 |
58 | Prossima sezione: [9 - Redux](/tutorial/9-redux)
59 |
60 | Torna alla [sezione precedente](/tutorial/7-client-webpack) o all'[indice](https://github.com/fbertone/js-stack-from-scratch).
61 |
--------------------------------------------------------------------------------
/tutorial/8-react/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/tutorial/8-react/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 |
3 | import gulp from 'gulp';
4 | import babel from 'gulp-babel';
5 | import eslint from 'gulp-eslint';
6 | import del from 'del';
7 | import webpack from 'webpack-stream';
8 | import webpackConfig from './webpack.config.babel';
9 |
10 | const paths = {
11 | allSrcJs: 'src/**/*.js?(x)',
12 | serverSrcJs: 'src/server/**/*.js?(x)',
13 | sharedSrcJs: 'src/shared/**/*.js?(x)',
14 | clientEntryPoint: 'src/client/app.jsx',
15 | clientBundle: 'dist/client-bundle.js?(.map)',
16 | gulpFile: 'gulpfile.babel.js',
17 | webpackFile: 'webpack.config.babel.js',
18 | libDir: 'lib',
19 | distDir: 'dist',
20 | };
21 |
22 | gulp.task('lint', () =>
23 | gulp.src([
24 | paths.allSrcJs,
25 | paths.gulpFile,
26 | paths.webpackFile,
27 | ])
28 | .pipe(eslint())
29 | .pipe(eslint.format())
30 | .pipe(eslint.failAfterError())
31 | );
32 |
33 | gulp.task('clean', () => del([
34 | paths.libDir,
35 | paths.clientBundle,
36 | ]));
37 |
38 | gulp.task('build', ['lint', 'clean'], () =>
39 | gulp.src(paths.allSrcJs)
40 | .pipe(babel())
41 | .pipe(gulp.dest(paths.libDir))
42 | );
43 |
44 | gulp.task('main', ['lint', 'clean'], () =>
45 | gulp.src(paths.clientEntryPoint)
46 | .pipe(webpack(webpackConfig))
47 | .pipe(gulp.dest(paths.distDir))
48 | );
49 |
50 | gulp.task('watch', () => {
51 | gulp.watch(paths.allSrcJs, ['main']);
52 | });
53 |
54 | gulp.task('default', ['watch', 'main']);
55 |
--------------------------------------------------------------------------------
/tutorial/8-react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "gulp",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "gulp main"
9 | },
10 | "eslintConfig": {
11 | "extends": "airbnb",
12 | "plugins": [
13 | "import"
14 | ],
15 | "env": {
16 | "browser": true
17 | }
18 | },
19 | "babel": {
20 | "presets": [
21 | "latest",
22 | "react"
23 | ]
24 | },
25 | "dependencies": {
26 | "babel-polyfill": "^6.16.0",
27 | "react": "^15.3.2",
28 | "react-dom": "^15.3.2"
29 | },
30 | "devDependencies": {
31 | "babel-loader": "^6.2.5",
32 | "babel-preset-latest": "^6.16.0",
33 | "babel-preset-react": "^6.16.0",
34 | "del": "^2.2.2",
35 | "eslint": "^3.8.1",
36 | "eslint-config-airbnb": "^12.0.0",
37 | "eslint-plugin-import": "^2.0.1",
38 | "eslint-plugin-jsx-a11y": "^2.2.3",
39 | "eslint-plugin-react": "^6.4.1",
40 | "gulp": "^3.9.1",
41 | "gulp-babel": "^6.1.2",
42 | "gulp-eslint": "^3.0.1",
43 | "webpack-stream": "^3.2.0"
44 | },
45 | "repository": "verekia/js-stack-from-scratch",
46 | "author": "Jonathan Verrecchia - @verekia",
47 | "license": "MIT"
48 | }
49 |
--------------------------------------------------------------------------------
/tutorial/8-react/src/client/app.jsx:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill';
2 |
3 | import React, { PropTypes } from 'react';
4 | import ReactDOM from 'react-dom';
5 | import Dog from '../shared/dog';
6 |
7 | const dogBark = new Dog('Browser Toby').bark();
8 |
9 | const App = props => (
10 |
11 | The dog says: {props.message}
12 |
13 | );
14 |
15 | App.propTypes = {
16 | message: PropTypes.string.isRequired,
17 | };
18 |
19 | ReactDOM.render(, document.querySelector('.app'));
20 |
--------------------------------------------------------------------------------
/tutorial/8-react/src/server/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import Dog from '../shared/dog';
4 |
5 | const toby = new Dog('Toby');
6 |
7 | console.log(toby.bark());
8 |
--------------------------------------------------------------------------------
/tutorial/8-react/src/shared/dog.js:
--------------------------------------------------------------------------------
1 |
2 | class Dog {
3 | constructor(name) {
4 | this.name = name;
5 | }
6 |
7 | bark() {
8 | return `Wah wah, I am ${this.name}`;
9 | }
10 | }
11 |
12 | export default Dog;
13 |
--------------------------------------------------------------------------------
/tutorial/8-react/webpack.config.babel.js:
--------------------------------------------------------------------------------
1 | export default {
2 | output: {
3 | filename: 'client-bundle.js',
4 | },
5 | devtool: 'source-map',
6 | module: {
7 | loaders: [
8 | {
9 | test: /\.jsx?$/,
10 | loader: 'babel-loader',
11 | exclude: [/node_modules/],
12 | },
13 | ],
14 | },
15 | resolve: {
16 | extensions: ['', '.js', '.jsx'],
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/tutorial/9-redux/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | yarn-error.log
4 | /lib/
5 | /dist/client-bundle.js*
6 |
--------------------------------------------------------------------------------
/tutorial/9-redux/README.md:
--------------------------------------------------------------------------------
1 | # 9 - Redux
2 |
3 | In questo capitolo (che é il piú difficile finora) aggiungeremo [Redux](http://redux.js.org/) alla nostra applicazione e lo collegheremo a React. Redux controlla lo stato della tua applicazione. É composto da uno **store** che e'un oggetto Javascript che rappresenta lo stato dell'app, **azioni** che sono tipicamente scatenate dagli utenti e **reducers** che possono essere visti come handler delle azioni. I reducer modificano lo stato dell'applicazione (lo *store*) e quando lo stato dell'applicazione viene modificato delle cose succedono nell'app. Una buona rappresentazione grafica di Redux é disponibile [qua](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9).
4 |
5 | Per dimostrare come utilizzare Redux nel modo piú semplice possibile, la lostra app consiste in un messaggio ed un bottone. Il messaggio indica se il cane ha abbaiato o no (inizialmente lo stato é impostato su no) ed il pulsante fa abbaiare il cane, aggiornando di conseguenza il messaggio.
6 |
7 | Ci serviremo di due pacchetti: `redux` e `react-redux`.
8 |
9 | - Esegui `yarn add redux react-redux`.
10 |
11 | Iniziamo creando due cartelle: `src/client/actions` e `src/client/reducers`.
12 |
13 | - In `actions`, crea `dog-actions.js`:
14 |
15 | ```javascript
16 | export const MAKE_BARK = 'MAKE_BARK';
17 |
18 | export const makeBark = () => ({
19 | type: MAKE_BARK,
20 | payload: true,
21 | });
22 | ```
23 |
24 | Qua definiremo un tipo di azione, `MAKE_BARK`, e una funzione (anche conosciuta come *action creator*) che scatena un'azione `MAKE_BARK` chiamata `makeBark`. Entrambe sono esportate perché ci serviranno in altri file. Questa azione implementa una modello di [Azione Flux Standard](https://github.com/acdlite/flux-standard-action), ecco perché ha degli attributi `type` e `payload`.
25 |
26 | - In `reducers`, crea `dog-reducer.js`:
27 |
28 | ```javascript
29 | import { MAKE_BARK } from '../actions/dog-actions';
30 |
31 | const initialState = {
32 | hasBarked: false,
33 | };
34 |
35 | const dogReducer = (state = initialState, action) => {
36 | switch (action.type) {
37 | case MAKE_BARK:
38 | return { hasBarked: action.payload };
39 | default:
40 | return state;
41 | }
42 | };
43 |
44 | export default dogReducer;
45 | ```
46 |
47 | Qua definiamo lo stato iniziale della nostra app, che é un oggetto contenente la proprietá `hasBarked` impostata a `false`, e `dogReducer`, che é la funzione responsabile di alterare lo stato in base all'azione che é stata eseguita. Lo stato non puó essere modificato in questa funzione, occorre effettuare il return di un nuovo oggetto di stato.
48 |
49 | - Modifichiamo `app.jsx` per creare lo *store*. Puoi sostituire il file precedente con questo:
50 |
51 | ```javascript
52 | import React from 'react';
53 | import ReactDOM from 'react-dom';
54 | import { createStore, combineReducers } from 'redux';
55 | import { Provider } from 'react-redux';
56 | import dogReducer from './reducers/dog-reducer';
57 | import BarkMessage from './containers/bark-message';
58 | import BarkButton from './containers/bark-button';
59 |
60 | const store = createStore(combineReducers({
61 | dog: dogReducer,
62 | }));
63 |
64 | ReactDOM.render(
65 |
66 |
67 |
68 |
69 |
70 |
71 | , document.querySelector('.app')
72 | );
73 | ```
74 |
75 | Il nostro store é creato tramite la funzione Redux `createStore`, é abbastanza esplicito. L'oggetto store é assemblato combinando tutti i reducer (nel nostro caso solo uno) utilizzando la funzione di Redux `combineReducers`. Qua viene assegnato un nome ad ogni reducer, e chiameremo il nostro `dog`.
76 |
77 | Questo é tutto per la parte di Redux puro.
78 |
79 | Adesso agganceremo Redux con React utilizzando `react-redux`. Per fare in modo che `react-redux` passi lo store alla nostra app React, dobbiamo incapsulare il tutto in un componente ``. Questo componente deve avere un unico figlio, quindi abbiamo creato un `
`, e questo `
` contiene i due elementi principali della nostra app: `BarkMessage` e `BarkButton`.
80 |
81 | Come puoi vedere dalla sezione `import`, `BarkMessage` e `BarkButton` sono importati da una cartella `containers`. Adesso é il momento buono per introdurre i concetti di **Components** e **Containers**.
82 |
83 | I *Components* sono componenti React *stupidi*, nel senso che non conoscono nulla dello stato di Redux. I *Containers* sono componenti *intelligenti* che sono a conoscenza dello stato e verranno utilizzati per *collegare* i nostri componenti stupidi.
84 |
85 | - Crea 2 cartelle, `src/client/components` e `src/client/containers`.
86 |
87 | - In `components`, crea questi file:
88 |
89 | **button.jsx**
90 |
91 | ```javascript
92 | import React, { PropTypes } from 'react';
93 |
94 | const Button = ({ action, actionLabel }) => ;
95 |
96 | Button.propTypes = {
97 | action: PropTypes.func.isRequired,
98 | actionLabel: PropTypes.string.isRequired,
99 | };
100 |
101 | export default Button;
102 | ```
103 |
104 | e **message.jsx**:
105 |
106 | ```javascript
107 | import React, { PropTypes } from 'react';
108 |
109 | const Message = ({ message }) =>
{message}
;
110 |
111 | Message.propTypes = {
112 | message: PropTypes.string.isRequired,
113 | };
114 |
115 | export default Message;
116 |
117 | ```
118 |
119 | Questi sono esempi di componenti *stupidi*. Non contengono una logica, e mostrano semplicemente quello che gli viene chiesto di mostrare tramite le **props** di React. La differenza principale tra `button.jsx` e `message.jsx` é che `Button` contiene un'**action** fra le sue props. Questa azione é collegata all'evento `onClick`. Nel contesto della nostra applicazione, la label del `Button` non cambierá mai, tuttavia, il componente `Message` rifletterá lo stato dell'app e varierá di conseguenza.
120 |
121 | Ripeto: i *components* non sanno nulla delle **actions** di Redux o dello **stato** dell'app, per questo motivo creeremo dei **containers** che forniranno le *azioni* e i *dati* a questi due componenti stupidi.
122 |
123 | - In `containers`, crea questi file:
124 |
125 | **bark-button.js**
126 |
127 | ```javascript
128 | import { connect } from 'react-redux';
129 | import Button from '../components/button';
130 | import { makeBark } from '../actions/dog-actions';
131 |
132 | const mapDispatchToProps = dispatch => ({
133 | action: () => { dispatch(makeBark()); },
134 | actionLabel: 'Bark',
135 | });
136 |
137 | export default connect(null, mapDispatchToProps)(Button);
138 | ```
139 |
140 | e **bark-message.js**:
141 |
142 | ```javascript
143 | import { connect } from 'react-redux';
144 | import Message from '../components/message';
145 |
146 | const mapStateToProps = state => ({
147 | message: state.dog.hasBarked ? 'The dog barked' : 'The dog did not bark',
148 | });
149 |
150 | export default connect(mapStateToProps)(Message);
151 | ```
152 |
153 | `BarkButton` collegherá il `Button` con l'azione `makeBark` ed il metodo `dispatch` di React, e `BarkMessage` collegherá lo stato dell'applicazione con `Message`. Quando lo stato cambia, `Message` verrá automaticamente ricaricato con la prop `message` corretta. Questi collegamenti sono fatti tramite la funzione `connect` di `react-redux`.
154 |
155 | - Puoi eseguire `yarn start` ed aprire `index.html`. Dovresti vedere "The dog did not bark" ed un bottone. Quando clicki sul bottone, il messaggio dovrebbe diventare "The dog barked".
156 |
157 | Prossima sezione: [10 - Immutable JS e Migliorie Redux](/tutorial/10-immutable-redux-improvements)
158 |
159 | Torna alla [sezione precedente](/tutorial/8-react) o all'[indice](https://github.com/fbertone/js-stack-from-scratch).
160 |
--------------------------------------------------------------------------------
/tutorial/9-redux/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/tutorial/9-redux/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 |
3 | import gulp from 'gulp';
4 | import babel from 'gulp-babel';
5 | import eslint from 'gulp-eslint';
6 | import del from 'del';
7 | import webpack from 'webpack-stream';
8 | import webpackConfig from './webpack.config.babel';
9 |
10 | const paths = {
11 | allSrcJs: 'src/**/*.js?(x)',
12 | serverSrcJs: 'src/server/**/*.js?(x)',
13 | sharedSrcJs: 'src/shared/**/*.js?(x)',
14 | clientEntryPoint: 'src/client/app.jsx',
15 | clientBundle: 'dist/client-bundle.js?(.map)',
16 | gulpFile: 'gulpfile.babel.js',
17 | webpackFile: 'webpack.config.babel.js',
18 | libDir: 'lib',
19 | distDir: 'dist',
20 | };
21 |
22 | gulp.task('lint', () =>
23 | gulp.src([
24 | paths.allSrcJs,
25 | paths.gulpFile,
26 | paths.webpackFile,
27 | ])
28 | .pipe(eslint())
29 | .pipe(eslint.format())
30 | .pipe(eslint.failAfterError())
31 | );
32 |
33 | gulp.task('clean', () => del([
34 | paths.libDir,
35 | paths.clientBundle,
36 | ]));
37 |
38 | gulp.task('build', ['lint', 'clean'], () =>
39 | gulp.src(paths.allSrcJs)
40 | .pipe(babel())
41 | .pipe(gulp.dest(paths.libDir))
42 | );
43 |
44 | gulp.task('main', ['lint', 'clean'], () =>
45 | gulp.src(paths.clientEntryPoint)
46 | .pipe(webpack(webpackConfig))
47 | .pipe(gulp.dest(paths.distDir))
48 | );
49 |
50 | gulp.task('watch', () => {
51 | gulp.watch(paths.allSrcJs, ['main']);
52 | });
53 |
54 | gulp.task('default', ['watch', 'main']);
55 |
--------------------------------------------------------------------------------
/tutorial/9-redux/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-stack-from-scratch",
3 | "version": "1.0.0",
4 | "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
5 | "scripts": {
6 | "start": "gulp",
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "tutorial-test": "gulp main"
9 | },
10 | "eslintConfig": {
11 | "extends": "airbnb",
12 | "plugins": [
13 | "import"
14 | ],
15 | "env": {
16 | "browser": true
17 | }
18 | },
19 | "babel": {
20 | "presets": [
21 | "latest",
22 | "react"
23 | ]
24 | },
25 | "dependencies": {
26 | "babel-polyfill": "^6.16.0",
27 | "react": "^15.3.2",
28 | "react-dom": "^15.3.2",
29 | "react-redux": "^4.4.5",
30 | "redux": "^3.6.0"
31 | },
32 | "devDependencies": {
33 | "babel-loader": "^6.2.5",
34 | "babel-preset-latest": "^6.16.0",
35 | "babel-preset-react": "^6.16.0",
36 | "del": "^2.2.2",
37 | "eslint": "^3.8.1",
38 | "eslint-config-airbnb": "^12.0.0",
39 | "eslint-plugin-import": "^2.0.1",
40 | "eslint-plugin-jsx-a11y": "^2.2.3",
41 | "eslint-plugin-react": "^6.4.1",
42 | "gulp": "^3.9.1",
43 | "gulp-babel": "^6.1.2",
44 | "gulp-eslint": "^3.0.1",
45 | "webpack-stream": "^3.2.0"
46 | },
47 | "repository": "verekia/js-stack-from-scratch",
48 | "author": "Jonathan Verrecchia - @verekia",
49 | "license": "MIT"
50 | }
51 |
--------------------------------------------------------------------------------
/tutorial/9-redux/src/client/actions/dog-actions.js:
--------------------------------------------------------------------------------
1 | export const MAKE_BARK = 'MAKE_BARK';
2 |
3 | export const makeBark = () => ({
4 | type: MAKE_BARK,
5 | payload: true,
6 | });
7 |
--------------------------------------------------------------------------------
/tutorial/9-redux/src/client/app.jsx:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill';
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { createStore, combineReducers } from 'redux';
6 | import { Provider } from 'react-redux';
7 | import dogReducer from './reducers/dog-reducer';
8 | import BarkMessage from './containers/bark-message';
9 | import BarkButton from './containers/bark-button';
10 |
11 | const store = createStore(combineReducers({
12 | dog: dogReducer,
13 | }));
14 |
15 | ReactDOM.render(
16 |
17 |