Scrivere un app Angular è un gioco da ragazzi, ovviamente giorno dopo giorno le conoscenze aumentano tanto da migliorar e rendere più sicuro il proprio codice, quello che seguirà in questo post e nei prossimi sono tutte le fasi, dalla più “spaghetti code” alla più sistemata di come strutturare un app Angular

Quarta Fase: Typescript, Yarn, TSLint

Nella scorso step abbiamo visto come rendere più sicuro il nostro codice tramite piccoli e utili accorgimenti, in questa fase faremo un salto di linguaggio utilizzando typescript e convertendo il gestore delle nostre dipendenze da bower a yarn

Typerscript

TypeScript è un “superset” di JavaScript, creato da Microsoft, cioè un linguaggio che estende JavaScript con elementi e caratteristiche e che produce in output semplice codice JavaScript come risultato della sua compilazione.

Con TypeScript, JavaScript viene equipaggiato con tipi, classi, interfacce e moduli, che permettono lo sviluppo di applicazioni facilmente scalabili. Queste caratteristiche – tipiche dei linguaggi di programmazione orientati agli oggetti e staticamente tipizzati semplificano inoltre il lavoro dei tool di sviluppo che forniscono così un migliore supporto nella stesura e manutenzione del codice.

Il passaggio a typescript ci servirà a una più facile comprensione e passaggio futuro a Angular 2 o 4

per installare typescript basterà installare tramite npm l'ultima versione del pacchetto tramite il comando

npm install -g typescript

Una volta installato typescript sarà necessario convertire tutti i file .js in .ts e installare il pacchetto gulp-typescript in modo da iniziare a impostare la compilazione automatica

npm install gulp-typescript --save

e modificare il nostro gulpfile.js per lavorare con typescript

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    ts = require('gulp-typescript'),
    ngAnnotate = require('gulp-ng-annotate');

var tsOrder = [
    'app/modules/**/module.ts',
    'app/modules/**/*.ts',
    'app/*.ts'
];

gulp.task('ts', function() {
    gulp.src(tsOrder)
        .pipe(ts({
            noImplicitAny: true,
            out: 'app.js',
            target: 'ES5',
            removeComments:false
        }))
        .js
        .pipe(ngAnnotate())
        .pipe(uglify())
        .pipe(gulp.dest('app/dist'));
});

gulp.task('default', function() {
    gulp.watch(tsOrder , ['ts']);
});

Siamo ufficialmente passati a typescript, si non è necessario cambiare nulla del nostro codice js per lavorare in typescript ma nei prossimi step vedremo insieme come passare al paradigma typescript

TSLint

TSLint è un tool di analisi che fa il check del tuo codice TypeScript per quanto riguarda legibilità, manutenzione, e errori funzionali. Il tool è supportato da tutti i più moderni Editor di testo.

Per usare TSLint sul nostro progetto inizieremo installando globalmente il pacchetto

npm install -g tslint

e entrare nel nostro progetto e effettuare l'init utilizzando il comando

tslint --init

e sostituire il contenuto del file tslint.json con il seguente

{
 "rules": {
    "class-name": true,
    "curly": true,
    "eofline": false,
    "forin": true,
    "indent": [true, 4],
    "label-position": true,
    "label-undefined": true,
    "max-line-length": [false, 120],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [true,
        "debug",
        "info",
        "time",
        "timeEnd",
        "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": false,
    "no-eval": true,
    "no-imports": true,
    "no-string-literal": false,
    "no-trailing-comma": true,
    "no-trailing-whitespace": true,
    "no-unused-variable": false,
    "no-unreachable": true,
    "no-use-before-declare": true,
    "one-line": [true,
        "check-open-brace",
        "check-catch",
        "check-else",
        "check-whitespace"
    ],
    "quotemark": [true, "single"],
    "radix": true,
    "semicolon": true,
    "triple-equals": [true, "allow-null-check"],
    "variable-name": false,
    "no-unused-vars": true,
    "whitespace": [true,
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator"
    ]
 }
}

Adesso installando il pacchetto sul nostro browser per utilizzare il tslint avremo tutti gli errori e warning necessari per poter procedere con lo sviluppo corretto del nostro applicativo

Yarn

Yarn, come npm, è un packet manager che ci permette di fare lo share e usare codice e librerie di altre persone di tutto il mondo. Le differenze sostanziali rispetto a npm sono la velocità, molto maggiore, e il lock delle versioni automatiche, tocca sana specialmente sul frontend

Una volta installato Yarn basterà digitare il comando yarn all'interno della nostra cartella per convertire le nostre dipendenze npm in Yarn. Una volta lanciato il comando verrà creato il file yarn.lock che è appunto il file di lock delle versioni creato da yarn (secondo motivo molto importante per passare a yarn)

Adesso convertiamo i nostri scripts all'interno del package.json in modo da utilizzare Yarn

"scripts": {
   "postinstall": "bower install",
   "prestart": "yarn",
   "start": "http-server -a localhost -p 8000 -c-1",
   "pretest": "yarn",
   "test": "karma start karma.conf.js",
   "test-single-run": "karma start karma.conf.js  --single-run",
   "preupdate-webdriver": "yarn",
   "update-webdriver": "webdriver-manager update",
   "preprotractor": "yarn run update-webdriver"
},

e utilizzano esattamente i comandi come facevamo con npm, ad esempio:

yarn start => avvierà il server sul localhost 8000
yarn run prestart e yarn run pretest re-installeranno le dipendenze 

Yarn, come npm, può essere utilizzato anche per le dependency frontend, in questo momento sul nostro progetto utilizziamo due packet manager, uno per il frontend (bower) e uno per dev dependency (yarn), ecco perché abbandoneremo l'utilizzo di bower per quello di yarn, per fare questo basterà cambiare il nostro package.json in questo modo:

"devDependencies": {
   "gulp": "^3.9.1",
   "gulp-concat": "^2.6.0",
   "gulp-ng-annotate": "^2.0.0",
   "gulp-typescript": "^3.1.6",
   "gulp-uglify": "^1.5.3",
   "typescript": "^2.2.2"
},
"dependencies": {
   "angular": "~1.5.x",
   "angular-loader": "~1.5.x",
   "angular-mocks": "~1.5.x",
   "angular-route": "~1.5.x",
   "bootstrap": "^3.3.7",
   "html5-boilerplate": "^0.0.1",
   "jquery": "^3.2.1"
}

in questo modo basterà dare il comando yarn da terminale per installare le dipendenze e ritrovarle tutte all'interno della cartella node_modules

Ora andiamo a sostituire i riferimenti alle librerie sul nostro file index.html in questo modo:

<link rel="stylesheet" href="../node_modules/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="../node_modules/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<script src="../node_modules/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-route/angular-route.js"></script>
<script src="dist/app.js"></script>

Da ora sarà possibile eliminare i tutti i riferimenti a i nostri file bower.

Conclusioni

Abbiamo visto come utilizzare typescript e yarn per avvicinarci pian pian al passaggio a angular 1.6 prima e a 2/4 poi,
l’esempio completo lo trovate a questo link su git:https://github.com/thecreazy/angular-base-project
il progetto conterrà man mano tutte le evolutive che pian piano andremo a studiar nei post a seguire, dalla seconda lezione in poi troverete nella cartella lessons le precedenti lezioni in modo da poter seguire l’evolutiva del progetto

Lezioni