DanLevy.net

AngularJS の裏技

AngularJSは楽しい！

Hero image for AngularJS の裏技

##AngularJS CAN BE Fun!

For: AngularJS v1.x

  1. AngularJS 開発者は、規模が中〜大のアプリが散在する $watch と、しばしば肥大化する足場である $scope の重みで崩れ始めることにすぐ気づく。
  2. $scope に余分な UI 状態を持ち込まず、全体の階層のサイズと深さを抑えるようにする。

2-way data binding: 2-way Sword

2-way バインディングだけでも、Backbone など他のフレームワークから来た人にとっては 凄く驚き になる。

問題は、多くのサイトが Angular の設計パターンを 慢性的に使い過ぎ していることだ。
これによりディレクティブが拡散し、$scope/rootScope が簡単に数千のインスタンスを抱え、巨大オブジェクトにしがみついてガベージコレクションがほぼ不可能になる。

この先に何が待っているかは明白です：疲弊したブラウザです！ 無限に続く冗長な UI/DOM の再コンパイルを 必死の速度 で実行し続ける運命にあります。

OVER-Angular.JS化 を止める

「もし唯一の道具がハンマーだけなら、すべての問題が釘に見える。」

– 古い格言

アプリにディレクティブの問題はありませんか？

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')

柔軟なユーザーウィジェットを設計して、次のことを実現しましょう：

  1. DRY な Angular コードで汎用的なコンポーネント化
  2. 理解しやすいディレクティブ、最小限のサイズと深さ（ng‑repeat に注意）
  3. シンプルなサービス層
  4. 実装に必要なコードはごく少量、HTML/ビューコードだけで済む
// 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

ソリューション

Angular のコツ

  1. 1-way バインディングを使用する（例: { :: title }）
  2. ディレクティブの再帰的なネストは抑える
  3. ディレクティブをネストせざるを得ない場合は、ng-repeat の内部で 絶対に 行わない――パフォーマンスが O(n^2)^3 に近づく危険がある
    I. 基本的な DOM/UI フラグメント（例: モーダルメッセージボックス、ステータスバー）をファクトリーパターンで作成し、ディレクティブまたはコントローラから呼び出す
  4. ボーナス: ブラウザのレンダリングライフサイクル のコストとトリガーを理解する――アニメーション、コンポジットレンダリング、リフローなど

Browserify でプロジェクトを整理する

Angular 固有というわけではないが、シンプルな依存関係解決には必須。

Browserify は、実質的にコード量を増やさずに（数百文字程度）JS プロジェクトを管理可能にする。

Just read this section の Browserify Handbook を参照してください。

Alternatives

ReactJS from Facebook

小規模で再利用可能な UI コンポーネントが多数ある場合、ReactJS の方が適していることがあります。

Polymer Project from Google

Pure-er JS Approach

Loading comments...