Quali sono le differenze pratiche tra forme basate su template e forme reattive?

Ho letto della nuova API per i moduli di Angular2 e sembra che ci siano due approcci sui moduli, uno è quello basato sui modelli, l'altro è reattivo o basato sui modelli.

Vorrei sapere la differenza pratica tra i due, non la differenza di sintassi (ovviamente) ma gli usi pratici e quale approccio beneficia maggiormente in diversi scenari. Inoltre, c'è un guadagno in termini di prestazioni nella scelta dell'uno? E se sì, perché?

Caratteristiche dei moduli guidati da modelli

• Facile da usare
• Adatto a scenari semplici e fallisce per scenari complessi
• Simile a AngularJS
• Associazione dati bidirezionale (usando la [(NgModel)]sintassi)
• Codice componente minimo
• Traccia automatica del modulo e dei suoi dati (gestita da Angular)
• Il test unitario è un'altra sfida

Caratteristiche delle forme reattive

• Più flessibile, ma richiede molta pratica
• Gestisce scenari complessi
• Non viene eseguito l'associazione dei dati (modello di dati immutabili preferito dalla maggior parte degli sviluppatori)
• Più codice componente e meno markup HTML
• Trasformazioni reattive possono essere rese possibili come
  • Gestire un evento basato su un tempo di rimbalzo
  • Gestione degli eventi quando i componenti sono distinti fino alla modifica
  • Aggiunta di elementi in modo dinamico
• Test unitario più semplice

Penso che sia una discussione su codice , strategia ed esperienza dell'utente .

In breve, cambiamo per un approccio basato su template, che è più facile lavorare con esso, reattivo (in un approccio basato su model) per darci un maggiore controllo , che si traduce in una migliore forma testabile sfruttando un disaccoppiamento tra HTML (design / Il team CSS può lavorare qui) e le regole aziendali del componente (membri specialisti angolari / js) e migliorare l'esperienza dell'utente con funzionalità come trasformazioni reattive, convalide correlate e gestire scenari complessi come regole di convalida del runtime e duplicazione di campi dinamici.

Questo articolo è un buon riferimento a riguardo: Angular 2 Forms - Template Driven e Model Driven Approaches

Ecco il riassunto del confronto tra forme guidate da modelli e forme reattive spiegato da DeborahK (Deborah Kurata) bene,

Forme reattive:

• riutilizzabile,
• più robusto,
• verificabili,
• più scalabile

Moduli basati su modelli:

• facile da aggiungere,
• meno scalabile,
• requisiti del modulo di base

In sintesi , se i moduli sono molto importanti per la tua app o se nella tua app vengono utilizzati pattern reattivi, dovresti utilizzare i moduli reattivi. Altrimenti la tua app ha requisiti di base e semplici per moduli come l'accesso, è necessario utilizzare moduli basati su template .

C'è un legame ufficiale angolare

Il modo più semplice per conoscere la differenza tra forme reattive e forme guidate da modelli

posso dire che se vuoi un maggiore controllo e scalabilità vai con le forme reattive

Moduli guidati da modelli:

importato utilizzando FormsModule

I moduli creati con la direttiva ngModel possono essere testati solo in un test end-to-end poiché ciò richiede la presenza di un DOM

Il valore del modulo sarebbe disponibile in due posizioni diverse: il modello di visualizzazione, ad esempio ngModel

Convalida del modulo, poiché aggiungiamo sempre più tag validatore a un campo o quando iniziamo ad aggiungere complesse convalide tra campi la leggibilità del modulo diminuisce

Forme reattive:

Può generalmente essere utilizzato per applicazioni su larga scala

la complessa logica di validazione è in realtà più semplice da implementare

importato utilizzando ReactiveFormsModule

Il valore del modulo sarebbe disponibile in due posizioni diverse: il modello di visualizzazione e il FormGroup

Test di facile unità: possiamo farlo semplicemente istanziando la classe, impostando alcuni valori nei controlli del modulo ed eseguendo asserzioni sullo stato valido globale del modulo e sullo stato di validità di ciascun controllo.

Uso di osservabili per la programmazione reattiva

Ad esempio: un campo password e un campo di conferma password devono essere identici

Modo reattivo: dobbiamo solo scrivere una funzione e collegarla a FormControl

Template-Driven Way: dobbiamo definire una direttiva e in qualche modo passarle il valore dei due campi

https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/