Dela via

Vanliga webbtekniker på klientsidan

  • Artikel

Dricks

Det här innehållet är ett utdrag från eBook, Architect Modern Web Applications med ASP.NET Core och Azure, som finns på .NET Docs eller som en kostnadsfri nedladdningsbar PDF som kan läsas offline.

Ladda ned PDF

Architect Modern Web Applications with ASP.NET Core and Azure eBook cover thumbnail.

"Webbplatser bör se bra ut inifrån och ut." - Paul Cookson

ASP.NET Core-program är webbprogram och de förlitar sig vanligtvis på webbtekniker på klientsidan som HTML, CSS och JavaScript. Genom att separera innehållet på sidan (HTML) från dess layout och formatering (CSS) och dess beteende (via JavaScript) kan komplexa webbappar använda principen Separation of Concerns. Framtida ändringar av programmets struktur, design eller beteende kan göras enklare när dessa problem inte är sammanflätade.

Även om HTML och CSS är relativt stabila utvecklas JavaScript med hjälp av de programramverk och verktyg som utvecklare arbetar med för att skapa webbaserade program i en rasande hastighet. I det här kapitlet tittar vi på några olika sätt att använda JavaScript av webbutvecklare och ger en översikt på hög nivå över biblioteken på Angular- och React-klientsidan.

Kommentar

Blazor tillhandahåller ett alternativ till JavaScript-ramverk för att skapa omfattande, interaktiva klientanvändargränssnitt.

HTML

HTML är standardpåläggsspråket som används för att skapa webbsidor och webbprogram. Dess element utgör byggstenarna på sidor som representerar formaterad text, bilder, formulärindata och andra strukturer. När en webbläsare skickar en begäran till en URL, oavsett om du hämtar en sida eller ett program, är det första som returneras ett HTML-dokument. Det här HTML-dokumentet kan referera till eller innehålla ytterligare information om dess utseende och layout i form av CSS eller beteende i form av JavaScript.

CSS

CSS (Sammanhängande formatmallar) används för att styra utseendet och layouten för HTML-element. CSS-format kan tillämpas direkt på ett HTML-element, definieras separat på samma sida eller definieras i en separat fil och refereras till av sidan. Format kaskad baserat på hur de används för att välja ett visst HTML-element. Ett format kan till exempel gälla för ett helt dokument, men åsidosätts av ett format som tillämpas på ett visst element. På samma sätt skulle ett elementspecifikt format åsidosättas av ett format som tillämpas på en CSS-klass som tillämpades på elementet, vilket i sin tur skulle åsidosättas av ett format som riktar sig mot en specifik instans av det elementet (via dess ID). Bild 6-1

CSS Specificity rules

Bild 6-1. CSS Specificity-regler i ordning.

Det är bäst att behålla formatmallar i sina egna separata formatmallsfiler och använda urvalsbaserad kaskad för att implementera konsekventa och återanvändbara format i programmet. Att placera formatregler i HTML bör undvikas, och att tillämpa format på specifika enskilda element (i stället för hela klasser av element eller element som har en viss CSS-klass som tillämpas på dem) bör vara undantaget, inte regeln.

CSS-förprocessorer

CSS-formatmallar saknar stöd för villkorsstyrd logik, variabler och andra programmeringsspråkfunktioner. Därför innehåller stora formatmallar ofta en hel del upprepning, eftersom samma färg, teckensnitt eller annan inställning tillämpas på många olika varianter av HTML-element och CSS-klasser. CSS-förprocessorer kan hjälpa dina formatmallar att följa DRY-principen genom att lägga till stöd för variabler och logik.

De mest populära CSS-förprocessorerna är Sass och LESS. Båda utökar CSS och är bakåtkompatibla med den, vilket innebär att en vanlig CSS-fil är en giltig Sass- eller LESS-fil. Sass är Ruby-baserad och LESS är JavaScript-baserad och båda körs vanligtvis som en del av din lokala utvecklingsprocess. Båda har kommandoradsverktyg tillgängliga, samt inbyggt stöd i Visual Studio för att köra dem med hjälp av Gulp- eller Grunt-uppgifter.

JavaScript

JavaScript är ett dynamiskt, tolkat programmeringsspråk som har standardiserats i ECMAScript-språkspecifikationen. Det är webbens programmeringsspråk. Precis som CSS kan JavaScript definieras som attribut i HTML-element, som skriptblock på en sida eller i separata filer. Precis som CSS rekommenderar vi att du organiserar JavaScript i separata filer och håller det så långt som möjligt åtskilt från HTML-koden som finns på enskilda webbsidor eller programvyer.

När du arbetar med JavaScript i webbprogrammet finns det några uppgifter som du ofta behöver utföra:

  • Välja ett HTML-element och hämta och/eller uppdatera dess värde.

  • Köra frågor mot ett webb-API för data.

  • Skicka ett kommando till ett webb-API (och svara på ett återanrop med resultatet).

  • Utför validering.

Du kan utföra alla dessa uppgifter enbart med JavaScript, men det finns många bibliotek för att göra dessa uppgifter enklare. Ett av de första och mest framgångsrika av dessa bibliotek är jQuery, som fortsätter att vara ett populärt val för att förenkla dessa uppgifter på webbsidor. För ensidesprogram (SPA) tillhandahåller jQuery inte många av de önskade funktioner som Angular och React erbjuder.

Äldre webbappar med jQuery

Även om jQuery fortfarande är ett vanligt bibliotek för att arbeta med HTML/CSS och skapa program som gör AJAX-anrop till webb-API:er, fortsätter jQuery att vara ett vanligt bibliotek för att arbeta med HTML/CSS och skapa program som gör AJAX-anrop till webb-API:er. JQuery fungerar dock på nivån för webbläsarens dokumentobjektmodell (DOM) och erbjuder som standard endast en imperativ, snarare än deklarativ, modell.

Anta till exempel att om en textrutas värde överskrider 10 bör ett element på sidan göras synligt. I jQuery implementeras vanligtvis den här funktionen genom att skriva en händelsehanterare med kod som skulle inspektera textrutans värde och ange synligheten för målelementet baserat på det värdet. Den här processen är en imperativ, kodbaserad metod. Ett annat ramverk kan i stället använda databindning för att binda elementets synlighet till värdet för textrutan deklarativt. Den här metoden kräver inte att du skriver någon kod, utan kräver i stället endast att de element som ingår i databindningsattributen dekoreras. I takt med att beteendet på klientsidan blir mer komplext resulterar databindningsmetoder ofta i enklare lösningar med mindre kod och villkorsstyrd komplexitet.

jQuery vs a SPA Framework

Faktor Jquery Angular
Abstraherar DOM Ja Ja
AJAX-stöd Ja Ja
Deklarativ databindning Nej Ja
Routning i MVC-format Nej Ja
Mallanvändning Nej Ja
Djuplänksroutning Nej Ja

De flesta funktioner jQuery saknar i sig kan läggas till med tillägg av andra bibliotek. Men ett SPA-ramverk som Angular tillhandahåller dessa funktioner på ett mer integrerat sätt, eftersom det har utformats med alla i åtanke från början. JQuery är också ett imperativt bibliotek, vilket innebär att du måste anropa jQuery-funktioner för att kunna göra något med jQuery. Mycket av det arbete och den funktionalitet som SPA-ramverk tillhandahåller kan utföras deklarativt, vilket kräver att ingen faktisk kod skrivs.

Databindning är ett bra exempel på den här funktionen. I jQuery tar det vanligtvis bara en kodrad för att hämta värdet för ett DOM-element eller för att ange ett elements värde. Du måste dock skriva den här koden när du behöver ändra värdet för elementet, och ibland sker detta i flera funktioner på en sida. Ett annat vanligt exempel är elementsynlighet. I jQuery kan det finnas många olika platser där du skulle skriva kod för att kontrollera om vissa element var synliga. När du använder databindning i vart och ett av dessa fall behöver ingen kod skrivas. Du skulle helt enkelt binda värdet eller synligheten för de aktuella elementen till en vy på sidan, och ändringar i den vyrutan återspeglas automatiskt i de bundna elementen.

Angular-SPA:er

Angular är fortfarande ett av världens mest populära JavaScript-ramverk. Sedan Angular 2 har teamet byggt om ramverket från grunden (med TypeScript) och bytt namn från det ursprungliga AngularJS-namnet till Angular. Nu, flera år gammal, fortsätter den omdesignade Angular att vara ett robust ramverk för att skapa ensidesprogram.

Angular-program skapas från komponenter. Komponenter kombinerar HTML-mallar med särskilda objekt och styr en del av sidan. En enkel komponent från Angulars dokument visas här:

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

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

export class AppComponent { name = 'Angular'; }

Komponenter definieras med hjälp av dekoratörsfunktionen @Component , som tar in metadata om komponenten. Väljareegenskapen identifierar ID:t för elementet på sidan där den här komponenten ska visas. Mallegenskapen är en enkel HTML-mall som innehåller en platshållare som motsvarar komponentens namnegenskap, definierad på den sista raden.

Genom att arbeta med komponenter och mallar kan Angular-appar i stället för DOM-element fungera på en högre abstraktionsnivå och med mindre övergripande kod än appar som skrivits med bara JavaScript (kallas även "vanilj-JS") eller med jQuery. Angular lägger också viss ordning på hur du organiserar skriptfiler på klientsidan. Enligt konventionen använder Angular-appar en gemensam mappstruktur med modul- och komponentskriptfiler som finns i en appmapp. Angular-skript som handlar om att skapa, distribuera och testa appen finns vanligtvis i en mapp på högre nivå.

Du kan utveckla Angular-appar med hjälp av ett CLI. Att komma igång med Angular-utveckling lokalt (förutsatt att du redan har git och npm installerat) består av att helt enkelt klona en lagringsplats från GitHub och köra npm install och npm start. Utöver detta skickar Angular ett eget CLI som kan skapa projekt, lägga till filer och hjälpa till med testning, paketering och distributionsuppgifter. Denna CLI-användarvänlighet gör Angular särskilt kompatibel med ASP.NET Core, som också har bra CLI-stöd.

Microsoft har utvecklat ett referensprogram, eShopOnContainers, som innehåller en Angular SPA-implementering. Den här appen innehåller Angular-moduler för att hantera onlinebutikens varukorg, läsa in och visa objekt från katalogen och hantera skapande av order. Du kan visa och ladda ned exempelprogrammet från GitHub.

React

Till skillnad från Angular, som erbjuder en fullständig modell-View-Controller-mönsterimplementering, bryr sig React bara om vyer. Det är inte ett ramverk, bara ett bibliotek, så för att skapa ett SPA måste du utnyttja ytterligare bibliotek. Det finns ett antal bibliotek som är utformade för att användas med React för att skapa omfattande ensidesprogram.

En av Reacts viktigaste funktioner är dess användning av en virtuell DOM. Den virtuella DOM ger React flera fördelar, inklusive prestanda (den virtuella DOM kan optimera vilka delar av den faktiska DOM som behöver uppdateras) och testbarhet (du behöver inte ha en webbläsare för att testa React och dess interaktioner med dess virtuella DOM).

React är också ovanligt i hur det fungerar med HTML. I stället för att ha en strikt uppdelning mellan kod och markering (med referenser till JavaScript som kanske visas i HTML-attribut), lägger React till HTML direkt i sin JavaScript-kod som JSX. JSX är HTML-liknande syntax som kan kompileras ned till ren JavaScript. Till exempel:

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

Om du redan känner till JavaScript bör det vara enkelt att lära sig React. Det finns inte alls lika mycket inlärningskurva eller särskild syntax som med Angular eller andra populära bibliotek.

Eftersom React inte är ett fullständigt ramverk vill du vanligtvis att andra bibliotek ska hantera saker som routning, webb-API-anrop och beroendehantering. Det fina är att du kan välja det bästa biblioteket för var och en av dessa, men nackdelen är att du måste fatta alla dessa beslut och kontrollera att alla dina valda bibliotek fungerar bra tillsammans när du är klar. Om du vill ha en bra startpunkt kan du använda ett startpaket som React Slingshot, som förpaketerar en uppsättning kompatibla bibliotek tillsammans med React.

Vue

Från kom igång-guiden är "Vue ett progressivt ramverk för att skapa användargränssnitt. Till skillnad från andra monolitiska ramverk är Vue utformat från grunden för att vara stegvis anpassningsbar. Kärnbiblioteket fokuserar endast på visningsskiktet och är enkelt att hämta och integrera med andra bibliotek eller befintliga projekt. Å andra sidan är Vue fullt kapabel att driva avancerade ensidesprogram när de används i kombination med moderna verktyg och stödbibliotek."

Att komma igång med Vue kräver bara att skriptet inkluderas i en HTML-fil:

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

När ramverket har lagts till kan du sedan deklarativt återge data till DOM med vue:s enkla templatingsyntax:

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

och lägger sedan till följande skript:

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

Det räcker för att återge "Hello Vue!" på sidan. Observera dock att Vue inte bara återger meddelandet till div en gång. Det stöder databindning och dynamiska uppdateringar så att om värdet ändras message uppdateras värdet i <div> omedelbart för att återspegla det.

Naturligtvis skrapar detta bara ytan av vad Vue är kapabel till. Det har fått en hel del popularitet under de senaste åren och har ett stort samhälle. Det finns en enorm och växande lista över stödkomponenter och bibliotek som fungerar med Vue för att utöka den också. Om du vill lägga till beteende på klientsidan i webbappen eller överväga att skapa ett fullständigt SPA är Vue värt att undersöka.

Blazor WebAssembly

Till skillnad från andra JavaScript-ramverk Blazor WebAssembly är ett spa-ramverk (single-page app) för att skapa interaktiva webbappar på klientsidan med .NET. Blazor WebAssembly använder öppna webbstandarder utan plugin-program eller omkompilering av kod till andra språk. Blazor WebAssembly fungerar i alla moderna webbläsare, inklusive mobila webbläsare.

Att köra .NET-kod i webbläsare möjliggörs av WebAssembly (förkortad wasm). WebAssembly är ett kompakt bytecode-format som är optimerat för snabb nedladdning och maximal körningshastighet. WebAssembly är en öppen webbstandard och stöds i webbläsare utan plugin-program.

WebAssembly-kod kan komma åt alla funktioner i webbläsaren via JavaScript, som kallas JavaScript-samverkan, som ofta förkortas till JavaScript-interop eller JS-interop. .NET-kod som körs via WebAssembly i webbläsaren körs i webbläsarens JavaScript-sandbox-miljö med det skydd som sandbox-miljön ger mot skadliga åtgärder på klientdatorn.

Mer information finns i Introduktion till ASP.NET Core Blazor.

Välja ett SPA-ramverk

Tänk på följande när du överväger vilket alternativ som fungerar bäst för att stödja ditt SPA:

  • Är ditt team bekant med ramverket och dess beroenden (inklusive TypeScript i vissa fall)?

  • Hur åsiktsutlåtande är ramverket, och håller du med om dess standardsätt att göra saker?

  • Innehåller den (eller ett tillhörande bibliotek) alla funktioner som din app kräver?

  • Är det väl dokumenterat?

  • Hur aktiv är dess community? Byggs nya projekt med det?

  • Hur aktivt är dess kärnteam? Löses problem och nya versioner levereras regelbundet?

Ramverken fortsätter att utvecklas med brythastighet. Använd de överväganden som anges ovan för att minska risken för att välja ett ramverk som du senare ångrar att du är beroende av. Om du är särskilt riskvild kan du överväga ett ramverk som erbjuder kommersiellt stöd och/eller som utvecklas av ett stort företag.

Referenser – Klientwebbtekniker

FöregåendeNästa