Immagine di Aphinya Dechalert. Intitolato: Red Monster impara Angular

19 cose che devi imparare per diventare un efficace sviluppatore angolare

Una guida completa su come diventare un professionista di Angular

Un'app todo è l'equivalente di un'applicazione "Hello world" per lo sviluppo front-end. Mentre copre l'aspetto CRUD della creazione di un'app, spesso graffia solo la superficie di ciò che può fare un framework o una libreria.

L'angolare sembra cambiare e aggiornarsi sempre, ma in realtà ci sono alcune cose che rimangono le stesse. Ecco una carrellata dei concetti chiave che devi imparare quando si tratta di Angular per sfruttare correttamente il framework JavaScript.

C'è molto da imparare quando si tratta di Angular e molti di noi rimangono bloccati nella cerchia dei principianti semplicemente perché non sappiamo dove andare o cosa cercare. Questa è una guida completa (e un breve riassunto di Angular stesso) che avrei voluto avere quando ho iniziato con Angular 2+.

1. Architettura angolare modulare

In teoria, puoi mettere tutto il tuo codice angolare su una pagina e in un'unica funzione enorme, ma non è raccomandato, né è un modo efficiente per strutturare il codice e sconfiggere lo scopo dell'esistenza di Angular.

Angular usa fortemente il concetto di moduli come parte dell'architettura del framework. Questo è in riferimento alla raccolta di codice che ha un unico motivo per esistere. La tua app Angular è essenzialmente composta da moduli: alcuni autonomi e altri condivisi.

Esistono diversi modi per strutturare i moduli all'interno dell'applicazione e scavare nelle diverse strutture architettoniche può anche aiutare a determinare come scalare l'app man mano che cresce. Può anche aiutare a isolare il codice e impedire che si verifichi l'accoppiamento del codice.

Cosa per Google:

  • Modelli di architettura angolare
  • Architettura applicativa angolare scalabile

La mia opinione sull'argomento:

  • Che cosa significa architettura modulare in angolare?

2. Flusso di dati unidirezionale e immutabilità

Nel lontano Angular 1, la rilegatura bidirezionale ha catturato i cuori di molti sviluppatori front-end. Era essenzialmente uno dei punti vendita originali di Angular. Tuttavia, nel tempo ha iniziato a porre problemi in termini di prestazioni quando l'applicazione ha iniziato a diventare più complessa.

Si scopre che in realtà non è necessaria la rilegatura bidirezionale ovunque.

Il legame bidirezionale è ancora possibile in Angular 2+, ma solo quando è esplicitamente richiesto dallo sviluppatore, costringendo così la persona dietro il codice a pensare alla direzione e al flusso dei propri dati. Consente inoltre all'applicazione di diventare più flessibile con i dati determinando come i dati dovrebbero fluire.

Cosa per Google:

  • Best practice per il flusso di dati angolare,
  • Flusso unidirezionale in angolare,
  • Vantaggi dell'associazione unidirezionale

La mia opinione sull'argomento:

  • La storia del flusso di dati unidirezionale in angolare

3. Attributi e direttive strutturali

Una direttiva è un'estensione dell'HTML attraverso elementi personalizzati. Le direttive di attributo ti consentono di modificare le proprietà di un elemento. Le direttive strutturali modificano il layout aggiungendo o rimuovendo elementi dal DOM.

Ad esempio, ngSwitch e ngIf sono direttive strutturali perché valuta i parametri e determina se parti del DOM devono esistere o meno.

Le direttive di attributo sono comportamenti personalizzati associati all'elemento, al componente o ad altre direttive.

Imparare a utilizzare queste due direttive può estendere le capacità della tua app e ridurre la quantità di codice duplicato nel tuo progetto. Le direttive sugli attributi possono anche aiutare a centralizzare determinati comportamenti utilizzati in diverse parti dell'app.

Cosa per Google:

  • Direttive sugli attributi angolari,
  • Direttive strutturali angolari
  • Schemi direttivi strutturali angolari

4. Ganci del ciclo di vita dei componenti

Ogni pezzo di software ha il suo ciclo di vita che determina come viene creato, reso e quindi rimosso qualcosa. Angular ha un ciclo di vita componente che va in questo modo:

crea → render → render children → controlla quando cambiano le proprietà associate ai dati → distruggere → rimuovi da DOM

Abbiamo la capacità di agganciare i momenti chiave all'interno di questo ciclo e indirizzarlo in momenti specifici nel tempo o nell'evento. Questo ci consente di creare risposte appropriate e configurare comportamenti in base alle diverse fasi dell'esistenza del componente.

Ad esempio, potrebbe essere necessario caricare alcuni dati prima che la pagina venga renderizzata. Puoi farlo tramite ngOnInit (). O forse è necessario disconnettersi da un database. Questo può essere fatto tramite ngOnDestroy ().

Cosa per Google:

  • Ganci angolari per ciclo di vita
  • Ciclo di vita dei componenti

5. Servizi http e osservabili

Questa non è davvero una caratteristica specifica angolare ma piuttosto qualcosa da ES7. Angular è appena capitato di implementarlo come parte delle capacità di supporto del framework e capire che ciò si traduce anche in React, Vue e qualsiasi libreria o framework JavaScript.

I servizi osservabili sono schemi che consentono di gestire efficacemente i dati, consentendo di analizzare, modificare e conservare i dati in un sistema basato su eventi. Non puoi davvero sfuggire a Http e Observables perché tutto è dato.

Cosa per Google:

  • Pattern osservabili JavaScript
  • HTTP angolare e osservabili
  • Funzionalità osservabile ES7

6. Architettura dei componenti Smart / Dumb

Quando scriviamo le nostre app Angular, tendiamo a mettere tutto nel componente. Tuttavia, questa non è esattamente la migliore pratica. L'idea di componenti intelligenti / stupidi in Angular è qualcosa di cui bisogna parlare di più, specialmente nei circoli per principianti.

Se un componente è intelligente / stupido determina il suo ruolo nel grande schema dell'applicazione. I componenti stupidi sono spesso apolidi con comportamenti facili da prevedere e comprendere. Rendi il tuo componente stupido quando possibile.

I componenti intelligenti sono più difficili da comprendere perché sono coinvolti input e output. Per sfruttare correttamente le capacità di Angular, esamina l'architettura dei componenti smart / muti. Ti fornirà schemi e mentalità su come affrontare il tuo codice e le sue relazioni reciproche.

Cosa per Google:

  • Componenti angolari intelligenti / muti
  • Componenti stupidi apolidi
  • Componenti di presentazione
  • Componenti intelligenti in angolare

7. Struttura dell'applicazione e migliori pratiche

La CLI può portarti così lontano solo quando si tratta di struttura e buone pratiche. Costruire un'app angolare (o qualsiasi altra applicazione in generale) è come costruire una casa. Esistono processi impostati che sono stati ottimizzati dalla community nel corso degli anni e che si tradurranno in un'applicazione più efficace ed efficiente.

Angolare non fa eccezione.

La maggior parte delle lamentele nei confronti di Angular da parte di coloro che cercano di apprenderlo è spesso dovuta alla mancanza di conoscenze strutturali; la sintassi è facile da rilevare ed è definita e chiara. La conoscenza strutturale dell'applicazione, tuttavia, richiede una comprensione del contesto, dei requisiti e di come tutto si combina a livello concettuale e pratico. Imparare le diverse potenziali strutture applicative per Angular e le loro migliori pratiche ti darà una prospettiva su come costruire la tua applicazione.

Cosa per Google:

  • App angolari con repository singolo
  • Librerie angolari, pacchetti angolari
  • Fasci angolari
  • Microapp angolari
  • Monorepo

8. Sintassi di associazione del modello

Il bind è la ciliegina sul framework JavaScript. È anche uno dei motivi per esistere in primo luogo. L'associazione dei modelli collega lo spazio tra HTML statico e JavaScript. La sintassi di associazione del modello di Angular funge da facilitatore tra queste due tecnologie.

Una volta che hai imparato come e quando usarli, trasformare una pagina una volta statica in qualcosa di interattivo diventa molto più facile e meno fastidioso. Esaminare i diversi scenari per l'associazione come l'associazione di proprietà, eventi, interpolazione e associazione a due vie.

Cosa per Google:

  • Rilegatura della proprietà angolare
  • Associazione di eventi angolari
  • Rilegatura angolare bidirezionale, interpolazione angolare
  • Costanti di passaggio angolari

9. Moduli funzionali e routing

I moduli funzione sono sottovalutati quando si tratta di Angular. In realtà è un modo davvero fantastico per organizzare e definire i gruppi di requisiti aziendali. Limita le responsabilità e aiuta a prevenire l'inquinamento da codice a lungo termine.

Esistono cinque tipi di moduli funzione (dominio, instradato, instradamento, servizio e widget) e ciascuno gestisce un determinato tipo di funzionalità. Imparare a usare i moduli funzione insieme al routing può aiutare a creare serie discrete di funzionalità e applicare una buona e chiara separazione dei problemi per la tua applicazione.

Cosa per Google:

  • Moduli angolari
  • Strutture di funzionalità condivise in angolare
  • Fornitori di moduli di funzionalità
  • Caricamento lento con routing e moduli funzione

10. Forme e convalida (forme reattive e validatori)

I moduli sono una parte inevitabile di qualsiasi sviluppo front-end.

E con i moduli arriva la convalida.

Esistono diversi modi per costruire moduli intelligenti basati sui dati quando si tratta di Angular. L'iterazione più popolare delle forme sono le forme reattive. Tuttavia, ci sono altre opzioni là fuori, vale a dire validatori basati su template e personalizzati.

Imparare come funzionano i validatori insieme ai CSS ti aiuterà ad accelerare il tuo flusso di lavoro e trasformare la tua applicazione in uno spazio pronto per la gestione degli errori.

Cosa per Google:

  • Convalida della forma angolare
  • Convalida guidata dal modello
  • Convalida della forma reattiva
  • Sincronizza e sincronizza i validatori in Angolare
  • Validatori integrati
  • Validatori personalizzati angolari
  • Convalida cross-field

11. Proiezione del contenuto

Angular ha una cosa chiamata proiezione del contenuto, che è la capacità di passare i dati dai componenti padre a figlio in modo efficace. Anche se può sembrare complicato, in realtà è l'atto di mettere le viste nelle viste per generare una vista principale.

Spesso comprendiamo la proiezione dei contenuti a livello di superficie, quando nidifichiamo le visualizzazioni figlio all'interno di una vista padre. Tuttavia, per espandere la nostra comprensione, dobbiamo anche capire come vengono trasmessi i dati tra diverse visualizzazioni. Qui è utile comprendere la proiezione dei contenuti.

La comprensione della proiezione dei contenuti può aiutarti a determinare il flusso dei dati della tua applicazione e dove si verifica la sua mutabilità.

Cosa per Google:

  • Proiezione del contenuto angolare
  • Relazione angolare vista genitore-figlio
  • Rapporti dati vista angolare

12. Rilevamento modifiche onPush

Per impostazione predefinita, Angular utilizza una strategia di rilevamento delle modifiche predefinita. Ciò significa che i componenti verranno sempre controllati. Sebbene non ci sia nulla di sbagliato nell'utilizzo del valore predefinito, può essere un modo inefficiente per rilevare il cambiamento.

Per piccole applicazioni, la velocità e le prestazioni vanno bene. Tuttavia, una volta che l'applicazione raggiunge una certa dimensione, le cose possono diventare piuttosto ingombranti da eseguire, specialmente nei browser più vecchi.

La strategia di rilevamento delle modifiche di onPush velocizzerà notevolmente l'applicazione in quanto dipende dal verificarsi di specifici trigger anziché da un controllo costante per vedere se è successo qualcosa.

Cosa per Google:

  • Rilevamento del cambio angolare onPush

13. Protezioni del percorso, precarichi, caricamento lento

Se disponi di un accesso di qualche tipo, avrai bisogno di protezioni del percorso. L'idea che è possibile proteggere determinate viste da viste non autorizzate è un requisito indispensabile in molte applicazioni. Le protezioni del percorso fungono da interfaccia tra il router e il percorso richiesto. È il decisore che determina se è consentito l'accesso a un determinato percorso. C'è molto da esplorare nel mondo delle guardie di rotta - vale a dire le decisioni di instradamento basate su elementi quali la scadenza del token, l'autenticazione dei ruoli utente e i titoli delle rotte.

I pre-caricamenti e il caricamento lento possono anche migliorare l'esperienza dell'utente accelerando il tempo di caricamento dell'applicazione. È anche utile notare che i pre-caricamenti e il caricamento lento sono più che una semplice decisione se caricare o meno un determinato set di immagini. Può anche migliorare le architetture raggruppate e caricare diverse parti dell'applicazione che possono esistere su ambiti e domini diversi.

Cosa per Google:

  • Protezioni angolari del percorso,
  • Modelli di autenticazione angolare
  • Precarico angolare e moduli a caricamento lento
  • Percorsi angolari sicuri

14. Tubi personalizzati

La formattazione dei dati non è mai stata così semplice con i tubi angolari. Sebbene molte delle pipe preconfigurate e out the box coprano molte cose come date, valuta, percentuali e case dei personaggi, non copre tutto ciò di cui avrete mai bisogno.

È qui che le pipe personalizzate sono utili. È possibile creare facilmente i propri filtri e trasformare i formati di dati a proprio piacimento. È davvero facile da fare, quindi vai e dai un'occhiata.

Cosa per Google:

  • Tubi personalizzati angolari

15. Decoratori @viewChild e @ContentChild

viewChild e contentChild sono modi in cui il componente può dialogare. Il punto di Angular è che hai più componenti che vengono compilati insieme come un puzzle, ma quel puzzle non può davvero fare molto se i pezzi sono isolati l'uno dall'altro.

È qui che entra in gioco ViewChild e contentChild. Imparare a usare questi due decoratori ti dà la possibilità di accedere ai componenti correlati. Ciò semplifica l'attività di condivisione dei dati e il trasferimento di dati ed eventi attivati ​​dai componenti associati.

Cosa per Google:

  • Decoratori angolari
  • viewchild e contentchild in Angular
  • Condivisione dei dati dei componenti angolari

16. Componenti dinamici e ng-template

I componenti sono i mattoni di Angular. Tuttavia, non tutti i componenti sono fissi e devono essere creati al volo piuttosto che precompilati in anticipo.

I componenti dinamici consentono all'app di creare al volo determinati componenti. I componenti statici presumono che le cose non cambieranno. È prevedibile con input e output previsti.

I componenti dinamici, tuttavia, vengono resi in base alle necessità. Sono abbastanza utili quando si costruisce un'app che potrebbe ascoltare fonti esterne e i loro aggiornamenti o sono reazioni alle azioni che si sono verificate sulla pagina.

Cosa per Google:

  • Componenti dinamici in angolare
  • Componenti dinamici e modelli

17. @Host @Hostbinding ed exportAs

@Host, @Hostbinding ed exportAs sono decoratori di direttive angolari che estendono i parametri a cui è collegato. Ti dà anche la possibilità di creare modelli concisi da esportare per il consumo all'interno dell'applicazione.

Se quanto sopra sembra confuso, dovresti iniziare a cercare le direttive angolari e il loro scopo di esistere. @Host, @Hostbinding ed exportAs sono caratteristiche delle direttive che aiutano a renderlo quello che è.

Cosa per Google:

  • Schemi di direttive angolari,
  • @Host, @Hostbinding ed exportAs in Angular

18. Gestione dello stato con RxJs

Lo stato dell'applicazione determina in definitiva i dati visualizzati per l'utente. Se il tuo stato è un disastro di spaghetti, è probabile che l'intera struttura dei dati diventerà traballante e si sgretolerà contro eventuali cambiamenti.

Quando inizi a capire come funzionano gli stati in angolare, capirai come e perché i tuoi dati si comportano così come sono.

Mentre Angular ha un proprio sistema di gestione dello stato, RxJs è un metodo fantastico per centralizzare gli stati e i dati ad essi associati. I dati possono andare persi nella catena delle relazioni genitore-figlio. RxJs disaccoppia questo creando un negozio centralizzato.

Cosa per Google:

  • RxJ angolari
  • Principi Flux / Redux
  • Principi di gestione dello stato angolare

19. Iniezione di dipendenza e zone

L'iniezione di dipendenza è un concetto enorme in generale, quindi se non sei troppo esperto nell'idea, questa è una delle cose che devi davvero cercare. Esistono diversi modi per creare in modo pulito iniezioni di dipendenza all'interno di Angular, principalmente ottenute tramite il costruttore. È un modo per importare solo le cose di cui hai bisogno e quindi aumentare l'efficienza della tua applicazione piuttosto che caricare tutto sotto il sole.

Come l'iniezione di dipendenza, anche le zone sono un'idea che non è esclusiva di Angular. È un modo per l'applicazione di rilevare attività asincrone dall'inizio alla fine. Questo è importante perché queste attività asincrone hanno il potere di alterare gli stati interni dell'applicazione e quindi la vista. Le zone facilitano il processo di rilevamento delle modifiche.

Cosa per Google:

  • Zone angolari
  • Iniezioni di dipendenza
  • DI angolare

Parole finali

L'angolare è un argomento enorme. Mentre la creazione di app angolari può aiutare il processo di apprendimento, a volte non sai cosa non sai. È difficile conoscere l'ignoto quando inizi e, si spera, questa breve guida ti ha dato un po 'di illuminazione oltre ai soliti tutorial angolari, insieme a uno sguardo più ampio e completo su Angular in generale.

Resta connesso e unisciti alla mia fantastica lista di newsletter per il web digest. Grazie per aver letto. ❤

Aphinya