Gyakori ügyféloldali webtechnológiák

  • Cikk

Tipp.

Ez a tartalom egy részlet az eBook, Architect Modern Web Applications with ASP.NET Core és Az Azure, elérhető a .NET Docs vagy egy ingyenesen letölthető PDF, amely offline olvasható.

PDF letöltése

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

"A webhelyeknek belülről és kívülről is jól kell kinéznie." - Paul Cookson

ASP.NET Core-alkalmazások webalkalmazások, és általában ügyféloldali webtechnológiákra, például HTML-, CSS- és JavaScript-technológiákra támaszkodnak. Ha elválasztja a lap tartalmát (a HTML-t) az elrendezésétől és stílusától (a CSS-től), valamint annak viselkedését (JavaScripten keresztül), az összetett webalkalmazások kihasználhatják az Aggodalmak elkülönítése alapelvet. Az alkalmazás szerkezetének, kialakításának vagy viselkedésének jövőbeni módosítása könnyebben elvégezhető, ha ezek az aggodalmak nem fonódnak össze.

Míg a HTML és a CSS viszonylag stabil, a JavaScript az alkalmazás-keretrendszerek és a segédprogramok fejlesztői által a webes alkalmazások fejlesztésén dolgozik, a szűk keresztmetszeti sebességgel fejlődik. Ez a fejezet a JavaScript webfejlesztők általi használatának néhány módját ismerteti, és magas szintű áttekintést nyújt az Angular és a React ügyféloldali kódtárakról.

Feljegyzés

Blazor A JavaScript-keretrendszerek alternatívát kínál a gazdag, interaktív ügyféloldali felhasználói felületek létrehozásához.

HTML

A HTML a weblapok és webalkalmazások létrehozásához használt szabványos korrektúranyelv. Elemei az oldalak építőelemeit alkotják, amelyek formázott szöveget, képeket, űrlapbemeneteket és egyéb struktúrákat jelölnek. Amikor egy böngésző kérést küld egy URL-címre, akár egy lap, akár egy alkalmazás lekérése, a visszaadott első dolog egy HTML-dokumentum. Ez a HTML-dokumentum hivatkozhat vagy tartalmazhat további információkat a megjelenéséről és elrendezéséről CSS formájában, illetve JavaScript formájában történő viselkedéséről.

CSS

A CSS (kaszkádolt stíluslapok) a HTML-elemek megjelenését és elrendezését vezérli. A CSS-stílusok közvetlenül alkalmazhatók egy HTML-elemre, amely külön definiálva van ugyanazon az oldalon, vagy egy külön fájlban definiálható, és az oldal hivatkozik rá. A stílusok kaszkádoltak az adott HTML-elem kiválasztásához használt stílusok alapján. Előfordulhat például, hogy egy stílus egy teljes dokumentumra vonatkozik, de egy adott elemre alkalmazott stílus felülírja. Hasonlóképpen, az elemspecifikus stílusokat felülírja az elemre alkalmazott CSS-osztályra alkalmazott stílus, amelyet felül kell bírálni az elem egy adott példányát megcélzó stílussal (annak azonosítójával). 6–1. ábra

CSS Specificity rules

6-1. ábra. CSS-specifikus szabályok sorrendben.

A legjobb, ha a stílusokat a saját stíluslapfájljaikban tartja, és a kijelölésalapú kaszkádolás használatával konzisztens és újrafelhasználható stílusokat implementál az alkalmazásban. Kerülni kell a stílusszabályok HTML-ben való elhelyezését, és a stílusok alkalmazása adott elemekre (nem egész elemosztályokra, vagy olyan elemekre, amelyekre egy adott CSS-osztály vonatkozott) kivételnek kell lennie, nem pedig a szabálynak.

CSS-előfeldolgozók

A CSS-stíluslapok nem támogatják a feltételes logikát, a változókat és más programozási nyelvi funkciókat. Így a nagy stíluslapok gyakran elég sok ismétlést tartalmaznak, mivel ugyanazt a színt, betűtípust vagy egyéb beállítást alkalmazzák a HTML-elemek és a CSS-osztályok számos különböző változatára. A CSS-előfeldolgozók a változók és a logika támogatásának hozzáadásával segíthetnek a stíluslapoknak a DRY elv követésében.

A legnépszerűbb CSS-előfeldolgozók a Sass és a LESS. Mindkettő kiterjeszti a CSS-t, és visszamenőleg kompatibilis vele, ami azt jelenti, hogy egy egyszerű CSS-fájl érvényes Sass vagy LESS fájl. A Sass Ruby-alapú, a LESS pedig JavaScript-alapú, és mindkettő általában a helyi fejlesztési folyamat részeként fut. Mindkettő rendelkezik parancssori eszközökkel, valamint beépített támogatással a Visual Studióban gulp- vagy Grunt-feladatok futtatásához.

JavaScript

A JavaScript egy dinamikus, értelmezett programozási nyelv, amelyet az ECMAScript nyelvi specifikációja szabványosított. Ez a webes programozási nyelv. A CSS-hez hasonlóan a JavaScript is definiálható attribútumként a HTML-elemeken belül, szkriptblokkként egy lapon vagy külön fájlokban. A CSS-hez hasonlóan ajánlott a JavaScriptet külön fájlokba rendezni, és a lehető legnagyobb mértékben elkülöníteni az egyes weblapokon vagy alkalmazásnézeteken található HTML-fájloktól.

A JavaScript webalkalmazásban való használatakor gyakran el kell végeznie néhány feladatot:

  • HTML-elem kiválasztása és az érték lekérése és/vagy frissítése.

  • Webes API lekérdezése adatokhoz.

  • Parancs küldése egy webes API-nak (és válasz egy visszahívásra az eredményével).

  • Érvényesítés végrehajtása.

Ezeket a feladatokat csak JavaScript használatával hajthatja végre, de számos kódtár létezik, amelyek megkönnyítik ezeket a feladatokat. Az egyik első és legsikeresebb ilyen kódtár a jQuery, amely továbbra is népszerű választás ezeknek a feladatoknak a weboldalakon történő egyszerűsítésére. Az egyoldalas alkalmazások (SLA-k) esetében a jQuery nem nyújt sok olyan funkciót, amelyet az Angular és a React kínál.

Örökölt webalkalmazások jQueryvel

Bár a JavaScript-keretrendszer szabványai régiek, a jQuery továbbra is gyakran használt kódtár a HTML/CSS használatához és az AJAX-hívásokat webes API-k felé irányuló alkalmazások létrehozásához. A jQuery azonban a böngésző dokumentumobjektum-modelljének (DOM) szintjén működik, és alapértelmezés szerint csak imperatív, nem deklaratív modellt kínál.

Tegyük fel például, hogy ha egy szövegdoboz értéke meghaladja a 10-et, akkor a lapon láthatóvá kell tenni egy elemet. A jQueryben ezt a funkciót általában egy olyan kóddal rendelkező eseménykezelő írásával implementálják, amely megvizsgálja a szövegdoboz értékét, és az érték alapján beállítja a célelem láthatóságát. Ez a folyamat egy imperatív, kódalapú megközelítés. Egy másik keretrendszer ehelyett adatkötést használhat az elem láthatóságának deklaratív kötésére a szövegdoboz értékéhez. Ehhez a megközelítéshez nem szükséges kód írása, hanem csak az adatkötési attribútumokkal kapcsolatos elemek dekorálása szükséges. Mivel az ügyféloldali viselkedések egyre összetettebbek, az adatkötési megközelítések gyakran egyszerűbb megoldásokat eredményeznek kevesebb kóddal és feltételes összetettséggel.

jQuery és SPA-keretrendszer

Tényező Jquery Angular
A DOM absztrakciója Igen Igen
AJAX-támogatás Igen Igen
Deklaratív adatkötés Nem Igen
MVC-stílusú útválasztás Nem Igen
Sablonosítás Nem Igen
Mélyhivatkozásos útválasztás Nem Igen

A jQuery funkcióinak többsége belsőleg hiányzik, más kódtárak hozzáadásával is hozzáadható. Az Angularhoz hasonló SPA-keretrendszer azonban integráltabb módon biztosítja ezeket a funkciókat, mivel a kezdetektől fogva mindet szem előtt tartva tervezték. Emellett a jQuery egy imperatív kódtár, ami azt jelenti, hogy jQuery függvényeket kell meghívnia ahhoz, hogy bármit elvégezhessen a jQueryvel. Az SPA-keretrendszerek által biztosított munka és funkciók nagy része deklaratív módon elvégezhető, és nem igényel tényleges kódot.

Az adatkötés kiváló példa erre a funkcióra. A jQueryben általában csak egy sornyi kód szükséges egy DOM-elem értékének lekéréséhez vagy egy elem értékének beállításához. Ezt a kódot azonban bármikor meg kell írnia, ha módosítania kell az elem értékét, és ez néha több függvényben is előfordul egy oldalon. Egy másik gyakori példa az elemek láthatósága. A jQueryben számos különböző helyen írna kódot annak ellenőrzésére, hogy bizonyos elemek láthatók-e. Minden ilyen esetben adatkötés használatakor nem kell kódot írni. A szóban forgó elemek értékét vagy láthatóságát egyszerűen egy nézetmodellhez kötné a lapon, és az adott nézetmodell módosításai automatikusan megjelennek a kötött elemekben.

Szögletes SPA-k

Az Angular továbbra is a világ egyik legnépszerűbb JavaScript-keretrendszere. Az Angular 2 óta a csapat újraépítette a keretrendszert az alapoktól kezdve (TypeScript használatával), és az eredeti AngularJS-névről Angular-ra módosították. Több éves, az újratervezett Angular továbbra is robusztus keretrendszer az egyoldalas alkalmazások létrehozásához.

Az Angular-alkalmazások összetevőkből épülnek fel. Az összetevők a HTML-sablonokat speciális objektumokkal kombinálják, és a lap egy részét vezérli. Az Angular dokumentációjának egy egyszerű összetevője itt látható:

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

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

export class AppComponent { name = 'Angular'; }

Az összetevők a @Component dekorátor függvény használatával vannak definiálva, amely metaadatokat vesz fel az összetevőről. A választó tulajdonság azonosítja annak az elemnek az azonosítóját azon a lapon, amelyen az összetevő megjelenik. A sablontulajdonság egy egyszerű HTML-sablon, amely tartalmaz egy helyőrzőt, amely megfelel az összetevő utolsó sorban definiált névtulajdonságának.

A DOM-elemek helyett az összetevők és sablonok használatával az Angular-alkalmazások az absztrakció magasabb szintjén és kevésbé átfogó kóddal működhetnek, mint a csak JavaScript (más néven "vanilla JS") vagy jQuery használatával írt alkalmazások. Az Angular az ügyféloldali szkriptfájlok rendszerezésére is előír némi sorrendet. Az Angular-alkalmazások konvenció szerint egy közös mappastruktúrát használnak, amely egy alkalmazásmappában található modul- és összetevőszkriptfájlokat tartalmaz. Az alkalmazás létrehozásával, üzembe helyezésével és tesztelésével foglalkozó angular szkriptek általában egy magasabb szintű mappában találhatók.

Az Angular-alkalmazásokat cli-vel fejlesztheti. Az Angular helyi fejlesztésének első lépései (feltéve, hogy már telepítve van a Git és az npm) a GitHubról származó adattár klónozásából és futtatásából és npm startfuttatásából npm install áll. Ezen túl az Angular saját cli-t is tartalmaz, amely projekteket hozhat létre, fájlokat adhat hozzá, és segítséget nyújthat a tesztelési, csomagküldő és üzembehelyezési feladatokhoz. Ez a PARANCSSOR-barátság különösen kompatibilissé teszi az Angulart a ASP.NET Core-nal, amely szintén kiváló CLI-támogatást nyújt.

A Microsoft kifejlesztett egy eShopOnContainers nevű referenciaalkalmazást, amely egy Angular SPA-implementációt is tartalmaz. Ez az alkalmazás Angular-modulokat tartalmaz az online áruház bevásárlókosárjának kezeléséhez, a katalógus elemeinek betöltéséhez és megjelenítéséhez, valamint a rendelések létrehozásának kezeléséhez. A mintaalkalmazást megtekintheti és letöltheti a GitHubról.

React

Az Angulartól eltérően, amely a Model-View-Controller minta teljes implementációját kínálja, a React csak a nézetekkel foglalkozik. Ez nem egy keretrendszer, csak egy könyvtár, ezért a spa létrehozásához további kódtárakat kell használnia. Számos kódtárat úgy terveztek, hogy a Reacttel gazdag egyoldalas alkalmazásokat készítsenek.

A React egyik legfontosabb funkciója a virtuális DOM használata. A virtuális DOM számos előnnyel rendelkezik a React számára, beleértve a teljesítményt (a virtuális DOM képes optimalizálni a tényleges DOM mely részeit frissíteni) és a tesztelhetőséget (nincs szükség böngészőre a React teszteléséhez és a virtuális DOM-tal való interakcióihoz).

A React a HTML-lel való működésben is szokatlan. A kód és a korrektúra szigorú elkülönítése helyett (a JavaScriptre mutató hivatkozások talán HTML-attribútumokban jelennek meg), a React közvetlenül a JavaScript-kódban JSX-ként adja hozzá a HTML-t. A JSX html-szerű szintaxis, amely le tud fordítani tiszta JavaScriptre. Példa:

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

Ha már ismeri a JavaScriptet, a React tanulásának egyszerűnek kell lennie. Közel sem annyi tanulási görbe vagy speciális szintaxis van benne, mint az Angular vagy más népszerű kódtárak esetén.

Mivel a React nem teljes keretrendszer, általában más kódtáraknak kell kezelnie az útválasztást, a webes API-hívásokat és a függőségkezelést. Az a jó, hogy mindegyikhez kiválaszthatja a legjobb könyvtárat, de a hátránya az, hogy ezeket a döntéseket meg kell hoznia, és ellenőriznie kell, hogy az összes kiválasztott kódtár jól működjön együtt, amikor elkészült. Ha jó kiindulópontot szeretne, használhat olyan kezdőkészletet, mint a React Slingshot, amely előre csomagolja a kompatibilis kódtárakat a Reacttel együtt.

Vue

Az első lépések útmutatójából:"A Vue egy progresszív keretrendszer a felhasználói felületek létrehozásához. A többi monolitikus keretrendszertől eltérően a Vue az alapoktól kezdve növekményesen alkalmazható. Az alapvető kódtár csak a nézetrétegre összpontosít, és könnyen átvehető és integrálható más kódtárakkal vagy meglévő projektekkel. Másrészt a Vue tökéletesen képes kifinomult egyoldalas alkalmazások bekapcsolására, ha modern eszközökkel és támogató kódtárakkal kombinálva használják."

A Vue használatának első lépéseihez egyszerűen be kell ágyazni a szkriptet egy HTML-fájlba:

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

A keretrendszer hozzáadása után deklaratív módon renderelheti az adatokat a DOM-ba a Vue egyszerű templating szintaxisával:

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

majd adja hozzá a következő szkriptet:

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

Ez elegendő az oldalon való megjelenítéshez "Hello Vue!" . Vegye figyelembe azonban, hogy a Vue nem csak egyszer jeleníti meg az üzenetet a div számára. Támogatja az adatkötést és a dinamikus frissítéseket, így ha a változások értéke message megváltozik, a benne lévő <div> érték azonnal frissül, hogy tükrözze azt.

Ez persze csak annak a felületnek a felszínét karcolja meg, amire a Vue képes. Az elmúlt években nagy népszerűségre tett szert, és nagy közösséggel rendelkezik. A Vue-val együtt működő támogató összetevők és kódtárak hatalmas és egyre bővülő listája is megtalálható. Ha ügyféloldali viselkedést szeretne hozzáadni a webalkalmazáshoz, vagy fontolgatja a teljes SPA kiépítését, a Vue-t érdemes megvizsgálni.

Blazor WebAssembly

A többi JavaScript-keretrendszertől Blazor WebAssembly eltérően egy egyoldalas alkalmazás-keretrendszer (SPA) az interaktív ügyféloldali webalkalmazások .NET-tel való létrehozásához. Blazor A WebAssembly nyílt webes szabványokat használ beépülő modulok nélkül, vagy a kód más nyelvekre való újrafordítása nélkül. Blazor A WebAssembly minden modern böngészőben működik, beleértve a mobilböngészőket is.

A .NET-kód webböngészőkben való futtatását a WebAssembly (rövidítve wasm) teszi lehetővé. A WebAssembly egy kompakt bájtkódformátum, amely a gyors letöltéshez és a maximális végrehajtási sebességhez van optimalizálva. A WebAssembly egy nyílt webes szabvány, és beépülő modulok nélküli webböngészőkben is támogatott.

A WebAssembly-kód a Böngésző teljes funkcionalitását elérheti JavaScripten keresztül, úgynevezett JavaScript-együttműködési funkcióval, amelyet gyakran JavaScript-interopra vagy JS-interopra rövidítünk. A WebAssembly által a böngészőben végrehajtott .NET-kód a böngésző JavaScript-tesztkörnyezetében fut, a védőfal által biztosított védelemmel az ügyfélszámítógépen végzett rosszindulatú műveletek ellen.

További információ: Bevezetés a ASP.NET Core Blazorhasználatába.

SPA-keretrendszer kiválasztása

Ha figyelembe veszi, hogy melyik lehetőség fog a legjobban támogatni a SPA-t, vegye figyelembe az alábbi szempontokat:

  • A csapata ismeri a keretrendszert és annak függőségeit (bizonyos esetekben a TypeScriptet is beleértve)?

  • Mennyire véleményezett a keretrendszer, és egyetért-e a dolgok alapértelmezett módjával?

  • Tartalmazza az alkalmazás által igényelt összes funkciót (vagy társtárat)?

  • Jól dokumentált?

  • Mennyire aktív a közössége? Új projektek épülnek vele?

  • Mennyire aktív az alapcsapata? Megoldották a problémákat, és rendszeresen kiszállítják az új verziókat?

A keretrendszerek továbbra is töredéksebességgel fejlődnek. Használja a fent felsorolt szempontokat annak a kockázatnak a mérsékléséhez, hogy olyan keretrendszert válasszon, amelytől később megbánja, hogy függő. Ha különösen kockázatos, fontolja meg egy olyan keretrendszert, amely kereskedelmi támogatást nyújt, és/vagy egy nagyvállalat fejleszti.

Hivatkozások – Ügyfél-webtechnológiák

Előzőkövetkező