Condividi tramite

Tecnologie web lato client comuni

Suggerimento

Questo contenuto è un estratto dell'eBook Progettare applicazioni Web moderne con ASP.NET Core e Azure, disponibile in .NET Docs o come PDF scaricabile gratuitamente che può essere letto offline.

Scaricare il PDF

Anteprima copertina e-book Progettare applicazioni Web moderne con ASP.NET Core e Azure.

"I siti Web dovrebbero sembrare buoni dall'interno e fuori." - Paul Cookson

ASP.NET le applicazioni Core sono applicazioni Web e in genere si basano su tecnologie Web lato client come HTML, CSS e JavaScript. Separando il contenuto della pagina (HTML) dal layout e dallo stile (CSS) e dal relativo comportamento (tramite JavaScript), le app Web complesse possono sfruttare il principio Separazione delle preoccupazioni. Le modifiche future alla struttura, alla progettazione o al comportamento dell'applicazione possono essere apportate più facilmente quando queste problematiche non sono intrecciate.

Anche se HTML e CSS sono relativamente stabili, JavaScript, grazie ai framework e alle utilità con cui gli sviluppatori lavorano per creare applicazioni basate sul web, si sta evolvendo a una velocità sorprendente. Questo capitolo esamina alcuni modi in cui JavaScript viene usato dagli sviluppatori Web e offre una panoramica generale delle librerie lato client Angular e React.

Annotazioni

Blazor offre un'alternativa ai framework JavaScript per la creazione di interfacce utente client avanzate e interattive.

HTML

HTML è il linguaggio di markup standard usato per creare pagine Web e applicazioni Web. I relativi elementi formano i blocchi predefiniti delle pagine, che rappresentano testo formattato, immagini, input di modulo e altre strutture. Quando un browser effettua una richiesta a un URL, se recupera una pagina o un'applicazione, la prima cosa restituita è un documento HTML. Questo documento HTML può fare riferimento o includere informazioni aggiuntive sull'aspetto e sul layout sotto forma di CSS o comportamento sotto forma di JavaScript.

CSS

CSS (Fogli di stile a cascata) viene utilizzato per controllare l'aspetto e il layout degli elementi HTML. Gli stili CSS possono essere applicati direttamente a un elemento HTML, definiti separatamente nella stessa pagina o definiti in un file separato e a cui fa riferimento la pagina. Stili a catena in base alla modalità di utilizzo per selezionare un determinato elemento HTML. Ad esempio, uno stile può essere applicato a un intero documento, ma verrebbe sostituito da uno stile applicato a un particolare elemento. Analogamente, uno stile specifico dell'elemento verrebbe sottoposto a override da uno stile applicato a una classe CSS applicata all'elemento, che a sua volta verrebbe sottoposto a override da uno stile destinato a un'istanza specifica di tale elemento (tramite il relativo ID). Figura 6-1

Regole di specificità CSS

Figura 6-1. Regole di specificità CSS, in ordine.

È consigliabile mantenere gli stili nei propri file del foglio di stile separati e usare la propagazione basata sulla selezione per implementare stili coerenti e riutilizzabili all'interno dell'applicazione. L'inserimento di regole di stile all'interno di HTML deve essere evitato e l'applicazione di stili a singoli elementi specifici (anziché a intere classi di elementi o elementi a cui è stata applicata una determinata classe CSS) deve essere l'eccezione, non la regola.

Preprocessori CSS

I fogli di stile CSS non supportano la logica condizionale, le variabili e altre funzionalità del linguaggio di programmazione. Pertanto, fogli di stile di grandi dimensioni spesso includono un po 'di ripetizione, come lo stesso colore, tipo di carattere o altra impostazione viene applicata a molte varianti diverse di elementi HTML e classi CSS. I preprocessori CSS possono aiutare i fogli di stile a seguire il principio DRY aggiungendo il supporto per variabili e logica.

I preprocessori CSS più diffusi sono Sass e LESS. Entrambi estendono CSS e sono compatibili con le versioni precedenti, vale a dire che un file CSS normale è un file Sass o LESS valido. Sass è basato su Ruby e LESS è basato su JavaScript ed entrambi vengono in genere eseguiti come parte del processo di sviluppo locale. Entrambi dispongono di strumenti da riga di comando, oltre al supporto predefinito in Visual Studio per eseguirli usando attività Gulp o Grunt.

JavaScript

JavaScript è un linguaggio di programmazione dinamico e interpretato standardizzato nella specifica del linguaggio ECMAScript. È il linguaggio di programmazione del Web. Come CSS, JavaScript può essere definito come attributi all'interno di elementi HTML, come blocchi di script all'interno di una pagina o in file separati. Proprio come CSS, è consigliabile organizzare JavaScript in file separati, mantenendolo separato il più possibile dal codice HTML trovato in singole pagine Web o visualizzazioni dell'applicazione.

Quando si usa JavaScript nell'applicazione Web, è necessario eseguire alcune attività:

  • Selezione di un elemento HTML e recupero e/o aggiornamento del relativo valore.

  • Esecuzione di query su un'API Web per i dati.

  • Invio di un comando a un'API Web e risposta a un callback con il relativo risultato.

  • Esecuzione della convalida.

È possibile eseguire tutte queste attività solo con JavaScript, ma esistono molte librerie per semplificare queste attività. Una delle prime e più riuscite di queste librerie è jQuery, che continua a essere una scelta popolare per semplificare queste attività nelle pagine Web. Per le applicazioni a pagina singola (SPA), jQuery non offre molte delle funzionalità desiderate offerte da Angular e React.

Applicazioni web legacy con jQuery

Anche se antico dagli standard del framework JavaScript, jQuery continua a essere una libreria comunemente usata per l'uso con HTML/CSS e la creazione di applicazioni che effettuano chiamate AJAX alle API Web. Tuttavia, jQuery opera a livello del modello DOM (Document Object Model) del browser e per impostazione predefinita offre solo un modello imperativo, anziché dichiarativo.

Si supponga, ad esempio, che se il valore di una casella di testo supera 10, deve essere reso visibile un elemento nella pagina. In jQuery questa funzionalità viene in genere implementata scrivendo un gestore eventi con codice che controlla il valore della casella di testo e imposta la visibilità dell'elemento di destinazione in base a tale valore. Questo processo è un approccio imperativo basato sul codice. Un altro framework potrebbe invece usare l'associazione dati per associare la visibilità dell'elemento al valore della casella di testo in modo dichiarativo. Questo approccio non richiede la scrittura di codice, ma richiede solo la decorazione degli elementi coinvolti negli attributi di data binding. Man mano che i comportamenti lato client aumentano di più, gli approcci di data binding spesso comportano soluzioni più semplici con meno codice e complessità condizionale.

jQuery e un framework SPA

Fattore jQuery Angolare
Astrazione del DOM Sì Sì
Supporto AJAX Sì Sì
Data binding dichiarativo No Sì
Routing in stile MVC No Sì
Creazione di modelli No Sì
Routing Deep-Link No Sì

La maggior parte delle funzionalità jQuery manca intrinsecamente può essere aggiunta con l'aggiunta di altre librerie. Tuttavia, un framework SPA come Angular fornisce queste funzionalità in modo più integrato, poiché è stato progettato con tutti loro in mente fin dall'inizio. JQuery è anche una libreria imperativa, ovvero è necessario chiamare le funzioni jQuery per eseguire qualsiasi operazione con jQuery. Gran parte del lavoro e delle funzionalità offerte dai framework SPA può essere eseguita in modo dichiarativo, senza richiedere la scrittura di codice effettivo.

Il data binding è un ottimo esempio di questa funzionalità. In jQuery, in genere richiede solo una riga di codice per ottenere il valore di un elemento DOM o per impostare il valore di un elemento. Tuttavia, è necessario scrivere questo codice ogni volta che è necessario modificare il valore dell'elemento e a volte questo si verifica in più funzioni in una pagina. Un altro esempio comune è la visibilità degli elementi. In jQuery potrebbero esserci molte posizioni diverse in cui scrivere codice per controllare se determinati elementi erano visibili. In ognuno di questi casi, quando si usa il data binding, non sarebbe necessario scrivere codice. È sufficiente associare il valore o la visibilità degli elementi in questione a un modello di visualizzazione nella pagina e le modifiche apportate a tale modello di visualizzazione verranno riflesse automaticamente negli elementi associati.

Applicazioni a pagina singola Angular

Angular rimane uno dei framework JavaScript più diffusi al mondo. Da Angular 2, il team ha ricostruito il framework da zero (usando TypeScript) e rinominato il nome originale da AngularJS ad Angular. Da diversi anni, il riprogettato Angular continua a essere un framework affidabile per la creazione di applicazioni a pagina singola (SPA) nella sua versione aggiornata.

Le applicazioni Angular vengono compilate dai componenti. I componenti combinano modelli HTML con oggetti speciali e controllano una parte della pagina. Un componente semplice della documentazione di Angular è illustrato di seguito:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

I componenti vengono definiti usando la @Component funzione decorator, che accetta i metadati relativi al componente. La proprietà del selettore identifica l'ID dell'elemento nella pagina in cui verrà visualizzato questo componente. La proprietà del modello è un semplice modello HTML che include un segnaposto che corrisponde alla proprietà name del componente, definita nell'ultima riga.

Usando componenti e modelli, invece di elementi DOM, le app Angular possono operare a un livello superiore di astrazione e con codice meno complessivo rispetto alle app scritte usando solo JavaScript (detto anche "vanilla JS") o con jQuery. Angular impone anche un certo ordine su come organizzare i file di script sul lato client. Per convenzione, le app Angular usano una struttura di cartelle comune, con file script di modulo e componenti che si trovano in una cartella dell'app. Gli script Angular relativi alla compilazione, alla distribuzione e al test dell'app si trovano in genere in una cartella di livello superiore.

È possibile sviluppare app Angular usando un'interfaccia della riga di comando. Introduzione allo sviluppo di Angular in locale (presupponendo che git e npm sia già installato) consiste semplicemente nella clonazione di un repository da GitHub e nell'esecuzione npm install e npm start. Oltre a questo, Angular offre la propria interfaccia della riga di comando, che può creare progetti, aggiungere file e facilitare test, creazione di bundle e attività di distribuzione. Questa interfaccia della riga di comando rende Angular particolarmente compatibile con ASP.NET Core, che offre anche un ottimo supporto dell'interfaccia della riga di comando.

Microsoft ha sviluppato un'applicazione di riferimento, eShopOnContainers, che include un'implementazione di Angular SPA. Questa app include moduli Angular per gestire il carrello acquisti dello Store online, caricare e visualizzare gli elementi dal catalogo e gestire la creazione degli ordini. È possibile visualizzare e scaricare l'applicazione di esempio da GitHub.

Reagire

A differenza di Angular, che offre un'implementazione completa del modello-View-Controller, React riguarda solo le visualizzazioni. Non è un framework, solo una libreria, quindi per creare un'applicazione a pagina singola è necessario sfruttare librerie aggiuntive. Esistono numerose librerie progettate per essere usate con React per produrre applicazioni avanzate a pagina singola.

Una delle funzionalità più importanti di React è l'uso di un DOM virtuale. Il DOM virtuale offre a React diversi vantaggi, tra cui le prestazioni (il DOM virtuale può ottimizzare le parti del DOM effettivo da aggiornare) e la testabilità (non è necessario avere un browser per testare React e le relative interazioni con il DOM virtuale).

React è anche insolito nel modo in cui funziona con HTML. Invece di avere una stretta separazione tra codice e markup (con riferimenti a JavaScript visualizzati negli attributi HTML, forse), React aggiunge HTML direttamente all'interno del codice JavaScript come JSX. JSX è una sintassi simile a HTML che può essere compilata fino a JavaScript puro. Per esempio:

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

Se si conosce già JavaScript, l'apprendimento di React dovrebbe essere semplice. Non c'è una curva di apprendimento tanto grande né l'uso di una sintassi speciale come con Angular o altre librerie popolari.

Poiché React non è un framework completo, in genere è necessario che altre librerie gestisca elementi come routing, chiamate API Web e gestione delle dipendenze. La cosa bella è che è possibile scegliere la libreria migliore per ognuno di questi, ma lo svantaggio è che è necessario prendere tutte queste decisioni e verificare che tutte le librerie scelte funzionino bene al termine. Se si vuole un buon punto di partenza, è possibile usare uno starter kit come React Slingshot, che preconfeziona un set di librerie compatibili insieme a React.

Vue

Dalla guida introduttiva, "Vue è un framework progressivo per la creazione di interfacce utente. A differenza di altri framework monolitici, Vue è progettato da zero per essere adottabile in modo incrementale. La libreria principale è incentrata solo sul livello di visualizzazione ed è facile da raccogliere e integrare con altre librerie o progetti esistenti. D'altra parte, Vue è perfettamente in grado di alimentare applicazioni sofisticate Single-Page quando usate in combinazione con strumenti moderni e librerie di supporto."

Per iniziare a usare Vue è sufficiente includere lo script all'interno di un file HTML:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Dopo aver aggiunto il framework, è possibile eseguire il rendering dichiarativo dei dati nel DOM usando la sintassi semplice di creazione di modelli di Vue:

<div id="app">
  {{ message }}
</div>

e quindi aggiungere lo script seguente:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Questo è sufficiente per eseguire il rendering "Hello Vue!" nella pagina. Si noti, tuttavia, che Vue non si limita a renderizzare il messaggio al div una volta. Supporta l'associazione dati e gli aggiornamenti dinamici in modo che, se il valore delle message modifiche, il valore in <div> viene immediatamente aggiornato per rifletterlo.

Naturalmente, questo è solo un assaggio di ciò di cui Vue è capace. Si è guadagnato una grande popolarità negli ultimi anni e ha una grande comunità. Esiste un elenco enorme e crescente di componenti e librerie di supporto che funzionano anche con Vue per estenderlo. Se stai cercando di aggiungere un comportamento lato client alla tua applicazione Web o valutare la possibilità di creare un'applicazione a pagina singola completa, vale la pena valutare Vue.

Blazor WebAssembly

A differenza di altri framework JavaScript, Blazor WebAssembly è un framework di app a pagina singola per la creazione di app Web interattive sul lato client con .NET. Blazor WebAssembly usa standard Web aperti senza plug-in o ricompilare il codice in altri linguaggi. Blazor WebAssembly funziona in tutti i web browser moderni, inclusi i browser per dispositivi mobili.

L'esecuzione di codice .NET all'interno dei Web browser è resa possibile da WebAssembly (abbreviato wasm). WebAssembly è un formato bytecode compatto ottimizzato per il download veloce e la velocità massima di esecuzione. WebAssembly è uno standard Web aperto ed è supportato nei Web browser senza plug-in.

Il codice WebAssembly può accedere alla funzionalità completa del browser tramite JavaScript, denominata interoperabilità JavaScript, spesso abbreviata in interoperabilità JavaScript o interoperabilità JS. Il codice .NET eseguito tramite WebAssembly nel browser viene eseguito nella sandbox JavaScript del browser con le misure di sicurezza offerte dalla sandbox per la protezione da azioni dannose nel computer client.

Per altre informazioni, vedere Introduzione a ASP.NET Core Blazor.

Scelta di un framework SPA

Quando si valuta quale opzione sia migliore per supportare la vostra applicazione a pagina singola (SPA), si dovrebbero considerare le seguenti questioni:

  • Il team ha familiarità con il framework e le relative dipendenze (incluso TypeScript in alcuni casi)?

  • Come viene espresso il quadro e si è d'accordo con il suo modo predefinito di fare le cose?

  • Include (o una libreria complementare) tutte le funzionalità richieste dall'app?

  • È ben documentato?

  • Quanto è attiva la sua community? I nuovi progetti vengono creati con esso?

  • Quanto è attivo il suo team principale? I problemi vengono risolti e le nuove versioni vengono distribuite regolarmente?

I framework continuano a evolversi a un ritmo vertiginoso. Usa le considerazioni sopra elencate per aiutarti a mitigare il rischio di scegliere un framework di cui potresti pentirti di essere dipendente in futuro. Se sei particolarmente avverso al rischio, considera un framework che offre supporto commerciale e/o è sviluppato da una grande azienda.

Riferimenti - Tecnologie Web client

PrecedenteAvanti