Beste fremgangsmåter for en ren og utførende kantet applikasjon

Jeg har jobbet med en storskala vinkelapplikasjon hos Trade Me, New Zealand i et par år nå. I løpet av de siste årene har teamet vårt foredlet søknaden vår både når det gjelder kodingsstandarder og ytelse for å gjøre den i best mulig stand.

Denne artikkelen skisserer fremgangsmåtene vi bruker i applikasjonen vår og er relatert til Angular, Typescript, RxJs og @ ngrx / store. Vi vil også gå gjennom noen generelle retningslinjer for koding for å gjøre applikasjonen renere.

1) trackBy

Når du bruker ngFor til å sløyfe over en matrise i maler, bruker du den med en trackBy-funksjon som vil returnere en unik identifikator for hvert element.

Hvorfor?

Når en gruppe endres, gjengir Angular hele DOM-treet. Men hvis du bruker trackBy, vil Angular vite hvilket element som har endret seg, og vil bare gjøre DOM-endringer for det aktuelle elementet.

For en detaljert forklaring på dette, vennligst referer til denne artikkelen av Netanel Basal.

Før

  • {{item}}
  • Etter

    // i malen
  • {{item}}
  • // i komponenten
    trackByFn (indeks, vare) {
       retur vare.id; // unik ID som tilsvarer varen
    }

    2) const vs let

    Når du deklarerer variabler, bruk const når verdien ikke skal tilordnes.

    Hvorfor?

    Ved å bruke let og const der det er hensiktsmessig, blir erklæringenes intensjon tydeligere. Det vil også hjelpe med å identifisere problemer når en verdi tildeles til en konstant ved et uhell ved å kaste en kompilertidsfeil. Det hjelper også til å forbedre kodens lesbarhet.

    Før

    la bil = 'latterlig bil';
    la myCar = `Min $ {bil}`;
    la dinCar = `Din $ {bil};
    if (iHaveMoreThanOneCar) {
       myCar = `$ {myCar} s`;
    }
    if (youHaveMoreThanOneCar) {
       yourCar = `$ {youCar} s`;
    }

    Etter

    // verdien av bilen ikke tilordnes, så vi kan gjøre den til en konst
    const car = 'latterlig bil';
    la myCar = `Min $ {bil}`;
    la dinCar = `Din $ {bil};
    if (iHaveMoreThanOneCar) {
       myCar = `$ {myCar} s`;
    }
    if (youHaveMoreThanOneCar) {
       yourCar = `$ {youCar} s`;
    }

    3) Rørbare operatører

    Bruk operatører som kan røres når du bruker RxJs-operatører.

    Hvorfor?

    Rørbare operatører kan ristes ved tre, noe som betyr at bare koden vi trenger å utføre vil bli inkludert når de importeres.

    Dette gjør det også enkelt å identifisere ubrukte operatører i filene.

    Merk: Denne trenger Angular versjon 5.5+.

    Før

    import 'rxjs / add / operator / map';
    import 'rxjs / add / operator / take';
    iAmAnObservable
        .map (verdi => verdi.item)
        .Ta (1);

    Etter

    import {map, take} fra 'rxjs / operators';
    iAmAnObservable
        .rør(
           kart (verdi => verdi.item),
           ta (1)
         );

    4) Isoler API-hacks

    Ikke alle API-er er kortsikre - noen ganger må vi legge til litt logikk i koden for å gjøre opp for feil i API-ene. I stedet for å ha hacks i komponenter der de trengs, er det bedre å isolere dem ett sted - som i en tjeneste og bruke tjenesten fra komponenten.

    Hvorfor?

    Dette hjelper til med å holde hacks "nærmere API", så nær der nettverksforespørselen blir gjort. På denne måten har mindre av koden din å gjøre med den un-hackede koden. Det er også ett sted der alle hakkene bor, og det er lettere å finne dem. Når du fikser feilene i API-ene, er det lettere å se etter dem i én fil i stedet for å se etter hacks som kan spres over kodebasen.

    Du kan også lage egendefinerte koder som API_FIX som ligner på TODO og tagge fikser med det slik at det er lettere å finne.

    5) Abonner i mal

    Unngå å abonnere på observerbare ting fra komponenter, og abonner isteden på observerbare ting fra malen.

    Hvorfor?

    async-rør melder seg ut automatisk og det gjør koden enklere ved å eliminere behovet for manuelt å administrere abonnement. Det reduserer også risikoen for å glemme å abonnere på et abonnement i komponenten ved et uhell, noe som kan føre til en minnelekkasje. Denne risikoen kan også reduseres ved å bruke en lofteregel for å oppdage observasjoner som ikke er påmeldt.

    Dette forhindrer også at komponenter blir stateful og introduserer feil der data blir mutert utenfor abonnementet.

    Før

    // mal

    {{textToDisplay}}

    // komponent
    iAmAnObservable
        .rør(
           kart (verdi => verdi.item),
           takeUntil (this._destroyed $)
         )
        .subscribe (item => this.textToDisplay = item);

    Etter

    // mal

    {{textToDisplay $ | async}}

    // komponent
    this.textToDisplay $ = iAmAnObservable
        .rør(
           kart (verdi => verdi.item)
         );

    6) Rydd opp i abonnement

    Når du abonnerer på observerbare ting, må du alltid forsikre deg om å melde deg av dem på riktig måte ved å bruke operatører som take, takeUntil osv.

    Hvorfor?

    Hvis du ikke melder deg ut av observerbare ting, vil det føre til uønskede minnelekkasjer når den observerbare strømmen blir stående åpen, potensielt også etter at en komponent er blitt ødelagt / brukeren har navigert til en annen side.

    Enda bedre, lag en lo for å oppdage observerbare ting som ikke er avtegnet.

    Før

    iAmAnObservable
        .rør(
           kart (verdi => verdi.item)
         )
        .subscribe (item => this.textToDisplay = item);

    Etter

    Bruk takeUntil når du vil lytte til endringene til en annen observerbar avgir en verdi:

    privat _destroyed $ = new Subject ();
    public ngOnInit (): ugyldig {
        iAmAnObservable
        .rør(
           kart (verdi => verdi.item)
          // Vi ønsker å lytte til iAmAnObservable til komponenten er ødelagt,
           takeUntil (this._destroyed $)
         )
        .subscribe (item => this.textToDisplay = item);
    }
    public ngOnDestroy (): ugyldig {
        this._destroyed $ .next ();
        this._destroyed $ .complete ();
    }

    Å bruke et privat emne som dette er et mønster for å håndtere avmelding av mange observerbare ting i komponenten.

    Bruke ta når du bare vil ha den første verdien som er utsendt av den observerbare:

    iAmAnObservable
        .rør(
           kart (verdi => verdi.item),
           ta (1),
           takeUntil (this._destroyed $)
        )
        .subscribe (item => this.textToDisplay = item);

    Legg merke til bruken av takeUntil med take her. Dette for å unngå minnelekkasjer forårsaket når abonnementet ikke har mottatt en verdi før komponenten ble ødelagt. Uten takeUntil her, vil abonnementet fortsatt henge rundt til det får den første verdien, men siden komponenten allerede har blitt ødelagt, vil det aldri få en verdi - noe som fører til en minnelekkasje.

    7) Bruk passende operatører

    Når du bruker flateoperatører med dine observerbare ting, bruk den aktuelle operatøren for situasjonen.

    switchMap: når du vil ignorere de tidligere utslippene når det er et nytt utslipp

    mergeMap: når du samtidig vil håndtere alle utslippene

    concatMap: når du vil håndtere utslippene etter hverandre når de slippes ut

    exhaustMap: når du vil avbryte alle de nye utslippene mens du behandler en tidligere utsendelse

    For en mer detaljert forklaring på dette, vennligst referer til denne artikkelen av Nicholas Jamieson.

    Hvorfor?

    Å bruke en enkelt operatør når det er mulig i stedet for å lenke sammen flere andre operatører for å oppnå samme effekt kan føre til at mindre kode blir sendt til brukeren. Å bruke feil operatører kan føre til uønsket atferd, da forskjellige operatører håndterer observerbare ting på forskjellige måter.

    8) Lat belastning

    Når det er mulig, kan du prøve å laste inn modulene i Angular-applikasjonen. Lat lasting er når du bare laster inn noe når det brukes, for eksempel å laste inn en komponent når det skal sees.

    Hvorfor?

    Dette vil redusere størrelsen på applikasjonen som skal lastes, og kan forbedre starttidspunktet for applikasjonen ved ikke å laste inn modulene som ikke brukes.

    Før

    // app.routing.ts
    {bane: 'ikke-lat-lastet', komponent: NotLazyLoadedComponent}

    Etter

    // app.routing.ts
    {
      sti: 'lat-belastning',
      loadChildren: 'lazy-load.module # LazyLoadModule'
    }
    // lazy-load.module.ts
    import {NgModule} fra '@ vinkel / kjerne';
    import {CommonModule} fra '@ kantet / vanlig';
    import {RouterModule} fra '@ angular / router';
    import {LazyLoadComponent} fra './lazy-load.component';
    @NgModule ({
      import: [
        CommonModule,
        RouterModule.forChild ([
             {
                 sti: '',
                 komponent: LazyLoadComponent
             }
        ])
      ]
      erklæringer: [
        LazyLoadComponent
      ]
    })
    eksportklasse LazyModule {}

    9) Unngå å ha abonnement i abonnementene

    Noen ganger vil du kanskje at verdier fra mer enn en observerbar skal utføre en handling. I dette tilfellet bør du unngå å abonnere på en observerbar i abonnementsblokken til en annen observerbar. Bruk i stedet passende kjedingsoperatører. Kjettingoperatører kjører på observerbare ting fra operatøren før dem. Noen kjedningsoperatører er: withLatestFrom, combineLatest, etc.

    Før

    firstObservable $ .pipe (
       ta (1)
    )
    .subscribe (firstValue => {
        secondObservable $ .pipe (
            ta (1)
        )
        .subscribe (secondValue => {
            console.log (`Kombinerte verdier er: $ {firstValue} & $ {secondValue}`);
        });
    });

    Etter

    firstObservable $ .pipe (
        withLatestFrom (secondObservable $)
        først()
    )
    .subscribe (([[firstValue, secondValue]) => {
        console.log (`Kombinerte verdier er: $ {firstValue} & $ {secondValue}`);
    });

    Hvorfor?

    Kodelukt / lesbarhet / kompleksitet: Bruker ikke RxJs i sin helhet, antyder utvikler ikke er kjent med RxJs API-overflate.

    Ytelse: Hvis de observerbare tingene er kalde, vil den abonnere på firstObservable, vent til den er fullført, og start deretter den andre observerbare verken. Hvis dette var nettverksforespørsler, ville det vises som synkron / foss.

    10) Unngå noe; skriv inn alt;

    Deklarer alltid variabler eller konstanter med en annen type enn noen.

    Hvorfor?

    Når du deklarerer variabler eller konstanter i Typescript uten å skrive, vil skrivingen av variabelen / konstanten avledes av verdien som blir tildelt den. Dette vil forårsake utilsiktede problemer. Et klassisk eksempel er:

    const x = 1;
    const y = 'a';
    const z = x + y;
    console.log (`Verdien av z er: $ {z}`
    // Utgang
    Verdien av z er 1a

    Dette kan føre til uønskede problemer når du forventer at du også skal være et tall. Disse problemene kan unngås ved å skrive inn variablene på riktig måte.

    const x: antall = 1;
    const y: nummer = 'a';
    const z: antall = x + y;
    // Dette vil gi en kompilasjonsfeil som sier:
    Skriv inn "a" kan ikke tilordnes "nummer".
    const y: antall

    På denne måten kan vi unngå feil forårsaket av manglende typer.

    En annen fordel med å ha gode typografier i søknaden din er at det gjør refactoring enklere og tryggere.

    Tenk på dette eksemplet:

    public ngOnInit (): ugyldig {
        la myFlashObject = {
            navn: 'Mitt kule navn',
            alder: 'Min kule alder',
            loc: 'My cool location'
        }
        this.processObject (myFlashObject);
    }
    public processObject (myObject: any): ugyldig {
        console.log (`Navn: $ {myObject.name}`);
        console.log (`Alder: $ {myObject.age}`);
        console.log (`Sted: $ {myObject.loc}`);
    }
    // Utgang
    Navn: Det kule navnet mitt
    Alder: Min kule alder
    Sted: Min kule beliggenhet

    La oss si at vi ønsker å gi nytt navn til stedet til stedet i myFlashObject:

    public ngOnInit (): ugyldig {
        la myFlashObject = {
            navn: 'Mitt kule navn',
            alder: 'Min kule alder',
            beliggenhet: 'My cool location'
        }
        this.processObject (myFlashObject);
    }
    public processObject (myObject: any): ugyldig {
        console.log (`Navn: $ {myObject.name}`);
        console.log (`Alder: $ {myObject.age}`);
        console.log (`Sted: $ {myObject.loc}`);
    }
    // Utgang
    Navn: Det kule navnet mitt
    Alder: Min kule alder
    Sted: udefinert

    Hvis vi ikke har en maskinskriving på myFlashObject, tror den at eiendommen loc på myFlashObject bare er udefinert i stedet for at den ikke er en gyldig eiendom.

    Hvis vi hadde en maskinskriving for myFlashObject, ville vi fått en fin kompilertidsfeil som vist nedenfor:

    type FlashObject = {
        navn: streng,
        alder: streng,
        sted: streng
    }
    public ngOnInit (): ugyldig {
        la myFlashObject: FlashObject = {
            navn: 'Mitt kule navn',
            alder: 'Min kule alder',
            // Samlingsfeil
            Skriv '{name: string; alder: streng; loc: streng; } 'kan ikke tilordnes til å skrive' FlashObjectType '.
            Objekt bokstavelig kan bare spesifisere kjente egenskaper, og 'loc' eksisterer ikke i typen 'FlashObjectType'.
            loc: 'My cool location'
        }
        this.processObject (myFlashObject);
    }
    public processObject (myObject: FlashObject): ugyldig {
        console.log (`Navn: $ {myObject.name}`);
        console.log (`Alder: $ {myObject.age}`)
        // Samlingsfeil
        Eiendom 'loc' eksisterer ikke av typen 'FlashObjectType'.
        console.log (`Sted: $ {myObject.loc}`);
    }

    Hvis du starter et nytt prosjekt, er det verdt å stille strenge: sant i tsconfig.json-filen for å aktivere alle strenge typekontrollalternativer.

    11) Benytt deg av loftsregler

    tslint har forskjellige alternativer innebygd allerede som no-no, no-magic-numbers, no-console, etc som du kan konfigurere i tslint.json for å håndheve visse regler i kodebasen.

    Hvorfor?

    Å ha lofter på plass betyr at du vil få en fin feil når du gjør noe du ikke burde være. Dette vil sikre konsistens i søknaden din og lesbarhet. Se her for flere regler som du kan konfigurere.

    Noen lofter kommer til og med med fikser for å løse lofilfeilen. Hvis du vil konfigurere din egen tilpassede lo-regel, kan du gjøre det også. Vennligst referer til denne artikkelen av Craig Spence om hvordan du skriver dine egne tilpassede lofteregler ved bruk av TSQuery.

    Før

    public ngOnInit (): ugyldig {
        console.log ('Jeg er en slem konsollloggmelding');
        console.warn ('Jeg er en slem konsollvarslingsmelding');
        console.error ('Jeg er en slem konsollfeilmelding');
    }
    // Utgang
    Ingen feil, skriver ut nedenstående i konsollvinduet:
    Jeg er en slem konsollmelding
    Jeg er en slem advarsel om slem konsoll
    Jeg er en slem konsollfeilmelding

    Etter

    // tslint.json
    {
        "regler": {
            .......
            "ingen konsoll": [
                 ekte,
                 "logg", // ingen konsoll.logg tillatt
                 "advare" // ingen konsoll. tillatt
            ]
       }
    }
    // ..component.ts
    public ngOnInit (): ugyldig {
        console.log ('Jeg er en slem konsollloggmelding');
        console.warn ('Jeg er en slem konsollvarslingsmelding');
        console.error ('Jeg er en slem konsollfeilmelding');
    }
    // Utgang
    Lo-feil for console.log og console.warn-uttalelser og ingen feil for console.error, da det ikke er nevnt i konfigurasjonen
    Samtaler til 'console.log' er ikke tillatt.
    Samtaler til 'konsoll.warn' er ikke tillatt.

    12) Små gjenbrukbare komponenter

    Trekk ut brikkene som kan brukes på nytt i en komponent, og gjør den til en ny. Gjør komponenten så stum som mulig, da dette vil gjøre at den fungerer i flere scenarier. Å gjøre en komponent stum betyr at komponenten ikke har noen spesiell logikk i seg og fungerer rent basert på innganger og utganger som er gitt til den.

    Som en generell regel vil det siste barnet i komponenttreet være det dummeste av alle.

    Hvorfor?

    Gjenbrukbare komponenter reduserer duplisering av kode, noe som gjør det enklere å vedlikeholde og gjøre endringer.

    Stomme komponenter er enklere, så det er mindre sannsynlig at de har feil. Stomme komponenter får deg til å tenke hardere på den offentlige komponent-API-en, og bidra til å sniffe ut blandede bekymringer.

    13) Komponenter skal bare håndtere skjermlogikk

    Unngå å ha noen annen logikk enn visningslogikk i komponenten når du kan, og få komponenten til å handle bare med skjermlogikken.

    Hvorfor?

    Komponenter er designet for presentasjonsformål og kontrollerer hva utsikten skal gjøre. Enhver virksomhetslogikk bør trekkes ut i egne metoder / tjenester der det er hensiktsmessig, og skille virksomhetslogikk fra visningslogikk.

    Forretningslogikk er vanligvis enklere å teste enhetene når de trekkes ut til en tjeneste, og kan gjenbrukes av andre komponenter som trenger samme forretningslogikk.

    14) Unngå lange metoder

    Lange metoder indikerer generelt at de gjør for mange ting. Prøv å bruke prinsippet om enkeltansvar. Selve metoden som helhet gjør kanskje en ting, men inni den er det noen få andre operasjoner som kan skje. Vi kan trekke ut disse metodene i sin egen metode og få dem til å gjøre en ting hver og bruke dem i stedet.

    Hvorfor?

    Lange metoder er vanskelig å lese, forstå og vedlikeholde. De er også utsatt for feil, da det å endre en ting kan påvirke mange andre ting i den metoden. De vanskeliggjør også refactoring (som er en sentral ting i enhver applikasjon).

    Noen ganger måles dette som "syklomatisk kompleksitet". Det er også noen TSLint-regler for å oppdage syklomatisk / kognitiv kompleksitet, som du kan bruke i prosjektet ditt for å unngå feil og oppdage lukter og problemer med vedlikehold.

    15) TØRR

    Gjenta deg ikke. Forsikre deg om at du ikke har den samme koden kopiert til forskjellige steder i kodebasen. Trekk ut gjenta koden og bruk den i stedet for den gjentatte koden.

    Hvorfor?

    Å ha den samme koden flere steder betyr at hvis vi ønsker å gjøre en endring i logikken i den koden, må vi gjøre det flere steder. Dette gjør det vanskelig å vedlikeholde og er også utsatt for feil der vi kan savne å oppdatere det i alle tilfeller. Det tar lengre tid å gjøre endringer i logikken, og å teste at det også er en langvarig prosess.

    I disse tilfellene kan du trekke ut den gjentakende koden og bruke den i stedet. Dette betyr bare ett sted å endre og en ting å teste. Har mindre duplikatkode sendt til brukere, betyr at applikasjonen vil være raskere.

    16) Legg til hurtigbufringsmekanismer

    Når du ringer API-anrop, endres ikke svar fra noen av dem ofte. I disse tilfellene kan du legge til en hurtigbuffemekanisme og lagre verdien fra API-en. Når det fremmes en annen forespørsel til samme API, må du sjekke om det er en verdi for det i cachen, og i så fall bruke den. Ellers må du ringe API og cache resultatet.

    Hvis verdiene endres, men ikke ofte, kan du introdusere en hurtigbuffertid der du kan sjekke når den sist ble bufret og bestemme om du vil kalle API eller ikke.

    Hvorfor?

    Å ha en hurtigbuffermekanisme betyr å unngå uønskede API-anrop. Ved bare å ringe API når det kreves og unngå duplisering, forbedres applikasjonshastigheten, da vi ikke trenger å vente på nettverket. Det betyr også at vi ikke laster ned den samme informasjonen om og om igjen.

    17) Unngå logikk i maler

    Hvis du har noen form for logikk i malene dine, selv om det er en enkel && klausul, er det bra å trekke den ut i komponenten.

    Hvorfor?

    Å ha logikk i malen betyr at det ikke er mulig å enhetstest den, og at den derfor er mer utsatt for feil når du endrer malkode.

    Før

    // mal
    

    Status: Developer

    // komponent
    public ngOnInit (): ugyldig {
        this.role = 'utvikler';
    }

    Etter

    // mal
    

    Status: Utvikler

    // komponent
    public ngOnInit (): ugyldig {
        this.role = 'utvikler';
        this.showDeveloperStatus = true;
    }

    18) Strenger skal være trygge

    Hvis du har en variabel av typen streng som bare kan ha et sett med verdier, i stedet for å erklære den som en strengtype, kan du erklære listen over mulige verdier som typen.

    Hvorfor?

    Ved å deklarere variabeltypen på riktig måte, kan vi unngå feil når vi skriver koden under kompileringstid i stedet for under kjøretid.

    Før

    privat myStringValue: streng;
    if (itShouldHaveFirstValue) {
       myStringValue = 'Først';
    } annet {
       myStringValue = 'Andre'
    }

    Etter

    privat myStringValue: 'First' | 'Sekund';
    if (itShouldHaveFirstValue) {
       myStringValue = 'Først';
    } annet {
       myStringValue = 'Annet'
    }
    // Dette vil gi feilen nedenfor
    Type '"Annet" kan ikke tilordnes til å skrive' "Først" | "Sekund"'
    (eiendom) AppComponent.myValue: "First" | "Sekund"

    Større bilde

    Statsstyring

    Vurder å bruke @ ngrx / store for å opprettholde statusen for applikasjonen din og @ ngrx / effects som bivirkningsmodell for butikken. Tilstandsendringer beskrives av handlingene, og endringene utføres av rene funksjoner som kalles reduksjonsmaskiner.

    Hvorfor?

    @ ngrx / store isolerer all tilstandsrelatert logikk på ett sted og gjør den konsistent på tvers av applikasjonen. Den har også memiseringsmekanisme på plass når du får tilgang til informasjonen i butikken som fører til en mer performant applikasjon. @ ngrx / store kombinert med endringsdeteksjonsstrategien til Angular fører til en raskere applikasjon.

    Uforanderlig tilstand

    Når du bruker @ ngrx / store, kan du vurdere å bruke ngrx-store-freeze for å gjøre staten uforanderlig. ngrx-store-freeze forhindrer at staten blir mutert ved å kaste et unntak. Dette unngår utilsiktet mutasjon av staten som fører til uønskede konsekvenser.

    Hvorfor?

    Muterende tilstand i komponenter fører til at appen oppfører seg inkonsekvent, avhengig av rekkefølgen komponentene er lastet inn. Det bryter den mentale modellen for reduksjonsmønsteret. Endringer kan ende opp med å overstyre hvis butikktilstanden endres og sendes ut igjen. Separering av bekymringer - komponenter er visningslag, de skal ikke vite hvordan de endrer tilstand.

    jest

    Jest er Facebooks enhetstestingramme for JavaScript. Det gjør enhetstesting raskere ved å parallellisere testkjøringer på tvers av kodebasen. Med klokkemodus kjøres bare testene relatert til endringene, noe som gjør tilbakemeldingssløyfen for testing langt kortere. Jest gir også kodedekning av testene og støttes på VS-kode og nettstorm.

    Du kan bruke en forhåndsinnstilling for Jest som vil gjøre det meste av tunge løft for deg når du setter opp Jest i prosjektet.

    Karma

    Karma er en testløper utviklet av AngularJS team. Det krever en ekte nettleser / DOM for å kjøre testene. Den kan også kjøres på forskjellige nettlesere. Jest trenger ikke kromløs / phantomjs for å kjøre testene, og den kjøres i ren node.

    Universell

    Hvis du ikke har gjort appen din til en Universal-app, er det nå et godt tidspunkt å gjøre det. Angular Universal lar deg kjøre Angular-applikasjonen på serveren og utføre server-side rendering (SSR) som serverer statiske forhåndsutførte HTML-sider. Dette gjør appen superrask ettersom den viser innhold på skjermen nesten øyeblikkelig, uten å måtte vente på at JS-pakker skal lastes og analyseres, eller for at Angular starter opp spenningen.

    Det er også SEO-vennlig, ettersom Angular Universal genererer statisk innhold og gjør det lettere for webcrawlerne å indeksere applikasjonen og gjøre det søkbart uten å utføre JavaScript.

    Hvorfor?

    Universal forbedrer ytelsen til applikasjonen din drastisk. Vi har nylig oppdatert søknaden vår for å gjøre rendering på serversiden, og lastetiden for nettstedet gikk fra flere sekunder til titalls millisekunder!

    Det gjør det mulig for nettstedet ditt å vises riktig i forhåndsvisninger av sosiale medier. Den første meningsfylte malingen er veldig rask og gjør innhold synlig for brukerne uten uønskede forsinkelser.

    Konklusjon

    Å bygge applikasjoner er en konstant reise, og det er alltid rom for å forbedre ting. Denne listen over optimaliseringer er et bra sted å starte, og å bruke disse mønstrene konsekvent vil gjøre teamet ditt lykkelig. Brukerne dine vil også elske deg for den fine opplevelsen med den mindre buggy og performante applikasjonen.

    Takk for at du leser! Hvis du likte denne artikkelen, kan du gjerne og hjelpe andre med å finne den. Ikke nøl med å dele tankene dine i kommentarfeltet nedenfor. Følg meg på Medium eller Twitter for flere artikler. Glade koding folkens !! ️