React useOptimistic Konfliktløsning: Mestre logikken for sammenslåing av optimistiske oppdateringer

I den dynamiske verdenen av webutvikling er det avgjørende å tilby en sømløs og responsiv brukeropplevelse. En kraftig teknikk som gir utviklere mulighet til å oppnå dette, er optimistiske oppdateringer. Denne tilnærmingen lar brukergrensesnittet (UI) oppdateres umiddelbart, selv før serveren bekrefter endringene. Dette skaper en illusjon av umiddelbar tilbakemelding, noe som gjør at applikasjonen føles raskere og mer flytende. Imidlertid krever naturen til optimistiske oppdateringer en robust strategi for å håndtere potensielle konflikter, og det er her sammenslåingslogikk kommer inn i bildet. Dette blogginnlegget dykker dypt ned i optimistiske oppdateringer, konfliktløsning og bruken av Reacts `useOptimistic`-hook, og gir en omfattende guide for utviklere over hele verden.

Forstå optimistiske oppdateringer

Optimistiske oppdateringer betyr i bunn og grunn at brukergrensesnittet oppdateres før en bekreftelse mottas fra serveren. Tenk deg en bruker som klikker på en 'like'-knapp på et innlegg i sosiale medier. Med en optimistisk oppdatering reflekterer brukergrensesnittet umiddelbart 'liken' og viser det økte antallet likes, uten å vente på svar fra serveren. Dette forbedrer brukeropplevelsen betydelig ved å eliminere oppfattet ventetid.

Fordelene er klare:

• Forbedret brukeropplevelse: Brukere oppfatter applikasjonen som raskere og mer responsiv.
• Redusert oppfattet ventetid: Den umiddelbare tilbakemeldingen maskerer nettverksforsinkelser.
• Økt engasjement: Raskere interaksjoner oppmuntrer til brukerengasjement.

Baksiden av medaljen er imidlertid potensialet for konflikter. Hvis serverens tilstand avviker fra den optimistiske UI-oppdateringen, for eksempel hvis en annen bruker også liker det samme innlegget samtidig, oppstår en konflikt. Å håndtere disse konfliktene krever nøye vurdering av sammenslåingslogikk.

Problemet med konflikter

Konflikter i optimistiske oppdateringer oppstår når serverens tilstand avviker fra klientens optimistiske antakelser. Dette er spesielt utbredt i samarbeidsapplikasjoner eller miljøer med samtidige brukerhandlinger. Tenk deg et scenario med to brukere, Bruker A og Bruker B, som begge prøver å oppdatere de samme dataene samtidig.

Eksempelscenario:

• Starttilstand: En delt teller er initialisert til 0.
• Bruker A's handling: Bruker A klikker på 'Øk'-knappen, utløser en optimistisk oppdatering (telleren viser nå 1) og sender en forespørsel til serveren.
• Bruker B's handling: Samtidig klikker også Bruker B på 'Øk'-knappen, utløser sin optimistiske oppdatering (telleren viser nå 1) og sender en forespørsel til serveren.
• Serverbehandling: Serveren mottar begge økningsforespørslene.
• Konflikt: Uten riktig håndtering kan serverens endelige tilstand feilaktig reflektere bare én økning (teller på 1), i stedet for de forventede to (teller på 2).

Dette understreker behovet for strategier for å avstemme avvik mellom klientens optimistiske tilstand og serverens faktiske tilstand.

Strategier for konfliktløsning

Flere teknikker kan brukes for å håndtere konflikter og sikre datakonsistens:

1. Konfliktdeteksjon og -løsning på serversiden

Serveren spiller en kritisk rolle i konfliktdeteksjon og -løsning. Vanlige tilnærminger inkluderer:

• Optimistisk låsing: Serveren sjekker om dataene har blitt endret siden klienten hentet dem. Hvis de har det, blir oppdateringen avvist eller slått sammen, vanligvis med et versjonsnummer eller tidsstempel.
• Pessimistisk låsing: Serveren låser dataene under en oppdatering, og forhindrer samtidige endringer. Dette forenkler konfliktløsning, men kan føre til redusert samtidighet og tregere ytelse.
• Last-Write-Wins: Den siste oppdateringen som mottas av serveren anses som autoritativ, noe som potensielt kan føre til tap av data hvis det ikke implementeres nøye.
• Sammenslåingsstrategier: Mer sofistikerte tilnærminger kan innebære å slå sammen klientoppdateringer på serveren, avhengig av dataenes art og den spesifikke konflikten. For eksempel, for en økningsoperasjon, kan serveren ganske enkelt legge til klientens endring i den nåværende verdien, uavhengig av tilstanden.

2. Konfliktløsning på klientsiden med sammenslåingslogikk

Sammenslåingslogikk på klientsiden er avgjørende for å sikre en jevn brukeropplevelse og gi umiddelbar tilbakemelding. Den forutser konflikter og prøver å løse dem på en elegant måte. Denne tilnærmingen innebærer å slå sammen klientens optimistiske oppdatering med serverens bekreftede oppdatering.

Det er her Reacts `useOptimistic`-hook kan være uvurderlig. Hooken lar deg administrere optimistiske tilstandsoppdateringer og tilby mekanismer for å håndtere serversvar. Den gir en måte å tilbakestille brukergrensesnittet til en kjent tilstand eller utføre en sammenslåing av oppdateringer.

3. Bruk av tidsstempler eller versjonering

Å inkludere tidsstempler eller versjonsnumre i dataoppdateringer lar klienten og serveren spore endringer og enkelt avstemme konflikter. Klienten kan sammenligne serverens versjon av dataene med sin egen og bestemme den beste fremgangsmåten (f.eks. bruke serverens endringer, slå sammen endringer eller be brukeren om å løse konflikten).

4. Operasjonelle transformasjoner (OT)

OT er en sofistikert teknikk som brukes i samarbeidsbaserte redigeringsapplikasjoner, som gjør det mulig for brukere å redigere det samme dokumentet samtidig uten konflikter. Hver endring representeres som en operasjon som kan transformeres mot andre operasjoner, noe som sikrer at alle klienter konvergerer til den samme endelige tilstanden. Dette er spesielt nyttig i rik-tekst-redigerere og lignende sanntids samarbeidsverktøy.

Introduksjon til Reacts `useOptimistic`-hook

Reacts `useOptimistic`-hook, hvis den er riktig implementert, tilbyr en strømlinjeformet måte å håndtere optimistiske oppdateringer og integrere konfliktløsningsstrategier. Den lar deg:

• Administrere optimistisk tilstand: Lagre den optimistiske tilstanden sammen med den faktiske tilstanden.
• Utløse oppdateringer: Definere hvordan brukergrensesnittet endres optimistisk.
• Håndtere serversvar: Håndtere suksess eller feil i den serverside operasjonen.
• Implementere tilbakerulling eller sammenslåingslogikk: Definere hvordan man går tilbake til den opprinnelige tilstanden eller slår sammen endringene når serversvaret kommer tilbake.

Grunnleggende eksempel på `useOptimistic`

Her er et enkelt eksempel som illustrerer kjernekonseptet:

            import React, { useState, useOptimistic } from 'react';

function Counter() {
  const [count, setOptimisticCount] = useOptimistic(
    0, // Starttilstand
    (state, optimisticValue) => {
      // Sammenslåingslogikk: returnerer den optimistiske verdien
      return optimisticValue;
    }
  );

  const [isUpdating, setIsUpdating] = useState(false);

  const handleIncrement = async () => {
    const optimisticValue = count + 1;
    setOptimisticCount(optimisticValue);
    setIsUpdating(true);

    try {
      // Simuler et API-kall
      await new Promise(resolve => setTimeout(resolve, 1000));
      // Ved suksess er ingen spesiell handling nødvendig, tilstanden er allerede oppdatert.
    } catch (error) {
      // Håndter feil, potensielt rull tilbake eller vis en feilmelding.
      setOptimisticCount(count); // Tilbakestill til forrige tilstand ved feil.
      console.error('Increment failed:', error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    

      
Count: {count}
      
        {isUpdating ? 'Updating...' : 'Increment'}
      
    
  );
}

export default Counter;

            

              
                Copy
              
            
          

Forklaring:

• `useOptimistic(0, ...)`: Vi initialiserer tilstanden med `0` og sender med en funksjon som håndterer den optimistiske oppdateringen/sammenslåingen.
• `optimisticValue`: Inne i `handleIncrement`, når knappen klikkes, beregner vi den optimistiske verdien og kaller `setOptimisticCount(optimisticValue)`, som umiddelbart oppdaterer brukergrensesnittet.
• `setIsUpdating(true)`: Indikerer for brukeren at oppdateringen pågår.
• `try...catch...finally`: Simulerer et API-kall, og demonstrerer hvordan man håndterer suksess eller feil fra serveren.
• Suksess: Ved et vellykket svar opprettholdes den optimistiske oppdateringen.
• Feil: Ved en feil tilbakestiller vi tilstanden til dens forrige verdi (`setOptimisticCount(count)`) i dette eksempelet. Alternativt kunne vi vist en feilmelding eller implementert mer kompleks sammenslåingslogikk.
• `mergeFn`: Den andre parameteren i `useOptimistic` er kritisk. Det er en funksjon som håndterer hvordan man skal slå sammen/oppdatere når tilstanden endres.

Implementering av kompleks sammenslåingslogikk med `useOptimistic`

Det andre argumentet til `useOptimistic`-hooken, sammenslåingsfunksjonen, er nøkkelen til å håndtere kompleks konfliktløsning. Denne funksjonen er ansvarlig for å kombinere den optimistiske tilstanden med den faktiske servertilstanden. Den mottar to parametere: den nåværende tilstanden og den optimistiske verdien (verdien brukeren nettopp har lagt inn/endret). Funksjonen må returnere den nye tilstanden som skal brukes.

La oss se på flere eksempler:

1. Økningsteller med bekreftelse (mer robust)

Vi bygger videre på det grunnleggende tellereksempelet og introduserer et bekreftelsessystem som lar brukergrensesnittet gå tilbake til den forrige verdien hvis serveren returnerer en feil. Vi vil forbedre eksempelet med serverbekreftelse.

            
import React, { useState, useOptimistic } from 'react';

function Counter() {
  const [count, setOptimisticCount] = useOptimistic(
    0, // Starttilstand
    (state, optimisticValue) => {
      // Sammenslåingslogikk - oppdaterer telleren til den optimistiske verdien
      return optimisticValue;
    }
  );

  const [isUpdating, setIsUpdating] = useState(false);
  const [lastServerCount, setLastServerCount] = useState(0);

  const handleIncrement = async () => {
    const optimisticValue = count + 1;
    setOptimisticCount(optimisticValue);
    setIsUpdating(true);

    try {
      // Simuler et API-kall
      const response = await fetch('/api/increment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ count: optimisticValue }),
      });

      const data = await response.json();
      if (data.success) {
          setLastServerCount(data.count) // Valgfritt å verifisere. Ellers kan tilstanden fjernes.
      }
       else {
          setOptimisticCount(count) // Tilbakestill den optimistiske oppdateringen
       }
    } catch (error) {
      // Tilbakestill ved feil
      setOptimisticCount(count);
      console.error('Increment failed:', error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    

      
Count: {count} (Last Server Count: {lastServerCount})
      
        {isUpdating ? 'Updating...' : 'Increment'}
      
    
  );
}

export default Counter;

            

              
                Copy
              
            
          

Viktige forbedringer:

• Serverbekreftelse: `fetch`-forespørselen til `/api/increment` simulerer et serverkall for å øke telleren.
• Feilhåndtering: `try...catch`-blokken håndterer elegant potensielle nettverksfeil eller feil på serversiden. Hvis API-kallet mislykkes (f.eks. nettverksfeil, serverfeil), rulles den optimistiske oppdateringen tilbake med `setOptimisticCount(count)`.
• Verifisering av serversvar (valgfritt): I en ekte applikasjon ville serveren sannsynligvis returnert et svar som inneholder den oppdaterte tellerverdien. I dette eksempelet, etter økning, sjekker vi serversvaret (data.success).

2. Oppdatere en liste (optimistisk legg til/fjern)

La oss utforske et eksempel på å administrere en liste med elementer, med mulighet for optimistisk tillegg og fjerning. Dette viser hvordan man kan slå sammen tillegg og fjerninger, og håndtere serversvaret.

            
import React, { useState, useOptimistic } from 'react';

function ItemList() {
  const [items, setItems] = useState([{
    id: 1,
    text: 'Item 1'
  }]); // starttilstand

  const [optimisticItems, setOptimisticItems] = useOptimistic(
    items, // Starttilstand
    (state, optimisticValue) => {
      // Sammenslåingslogikk - erstatter den nåværende tilstanden
      return optimisticValue;
    }
  );

  const [isAdding, setIsAdding] = useState(false);
  const [isRemoving, setIsRemoving] = useState(false);

  const handleAddItem = async () => {
    const newItem = {
      id: Math.random(),
      text: 'New Item',
      optimistic: true, // Marker som optimistisk
    };
    const optimisticList = [...optimisticItems, newItem];
    setOptimisticItems(optimisticList);
    setIsAdding(true);

    try {
      // Simuler API-kall for å legge til på serveren.
      await new Promise(resolve => setTimeout(resolve, 1000));

      // Oppdater listen når serveren bekrefter det (fjern 'optimistic'-flagget)
      const confirmedItems = optimisticList.map(item => {
        if (item.optimistic) {
          return { ...item, optimistic: false }
        }
        return item;
      })
      setItems(confirmedItems);
    } catch (error) {
        // Tilbakerulling - Fjern det optimistiske elementet ved feil
        const rolledBackItems = optimisticItems.filter(item => !item.optimistic);
        setOptimisticItems(rolledBackItems);
    } finally {
      setIsAdding(false);
    }
  };

  const handleRemoveItem = async (itemId) => {
    const optimisticList = optimisticItems.filter(item => item.id !== itemId);
    setOptimisticItems(optimisticList);
    setIsRemoving(true);

    try {
      // Simuler API-kall for å fjerne elementet fra serveren.
      await new Promise(resolve => setTimeout(resolve, 1000));
      // Ingen spesiell handling her. Elementer fjernes optimistisk fra UI.
    } catch (error) {
        // Tilbakerulling - Legg til elementet igjen hvis fjerningen mislykkes.
        // Merk at det ekte elementet kan ha endret seg på serveren.
        // En mer robust løsning ville krevd en sjekk av servertilstanden.
        // Men dette enkle eksempelet fungerer.
        const itemToRestore = items.find(item => item.id === itemId);
        if (itemToRestore) {
            setOptimisticItems([...optimisticItems, itemToRestore]);
        }
        // Alternativt, hent de siste elementene for å re-synkronisere
    } finally {
      setIsRemoving(false);
    }
  };

  return (
    

      

        {optimisticItems.map(item => (
          

            {item.text} - {
              item.optimistic ? 'Adding...' : 'Confirmed'
            }
             handleRemoveItem(item.id)} disabled={isRemoving}>Remove
          
        ))}
      
      
        Add Item
      
    
  );
}

export default ItemList;

            

              
                Copy
              
            
          

Forklaring:

• Starttilstand: Initialiserer en liste med elementer.
• `useOptimistic`-integrasjon: Vi bruker `useOptimistic` for å administrere den optimistiske tilstanden til elementlisten.
• Legge til elementer: Når brukeren legger til et element, lager vi et nytt element med et `optimistic`-flagg satt til `true`. Dette lar oss visuelt skille de optimistiske endringene. Elementet blir umiddelbart lagt til i listen med `setOptimisticItems`. Hvis serveren svarer vellykket, oppdaterer vi listen i tilstanden. Hvis serverkallet mislykkes, fjerner vi elementet.
• Fjerne elementer: Når brukeren fjerner et element, blir det fjernet fra `optimisticItems` umiddelbart. Hvis serveren bekrefter det, er alt i orden. Hvis serveren mislykkes, gjenoppretter vi elementet til listen.
• Visuell tilbakemelding: Komponenten gjengir elementer i en annen stil (`color: gray`) mens de er i en optimistisk tilstand (venter på serverbekreftelse).
• Serversimulering: De simulerte API-kallene i eksempelet simulerer nettverksforespørsler. I et virkelig scenario ville disse forespørslene blitt gjort mot dine API-endepunkter.

3. Redigerbare felt: Inline-redigering

Optimistiske oppdateringer fungerer også godt for inline-redigeringsscenarier. Brukeren får lov til å redigere et felt, og vi viser en lasteindikator mens serveren mottar bekreftelse. Hvis oppdateringen mislykkes, tilbakestiller vi feltet til den forrige verdien. Hvis oppdateringen lykkes, oppdaterer vi tilstanden.

            
import React, { useState, useOptimistic, useRef } from 'react';

function EditableField({ initialValue, onSave, isEditable = true }) {
  const [value, setOptimisticValue] = useOptimistic(
    initialValue,
    (state, optimisticValue) => {
      return optimisticValue;
    }
  );
  const [isSaving, setIsSaving] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const inputRef = useRef(null);

  const handleEditClick = () => {
    setIsEditing(true);
  };

  const handleSave = async () => {
    if (!isEditable) return;
    setIsSaving(true);
    try {
      await onSave(value);
    } catch (error) {
      console.error('Failed to save:', error);
      // Tilbakerulling
      setOptimisticValue(initialValue);
    } finally {
      setIsSaving(false);
      setIsEditing(false);
    }
  };

  const handleCancel = () => {
    setOptimisticValue(initialValue);
    setIsEditing(false);
  };

  return (
    

      {isEditing ? (
        

           setOptimisticValue(e.target.value)}
          />
          
            {isSaving ? 'Saving...' : 'Save'}
          
          Cancel
        
      ) : (
        
          {value}
        
      )}
    
  );
}

export default EditableField;

            

              
                Copy
              
            
          

Forklaring:

• `EditableField`-komponent: Denne komponenten tillater inline-redigering av en verdi.
• `useOptimistic` for felt: `useOptimistic` holder styr på verdien og endringen som gjøres.
• `onSave`-callback: `onSave`-propen tar en funksjon som håndterer lagringsprosessen.
• Rediger/Lagre/Avbryt: Komponenten viser enten et tekstfelt (under redigering) eller selve verdien (når den ikke redigeres).
• Lagringsstatus: Mens vi lagrer, viser vi en “Saving…”-melding og deaktiverer lagre-knappen.
• Feilhåndtering: Hvis `onSave` kaster en feil, rulles verdien tilbake til `initialValue`.

Avanserte betraktninger for sammenslåingslogikk

Eksemplene over gir en grunnleggende forståelse av optimistiske oppdateringer og hvordan man bruker `useOptimistic`. Virkelige scenarier krever ofte mer sofistikert sammenslåingslogikk. Her er en titt på noen avanserte betraktninger:

1. Håndtering av samtidige oppdateringer

Når flere brukere samtidig oppdaterer de samme dataene, eller en enkelt bruker har flere faner åpne, kreves nøye utformet sammenslåingslogikk. Dette kan innebære:

• Versjonskontroll: Implementere et versjoneringssystem for å spore endringer og avstemme konflikter.
• Optimistisk låsing: Optimistisk låse en brukerøkt for å forhindre en motstridende oppdatering.
• Konfliktløsningsalgoritmer: Designe algoritmer for automatisk å slå sammen endringer, som for eksempel å slå sammen den nyeste tilstanden.

2. Bruk av Context og tilstandshåndteringsbiblioteker

For mer komplekse applikasjoner, bør du vurdere å bruke Context og tilstandshåndteringsbiblioteker som Redux eller Zustand. Disse bibliotekene gir en sentralisert lagring for applikasjonstilstanden, noe som gjør det enklere å administrere og dele optimistiske oppdateringer på tvers av forskjellige komponenter. Du kan bruke disse til å administrere tilstanden til dine optimistiske oppdateringer på en konsistent måte. De kan også forenkle komplekse sammenslåingsoperasjoner, og håndtere nettverkskall og tilstandsoppdateringer.

3. Ytelsesoptimalisering

Optimistiske oppdateringer bør ikke introdusere ytelsesflaskehalser. Ha følgende i tankene:

• Optimaliser API-kall: Sørg for at API-kall er effektive og ikke blokkerer brukergrensesnittet.
• Debouncing og Throttling: Bruk debouncing- eller throttling-teknikker for å begrense frekvensen av oppdateringer, spesielt i scenarier med rask brukerinput (f.eks. tekstinntasting).
• Lazy Loading: Last data "lazy" for å unngå å overvelde brukergrensesnittet.

4. Feilrapportering og brukertilbakemelding

Gi klar og informativ tilbakemelding til brukeren om statusen til de optimistiske oppdateringene. Dette kan inkludere:

• Lasteindikatorer: Vis lasteindikatorer under API-kall.
• Feilmeldinger: Vis passende feilmeldinger hvis serveroppdateringen mislykkes. Feilmeldingene bør være informative og handlingsrettede, og veilede brukeren til å løse problemet.
• Visuelle hint: Bruk visuelle hint (f.eks. endre fargen på en knapp) for å indikere statusen til en oppdatering.

5. Testing

Test dine optimistiske oppdateringer og sammenslåingslogikk grundig for å sikre at datakonsistens og brukeropplevelse opprettholdes i alle scenarier. Dette innebærer å teste både den optimistiske oppførselen på klientsiden og konfliktløsningsmekanismene på serversiden.

Beste praksis for `useOptimistic`

• Hold sammenslåingsfunksjonen enkel: Gjør sammenslåingsfunksjonen din klar og konsis, for å gjøre den enkel å forstå og vedlikeholde.
• Bruk uforanderlige data: Bruk uforanderlige datastrukturer for å sikre uforanderligheten til UI-tilstanden og hjelpe med feilsøking og forutsigbarhet.
• Håndter serversvar: Håndter både vellykkede og feilaktige serversvar korrekt.
• Gi klar tilbakemelding: Kommuniser statusen til operasjoner til brukeren.
• Test grundig: Test alle scenarier for å sikre korrekt sammenslåingsatferd.

Eksempler fra den virkelige verden og globale applikasjoner

Optimistiske oppdateringer og `useOptimistic` er verdifulle i et bredt spekter av applikasjoner. Her er noen eksempler med internasjonal relevans:

• Sosiale medieplattformer (f.eks. Facebook, Twitter): De umiddelbare 'like'-, kommentar- og delefunksjonene er sterkt avhengige av optimistiske oppdateringer for en flytende brukeropplevelse.
• E-handelsplattformer (f.eks. Amazon, Alibaba): Å legge varer i handlekurven, oppdatere antall eller sende inn bestillinger bruker ofte optimistiske oppdateringer.
• Samarbeidsverktøy (f.eks. Google Docs, Microsoft Office Online): Sanntids dokumentredigering og samarbeidsfunksjoner drives ofte av optimistiske oppdateringer og sofistikerte konfliktløsningsstrategier som OT.
• Prosjektstyringsprogramvare (f.eks. Asana, Jira): Oppdatering av oppgavestatuser, tildeling av brukere og kommentering på oppgaver benytter ofte optimistiske oppdateringer.
• Bank- og finansapplikasjoner: Selv om sikkerhet er avgjørende, bruker brukergrensesnitt ofte optimistiske oppdateringer for visse handlinger, som å overføre penger eller se kontosaldoer. Imidlertid må man være forsiktig med å sikre slike applikasjoner.

Konseptene som diskuteres i dette innlegget gjelder globalt. Prinsippene for optimistiske oppdateringer, konfliktløsning og `useOptimistic` kan brukes på webapplikasjoner uavhengig av brukerens geografiske plassering, kulturelle bakgrunn eller teknologiske infrastruktur. Nøkkelen ligger i gjennomtenkt design og effektiv sammenslåingslogikk tilpasset applikasjonens krav.

Konklusjon

Å mestre optimistiske oppdateringer og konfliktløsning er avgjørende for å bygge responsive og engasjerende brukergrensesnitt. Reacts `useOptimistic`-hook gir et kraftig og fleksibelt verktøy for å implementere dette. Ved å forstå kjernekonseptene og anvende teknikkene som er diskutert i denne guiden, kan du forbedre brukeropplevelsen til webapplikasjonene dine betydelig. Husk at valget av passende sammenslåingslogikk avhenger av detaljene i applikasjonen din, så det er viktig å velge riktig tilnærming for dine spesifikke behov.

Ved å nøye håndtere utfordringene med optimistiske oppdateringer og anvende disse beste praksisene, kan du skape mer dynamiske, raskere og mer tilfredsstillende brukeropplevelser for ditt globale publikum. Kontinuerlig læring og eksperimentering er nøkkelen til å lykkes med å navigere i verdenen av optimistisk UI og konfliktløsning. Evnen til å skape responsive brukergrensesnitt som føles umiddelbare, vil skille applikasjonene dine fra mengden.