Perché il collegamento bidirezionale in AngularJS è un antipattern?

AngularJS offre un collegamento dati bidirezionale.Perché il collegamento bidirezionale in AngularJS è un antipattern?

Ho creato diverse app AngularJS e ho trovato che il databinding bidirezionale era una funzionalità potente, che ha aumentato la mia produttività.

Recentemente, tuttavia, mi capita sempre di più attraverso post e articoli che affermano che l'associazione bidirezionale è un antipattern.

Esempi:

La maggior parte delle risorse sono a favore di "unidirezionale flusso di dati", come si è promosso da React/Flusso.

anche Angular2 announced da tempo che non ci sarà alcun legame a doppio senso ... ma la documentazione più recente mostra che è in realtà offrendo two-way databinding via ngModel di nuovo (implementato in cima alla proprietà-e-evento vincolante)

Tuttavia, non ho ancora compreso appieno i problemi relativi al databinding bidirezionale in AngularJS.

Altre tecnologie client (cioè a battente, eclipse-RCP, WinForms, WPF ...) offrono anche due vie associazione dati, e non ho mai inciampato sopra l'affermazione che si tratta di un anti-modello ...

Esiste un esempio canonico che illustra facilmente i problemi che potrebbero derivare dall'associazione dati bidirezionale in AngularJS?

The video ho legato sopra sembra suggerire che $scope.watch è il problema ... ma l'esempio può essere attuato senza $scope.watch legandosi ad una funzione esposta sul $scope.
Se si evita di utilizzare $scope (ad esempio utilizzando controller as), quali problemi rimangono con l'associazione dati bidirezionale?

fonte

2016-02-13 jbandi

La cosa con collegamento bidirezionale è che si attiva una cascata di eventi ogni volta che viene attivata. Questo può potenzialmente causare una grande quantità di spese generali sulle azioni più semplici di cui si tiene traccia. Mentre non è direttamente una cosa negativa, è intrinsecamente un punto debole in qualsiasi progetto. A meno che tu non sappia esattamente cosa stai facendo, è molto facile creare codice lento. AngularJS ha lottato con questa decisione di progettazione sin dal suo inizio ed è una delle ragioni per cui Angular 2 è stato creato in un modo diverso. Framework come React e KnockOut sono di progettazione monodirezionale. – MartijnK

@MartijnK Grazie per il tuo commento. La tua argomentazione sta fondamentalmente spiegando che il databinding a due vie è mal implementato in AngularJS ... è questa la ragione per cui il "concetto" di databinding a due vie è un antipattern? Knockout offre anche un collegamento dati bidirezionale ... quindi non è un anti-pattern quando si usa Knockout come framework? – jbandi

Penso che chiunque chiami l'associazione a doppio senso e un anti-pattern sosterrebbe che risparmia all'ingegnere un po 'di tempo e sforzi in anticipo a scapito delle prestazioni, della manutenibilità e della scalabilità delle applicazioni. Nel caso di 1.x angolare, ogni ciclo di digest genera una serie di controlli e callback sporchi che possono rapidamente sfuggire di mano se non si comprende come e perché vengono aggiunti gli orologi. Dire che è un anti-pattern è una dura critica IMHO, ma posso capire perché a qualcuno non piace. –

In effetti, il problema principale con l'associazione dati bidirezionale è la prestazione.

Quando AngularJS è stato rilasciato (1), questa funzione era il motivo principale per cui il framework era molto utilizzato dagli sviluppatori.

Senza una riga di codice, è possibile rendere un elemento completamente dinamico cambiando il suo valore dal lato del modello o dal lato della vista, il valore viene modificato ovunque viene impostato il modello.

In questa funzione, lo strumento più importante è la visione e rappresenta tutto il problema con l'associazione dati bidirezionale.

Mentre l'applicazione si evolve, il numero di osservatori e elementi guardati aumenta.
Inoltre, dopo un po 'di tempo, l'applicazione può diventare una grande zuppa di osservatori.
Ciò comporterà che l'applicazione guardi sempre gli elementi e aggiorni gli elementi sul lato opposto e che consuma molte risorse dal browser.

Ecco perché la mia raccomandazione è: Evitare gli osservatori il più possibile.
Non sono quasi mai necessari in un controller.

Consulta anche:

Spero che sia più chiaro per voi.

fonte

2016-02-13 15:11:41 chalasr

non è la causa delle prestazioni, quindi la prima istruzione è vera e sbagliata a seconda di altri fattori, quindi è sbagliata. –

come afferma @MartijnK nel suo commento, la cascata di eventi innescati è fondamentalmente il problema. Angular.js presuppone che gli eventi non siano puri (cioè potrebbe cambiare lo stato/modello) in modo che Angular presupponga sempre che tutti i dati possano essere cambiati dopo ogni evento. –

Perché il collegamento bidirezionale in AngularJS è un antipattern?

risposta

Problemi correlati