Progettare Web App con Angular 8

Vediamo con un approccio pratico come funziona il framework JS più famoso e richiesto dal mercato in questo momento, Angular, indirizzo https://angular.io. Wikipedia semplifica in questo modo: è un framework per applicazioni web open source, principalmente sviluppato da Google e dalla comunità di sviluppatori individuali, nato per affrontare le molte difficoltà incontrate nello sviluppo di applicazioni su singola pagina. Ha l’obiettivo di semplificare lo sviluppo e il test di questa tipologia di applicazioni fornendo un framework lato client con architettura MVC (Model View Controller). Il framework lavora leggendo prima la pagina HTML, che ha incapsulati degli attributi personalizzati addizionali (esempio: ng-controller), interpretando questi attributi come delle direttive (comandi) per legare le parti di ingresso e uscita della pagina al modello che è rappresentato da variabili standard JavaScript. Il valore di queste variabili può essere impostato manualmente nel codice o recuperato da risorse JSON statiche o dinamiche. E ora tuffiamoci nella parte pratica applicando poche parole ma comandi diretti. E’ bene ricordare che la shell per i comandi di riga in windows si richiamano con cmd da striscia di comando esegui mentre in linux rispetto ai comandi sotto elencati si precede il tutto con la formula “sudo“. Con il comando npm install -g @angular/cli si sfrutta la potenza del modulo di gestione moduli di node (NPM) per installare l’ultima versione di Angular. E’ probabile che alla fine dell’ installazione npm proponga un auto aggiornamento con il comando: “npm i npm“. A questo punto creo una cartella per i miei progetti in una posizione specifica e dopo essermi posizionato su di essa, darò il comando ng new my-dream-app. Se arriva l’avviso che node è da aggiornare andare nella root precedente sotto utente e dare il comando per la compatibilità di node con angular: npm install -g update-node; se persiste lo stesso messaggio andare su https://nodejs.org/en/ e installare the last versions! A questo punto il comando che crea l’APP funziona e inizierà a chiedere se vogliamo integrare il modulo routing e che tipologia di CSS vogliamo inserire, noi diciamo no alla prima opzione e lasciamo di default CSS. Il processo di installazione durerà un pò perchè è necessario creare tutta una serie di dipendenze e di moduli per far funzionare il tutto. Alla fine di tutto il software dirà: added 1078 packages from 1045 contributors and audited 17111 packages in 241.028s, found 0 vulnerabilities. A questo punto mi posiziono dentro la cartella e darò il comando: ng serve che inizializzerà la mia app alla visualizzazione su browser tramite localhost, infatti alla fine del comando mi verrà restituito il messaggio: angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ e alla fine ci troviamo a rispondere positivamente anche alla domanda critica se esistono le gioie per gli sviluppatori, certo ecco infatti che cosa abbiamo ottenuto alla fine di tutto questo burrascoso processo, fatto di ostacoli e di aggiornamenti, sovrascritture e dipendenze modulari:

A questo punto il passo successivo è procurarsi un buon editor per modellare il codice tipo web storm o visual studio code, però nel frattempo diamo un occhiata anche alla parte fisica pragmatica creata dopo una serie di comandi se vogliamo astratti e surreali, infatti posizionandoci all’ interno della cartella creata vedremo il seguente schema, dove naturalmente all’ interno della cartella node_modules si vedrà aprirsi un mondo:

Ora dobbiamo capire la struttura e le dipendenze presenti nei file package.json ma la nostra APP si può modellare nel suo SRC (source) e APP dove abbiamo file critici come app.component.html che intuitivamente ci dice a cosa serve: se infatti da localhost:4200 proviamo a modificare il testo della pagina e dell’ HTML precedendo con un ciao i messaggi standard e salvando, scopriremo che la pagina si aggiorna automaticamente con il nuovo contenuto:

In app.component.ts ho anche la possibilità di modificare il contenuto della variabile {{title}} per esempio ma anche di vedere la collocazione delle directory correnti che ospitano i file critici per le modifiche come quello HTML visto precedentemente, ma anche il CSS per esempio. A questo punto è utile vedere come differisce il sorgente rispetto a una pagina HTML tradizionale:

Da notare i marcatori tipo <app-root></app-root> per esempio e le numerose librerie js linkate per rendere eseguibile l’applicazione a runtime. Se andiamo sul nostro codice alal voce app.component.ts scopriremo che la voce è settata nella riga selector: ‘app-root’, ovviamente nella root del folder nel file index.html mi ritroverò la dicitura <app-root></app-root> come da visualizzazione del codice sorgente. A questo punto cimentiamoci in una cosa apparentemente molto complicata, voglio creare una casella di testo che nella parte inferiore nella prima fase mi farà vedere il contenuto della variabile nome settata in app.component.ts (basterà modificare il title in nome e assegnare un valore). Ovviamente non è questo che vogliamo, perchè dinamicamente abbiamo bisogno che prima la casella di testo abbia un contenuto per poter essere catturato poi nella parte inferiore, vediamo quindi come fare per la prima parte. Il file app.component.html si trasformerà in:

<input type=”text”>
<p>{{nome}}</p>

Così però mi ritrovo una situazione statica dove non riesco a catturare dinamicamente il contenuto della casella di testo, quindi dovrò fare delle operazioni preliminari come aggiungere la direttiva che introduce questa opzione che però va prima aggiunto al componente modulo, quindi nello specifico app.component.html diventa:

<input type=”text” [(ngModel)]=”nome”>
<p>{{nome}}</p>

Ovviamente se scriverò un nome nella casella di testo non succederà nulla in quanto adesso dovrò lavorare sul file app.module.ts e in particolare includendo le righe di codice per rendere la direttiva eseguibile, quindi le righe:

import { FormsModule } from ‘@angular/forms’;

e FormsModule sempre nel file app.module.ts:

imports: [
BrowserModule,
FormsModule
],

A questo punto la casella di testo di default prende il valore predefinito ma cambiando il contenuto della casella di testo ci accorgiamo che dinamicamente il tutto sarà aggiornato in tempo reale. Come primo approccio ad Angular può bastare, è sufficiente far quadrare il cerchio con le istruzioni sopra elencate e con i mini obiettivi raggiungibili tramite schermate.

 




NODE, javascript lato server, istruzioni per l’uso

Se c’è qualcosa di interessante in questa epoca che stiamo vivendo è che la distribuzione della conoscenza non è più esclusiva di scienziati, prelati o uomini di armi come nel medioevo di Leonardo Da Vinci per esempio, che avrebbero avuto da perderci nei loro profitti favorendo i loro bellicosi competitors, oggi una quantità inesauribile di tecnologie per costruire web app sono a disposizione di tutti per favorire sviluppo e innovazione tecnologica. Javascript lato server è una tecnologia ormai di ampia diffusione e Node, https://nodejs.org/en/, in quanto runtime JavaScript guidato da eventi asincroni, il software è progettato per creare applicazioni di rete scalabili. Per seguire questo post è sufficiente avere un minimo di base con JS tradizionale e HTML, nulla di trascendentale. Rispetto alla programmazione classica dove il web developer deve costruire i suoi mattoni uno per uno a livello fisico con tanto di tocco di mouse, qui abbiamo il vantaggio di passare a una programmazione velocizzata grazie all’ uso dei comandi che DOBBIAMO eseguire da terminale, operazione un pò ostica all’ inizio se non si è abituati a un simile approccio. Nel seguente esempio “ciao mondo”, molte connessioni possono essere gestite contemporaneamente. Ad ogni connessione viene attivato il callback, ma se non c’è lavoro da fare, js asincrono dormirà, per usare una metafora letteraria. Ciò è in contrasto con il modello di concorrenza più comune di oggi in cui vengono utilizzati i thread del sistema operativo. Il networking basato su thread è relativamente inefficiente e molto difficile da utilizzare. Inoltre, gli utenti di Node sono liberi da preoccupazioni di blocco permanente del processo, poiché non ci sono blocchi. Quasi nessuna funzione in Node esegue direttamente I / O, quindi il processo non blocca mai. Perché nulla blocca, i sistemi scalabili sono molto ragionevoli da sviluppare in Node. Il nodo è simile nel design e influenzato da sistemi come Ruby’s Event Machine o Python’s Twisted. Nodo prende un po ‘più in basso il modello di evento. Presenta un ciclo di eventi come un costrutto di runtime invece che come una libreria. In altri sistemi c’è sempre una chiamata di blocco per avviare il ciclo degli eventi. In genere il comportamento è definito tramite callback all’inizio di uno script e alla fine avvia un server attraverso una chiamata di blocco come EventMachine :: run (). In node non esiste una tale chiamata di ciclo di avvio-evento. Il nodo entra semplicemente nel ciclo degli eventi dopo aver eseguito lo script di input. Node esce dal ciclo degli eventi quando non ci sono più callback da eseguire. Questo comportamento è simile al browser JavaScript: il ciclo degli eventi è nascosto all’utente. HTTP è un cittadino di prima classe in Node, progettato pensando allo streaming e alla latenza bassa. Ciò rende Node adatto alla fondazione di una libreria o di un framework web. Solo perché il nodo è progettato senza thread, non significa che non è possibile sfruttare i core multipli nel proprio ambiente. I processi figlio possono essere generati utilizzando la nostra API child_process.fork () e sono progettati per essere facili da comunicare. Costruito sulla stessa interfaccia è il modulo cluster, che consente di condividere i socket tra i processi per consentire il bilanciamento del carico sui core. Per lavorare con Node è sufficiente un editor performante tipo https://code.visualstudio.com/ per esempio o anche Sublime Text, Brackets o Atom. Il framework che lavora con Node è https://expressjs.com/it/ , libreria web veloce, non categorica e minimalista per Node.js installabile con una semplice riga di comando: $ npm install express –save dove per npm si intende il gestore dei moduli a disposizione per lo sviluppatore. Npm che gestisce le dipendenze modulari è fornito automaticamente al momento dell’ istallazione di Node, ulteriori informazioni sono reperibili anche all’ indirizzo https://www.npmjs.com/. Il comando npm-init create a package.json file ad esempio il comando $ npm init react-app ./my-react-app crea un nuovo progetto basato su React usando create-react-app. il comando npm i npm aggiorna alla versione più recente. Con il comando node posso entrare nella console di programmazione dove posso dire ad esempio che a = 1 e digitando a invio mi verrà restituito 1 e ancora digitando a = 2 posso cambiare il valore della variabile. Posso anche definire una costante con global.a = 3 per esempio; con il comando .exit ritorno alla root utente. Ora proviamo a creare un file con estensione JS nella stessa cartella dove abbiamo creato il JSON ad esempio module1.js e all’ interno scriviamo le seguenti righe di codice:

consol.log(“ciao”);
a = 2;
console.log(a);

quale sarà il risultato lanciando da console con il comando node module1.js il file creato? Vedremo esattamente prima il ciao stampato a video e successivamente nella riga successiva l’esecuzione della istruzione che viene dopo quindi un due. web developer umbriaNelle architetture basate su richiesta risposta nel processo tradizionale io ho una partita a tennis dove il lato client del browser interroga il lato server, con Node abbiamo già detto che questo meccanismo non corre il rischio di interruzioni in quanto il processo è asincrono. Ora nella stessa cartella test creata prima creiamo il file server.js e creiamo un localserver sulla porta 3000 come quello che mette a disposizione xampp per esempio. Nel file server.js scriveremo:

var http = require(‘http’);
var server = http.createServer(function(req, res) {
console.log(‘inizia la richiesta!’);
res.write(‘ho ottenuto la tua richiesta’);
res.end();
});
server.listen(3000);

lanciando il file con il solito comando node server.js (anche senza estensione) e aprendo la pagina 127.0.0.1:3000 o anche localhost:3000, vedremo come si comporta esattamente lo script dalla finestra terminale non appena avrò digitato a video il mio URL. Ovviamente con Node abbiamo il vantaggio di usare EXPRESS Server. Con il comando npm i express –save posso installare il mio pacchetto modulo all’ interno della cartella node_modules. Ora posso fare lo stesso rispetto alla creazione di un localserver, quindi creo il file serverex.js e dentro scriverò le seguenti istruzioni, precedendo questa operazione dalla creazione del famoso file index.html che si trova nella root che andremo a inserire dentro la famosa cartella PUBLIC tipica dell’ architettura da erigere per una web app, ossia l’area dove saranno visibili le parti interattive con l’utente a video. Quindi:

var express = require(‘express’);
var app = express();
var server = app.listen(3000, listening);
function listening() {
console.log(“sono in ascolto”);
}
app.use(express.static(‘public’));

web developer umbriaA questo punto lanciando il comando node serverex.js il terminale si metterà in ascolto e lanciando il nostro localhost noteremo che automaticamente il contenuto della nostra cartella PUBLIC verrà mostrato all’ utente. Riassumento in questo post abbiamo visto che javascript lato server o NODE è facilmente installabile sul nostro computer. Abbiamo anche visto come installare il modulo EXPRESS o il server dedicato che ha i suoi comandi per il restart o lo spegnimento. Abbiamo visto la semplicità di alcuni comandi (ma non tutti, ad esempio il parametro -g alla fine di una stringa viene usato per le installazione GLOBALI sulla propria macchina) per iniziare ad entrare nella shell di programmazione o per installare o lanciare eseguibili. Abbiamo anche dato una occhiata all’ architettura di base capito l’importanza di alcune cartrelle funzionali come PUBLIC o la cartella NODE_MODULES, oltre a padroneggiare a livello base alcuni strumenti legati al browser come la web.consol o gli editor di testo per gestire il codice. Come primo approccio può bastare, in uno dei prossimi appuntamenti entreremo nella progettazione vera e propria di una WEB APP con NODE!