M

MLOG

Svenska

Utforska Marko, ett deklarativt UI-ramverk designat för högpresterande webbapplikationer, med fokus på dess streaming server-side rendering-funktioner.

Marko: Deklarativt UI med Streaming Server-Side Rendering

I dagens snabba digitala landskap är webbplatsens prestanda avgörande. En långsam laddning eller en webbplats som inte svarar kan leda till frustrerade användare, högre avvisningsfrekvens och i slutändan förlorade intäkter. Marko, ett deklarativt UI-ramverk, tar itu med dessa problem genom att erbjuda en unik metod för att bygga högpresterande webbapplikationer. Denna artikel kommer att fördjupa sig i Markos kärnfunktioner, särskilt dess streaming server-side rendering (SSR)-funktioner, och förklara varför det är ett övertygande val för utvecklare som bygger webbplatser och webbapplikationer för en global publik.

Vad är Marko?

Marko är ett open source UI-ramverk skapat av eBay och underhålls nu av Marko-teamet. Det utmärker sig från andra ramverk genom sitt fokus på prestanda, enkelhet och skalbarhet. Till skillnad från vissa ramverk som prioriterar rendering på klientsidan, betonar Marko server-side rendering, särskilt streaming SSR. Detta innebär att servern förrenderar HTML för din applikation och skickar den till webbläsaren i bitar (strömmar) allt eftersom den blir tillgänglig, vilket leder till en snabbare First Contentful Paint (FCP) och en förbättrad användarupplevelse.

Nyckelfunktioner och fördelar med Marko

Dyk djupare in i Streaming Server-Side Rendering

Låt oss utforska fördelarna med streaming SSR mer detaljerat:

Förbättrad First Contentful Paint (FCP)

FCP är ett viktigt mått för att mäta webbplatsens prestanda. Det representerar den tid det tar för det första innehållet (text, bild, etc.) att visas på skärmen. Streaming SSR minskar FCP avsevärt eftersom webbläsaren börjar ta emot och rendera HTML mycket tidigare än med rendering på klientsidan. Istället för att vänta på att hela JavaScript-paketet ska laddas ner och köras kan webbläsaren omedelbart börja visa sidans initiala innehåll. Föreställ dig en e-handelswebbplats som visar produktlistor. Med streaming SSR ser användaren produktbilder och beskrivningar nästan omedelbart, även innan de interaktiva elementen är helt laddade. Detta skapar en mycket mer engagerande och responsiv användarupplevelse.

Bättre användarupplevelse

En snabbare FCP översätts till en bättre användarupplevelse. Användare är mindre benägna att överge en webbplats om de ser innehåll snabbt. Streaming SSR ger en mer flytande och responsiv upplevelse, särskilt på långsammare nätverk eller enheter. Detta är särskilt viktigt för mobilanvändare i utvecklingsländer där internetanslutningen kan vara opålitlig. Till exempel kan en nyhetswebbplats som använder streaming SSR leverera nyhetsrubriker och sammanfattningar direkt, även till användare med begränsad bandbredd.

SEO-fördelar

Sökmotorrobotar förlitar sig på HTML-innehåll för att förstå strukturen och innehållet på en webbplats. Server-side rendering tillhandahåller lättillgänglig HTML, vilket gör det enklare för sökmotorer att genomsöka och indexera din webbplats. Detta förbättrar din sökmotorrankning och ökar organisk trafik. Medan Google har blivit bättre på att rendera JavaScript, ger SSR fortfarande en betydande fördel, särskilt för webbplatser med komplexa JavaScript-tunga applikationer. En resebyrås webbplats som använder SSR kommer att ha sina destinationssidor korrekt indexerade, vilket säkerställer att de visas i relevanta sökresultat.

Förbättrad tillgänglighet

SSR bidrar till bättre tillgänglighet genom att tillhandahålla HTML-innehåll som enkelt kan parsas av skärmläsare och andra hjälpmedelstekniker. Detta säkerställer att din webbplats kan användas av personer med funktionsnedsättningar. Genom att rendera det initiala innehållet på servern, tillhandahåller du en solid grund för tillgänglighet, även innan JavaScript har laddats helt. Till exempel kommer en statlig webbplats som använder SSR att säkerställa att alla medborgare, oavsett deras förmågor, kan komma åt viktig information.

Marko jämfört med andra ramverk

Hur står sig Marko jämfört med andra populära UI-ramverk som React, Vue och Angular?

Marko vs. React

React är ett mycket använt bibliotek för att bygga användargränssnitt. Medan React kan användas med server-side rendering (med Next.js eller liknande ramverk), förlitar det sig vanligtvis på rendering på klientsidan som standard. Markos streaming SSR ger en prestandafördel jämfört med Reacts traditionella SSR-metod. Reacts ekosystem är enormt och erbjuder många bibliotek och verktyg, men detta kan också leda till komplexitet. Marko fokuserar på enkelhet och prestanda och erbjuder en mer strömlinjeformad utvecklingsupplevelse. Överväg ett komplext instrumentpanelsapplikation. Medan React erbjuder en komponentbaserad metod, kan Markos streaming SSR ge en prestandaförbättring för den initiala sidladdningen, särskilt när du visar stora datamängder.

Marko vs. Vue

Vue är ett annat populärt ramverk känt för sin användarvänlighet och progressiva metod. Vue stöder också server-side rendering (med Nuxt.js). Marko och Vue delar vissa likheter när det gäller enkelhet och komponentbaserad arkitektur. Markos streaming SSR erbjuder dock en distinkt prestandafördel, särskilt för webbplatser med hög trafik eller komplexa användargränssnitt. Vue kräver ofta mer manuell optimering för server-side rendering för att uppnå optimal prestanda. Till exempel kan en webbplats för sociala medier dra nytta av Markos streaming SSR för att snabbt visa användarflöden och uppdateringar.

Marko vs. Angular

Angular är ett komplett ramverk som tillhandahåller en omfattande lösning för att bygga komplexa webbapplikationer. Angular stöder server-side rendering genom Angular Universal. Angular kan dock vara mer komplext att lära sig och använda jämfört med Marko och Vue. Markos enkelhet och prestandafokus gör det till ett övertygande alternativ för projekt där prestanda är högsta prioritet. En stor företagsapplikation kan välja Angular för sina robusta funktioner och skalbarhet, men en mindre start-up kan välja Markos hastighet och enkelhet i utveckling.

Sammanfattningsvis: Medan React, Vue och Angular alla stöder server-side rendering, ger Markos inbyggda streaming SSR en betydande prestandafördel. Marko prioriterar prestanda och enkelhet, vilket gör det till ett utmärkt val för projekt där dessa faktorer är avgörande.

Komma igång med Marko

Att komma igång med Marko är relativt enkelt. Här är en grundläggande översikt:

  1. Installera Node.js: Se till att du har Node.js installerat på ditt system.
  2. Installera Marko CLI: Kör `npm install -g marko-cli` för att installera Marko-kommandoradsgränssnittet globalt.
  3. Skapa ett nytt Marko-projekt: Använd kommandot `marko create my-project` för att skapa ett nytt Marko-projekt.
  4. Utforska projektstrukturen: Projektet kommer att innehålla filer som `index.marko` (din huvudkomponent), `server.js` (din server-side entry point) och `marko.json` (din projektkonfiguration).
  5. Kör utvecklingsservern: Använd kommandot `npm start` för att starta utvecklingsservern.
  6. Börja bygga dina komponenter: Skapa nya `.marko`-filer för dina komponenter och importera dem till din huvudkomponent.

Exempel 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>

Exempel 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');
});

Detta är bara grundläggande exempel för att komma igång. Marko erbjuder en mängd funktioner och alternativ för att bygga komplexa webbapplikationer. Se den officiella Marko-dokumentationen för mer detaljerad information.

Exempel i verkligheten av Marko i aktion

Medan eBay ursprungligen utvecklade Marko, används det nu av en mängd olika företag i olika branscher:

Dessa exempel visar Markos mångsidighet och lämplighet för ett brett utbud av webbapplikationer.

Bästa praxis för att använda Marko

För att få ut det mesta av Marko, överväg dessa bästa praxis:

Slutsats: Marko – Ett kraftfullt val för modern webbutveckling

Marko är ett kraftfullt och mångsidigt UI-ramverk som erbjuder en övertygande lösning för att bygga högpresterande webbapplikationer. Dess deklarativa syntax, streaming SSR-funktioner och fokus på enkelhet gör det till ett utmärkt val för utvecklare som vill förbättra webbplatsens prestanda, förbättra användarupplevelsen och öka SEO. Genom att anta Marko kan utvecklare skapa webbplatser och webbapplikationer som är snabba, responsiva och tillgängliga för användare runt om i världen. Oavsett om du bygger en liten personlig webbplats eller en stor företagsapplikation är Marko värt att överväga som ditt UI-ramverk. Dess betoning på att leverera innehåll snabbt och effektivt gör det särskilt relevant i dagens globaliserade och prestandadrivna digitala landskap.

Ytterligare resurser: