DanLevy.net

Trucchi AngularJS

AngularJS PUO essere divertente!

Hero image for Trucchi AngularJS

AngularJS PUÒ ESSERE Divertente!

Per: AngularJS v1.x

  1. Gli sviluppatori di AngularJS scoprono rapidamente che le loro applicazioni di media-grande dimensione si rompono sotto il peso dei $watch sparsi e dell’ausilio spesso gonfiato noto come $scope.
  2. Mantieni il $scope privo di stato UI eccessivo, cerca di limitare le dimensioni e la profondità della gerarchia complessiva.

2-way data binding: 2-way Sword

Il 2-way binding da solo rende l’approccio proveniente da altri framework come Backbone, beh, proprio fantastico.

Il problema è: molti siti usano in modo cronico eccessivo i pattern di progettazione di Angular. Questo porta alla proliferazione di direttive e a un $scope/rootScope che facilmente ha migliaia di istanze, e può aderire a oggetti di grandi dimensioni impedendo qualsiasi speranza di garbage collection efficace.

Conosci già dove stiamo andando: un browser esausto! Dannatamente condannato a lavorare a un ritmo frenetico eseguendo inutilmente e in modo ridondante le riconsolidazioni UI/DOM.

Fermiamo l’OVER-Angular.JSification

“Se l’unico tuo strumento è un martello, allora ogni problema sembra un chiodo.”

Il tuo app ha problemi con le direttive?

current-user-status-label
  div(ng-if='loggedIn')
    view-user-surplusage(ng-if='!editMode')
      .head: contact-details(user='user')
      .tool: contact-buttons(loggedIn='loggedIn')
      a.edit-icon(ng-click='editMode = true')
    edit-user-surplusage(ng-if='editMode')
      .head: avatar-edit(user='user')
      .body: edit-contact-details(user='user')
      a.save-icon(ng-click='editMode = false')

Progettiamo un widget utente flessibile che aiuti:

  1. Componentizzazione versatile con codice Angular DRY
  2. Direttive comprensibili, con dimensione/minima profondità ridotta (fai attenzione agli ng-repeats)
  3. Strato di servizi semplice
  4. Poco codice effettivo da implementare - solo HTML/Codice di vista
// jade
user-widget
  div(ng-if='loggedIn')
    div.edit(ng-if='editMode')
      h4.email-icon: input(type='email', ng-model='user.email')
      h4.phone-icon: input(type='email', ng-model='user.phone')
      a.save-icon(ng-click='editMode = false')
    div.show(ng-if='!editMode')
      h1.users-icon {{ user.name  }}
      h4.email-icon {{ user.email }}
      h4.phone-icon {{ user.phone }}
      a.edit-icon(ng-click='editMode = true')
  div(ng-if='!loggedIn')
    h5: i Welcome User
    a.btn(href='/login') Login

Soluzioni

Consigli per Angular

  1. Usa il binding unidirezionale (es. { :: title } )
  2. Limita la ricorsione nella nidificazione delle direttive
  3. E se devi nidificare direttive, MAI farlo all’interno di un ng-repeat - Le prestazioni inizieranno a somigliare a qualcosa come O(n^2)^3 ;) I. Usa codice JS/DOM nativo in un modello di fabbrica per creare frammenti di DOM/UI di base, esempi: finestra modale, barra di stato. Chiama le fabbriche UI da direttive o controller.
  4. Bonus: Capisci costi e trigger del ciclo di rendering del browser: animazione, rendering composito, ricalcoli di layout

Usa Browserify per organizzare il progetto

Non specifico per Angular, ma essenziale per la semplice risoluzione delle dipendenze.

Browserify rende i progetti JS gestibili con un sovraccarico di codice praticamente nullo (ok, poche centinaia di caratteri).

Leggi questa sezione del Browserify Handbook.

Alternative

ReactJS di Facebook

Se hai molti piccoli componenti UI riutilizzabili - ReactJS potrebbe essere una scelta migliore:

Polymer Project di Google

Approccio con JS più “puro”

Loading comments...