Labākā prakse tīram un darbīgam leņķa pielietojumam

Jau pāris gadus es strādāju pie liela mēroga leņķa pieteikuma Trade Me, Jaunzēlandē. Dažos pēdējos gados mūsu komanda ir uzlabojusi mūsu lietojumprogrammu gan kodēšanas standartu, gan veiktspējas ziņā, lai tā būtu vislabākajā iespējamajā stāvoklī.

Šajā rakstā ir aprakstīta prakse, ko mēs izmantojam mūsu lietojumprogrammā, un tā ir saistīta ar Angular, Typescript, RxJs un @ ngrx / store. Mēs arī iepazīsimies ar dažām vispārīgām kodēšanas vadlīnijām, lai palīdzētu padarīt lietojumprogrammu tīrāku.

1) trackBy

Ja ngFor izmantojat, lai mainītu masīvu veidnēs, izmantojiet to ar trackBy funkciju, kas katram vienumam sniegs unikālu identifikatoru.

Kāpēc?

Kad masīvs mainās, leņķis atkārtoti atveido visu DOM koku. Bet, ja jūs izmantojat trackBy, Leņķis zinās, kurš elements ir mainījies, un veiks DOM izmaiņas tikai šim konkrētajam elementam.

Lai iegūtu sīkāku informāciju par šo, lūdzu, skatiet šo Netanel Basal rakstu.

Iepriekš

  • {{postenis}}
  • Pēc

    // veidnē
  • {{item}}
  • // komponentā
    trackByFn (indekss, vienums) {
       atgriezt preci.id; // vienums, kas atbilst vienumam
    }

    2) const vs let

    Deklarējot mainīgos lielumus, izmantojiet const, kad vērtība netiks pārdalīta.

    Kāpēc?

    Izmantojot iespēju let un const, deklarāciju nodoms kļūst skaidrāks. Tas palīdzēs arī identificēt problēmas, kad vērtība nejauši tiek piešķirta konstantei, izmetot apkopošanas laika kļūdu. Tas arī palīdz uzlabot koda lasāmību.

    Iepriekš

    let car = 'smieklīga automašīna';
    ļaujiet myCar = `My $ {car}`;
    let yourCar = `Jūsu $ {auto};
    if (iHaveMoreThanOneCar) {
       myCar = `$ {myCar} s`;
    }
    if (youHaveMoreThanOneCar) {
       yourCar = `$ {youCar} s`;
    }

    Pēc

    // automašīnas vērtība netiek pārdalīta, tāpēc mēs to varam padarīt par konstanti
    const car = 'smieklīga automašīna';
    ļaujiet myCar = `My $ {car}`;
    let yourCar = `Jūsu $ {auto};
    if (iHaveMoreThanOneCar) {
       myCar = `$ {myCar} s`;
    }
    if (youHaveMoreThanOneCar) {
       yourCar = `$ {youCar} s`;
    }

    3) Pipeable operatori

    Izmantojot RxJ operatorus, izmantojiet cauruļvadus.

    Kāpēc?

    Pipeable operatori ir koku krata, kas nozīmē tikai kods, kas mums jāizpilda, tiks iekļauts, kad tie tiek importēti.

    Tas arī ļauj failos viegli identificēt neizmantotos operatorus.

    Piezīme: tai nepieciešama leņķiskā versija 5.5+.

    Iepriekš

    importēt 'rxjs / pievienot / operators / karte';
    importēt “rxjs / add / operator / take”;
    iAmAnObservable
        .map (value => value.item)
        .uzņemšana (1);

    Pēc

    importēt {map, take} no 'rxjs / operatoriem';
    iAmAnObservable
        .pipe (
           karte (value => value.item),
           ņem (1)
         );

    4) Izolējiet API hacks

    Ne visas API ir noturīgas pret aizzīmēm - dažreiz mums kodā jāpievieno kāda loģika, lai kompensētu kļūdas API. Tā vietā, lai būtu uzlauzti komponenti tur, kur tie nepieciešami, labāk tos izolēt vienā vietā - piemēram, servisā un izmantot pakalpojumu no komponenta.

    Kāpēc?

    Tas palīdz noturēt hakerus “tuvāk API”, lai tie būtu pēc iespējas tuvāk vietai, kur tiek veikts tīkla pieprasījums. Tādā veidā mazāk jūsu kodā ir darīšana ar uzlauzto kodu. Turklāt tā ir viena vieta, kur dzīvo visi hakeri, un tos ir vieglāk atrast. Izlabojot kļūdas API, ir vieglāk tos meklēt vienā failā, nevis meklēt hakerus, kurus varētu izplatīt visā kodu bāzē.

    Varat arī izveidot pielāgotus tagus, piemēram, API_FIX, līdzīgus TODO, un ar tiem atzīmēt labojumus, lai tos būtu vieglāk atrast.

    5) Abonēt veidnē

    Neuzņemieties abonēt novērojumus no komponentiem, tā vietā abonējiet novērojumus no veidnes.

    Kāpēc?

    async caurules automātiski abonē abonēšanu, un tas padara kodu vienkāršāku, novēršot nepieciešamību manuāli pārvaldīt abonementus. Tas arī samazina risku nejauši aizmirst abonēt abonementu komponentā, kas varētu izraisīt atmiņas noplūdi. Šo risku var mazināt arī, izmantojot neskaidras naudas normu, lai atklātu neparakstītus novērojumus.

    Tas arī aptur komponentus no stāvokļa un rada kļūdas, ja dati tiek mutēti ārpus abonementa.

    Iepriekš

    // veidne

    {{textToDisplay}}

    // komponents
    iAmAnObservable
        .pipe (
           karte (value => value.item),
           takeUntil (this._destroyed $)
         )
        .subscribe (item => this.textToDisplay = item);

    Pēc

    // veidne

    {{textToDisplay $ | async}}

    // komponents
    this.textToDisplay $ = iAmAnObservable
        .pipe (
           karte (value => value.item)
         );

    6) Notīriet abonementus

    Abonējot novērojamos materiālus, vienmēr pārliecinieties, ka esat tos pienācīgi atrakstījis, izmantojot tādus operatorus kā take, takeUntil utt.

    Kāpēc?

    Ja nenorakstīsit novērojamo materiālu abonēšanu, novedīs pie nevēlamām atmiņas noplūdēm, jo ​​novērotā straume tiek atstāta atvērta, iespējams, pat pēc kāda komponenta iznīcināšanas / lietotāja navigācijas uz citu lapu.

    Pat labāk - izveidojiet savārstīšanas noteikumu, lai noteiktu novērojamos materiālus, kas nav anulēti.

    Iepriekš

    iAmAnObservable
        .pipe (
           karte (value => value.item)
         )
        .subscribe (item => this.textToDisplay = item);

    Pēc

    Izmantojot takeUntil, kad vēlaties klausīties izmaiņas, līdz kāds cits novērojams izstaro vērtību:

    privāts _iznīcināts $ = jauns subjekts ();
    public ngOnInit (): spēkā neesošs {
        iAmAnObservable
        .pipe (
           karte (value => value.item)
          // Mēs vēlamies klausīties iAmAnObservable, līdz komponents tiek iznīcināts,
           takeUntil (this._destroyed $)
         )
        .subscribe (item => this.textToDisplay = item);
    }
    public ngOnDestroy (): spēkā neesošs {
        this._destroyed $ .next ();
        this._destroyed $ .complete ();
    }

    Šāda privāta subjekta izmantošana ir veids, kā pārvaldīt daudzu komponentu novērošanu.

    Izmantojot take, ja vēlaties tikai pirmo vērtību, ko izstaro novērotais:

    iAmAnObservable
        .pipe (
           karte (value => value.item),
           ņem (1),
           takeUntil (this._destroyed $)
        )
        .subscribe (item => this.textToDisplay = item);

    Šeit ņemiet vērā takeUntil izmantošanu ar take. Tas ir paredzēts, lai izvairītos no atmiņas noplūdes, kas rodas, ja abonements nav saņēmis vērtību pirms komponenta iznīcināšanas. Bez šeit esošā takeUntil abonēšana joprojām apstāsies, līdz iegūs pirmo vērtību, taču, tā kā komponents jau ir iznīcināts, tas nekad neiegūs vērtību - noved pie atmiņas noplūdes.

    7) Izmantojiet atbilstošus operatorus

    Ja izmantojat saistošos operatorus ar novērojamajiem elementiem, izmantojiet situācijai atbilstošu operatoru.

    switchMap: ja vēlaties ignorēt iepriekšējās emisijas, kad ir jauna emisija

    mergeMap: ja vēlaties vienlaicīgi rīkoties ar visām emisijām

    concatMap: kad vēlaties rīkoties ar emisijām vienu pēc otras, kad tās izstaro

    AuctionMap: kad vēlaties atcelt visas jaunās emisijas, apstrādājot iepriekšējo emisiju

    Lai iegūtu sīkāku skaidrojumu par to, lūdzu, skatiet šo Nikolaja Džamsija raksta.

    Kāpēc?

    Ja iespējams, viena operatora izmantošana, nevis vairāku ķēžu apvienošana, lai sasniegtu to pašu efektu, lietotājam var tikt nosūtīts mazāk koda. Nepareizu operatoru izmantošana var izraisīt nevēlamu uzvedību, jo dažādi operatori atšķirīgi rīkojas ar novērojamajiem.

    8) Slinka slodze

    Ja iespējams, mēģiniet slinki ielādēt moduļus savā leņķiskajā lietojumprogrammā. Slinka iekraušana ir tad, kad kaut kas tiek ielādēts tikai tad, kad tas tiek izmantots, piemēram, komponenta ielāde tikai tad, kad tas ir redzams.

    Kāpēc?

    Tas samazinās ielādējamās lietojumprogrammas lielumu un var uzlabot lietojumprogrammas sāknēšanas laiku, nelādējot neizmantotos moduļus.

    Iepriekš

    // app.routing.ts
    {ceļš: “nav slinki ielādēts”, komponents: NotLazyLoadedComponent}

    Pēc

    // app.routing.ts
    {
      ceļš: “slinka slodze”,
      loadChildren: 'lazy-load.module # LazyLoadModule'
    }
    // slinks-load.module.ts
    importēt {NgModule} no '@ leņķa / serdes';
    importēt {CommonModule} no '@ angular / common';
    importēt {RouterModule} no '@ leņķa / maršrutētāja';
    importēt {LazyLoadComponent} no './lazy-load.component';
    @NgModule ({
      imports: [
        CommonModule,
        RouterModule.forChild ([
             {
                 ceļš: '',
                 komponents: LazyLoadComponent
             }
        ])
      ],
      deklarācijas: [
        LazyLoadComponent
      ]
    })
    eksporta klase LazyModule {}

    9) Izvairieties no abonēšanas abonementos

    Dažreiz darbības veikšanai var būt vajadzīgas vērtības no vairāk nekā viena novērojama. Šādā gadījumā izvairieties abonēt vienu novērojamo cita novērojamā abonēšanas blokā. Tā vietā izmantojiet atbilstošus ķēdes operatorus. Ķēdes operatori darbojas pēc operatora novērojumiem, kas atrodas pirms viņiem. Daži ķēžu operatori ir šādi: withLatestFrom, combLatest utt.

    Iepriekš

    firstObservable $ .pipe (
       ņem (1)
    )
    .subscribe (firstValue => {
        secondObservable $ .pipe (
            ņem (1)
        )
        .subscribe (secondValue => {
            console.log (`Kombinētās vērtības ir: $ {firstValue} un $ {secondValue}`);
        });
    });

    Pēc

    firstObservable $ .pipe (
        withLatestFrom (secondObservable $),
        pirmais ()
    )
    .subscribe (([firstValue, secondValue]) => {
        console.log (`Kombinētās vērtības ir: $ {firstValue} un $ {secondValue}`);
    });

    Kāpēc?

    Koda smarža / lasāmība / sarežģītība: Pilnībā neizmantojot RxJ, tiek domāts, ka izstrādātājs nav pazīstams ar RxJs API virsmas laukumu.

    Izrāde: ja novērojamie elementi ir auksti, tas abonē firstObservable, pagaidiet, līdz tas tiks pabeigts, TAD sāksiet otrā novērojamā darbu. Ja tie būtu tīkla pieprasījumi, tas parādītos kā sinhrons / ūdenskritums.

    10) izvairieties no jebkādas; ierakstiet visu;

    Vienmēr deklarējiet mainīgos vai konstantes, izmantojot citu tipu.

    Kāpēc?

    Deklarējot mainīgos vai konstantes mašīnrakstā bez mašīnrakstīšanas, mainīgā / konstantes ierakstīšana tiks atskaitīta pēc vērtības, kas tai piešķirta. Tas radīs neparedzētas problēmas. Viens klasisks piemērs ir:

    const x = 1;
    const y = 'a';
    const z = x + y;
    console.log (`Z vērtība ir: $ {z} '
    // Izeja
    Z vērtība ir 1a

    Tas var radīt nevēlamas problēmas, ja jūs domājat, ka y ir arī skaitlis. Šīs problēmas var novērst, attiecīgi ierakstot mainīgos lielumus.

    const x: skaitlis = 1;
    const y: skaitlis = 'a';
    const z: skaitlis = x + y;
    // Tas radīs kompilācijas kļūdu, sakot:
    Tips '' a '' nav piešķirams tipam 'number'.
    const y: skaitlis

    Tādā veidā mēs varam izvairīties no kļūdām, ko rada trūkstošie veidi.

    Vēl viena priekšrocība, ka jūsu lietojumprogrammā ir labi raksti, ir tāda, ka tā atvieglo reakciju un ir drošāka.

    Apsveriet šo piemēru:

    public ngOnInit (): spēkā neesošs {
        let myFlashObject = {
            nosaukums: “Mans foršais vārds”,
            vecums: “mans foršais vecums”,
            loc: 'Mana lieliskā vieta'
        }
        this.processObject (myFlashObject);
    }
    publisks processObject (myObject: jebkurš): spēkā neesošs {
        console.log (`Vārds: $ {myObject.name}`);
        console.log (`Vecums: $ {myObject.age}`);
        console.log (`Atrašanās vieta: $ {myObject.loc}`);
    }
    // Izeja
    Vārds: Mans foršais vārds
    Vecums: mans foršais vecums
    Atrašanās vieta: mana foršā vieta

    Teiksim tā, mēs vēlamies īpašumu loc pārdēvēt par atrašanās vietu vietnē myFlashObject:

    public ngOnInit (): spēkā neesošs {
        let myFlashObject = {
            nosaukums: “Mans foršais vārds”,
            vecums: “mans foršais vecums”,
            atrašanās vieta: 'Mana lieliskā vieta'
        }
        this.processObject (myFlashObject);
    }
    publisks processObject (myObject: jebkurš): spēkā neesošs {
        console.log (`Vārds: $ {myObject.name}`);
        console.log (`Vecums: $ {myObject.age}`);
        console.log (`Atrašanās vieta: $ {myObject.loc}`);
    }
    // Izeja
    Vārds: Mans foršais vārds
    Vecums: mans foršais vecums
    Atrašanās vieta: nav noteikts

    Ja mums nav mašīnrakstīšanas vietnē myFlashObject, tā domā, ka mana vietne myFlashObject ir vienkārši nenoteikta, nevis ka tā nav derīga.

    Ja mums būtu mašīnrakstīšana myFlashObject, mēs iegūtu jauku kompilēšanas laika kļūdu, kā parādīts zemāk:

    ierakstiet FlashObject = {
        nosaukums: virkne,
        vecums: stīgas,
        atrašanās vieta: virkne
    }
    public ngOnInit (): spēkā neesošs {
        let myFlashObject: FlashObject = {
            nosaukums: “Mans foršais vārds”,
            vecums: “mans foršais vecums”,
            // Kompilācijas kļūda
            Ierakstiet “{name: string; vecums: virkne; loc: virkne; } ”nevar piešķirt tipam“ FlashObjectType ”.
            Objekta burtiski var norādīt tikai zināmās īpašības, un “loc” nepastāv tipā “FlashObjectType”.
            loc: 'Mana lieliskā vieta'
        }
        this.processObject (myFlashObject);
    }
    public processObject (myObject: FlashObject): void {
        console.log (`Vārds: $ {myObject.name}`);
        console.log (`Vecums: $ {myObject.age}`)
        // Kompilācijas kļūda
        Īpašums “loc” nepastāv tipam “FlashObjectType”.
        console.log (`Atrašanās vieta: $ {myObject.loc}`);
    }

    Ja sākat jaunu projektu, ir vērts failā tsconfig.json iestatīt stingru: true, lai iespējotu visas stingras tipa pārbaudes iespējas.

    11) Izmantojiet savārstīšanas noteikumus

    tslint ir jau iebūvētas dažādas iespējas, piemēram, nekādu, maģisku numuru, bez konsoles utt., kuras varat konfigurēt savā tslint.json, lai ieviestu noteiktus noteikumus jūsu kodu bāzē.

    Kāpēc?

    Ja savā starpā darbojas savārstīšanas noteikumi, tas nozīmē, ka jūs darīsit jauku kļūdu, kad darīsit kaut ko tādu, kā jums nevajadzētu būt. Tas nodrošinās jūsu pieteikuma konsekvenci un lasāmību. Lūdzu, skatiet šeit citus noteikumus, kurus varat konfigurēt.

    Dažiem savārstīšanas noteikumiem ir pat labojumi, lai novērstu savārstīšanas kļūdu. Ja vēlaties konfigurēt pats savu pielāgoto savārstīšanas noteikumu, to var izdarīt arī jūs. Lūdzu, skatiet šo Kreiga Spences rakstu par to, kā, izmantojot TSQuery, uzrakstīt savus pielāgotos savārstīšanas noteikumus.

    Iepriekš

    public ngOnInit (): spēkā neesošs {
        console.log ('Es esmu nerātns konsoles žurnāla ziņojums');
        console.warn ('Es esmu nerātns konsoles brīdinājuma ziņojums');
        console.error ('Es esmu nerātns konsoles kļūdas ziņojums');
    }
    // Izeja
    Bez kļūdām, konsoles logā tiek izdrukāts zemāk:
    Es esmu nerātns konsoles vēstījums
    Es esmu nerātns konsoles brīdinājuma ziņojums
    Es esmu nerātns konsoles kļūdas ziņojums

    Pēc

    // tslint.json
    {
        "noteikumi": {
            .......
            "bez konsoles": [
                 patiess,
                 "log", // nav atļauts console.log
                 "brīdināt" // nav atļauta konsole. brīdinājums
            ]
       }
    }
    // .komponents.ts
    public ngOnInit (): spēkā neesošs {
        console.log ('Es esmu nerātns konsoles žurnāla ziņojums');
        console.warn ('Es esmu nerātns konsoles brīdinājuma ziņojums');
        console.error ('Es esmu nerātns konsoles kļūdas ziņojums');
    }
    // Izeja
    Iekļāvumu kļūdas console.log un console.warn paziņojumos un kļūdas console.error kļūdas, jo tas nav minēts konfigurācijā
    Zvani uz “console.log” nav atļauti.
    Zvani uz “console.warn” nav atļauti.

    12) Mazi atkārtoti lietojami komponenti

    Izņemiet gabalus, kurus var atkārtoti izmantot komponentā, un padariet to par jaunu. Padariet komponentu pēc iespējas dumjāku, jo tas liks tam darboties vairākos scenārijos. Padarīt komponentu par mēmu, tas nozīmē, ka komponentam nav īpašas loģikas un tas darbojas, pamatojoties tikai uz tam piegādātajām ieejām un izejām.

    Parasti pēdējais komponenta kokā esošais bērns būs dumjākais no visiem.

    Kāpēc?

    Atkārtoti lietojami komponenti samazina koda dublēšanos, tāpēc ir vieglāk uzturēt un veikt izmaiņas.

    Mēmās sastāvdaļas ir vienkāršākas, tāpēc tām ir mazāka iespējamība, ka būs kļūdas. Neprātīgie komponenti liek aizdomāties par publisko komponentu API un palīdz izskaidrot dažādas problēmas.

    13) Komponentiem vajadzētu attiekties tikai uz displeja loģiku

    Kad vien iespējams, izvairieties no citas loģikas, izņemot displeja loģiku, un liekiet komponentam rīkoties tikai ar displeja loģiku.

    Kāpēc?

    Komponenti ir izstrādāti prezentācijas vajadzībām un kontrolē to, kas skatam būtu jādara. Jebkura biznesa loģika vajadzības gadījumā jāiegūst savās metodēs / pakalpojumos, nodalot biznesa loģiku no skata loģikas.

    Biznesa loģiku parasti ir vieglāk pārbaudīt vienībā, kad to iegūst pakalpojumam, un to var atkārtoti izmantot ar citiem komponentiem, kuriem nepieciešama tāda pati biznesa loģika.

    14) Izvairieties no garām metodēm

    Garās metodes parasti norāda, ka viņi dara pārāk daudz lietu. Mēģiniet izmantot vienas atbildības principu. Pati metode kopumā var darīt vienu lietu, bet tās iekšpusē ir vēl dažas citas darbības, kas varētu notikt. Mēs varam iegūt šīs metodes savā metodē un likt tām izdarīt vienu lietu katrā un izmantot tās vietā.

    Kāpēc?

    Garās metodes ir grūti lasīt, saprast un uzturēt. Viņiem ir arī nosliece uz kļūdām, jo ​​vienas lietas maiņa var ietekmēt daudzas citas šīs metodes lietas. Viņi arī apgrūtina reaktora darbību (kas ir galvenā lieta jebkurā lietojumprogrammā).

    To dažreiz mēra kā “ciklomatisko sarežģītību”. Ir arī daži TSLint noteikumi ciklomatiskās / izziņas sarežģītības noteikšanai, kurus jūs varētu izmantot savā projektā, lai izvairītos no kļūdām un noteiktu kodu smakas un uzturēšanas problēmas.

    15) SAUSS

    Neatkārtojiet sevi. Pārliecinieties, ka jums nav tas pats kods, kas kopēts dažādās bāzes vietās. Izgūstiet atkārtojošo kodu un izmantojiet to atkārtotā koda vietā.

    Kāpēc?

    Tas pats kods vairākās vietās nozīmē, ka, ja mēs vēlamies mainīt šī koda loģiku, tas jādara vairākās vietās. Tas apgrūtina uzturēšanu un arī ir pakļauts kļūdām, kurās mēs varētu aizmirst tās atjaunināšanu visos gadījumos. Loģikas izmaiņu veikšana prasa ilgāku laiku, un arī tās pārbaude ir ilgstošs process.

    Tādos gadījumos izgūstiet atkārtojošo kodu un izmantojiet to vietā. Tas nozīmē tikai vienu vietu, kur mainīt, un vienu pārbaudāmu lietu. Ja lietotājiem būs nosūtīts mazāk kodu kopiju, tas nozīmē, ka lietojumprogramma būs ātrāka.

    16) Pievienojiet kešatmiņas saglabāšanas mehānismus

    Veicot API zvanus, dažu no viņiem atbildes bieži nemainās. Šādos gadījumos varat pievienot kešatmiņas saglabāšanas mehānismu un saglabāt vērtību no API. Kad tiek iesniegts vēl viens pieprasījums uz to pašu API, pārbaudiet, vai kešatmiņā ir kāda tā vērtība, un, ja jā, izmantojiet to. Pretējā gadījumā veiciet API zvanu un kešatmiņā saglabājiet rezultātu.

    Ja vērtības mainās, bet ne bieži, varat ieviest kešatmiņas laiku, kurā varat pārbaudīt, kad tas pēdējo reizi tika saglabāts kešatmiņā, un izlemt, vai izsaukt API.

    Kāpēc?

    Kešatmiņas saglabāšanas mehānisms nozīmē izvairīties no nevēlamiem API zvaniem. Veicot tikai API zvanus pēc nepieciešamības un izvairoties no dublēšanās, lietojumprogrammas ātrums uzlabojas, jo mums nav jāgaida tīkls. Tas arī nozīmē, ka mēs atkal un atkal neveicam vienas un tās pašas informācijas lejupielādi.

    17) Izvairieties no loģikas veidnēs

    Ja jūsu veidnēs ir kāda veida loģika, pat ja tā ir vienkārša && klauzula, ir labi to izpētīt savā komponentā.

    Kāpēc?

    Kam ir loģika veidnē, tas nozīmē, ka to nav iespējams testēt, tāpēc mainot veidnes kodu, ir lielāka nosliece uz kļūdām.

    Iepriekš

    // veidne
    

    Statuss: Izstrādātājs

    // komponents
    public ngOnInit (): spēkā neesošs {
        this.role = 'izstrādātājs';
    }

    Pēc

    // veidne
    

    Statuss: izstrādātājs

    // komponents
    public ngOnInit (): spēkā neesošs {
        this.role = 'izstrādātājs';
        this.showDeveloperStatus = taisnība;
    }

    18) Stīgām jābūt drošām

    Ja jums ir mainīga veida virkne, kurai var būt tikai vērtību kopa, tā vietā, lai to pasludinātu par virknes tipu, kā tipu varat deklarēt iespējamo vērtību sarakstu.

    Kāpēc?

    Atbilstoši deklarējot mainīgā veidu, mēs varam izvairīties no kļūdām, rakstot kodu kompilācijas laikā, nevis izpildlaika laikā.

    Iepriekš

    privātā myStringValue: virkne;
    if (itShouldHaveFirstValue) {
       myStringValue = 'Pirmais';
    } cits {
       myStringValue = 'Otrais'
    }

    Pēc

    privātā myStringValue: 'Pirmais' | 'Otrais';
    if (itShouldHaveFirstValue) {
       myStringValue = 'Pirmais';
    } cits {
       myStringValue = 'Cits'
    }
    // Tas parādīs zemāk esošo kļūdu
    Veids '' Cits '' nav piešķirams tipam '' Pirmais '' "Otrais" '
    (īpašums) AppComponent.myValue: "First" | "Otrais"

    Lielāka bilde

    Valsts vadība

    Apsveriet iespēju lietot @ ngrx / store, lai saglabātu savas lietojumprogrammas stāvokli, un @ ngrx / effects kā veikala blakusparādības modeli. Stāvokļa izmaiņas apraksta darbības, un izmaiņas tiek veiktas ar funkcijām, kuras sauc par reduktoriem.

    Kāpēc?

    @ ngrx / store izolē visu ar valsti saistīto loģiku vienuviet un padara to konsekventu visā lietojumprogrammā. Tam ir arī atmiņu veidošanas mehānisms, piekļūstot veikalā esošajai informācijai, kas noved pie veiksmīgākas lietojumprogrammas. @ ngrx / veikals apvienojumā ar leņķa izmaiņu noteikšanas stratēģiju noved pie ātrākas piemērošanas.

    Nemainīgs stāvoklis

    Izmantojot @ ngrx / store, apsveriet iespēju izmantot ngrx-store-freeze, lai stāvoklis būtu nemainīgs. ngrx-store-freeze novērš valsts mutāciju, izmetot izņēmumu. Tas ļauj izvairīties no nejaušas stāvokļa mutācijas, kas noved pie nevēlamām sekām.

    Kāpēc?

    Komponentu mutācijas stāvokļa dēļ lietotne rīkojas nekonsekventi atkarībā no pasūtījuma komponentu ielādēšanas. Tas sabojā redux modeļa garīgo modeli. Izmaiņas var tikt ignorētas, ja veikala stāvoklis mainās un tiek atkārtoti emitēts. Bažu nodalīšana - komponenti ir skata slānis, viņiem nevajadzētu zināt, kā mainīt stāvokli.

    Jest

    Jest ir Facebook vienības testēšanas sistēma JavaScript. Tas padara vienības testēšanu ātrāku, paralēli veicot testa braucienus pa kodu bāzi. Izmantojot savu skatīšanās režīmu, tiek veikti tikai testi, kas saistīti ar veiktajām izmaiņām, kas padara atsauksmes ciklu testēšanai īsāku. Jest nodrošina arī testu kodu pārklājumu un tiek atbalstīts VS Code un Webstorm.

    Iestatot Jest savā projektā, jūs varētu izmantot iestatījumu Jest, kas veiks lielāko daļu smago celšanu jums.

    Karma

    Karma ir testa skrējējs, kuru izstrādājusi AngularJS komanda. Pārbaužu veikšanai nepieciešams reāls pārlūks / DOM. To var darbināt arī dažādos pārlūkos. Pārbaužu veikšanai Jest nav nepieciešams hroms bez galvas / fantomiem, un tas darbojas tīrā mezglā.

    Universāls

    Ja savu lietotni vēl neesat padarījis par universālu lietotni, tagad ir piemērots laiks to darīt. Angular Universal ļauj jums darbināt savu leņķisko lietojumprogrammu serverī un veic servera puses renderēšanu (SSR), kas apkalpo statiskas iepriekš atveidotas html lapas. Tas padara lietotni īpaši ātru, jo tas gandrīz uzreiz parāda saturu uz ekrāna, negaidot, kamēr JS saiņi tiek ielādēti un parsēti, vai arī leņķiski, lai sāknētu.

    Tas ir arī SEO draudzīgs, jo Angular Universal ģenerē statisku saturu un ļauj tīmekļa rāpuļprogrammām indeksēt lietojumprogrammu un padarīt to meklējamu, neizpildot JavaScript.

    Kāpēc?

    Universal ievērojami uzlabo jūsu lietojumprogrammas veiktspēju. Nesen mēs atjauninājām savu lietojumprogrammu, lai veiktu servera puses renderēšanu, un vietnes ielādes laiks no vairākām sekundēm pieauga līdz desmitiem milisekundēm !!

    Tas arī ļauj jūsu vietnei pareizi parādīties sociālo mediju priekšskatījuma fragmentos. Pirmā jēgpilnā krāsa ir patiešām ātra un padara saturu lietotājiem redzamu bez nevēlamas kavēšanās.

    Secinājums

    Lietojumprogrammu veidošana ir pastāvīgs ceļojums, un vienmēr ir iespējas to uzlabot. Šis optimizācijas saraksts ir labs sākums, un, konsekventi piemērojot šos modeļus, jūsu komanda būs priecīga. Lietotāji arī mīlēs jūs par jauko pieredzi ar jūsu mazāk bugisko un izpildošo lietojumprogrammu.

    Paldies par lasīšanu! Ja jums patika šis raksts, lūdzu, nekautrējieties un palīdziet citiem to atrast. Lūdzu, nevilcinieties dalīties savās domās komentāru sadaļā zemāk. Sekojiet man Medium vai Twitter, lai iegūtu vairāk rakstu. Laimīgi kodēšanas ļaudis !! ️