Deutsch
Francais
Nederlands
Svenska
Norsk
Dansk
Suomi
Espanol
Italiano
Portugues
Magyar
Polski
Cestina
Русский
Implementeringen af et fleksibelt grid-layout, der tilpasser sig små skærme, kan være kompleks og kræve skræddersyet tematisering. Alligevel kan denne kompleksitet håndteres elegant ved at kombinere medieforespørgsler (media queries) med inline brugerdefinerede CSS-egenskaber, hvilket resulterer i en både kompakt og letforståelig løsning. Ved at introducere CSS-klasser som .video og .text til kursusvideoer og tilhørende tekster kan vi style disse elementer ved hjælp af CSS Grid og brugerdefinerede egenskaber, der refererer til gridens kolonner.
Eksempelvis kan .video-klassen få tildelt en dynamisk antal kolonner ved hjælp af variablen --videosize, mens .text-klassen tildeles --textsize. Disse variabler styres på containereniveau, hvor grid-systemet defineres som en 12-kolonne struktur med jævn fordeling (repeat(12, 1fr)). Denne opsætning sikrer, at både video og tekst placeres præcist og fleksibelt inden for grid’en.
Ved at integrere to variable, videosize og textsize, der tilsammen summerer til det samlede antal kolonner (12 i dette tilfælde), opnås en balanceret fordeling mellem video og tekst. For at undgå for store eller for små områder, er variablerne begrænset til at ligge inden for praktiske intervaller (video: 3-7 kolonner, tekst: maks. 5 kolonner). Denne styring kan nemt realiseres gennem en temavælger med skyderkontroller (sliders), der dynamisk opdaterer værdierne og dermed layoutet.
Et særligt aspekt er, hvordan opdateringer i layoutet håndteres ved ændring af disse variable. Ved hver justering kan applikationen for eksempel genindlæses for at sikre, at layoutet re-renderes korrekt – dette er en simpel, men effektiv midlertidig løsning, især når eksterne komponenter som YouTube Player med egne layoutsystemer er involveret.
For at understøtte mindre skærme er det afgørende at kombinere brugerdefinerede CSS-egenskaber med medieforespørgsler uden at komplicere Angular-koden. På denne måde kan styling ændres fuldstændigt via CSS alene, hvor eksempelvis .video og .text klasserne fylder hele grid-bredden (span 12) ved skærmbredder under 768px. Denne adskillelse af design og applikationslogik muliggør, at designere kan arbejde uafhængigt af Angular-kode og samtidig give mulighed for dynamisk integration med virksomheders design tokens.
Det understreger også vigtigheden af at tænke i komponenter med klare ansvarsområder: først identificeres brugerens behov (f.eks. at vise tilpassede videolister med tilhørende tekst og lokationsdata), og herefter vælges passende komponenter til at opfylde disse krav. Angular Academy-eksemplet viser, hvordan man med moderne Angular-komponenter og services kan bygge fleksible, dynamiske layouts, der samtidig er nemme at vedligeholde og tilpasse.
Det er væsentligt at forstå, at CSS Custom Properties, når de anvendes strategisk sammen med CSS Grid og media queries, tilbyder et kraftfuldt værktøj til at skabe responsive, tilpassede brugerflader uden at komplicere applikationslogikken. Denne tilgang gør det også muligt at integrere eksterne systemer og designværktøjer mere sømløst, hvilket er afgørende i professionelle udviklingsmiljøer, hvor design og udvikling ofte er adskilte processer.
Endvidere bør man være opmærksom på, at dynamiske layouts ikke kun handler om æstetik, men også om brugeroplevelse og tilgængelighed. Ved at sikre, at elementer reorganiseres og skaleres korrekt på forskellige enheder, forbedres både tilgængeligheden og interaktionen, hvilket er afgørende for moderne webapplikationer.
Hvordan forbedre Angular-kompatibilitetskompilatoren i din CI/CD-arbejdsgang?
Når vi arbejder med Angular-applikationer, specielt i et monorepo-arbejdsområde, er der flere optimeringsteknikker, vi kan benytte os af for at forbedre vores CI/CD-arbejdsgang og reducere den tid, der bruges på at bygge og teste applikationer. En af de mest anvendte værktøjer i denne proces er Angular-kompatibilitetskompilatoren (ngcc), som hjælper med at konvertere biblioteker, der er bygget med View Engine-kompilatoren, til Ivy-formatet, som Angular i dag bruger.
I et monorepo-arbejdsområde, hvor flere Angular-applikationer kan dele biblioteker som Angular CDK eller Angular Material, er det ikke nødvendigvis alle applikationer, der bruger disse biblioteker eller alle deres underpakker. Derfor kan vi optimere vores bygge- og testjobs ved kun at kompilere de nødvendige dele af biblioteket i stedet for hele biblioteket.
Tag for eksempel et monorepo med to Angular-applikationer: en der bruger Bootstrap UI-komponentbiblioteket og en der bruger Angular Material. Når vi kører et test- eller byggejob for applikationen, der bruger Bootstrap, kan vi sikre, at vi kun kompilere de nødvendige komponenter af Angular Material ved at bruge kommandoen:
Her er --tsconfig-muligheden sat til TypeScript-konfigurationsfilen for den specifikke applikation, og --use-program-dependencies betyder, at kun de afhængigheder, der faktisk bruges af applikationen, vil blive behandlet. Dette reducerer den tid, der bruges på at kompilere Angular Material, som ikke er relevant for applikationen.
Tilsvarende kan vi for applikationen, der bruger Angular Material, bruge en lignende kommando:
Her ændrer vi kun stien til TypeScript-konfigurationsfilen, hvilket sikrer, at kun de relevante Angular Material-underpakker bliver kompilere.
Ved at benytte denne optimering sparer vi væsentlig beregningstid, da CI-serveren kun behøver at kompilere de nødvendige pakker og ikke hele Angular Material-biblioteket, hvilket kan være en stor tidsbesparelse i et komplekst monorepo-arbejdsområde.
Angular-kompatibilitetskompilatoren er et væsentligt værktøj i overgangsfasen fra View Engine til Ivy, og det giver os mulighed for at håndtere ældre Angular-biblioteker, der ikke er kompatible med Ivy, samtidig med at vi kan få fordelene ved Ivy-kompilatoren. I de nyeste versioner af Angular understøttes delvist Ivy-kompilerede Angular-biblioteker via Angular Linker, som på sigt vil erstatte Angular-kompatibilitetskompilatoren fuldstændigt.
Med dette kendskab til de mest almindelige optimeringsteknikker i forbindelse med CI/CD-arbejdsgange for Angular-applikationer, kan vi bedre udnytte Angular-kompatibilitetskompilatoren. Den reducerer ikke kun kompileringstiden, men gør det også muligt at arbejde mere effektivt med forskellige typer biblioteker i et monorepo-arbejdsområde.
Der er dog flere aspekter, som bør overvejes, når man arbejder med CI/CD og Angular-kompatibilitetskompilatoren. Først og fremmest bør man altid sikre sig, at alle afhængigheder er opdateret og korrekt konfigureret i forhold til den version af Angular, der anvendes. Desuden er det vigtigt at være opmærksom på, hvordan Angular Material og andre biblioteker opdateres, da ændringer i disse kan påvirke kompileringen. Ved at følge de anbefalede migrations- og optimeringsteknikker kan man sikre, at applikationen kører effektivt og uden unødvendige fejl i CI/CD-pipelines.
En vigtig overvejelse er også, at selvom vi kan reducere kompileringstiden for specifikke applikationer, betyder det ikke nødvendigvis, at alle optimeringsteknikker vil være anvendelige i alle CI/CD-miljøer. Det kan være nødvendigt at tilpasse opsætningen af CI/CD-pipelines for at få det bedste resultat afhængigt af applikationens kompleksitet og de specifikke biblioteker, der anvendes.