Marko: Deklarativt UI med Streaming Server-Side Rendering

I nutidens hurtige digitale landskab er webstedsydelse altafgørende. Et langsomt indlæsende eller ikke-responderende websted kan føre til frustrerede brugere, højere afvisningsprocenter og i sidste ende tabt omsætning. Marko, et deklarativt UI-framework, adresserer disse bekymringer ved at tilbyde en unik tilgang til at bygge højtydende webapplikationer. Denne artikel vil dykke ned i kernefunktionerne i Marko, især dets streaming server-side rendering (SSR)-funktioner, og forklare, hvorfor det er et overbevisende valg for udviklere, der bygger websteder og webapplikationer til et globalt publikum.

Hvad er Marko?

Marko er et open-source UI-framework skabt af eBay og nu vedligeholdt af Marko-teamet. Det adskiller sig fra andre frameworks gennem sit fokus på ydeevne, enkelhed og skalerbarhed. I modsætning til nogle frameworks, der prioriterer klient-side rendering, understreger Marko server-side rendering, især streaming SSR. Det betyder, at serveren forhåndsrenderer HTML'en i din applikation og sender den til browseren i bidder (streams), efterhånden som den bliver tilgængelig, hvilket fører til en hurtigere First Contentful Paint (FCP) og forbedret brugeroplevelse.

Nøglefunktioner og fordele ved Marko

• Deklarativ syntaks: Marko bruger en deklarativ syntaks, der ligner HTML, hvilket gør det nemt at lære og bruge. Denne enkelhed reducerer indlæringskurven for udviklere og giver dem mulighed for at fokusere på at bygge funktioner i stedet for at kæmpe med komplekse framework-koncepter.
• Streaming Server-Side Rendering (SSR): Dette er uden tvivl Markos mest kraftfulde funktion. Streaming SSR giver serveren mulighed for at sende HTML til browseren trinvist, så snart den er klar, i stedet for at vente på, at hele siden er blevet renderet. Dette forbedrer markant den opfattede ydeevne af webstedet, især for brugere med langsommere internetforbindelser eller dem, der får adgang til webstedet fra geografisk fjerne steder. Forestil dig en bruger i landdistrikterne i Indien, der får adgang til et websted bygget med Markos streaming SSR. De ville begynde at se indholdet meget hurtigere sammenlignet med et websted, der udelukkende er afhængig af klient-side rendering, som skal downloade al JavaScript, før der vises noget.
• Automatisk kodesplitting: Marko opdeler automatisk din JavaScript-kode i mindre bidder og indlæser dem efter behov, hvilket minimerer den indledende downloadstørrelse og forbedrer sidens indlæsningstider. Dette er afgørende for mobile brugere og dem med begrænset båndbredde.
• Komponentbaseret arkitektur: Marko fremmer en komponentbaseret arkitektur, der giver dig mulighed for at opdele din applikation i genanvendelige, håndterbare stykker. Dette forbedrer kodeorganisation, vedligeholdelse og testbarhed.
• HTML-lignende syntaks med udvidelser: Markos syntaks udvider HTML med funktioner som komponenter, loops og betinget rendering, hvilket gør det intuitivt for udviklere, der er fortrolige med HTML. For eksempel kan du nemt oprette en genanvendelig knapkomponent og bruge den i hele din applikation.
• Optimeret til SEO: Server-side rendering gør dit websted lettere at kravle for søgemaskinebots, hvilket forbedrer din søgemaskinerangering. Dette er en betydelig fordel for virksomheder, der ønsker at tiltrække organisk trafik til deres websteder.
• Lille bundlestørrelse: Marko har en relativt lille runtime-størrelse sammenlignet med andre populære frameworks, hvilket yderligere bidrager til hurtigere indlæsningstider.
• Progressiv forbedring: Marko tilskynder til progressiv forbedring, hvilket giver dit websted mulighed for at fungere, selvom JavaScript er deaktiveret eller ikke kan indlæses. Dette sikrer en bedre brugeroplevelse for alle besøgende, uanset deres browserfunktioner.
• Indbyggede optimeringer: Marko inkluderer forskellige indbyggede optimeringer, såsom tempelatcaching og DOM-diffing, der yderligere forbedrer ydeevnen.
• Nem integration: Marko kan nemt integreres med eksisterende Node.js backends og andre front-end værktøjer.

Dybere dyk ned i streaming af server-side rendering

Lad os udforske fordelene ved streaming SSR mere detaljeret:

Forbedret First Contentful Paint (FCP)

FCP er en nøglemåling til måling af webstedsydelse. Det repræsenterer den tid, det tager for det første indhold (tekst, billede osv.) at vises på skærmen. Streaming SSR reducerer FCP markant, fordi browseren begynder at modtage og rendere HTML meget hurtigere end med klient-side rendering. I stedet for at vente på, at hele JavaScript-bundlet er downloadet og udført, kan browseren straks begynde at vise det indledende indhold på siden. Forestil dig et e-handelswebsted, der viser produktlister. Med streaming SSR ser brugeren produktbillederne og beskrivelserne næsten øjeblikkeligt, selv før de interaktive elementer er fuldt indlæst. Dette skaber en meget mere engagerende og responsiv brugeroplevelse.

Bedre brugeroplevelse

En hurtigere FCP fører til en bedre brugeroplevelse. Det er mindre sandsynligt, at brugere forlader et websted, hvis de ser indhold hurtigt. Streaming SSR giver en mere flydende og responsiv oplevelse, især på langsommere netværk eller enheder. Dette er især vigtigt for mobile brugere i udviklingslande, hvor internetforbindelsen kan være upålidelig. For eksempel kan et nyhedswebsted, der bruger streaming SSR, levere breaking news-overskrifter og -resuméer øjeblikkeligt, selv til brugere med begrænset båndbredde.

SEO-fordele

Søgemaskinebots er afhængige af HTML-indhold for at forstå strukturen og indholdet af et websted. Server-side rendering giver let tilgængelig HTML, hvilket gør det lettere for søgemaskiner at kravle og indeksere dit websted. Dette forbedrer din søgemaskinerangering og øger organisk trafik. Selvom Google er blevet bedre til at rendere JavaScript, giver SSR stadig en betydelig fordel, især for websteder med komplekse JavaScript-tunge applikationer. Et rejsebureauwebsted, der bruger SSR, får sine destinationssider korrekt indekseret, hvilket sikrer, at de vises i relevante søgeresultater.

Forbedret tilgængelighed

SSR bidrager til bedre tilgængelighed ved at levere HTML-indhold, der let kan parses af skærmlæsere og andre assisterende teknologier. Dette sikrer, at dit websted kan bruges af mennesker med handicap. Ved at rendere det indledende indhold på serveren giver du et solidt fundament for tilgængelighed, selv før JavaScript er fuldt indlæst. For eksempel vil et regeringswebsted, der bruger SSR, sikre, at alle borgere, uanset deres evner, kan få adgang til vigtige oplysninger.

Marko vs. andre frameworks

Marko vs. React

React er et udbredt bibliotek til opbygning af brugergrænseflader. Selvom React kan bruges med server-side rendering (ved hjælp af Next.js eller lignende frameworks), er det typisk afhængigt af klient-side rendering som standard. Markos streaming SSR giver en ydelsesmæssig fordel i forhold til Reacts traditionelle SSR-tilgang. Reacts økosystem er enormt og tilbyder mange biblioteker og værktøjer, men dette kan også føre til kompleksitet. Marko fokuserer på enkelhed og ydeevne og tilbyder en mere strømlinet udviklingsoplevelse. Overvej en kompleks dashboard-applikation. Mens React tilbyder en komponentbaseret tilgang, kan Markos streaming SSR give et boost i ydeevnen for den indledende sideindlæsning, især når der vises store datasæt.

Marko vs. Vue

Vue er et andet populært framework, der er kendt for sin brugervenlighed og progressive tilgang. Vue understøtter også server-side rendering (ved hjælp af Nuxt.js). Marko og Vue deler nogle ligheder med hensyn til enkelhed og komponentbaseret arkitektur. Markos streaming SSR tilbyder dog en tydelig ydelsesmæssig fordel, især for websteder med høj trafik eller komplekse UI'er. Vue kræver ofte mere manuel optimering til server-side rendering for at opnå optimal ydeevne. For eksempel kan et socialt medie-websted drage fordel af Markos streaming SSR til hurtigt at vise brugerfeeds og opdateringer.

Marko vs. Angular

Angular er et fuldt udbygget framework, der giver en omfattende løsning til opbygning af komplekse webapplikationer. Angular understøtter server-side rendering via Angular Universal. Angular kan dog være mere kompleks at lære og bruge sammenlignet med Marko og Vue. Markos enkelhed og fokus på ydeevne gør det til et overbevisende alternativ til projekter, hvor ydeevne er en topprioritet. En stor virksomhedsapplikation kan vælge Angular for sine robuste funktioner og skalerbarhed, men en mindre startup kan vælge Markos hastighed og nemme udvikling.

Opsummering: Mens React, Vue og Angular alle understøtter server-side rendering, giver Markos indbyggede streaming SSR en betydelig ydelsesmæssig fordel. Marko prioriterer ydeevne og enkelhed, hvilket gør det til et godt valg til projekter, hvor disse faktorer er kritiske.

Kom godt i gang med Marko

Det er relativt ligetil at komme i gang med Marko. Her er en grundlæggende oversigt:

1. Installer Node.js: Sørg for, at du har Node.js installeret på dit system.
2. Installer Marko CLI: Kør `npm install -g marko-cli` for at installere Marko-kommandolinjegrænsefladen globalt.
3. Opret et nyt Marko-projekt: Brug kommandoen `marko create my-project` til at oprette et nyt Marko-projekt.
4. Udforsk projektstrukturen: Projektet vil indeholde filer som `index.marko` (din hovedkomponent), `server.js` (dit server-side entry point) og `marko.json` (din projektkonfiguration).
5. Kør udviklingsserveren: Brug kommandoen `npm start` til at starte udviklingsserveren.
6. Begynd at bygge dine komponenter: Opret nye `.marko`-filer til dine komponenter, og importer dem til din hovedkomponent.

Eksempel på Marko-komponent (index.marko):

            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko Example</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple Marko component.</p>
</body>
</html>

            

              
                Copy
              
            
          

Eksempel på server-side rendering (server.js):

            
require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

            

              
                Copy
              
            
          

Dette er blot grundlæggende eksempler for at komme i gang. Marko tilbyder et væld af funktioner og muligheder for at bygge komplekse webapplikationer. Se den officielle Marko-dokumentation for mere detaljerede oplysninger.

Eksempler fra den virkelige verden på Marko i aktion

Mens eBay oprindeligt udviklede Marko, bruges det nu af en række virksomheder i forskellige brancher:

• eBay: eBay bruger Marko i vid udstrækning til sin kerneplatform, hvilket demonstrerer dens evne til at håndtere høj trafik og komplekse UI'er.
• Lazada (Sydøstasien): En stor e-handelsplatform i Sydøstasien (ejet af Alibaba) bruger Marko til at forbedre ydeevnen og levere en bedre shoppingoplevelse til sine brugere på tværs af forskellige lande med varierende internethastigheder.
• Talrige startups og virksomheder: Mange andre virksomheder adopterer Marko for dets ydelsesmæssige fordele og brugervenlighed.

Disse eksempler viser Markos alsidighed og egnethed til en bred vifte af webapplikationer.

Bedste praksis for brug af Marko

For at få mest muligt ud af Marko skal du overveje disse bedste praksis:

• Udnyt streaming SSR: Udnyt Markos streaming SSR-funktioner fuldt ud for at forbedre FCP og brugeroplevelse.
• Optimer dine komponenter: Optimer dine Marko-komponenter til ydeevne ved at minimere DOM-opdateringer og undgå unødvendige re-renderinger.
• Brug kodesplitting: Brug Markos automatiske kodesplitting-funktion til at reducere den indledende downloadstørrelse af din JavaScript-kode.
• Overvej tilgængelighed: Sørg for, at dit websted er tilgængeligt ved at følge retningslinjer for tilgængelighed og bruge semantisk HTML.
• Test din applikation grundigt: Test din applikation på forskellige enheder og browsere for at sikre en konsistent og pålidelig brugeroplevelse.

Konklusion: Marko – Et stærkt valg til moderne webudvikling

Marko er et stærkt og alsidigt UI-framework, der tilbyder en overbevisende løsning til opbygning af højtydende webapplikationer. Dens deklarative syntaks, streaming SSR-funktioner og fokus på enkelhed gør det til et fremragende valg for udviklere, der ønsker at forbedre webstedsydelsen, forbedre brugeroplevelsen og booste SEO. Ved at adoptere Marko kan udviklere skabe websteder og webapplikationer, der er hurtige, responsive og tilgængelige for brugere over hele verden. Uanset om du bygger et lille personligt websted eller en stor virksomhedsapplikation, er Marko værd at overveje som dit UI-framework efter eget valg. Dens vægt på at levere indhold hurtigt og effektivt gør det særligt relevant i nutidens globaliserede og ydelsesdrevne digitale landskab.

Yderligere ressourcer:

• Officiel Marko-websted
• Marko GitHub-lager
• Marko-dokumentation