Labākā leņķiskā prakse - 2017. gada augusta izdevums

(Šī ziņa ir pārsūtīta no https://fluin.io/blog/angular-best-practices-august-2017)

Vēl viens mēnesis, vēl viens labākās prakses kopsavilkums. Šomēnes mēs atgriezīsimies pie dažiem pamatiem par instrumentu veidošanu un IDE konfigurēšanu un dažiem reaktīvās programmēšanas principiem, kas palīdzēs jums nākotnē gūt panākumus.

1. labākā prakse: izmantojiet CLI

Mūsdienās leņķiskā CLI ir labākais veids, kā izveidot leņķa lietojumprogrammas. Daudzi izstrādātāji sāka strādāt ar Angular pirms CLI bija gatavs visam darbības laikam, taču CLI ir satriecošs lielākajai daļai izstrādātāju, jaunizveidoto un lielu uzņēmumu komandām.

Vai sākat jaunu projektu? Izveidojiet to ar CLI.

Vai strādājat pie esoša projekta? Izmantojot CLI, izveidojiet jaunu projektu un pēc tam pārvietojiet esošo kodu uz / src / app /.

npm instalēt -g @ leņķisko / cli
jauns mans projekts

CLI ir sastatņu (aka shēmas) rīki, lai izveidotu jaunus projektus un ģenerētu jums jaunu kodu, taču tie nav galvenais ieguvums. Galvenais CLI ieguvums ir veids, kā tas automatizē būvēšanas cauruļvadu gan tiešajai izstrādei ar ng serve, gan arī ražošanas kodam, kuru jūs nosūtīsit pārlūkprogrammām ar ng build -prod

build -prod vienmēr izmantos tik daudz labāko praksi, cik leņķiskā komanda spēj ieslēgties automātiski. Tas nozīmē, ka šī komanda laika gaitā kļūs jaudīgāka, izmantojot tādas funkcijas kā servisa darbinieki vai leņķa optimizētājs.

2. labākā prakse: instalējiet Jāņa Papa Vs koda paplašinājumu

Visual Studio kods ir satriecošs IDE leņķisko lietotņu veidošanai. Viens no lielākajiem labumiem, ko varat darīt pats, ir instalēt Jāņa Papa izstrādāto Essential Angular Extension Pack.

Tas padara darbu ar Angular Visual Studio Code labāku nekā jebkad.

Šajā paketē ir šādi satriecoši rīki:

  1. Leņķiskās valodas pakalpojums - nodrošina veidnes un leņķa apzināšanu aizpildīšanu un kļūdu pārbaudi saistībā ar jūsu pieteikumu
  2. EditorConfig - savieno VSCode konfigurāciju ar jūsu .editorconfig, kuru mēs automātiski ģenerējam jums kā daļu no jauna CLI projekta.
  3. Kronšteina pāru krāsotājs - tā vietā, lai izceltu parasto sintakse, šis paplašinājums krāso iekavas, iekavas un cirtainās bikšturi, pamatojoties uz to ligzdoto slāni. Ligzdošanas vizuālās norādes ir milzīga palīdzība, strādājot ar sarežģītu kodu.

3. labākā prakse: neparakstieties uz saviem komponentiem komponentos

Daudzi izstrādātāji, kas pirmo reizi strādā ar Observables, vēlas abonēt un saglabāt datus kaut kur lokāli.

Parasti tas ir pretrunīgs, jo liek jums izstrādātājam pārvaldīt komponentu un abonementu dzīves ciklu, nevis ļaut ietvariem to izdarīt jūsu vietā.

Labāks veids, kā to izdarīt, ir veidnēs izmantot async cauruli un ļaut, lai leņķiskais visu pārvalda jūsu vietā. Apskatīsim dažus koda kodus.

Nedariet to:

...
veidne: `
    {{localData | json}}
`)
eksporta klase MyComponent {
    localData;
    konstruktors (http: HttpClient) {
        http.get ('ceļš / uz / mans / api.json')
        .subscribe (dati => {
            this.localData = dati;
        });
    }
}

Tā vietā dariet to

...
veidne: `
    {{dati | asincis | json}}
`)
eksporta klase MyComponent {
    dati;
    konstruktors (http: HttpClient) {
        this.data = http.get ('ceļš / uz / mans / api.json');
    }
}

Saglabājot novērojamo un abonējot, izmantojot veidni, jūs izvairāties no atmiņas noplūdes, jo leņķis automātiski atcels abonementu no novērojamā, kad komponents tiks nojaukts. Tas var nešķist tik svarīgi HTTP, bet tas ir jauki vairāku iemeslu dēļ.

Async caurule atcels HTTP pieprasījumus, ja dati vairs nebūs nepieciešami, tā vietā, lai pabeigtu, apstrādātu un pēc tam neko nedarītu.

Async caurule beidzot nozīmē, ka mēs varam izveidot daudz izpildītākas lietojumprogrammas, pārslēdzot jūsu ChangeDetectionStrategy uz OnPush. Pārslēdzoties uz OnPush, daudzas jaunas un uzlabotas stratēģijas var izraisīt vajadzību pēc izmaiņu noteikšanas, kuras manuālais abonements automātiski neizraisīs.

Šeit ir daži progresīvāku novērojamo stratēģiju piemēri:

Async caurule nozīmē, ka vēlāk, ja jūs nomainīsit vienkāršu HTTP zvanu ar kaut ko sarežģītāku, piemēram, reāllaika datu kopu, piemēram, Firebase, jūsu veidnes kods nav jāmaina.

Manuāli abonējot, tiek zaudētas daudzas Novērotāju funkcijas / pilnvaras. Novērotājus var bagātināt ar tādu rīcību kā atkārtota mēģināšana, startWith (piemēram, kešatmiņas saglabāšana bezsaistē) vai atsvaidzināšana ar taimeri.

4. labākā prakse: neaizmirstiet par SEO un Analytics

Vietnes un lietojumprogrammas ir jaudīgas, jo meklētājprogrammas, piemēram, Google, var tās indeksēt un kopīgot jūsu saturu ar visu pasauli.

Analytics produkti var palīdzēt izprast lietotāju vajadzības un izturēšanos.

Lai iestatītu abus šos iestatījumus, iekļausim Google Analytics fragmentu mūsu index.html un nomainīsim izsekošanas kodu, noņemot sākotnējo lapas skatu, kuru tie pēc noklusējuma satur.


  (funkcija (i, s, o, g, r, a, m) {i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || funkcija () {
  (i [r] .q = i [r] .q || []). push (argumenti)}, i [r] .l = 1 * jauns datums (); a = s.createElement (o),
  m = s.getElementsByTagName (o) [0]; a.async = 1; a.src = g; m.parentNode.insertBefore (a, m)
  }) (logs, dokuments, 'skripts', 'https: //www.google-analytics.com/analytics.js','ga');
  ga ('izveidot', 'UA-00000000-0', 'auto');

Tagad turpināsim darbu un pievienosim notikumus mūsu app.module.ts.

Mēs vēlamies klausīties visus maršrutētāja notikumus, izdomāt, kad navigācijas notikums ir veiksmīgi beidzies (NavigationEnd), un atjaunināt lapas virsrakstu un nosūtīt analīzes notikumu.

Mēs izmantosim abonementu (ak, nē!), Taču šajā kontekstā tas ir pareizi, jo mums būs tieši viens abonements, un mēs vēlamies, lai tas dzīvotu un darbotos visu mūsu lietojumprogrammas darbības laiku pārlūkā.

SEO jomā mēs lasīsim lapas virsrakstu no dažiem papildu datiem, ko iekļaujam maršruta konfigurācijā.

app.module.ts

pasludināt var ga;
...
RouterModule.forRoot ([
    ...
    {ceļš: 'bio', sastāvdaļa: Bio, dati: {nosaukums: 'About'}},
    {ceļš: 'projekti', sastāvdaļa: projekti, dati: {nosaukums: 'projekti'}},
])
...
konstruktors (maršrutētājs: maršrutētājs, aktivizēts maršruts: aktivizēts maršruts, nosaukums: nosaukums) {
    router.events.filter (e => e NaviofEnd piemērs) .subscribe ((event) => {
        let pageTitle = router.routerState.snapshot.root.children [0] .data ['title'];
        if (pageTitle) {
            title.setTitle (pageTitle);
        } cits, ja (pageTitle! == nepatiess) {
            title.setTitle ('Mans noklusējuma nosaukums');
        }
        ga ('sūtīt', 'lapas skatījums', event.urlAfterRedirects);
    });
}