Share via

Algemene webtechnologieën aan de clientzijde

  • Artikel

Tip

Deze inhoud is een fragment uit het eBook, Architect Modern Web Applications met ASP.NET Core en Azure, beschikbaar op .NET Docs of als een gratis downloadbare PDF die offline kan worden gelezen.

PDF downloaden

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

"Websites moeten er goed uitzien van binnen en buiten." - Paul Cookson

ASP.NET Core-toepassingen zijn webtoepassingen en ze zijn doorgaans afhankelijk van webtechnologieën aan de clientzijde, zoals HTML, CSS en JavaScript. Door de inhoud van de pagina (de HTML) te scheiden van de indeling en stijl (de CSS) en het gedrag ervan (via JavaScript), kunnen complexe web-apps gebruikmaken van het principe Separation of Concerns. Toekomstige wijzigingen in de structuur, het ontwerp of het gedrag van de toepassing kunnen gemakkelijker worden aangebracht wanneer deze problemen niet onderling zijn verbonden.

Hoewel HTML en CSS relatief stabiel zijn, ontwikkelt JavaScript, door middel van de toepassingsframeworks en hulpprogramma's waarmee ontwikkelaars werken om webtoepassingen te bouwen, steeds sneller. In dit hoofdstuk wordt gekeken naar een aantal manieren waarop JavaScript wordt gebruikt door webontwikkelaars en biedt een algemeen overzicht van de bibliotheken aan de clientzijde van Angular en React.

Notitie

Blazor biedt een alternatief voor JavaScript-frameworks voor het bouwen van uitgebreide, interactieve clientgebruikersinterfaces.

HTML

HTML is de standaardtaal voor markeringen die wordt gebruikt voor het maken van webpagina's en webtoepassingen. De elementen vormen de bouwstenen van pagina's, die opgemaakte tekst, afbeeldingen, formulierinvoer en andere structuren vertegenwoordigen. Wanneer een browser een aanvraag indient bij een URL, ongeacht of een pagina of toepassing wordt opgehaald, is het eerste wat wordt geretourneerd een HTML-document. Dit HTML-document kan verwijzen naar of aanvullende informatie bevatten over het uiterlijk en de indeling ervan in de vorm van CSS of gedrag in de vorm van JavaScript.

CSS

CSS (Cascading Style Sheets) wordt gebruikt om het uiterlijk en de indeling van HTML-elementen te bepalen. CSS-stijlen kunnen rechtstreeks worden toegepast op een HTML-element, afzonderlijk gedefinieerd op dezelfde pagina of worden gedefinieerd in een afzonderlijk bestand en waarnaar wordt verwezen door de pagina. Stijlen trapsgewijs op basis van hoe ze worden gebruikt om een bepaald HTML-element te selecteren. Een stijl kan bijvoorbeeld van toepassing zijn op een heel document, maar wordt overschreven door een stijl die is toegepast op een bepaald element. Op dezelfde manier wordt een elementspecifieke stijl overschreven door een stijl die is toegepast op een CSS-klasse die is toegepast op het element, dat op zijn beurt wordt overschreven door een stijl die is gericht op een specifiek exemplaar van dat element (via de id). Afbeelding 6-1

CSS Specificity rules

Afbeelding 6-1. CSS-specificiteitsregels, in volgorde.

Het is raadzaam om stijlen in hun eigen afzonderlijke opmaakmodelbestanden te houden en trapsgewijs op basis van selectie te gebruiken om consistente en herbruikbare stijlen in de toepassing te implementeren. Het plaatsen van stijlregels in HTML moet worden vermeden en het toepassen van stijlen op specifieke afzonderlijke elementen (in plaats van hele klassen elementen of elementen waarop een bepaalde CSS-klasse is toegepast) moet de uitzondering zijn, niet op de regel.

CSS-preprocessors

CSS-opmaakmodellen bieden geen ondersteuning voor voorwaardelijke logica, variabelen en andere programmeertaalfuncties. Grote opmaakmodellen bevatten dus vaak nogal wat herhalingen, omdat dezelfde kleur, hetzelfde lettertype of andere instelling wordt toegepast op veel verschillende variaties van HTML-elementen en CSS-klassen. CSS-preprocessors kunnen uw opmaakmodellen helpen het DRY-principe te volgen door ondersteuning voor variabelen en logica toe te voegen.

De populairste CSS-preprocessors zijn Sass en LESS. Zowel CSS uitbreiden als compatibel zijn met eerdere versies, wat betekent dat een gewoon CSS-bestand een geldig Sass- of LESS-bestand is. Sass is op Ruby gebaseerd en LESS is gebaseerd op JavaScript, en beide worden doorgaans uitgevoerd als onderdeel van uw lokale ontwikkelingsproces. Beide hebben opdrachtregelprogramma's beschikbaar, evenals ingebouwde ondersteuning in Visual Studio voor het uitvoeren ervan met behulp van Gulp- of Grunt-taken.

JavaScript

JavaScript is een dynamische, geïnterpreteerde programmeertaal die is gestandaardiseerd in de ECMAScript-taalspecificatie. Het is de programmeertaal van het web. Net als CSS kan JavaScript worden gedefinieerd als kenmerken binnen HTML-elementen, als scriptblokken binnen een pagina of in afzonderlijke bestanden. Net als CSS is het raadzaam JavaScript te organiseren in afzonderlijke bestanden, zodat het zoveel mogelijk gescheiden blijft van de HTML die op afzonderlijke webpagina's of toepassingsweergaven wordt gevonden.

Wanneer u met JavaScript in uw webtoepassing werkt, zijn er een aantal taken die u doorgaans moet uitvoeren:

  • Een HTML-element selecteren en de waarde ervan ophalen en/of bijwerken.

  • Een query uitvoeren op een web-API voor gegevens.

  • Een opdracht verzenden naar een web-API (en reageren op een callback met het resultaat).

  • Validatie uitvoeren.

U kunt al deze taken alleen uitvoeren met JavaScript, maar er zijn veel bibliotheken om deze taken eenvoudiger te maken. Een van de eerste en meest succesvolle van deze bibliotheken is jQuery, dat nog steeds een populaire keuze blijft voor het vereenvoudigen van deze taken op webpagina's. Voor SPA's (Single Page Applications) biedt jQuery niet veel van de gewenste functies die Angular en React bieden.

Verouderde web-apps met jQuery

Hoewel jQuery door javaScript-frameworkstandaarden oud is, blijft jQuery een veelgebruikte bibliotheek voor het werken met HTML/CSS en het bouwen van toepassingen die AJAX-aanroepen naar web-API's maken. JQuery werkt echter op het niveau van het documentobjectmodel (DOM) van de browser en biedt standaard alleen een imperatief, in plaats van declaratief model.

Stel dat als de waarde van een tekstvak groter is dan 10, een element op de pagina zichtbaar moet worden gemaakt. In jQuery zou deze functionaliteit doorgaans worden geïmplementeerd door een gebeurtenishandler te schrijven met code die de waarde van het tekstvak zou inspecteren en de zichtbaarheid van het doelelement op basis van die waarde zou instellen. Dit proces is een imperatieve benadering op basis van code. Een ander framework kan in plaats daarvan gegevensbinding gebruiken om de zichtbaarheid van het element te binden aan de waarde van het tekstvak declaratief. Voor deze aanpak hoeft u geen code te schrijven, maar in plaats daarvan hoeft u alleen de elementen te decoreren die betrekking hebben op kenmerken van gegevensbinding. Naarmate gedrag aan de clientzijde complexer wordt, resulteren gegevensbindingen vaak in eenvoudigere oplossingen met minder code en voorwaardelijke complexiteit.

jQuery vs a SPA Framework

Factor Jquery Angular
Abstraheert de DOM Ja Ja
AJAX-ondersteuning Ja Ja
Declaratieve gegevensbinding Nee Ja
Routering in MVC-stijl Nee Ja
Sjablonen maken Nee Ja
Deep-Link-routering Nee Ja

De meeste functies die jQuery mist, kunnen intrinsiek worden toegevoegd met de toevoeging van andere bibliotheken. Een BEVEILIGD-WACHTWOORDVERIFICATIE-framework zoals Angular biedt deze functies echter op een meer geïntegreerde manier, omdat het vanaf het begin is ontworpen met al deze functies in gedachten. JQuery is ook een imperatieve bibliotheek, wat betekent dat u jQuery-functies moet aanroepen om iets te doen met jQuery. Veel van de werkzaamheden en functionaliteit die beveiligd-WACHTWOORDVERIFICATIE-frameworks bieden, kunnen declaratief worden uitgevoerd, waardoor er geen werkelijke code hoeft te worden geschreven.

Gegevensbinding is een goed voorbeeld van deze functionaliteit. In jQuery duurt het meestal slechts één regel code om de waarde van een DOM-element op te halen of om de waarde van een element in te stellen. U moet deze code echter schrijven wanneer u de waarde van het element moet wijzigen. Soms gebeurt dit in meerdere functies op een pagina. Een ander veelvoorkomend voorbeeld is zichtbaarheid van elementen. In jQuery zijn er mogelijk veel verschillende plaatsen waar u code schrijft om te bepalen of bepaalde elementen zichtbaar waren. In elk van deze gevallen hoeft bij het gebruik van gegevensbinding geen code te worden geschreven. U koppelt de waarde of zichtbaarheid van de betrokken elementen aan een viewmodel op de pagina en wijzigingen in dat viewmodel worden automatisch doorgevoerd in de afhankelijke elementen.

Angular-SPA's

Angular blijft een van de populairste JavaScript-frameworks ter wereld. Sinds Angular 2 heeft het team het framework helemaal opnieuw opgebouwd (met behulp van TypeScript) en de naam van de oorspronkelijke AngularJS hernoemd naar Angular. Nu enkele jaren oud, blijft het opnieuw ontworpen Angular een robuust framework voor het bouwen van toepassingen met één pagina.

Angular-toepassingen zijn gebouwd op basis van onderdelen. Onderdelen combineren HTML-sjablonen met speciale objecten en beheren een deel van de pagina. Hier ziet u een eenvoudig onderdeel uit de documenten van Angular:

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

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

export class AppComponent { name = 'Angular'; }

Onderdelen worden gedefinieerd met behulp van de @Component decoratorfunctie, die metagegevens over het onderdeel inneemt. De eigenschap selector identificeert de id van het element op de pagina waar dit onderdeel wordt weergegeven. De sjablooneigenschap is een eenvoudige HTML-sjabloon die een tijdelijke aanduiding bevat die overeenkomt met de naameigenschap van het onderdeel, die op de laatste regel is gedefinieerd.

Door te werken met onderdelen en sjablonen, in plaats van DOM-elementen, kunnen Angular-apps werken op een hoger abstractieniveau en met minder algemene code dan apps die zijn geschreven met alleen JavaScript (ook wel 'vanille JS' genoemd) of met jQuery. Angular legt ook een bepaalde volgorde op voor de wijze waarop u uw scriptbestanden aan de clientzijde ordent. Standaard maken Angular-apps gebruik van een gemeenschappelijke mapstructuur, met module- en onderdeelscriptbestanden in een app-map. Angular-scripts met betrekking tot het bouwen, implementeren en testen van de app bevinden zich meestal in een map op een hoger niveau.

U kunt Angular-apps ontwikkelen met behulp van een CLI. Aan de slag met lokaal ontwikkelen van Angular (ervan uitgaande dat u al git en npm hebt geïnstalleerd) bestaat uit het klonen van een opslagplaats vanuit GitHub en wordt uitgevoerd npm install en npm start. Verder wordt in Angular een eigen CLI geleverd, die projecten kan maken, bestanden kan toevoegen en kan helpen bij het testen, bundelen en implementeren van taken. Deze CLI-vriendelijkheid maakt Angular vooral compatibel met ASP.NET Core, die ook geweldige CLI-ondersteuning biedt.

Microsoft heeft een referentietoepassing, eShopOnContainers, ontwikkeld die een Angular SPA-implementatie bevat. Deze app bevat Angular-modules voor het beheren van het winkelwagentje van de online winkel, het laden en weergeven van items uit de catalogus en het afhandelen van het maken van bestellingen. U kunt de voorbeeldtoepassing bekijken en downloaden vanuit GitHub.

React

In tegenstelling tot Angular, dat een volledige implementatie van een Model-View-Controller-patroon biedt, maakt React zich alleen bezig met weergaven. Het is geen framework, alleen een bibliotheek, dus als u een beveiligd-WACHTWOORDVERIFICATIE wilt bouwen, moet u extra bibliotheken gebruiken. Er zijn een aantal bibliotheken die zijn ontworpen voor gebruik met React om uitgebreide toepassingen met één pagina te produceren.

Een van de belangrijkste functies van React is het gebruik van een virtuele DOM. De virtuele DOM biedt React verschillende voordelen, waaronder prestaties (de virtuele DOM kan optimaliseren welke onderdelen van de werkelijke DOM moeten worden bijgewerkt) en testbaarheid (u hoeft geen browser te hebben om React en de interacties met de virtuele DOM te testen).

React is ook ongebruikelijk in de werking van HTML. In plaats van een strikte scheiding tussen code en markeringen te hebben (met verwijzingen naar JavaScript die mogelijk in HTML-kenmerken worden weergegeven), voegt React HTML rechtstreeks toe binnen de JavaScript-code als JSX. JSX is een HTML-achtige syntaxis die kan worden gecompileerd tot pure JavaScript. Voorbeeld:

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

Als u JavaScript al kent, moet het leren van React eenvoudig zijn. Er is bijna niet zoveel leercurve of speciale syntaxis betrokken als bij Angular of andere populaire bibliotheken.

Omdat React geen volledig framework is, wilt u meestal dat andere bibliotheken zaken verwerken zoals routering, web-API-aanroepen en afhankelijkheidsbeheer. Het mooie is dat u voor elk van deze bibliotheken de beste bibliotheek kunt kiezen, maar het nadeel is dat u al deze beslissingen moet nemen en controleer of al uw gekozen bibliotheken goed samenwerken wanneer u klaar bent. Als u een goed uitgangspunt wilt, kunt u een starterkit zoals React Slingshot gebruiken, waarmee een set compatibele bibliotheken samen met React wordt verpakt.

Vue

Vanuit de introductiehandleiding is Vue een progressief kader voor het bouwen van gebruikersinterfaces. In tegenstelling tot andere monolithische frameworks is Vue vanaf de grond ontworpen om incrementeel te kunnen worden gebruikt. De kernbibliotheek is alleen gericht op de weergavelaag en is eenvoudig op te halen en te integreren met andere bibliotheken of bestaande projecten. Aan de andere kant is Vue perfect in staat om geavanceerde toepassingen met één pagina in te schakelen in combinatie met moderne hulpmiddelen en ondersteunende bibliotheken."

Om aan de slag te gaan met Vue, moet u het script in een HTML-bestand opnemen:

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

Nu het framework is toegevoegd, kunt u vervolgens declaratief gegevens weergeven aan de DOM met behulp van de eenvoudige tempatiesyntaxis van Vue:

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

en voegt u vervolgens het volgende script toe:

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

Dit is voldoende om op de pagina weer te geven "Hello Vue!" . Houd er echter rekening mee dat Vue niet alleen het bericht eenmaal aan de div weer geeft. Het ondersteunt gegevensbinding en dynamische updates, zodat als de waarde van message wijzigingen wordt gewijzigd, de waarde in de <div> waarde onmiddellijk wordt bijgewerkt om deze weer te geven.

Dit bekrast natuurlijk alleen het oppervlak van waar Vue in staat is. Het is de afgelopen jaren enorm populair geworden en heeft een grote gemeenschap. Er is een enorme en groeiende lijst met ondersteunende onderdelen en bibliotheken die met Vue werken om het ook uit te breiden. Als u gedrag aan de clientzijde wilt toevoegen aan uw webtoepassing of als u een volledige BEVEILIGD-WACHTWOORDVERIFICATIE wilt bouwen, is Vue het onderzoeken waard.

Blazor WebAssembly

In tegenstelling tot andere JavaScript-frameworks, Blazor WebAssembly is een spa-framework (single-page app) voor het bouwen van interactieve web-apps aan de clientzijde met .NET. Blazor WebAssembly maakt gebruik van open webstandaarden zonder invoegtoepassingen of code opnieuw in andere talen te compileren. Blazor WebAssembly werkt in alle moderne webbrowsers, met inbegrip van mobiele browsers.

Het uitvoeren van .NET-code in webbrowsers wordt mogelijk gemaakt door WebAssembly (afgekort wasm). WebAssembly is een compacte bytecode-indeling die is geoptimaliseerd voor snelle download- en maximale uitvoeringssnelheid. WebAssembly is een open webstandaard en wordt ondersteund in webbrowsers zonder invoegtoepassingen.

WebAssembly-code heeft toegang tot de volledige functionaliteit van de browser via JavaScript, ook wel JavaScript-interoperabiliteit genoemd, vaak ingekort tot JavaScript-interop of JS-interop. .NET-code uitgevoerd via WebAssembly in de browser wordt uitgevoerd in de JavaScript-sandbox van de browser met de beveiligingen die de sandbox biedt tegen schadelijke acties op de clientcomputer.

Zie Inleiding tot ASP.NET Core Blazorvoor meer informatie.

Een beveiligd-WACHTWOORDVERIFICATIE-framework kiezen

Houd rekening met de volgende overwegingen wanneer u overweegt welke optie het beste werkt om uw beveiligd-WACHTWOORDVERIFICATIE te ondersteunen:

  • Is uw team bekend met het framework en de bijbehorende afhankelijkheden (inclusief TypeScript in sommige gevallen)?

  • Hoe beoordeeld is het framework en ben je het eens met de standaard manier om dingen te doen?

  • Bevat de app (of een aanvullende bibliotheek) alle functies die uw app nodig heeft?

  • Is het goed gedocumenteerd?

  • Hoe actief is de community? Worden er nieuwe projecten mee gebouwd?

  • Hoe actief is het kernteam? Worden problemen opgelost en worden er regelmatig nieuwe versies verzonden?

Frameworks blijven zich ontwikkelen met onderbrekingssnelheid. Gebruik de bovenstaande overwegingen om het risico van het kiezen van een framework te beperken waarvan u later spijt krijgt. Als u bijzonder risico-averse bent, kunt u een framework overwegen dat commerciële ondersteuning biedt en/of wordt ontwikkeld door een grote onderneming.

Verwijzingen – Client Web Technologies

VorigeVolgende