Ember.js アプリ設計 tips (Ember.Sapporo #23 にいってみた)

背景

私はSEで最近はPCアプリ・モバイルアプリを主に作っている。Web系はあまり経験なし。 ここ何年か、趣味でWebアプリを作ってきたが、一人では中々完成に至らず捨てることも多かった。 近頃は Ember.Sapporo によく顔を出すようになった。 そこでいろいろ教わる中で、少しずつだが欲しいものが作れるようになってきた。 そういうわけで、Ember.jsを使っているのは近くにコミュニティがあることが大きい。 BackboneもAngularもReactもどれも良いと思うけど、近くに聞ける人がいないのだ。 ;( 独学も悪くないけど、私は本を読むのも遅いし、もの覚えも悪いので、アプリを作る前につまずきがちなのだ。 つまづいた時に人に聞けるというのは大事なことだ。

先日 Ember.Sapporo の @tricknotes さんに Ember.js アプリ(以下emberアプリ)の設計・実装について アドバイスをたくさんいただけた。後で見返したいのでここに記録しておく。 また、Ember.jsの内部構造の話も聞けた。そちらは後日書く。

今回のEmber.Sapporoでは、妻が過去に作った小遣い帳Webアプリを作り変えるにあたり、設計を相談してみた。 フロントはBackbone.js バックは素のPHP データベースはsqlite(最近まで何年も素のjsonファイルだった。よく動いていたなぁ。)

作り変えようと思った理由は以下。まとめると、機能追加に耐えられなくなってきたと。

  • 幾度かの機能追加を経て、Viewのツリー構造が崩れてきていた。
  • Event発行、受信に設計がなく、よくバグが出たし、コードがおいづらくなっていた。
  • ViewのrenderがjQueryでゴリゴリ書いてあってレイアウトに手を入れづらかった。
  • ModelやCollectionの関連付けが面倒で、大きなデータ構造の変更が億劫になっていた。

欲しいものは以下。要望度が高いほど早く欲しい機能だ。

  • 出費の入力(要望度 高)
  • 予算・実績の比較(要望度 低)

Emberアプリとバックエンド

Emberで特に面白いのは、Ember.js アプリの作成中、WebAPI バックエンドがなくてもアプリを実装できることだ。 なぜなら Ember.Data と mirage を利用すると便利な WebAPI バックエンドのモックが手に入るから。 モックを使った開発用アプリとWebAPIを呼び出す本番用アプリをいちいち切り替えなくて済むのは嬉しい。 そして、スタブ・モックを使った設計・実装は私の好みに合う。 ただ、スタブもモックも作成に手間と時間がかかるので、普段はスケジュールに余裕がないと作らない。 その手間と時間が省けるなら今後積極的に使ってみたい。

というわけで、画面設計・データ設計ののち、アプリ実装することに。 バックエンド改修はその後。

画面設計

画面設計tipsをメモしておく。

emberアプリにおいて、画面レイアウトとルートには密接な関係がある。 上位ルートのテンプレート内の {{outlet}} に下位ルートのテンプレートが埋め込まれるからだ。 直近必要になりそうな画面とRouteの対応をざっと考えた。以下の通り。

  • 出費 - /expences/
  • 出費一覧 - /expences/index
  • 出費入力 - /expences/new
  • 予実 - /budgets/
  • 予実 月毎 - /budgets/time/yyyy-MM
  • 予実 費目毎 - /budgets/sections/費目名

index ルートを用意するかしないかは、下位ルートの画面の見た目をどうしたいかによって決まる。 例えば、PC向けかモバイル向けかで決めることがあると聞いた。 今回はモバイル向けアプリを作るつもりなので、index ルートを用意する。

データ構造設計

データ構造設計に関するtipsをメモしておく。

Ember.DataはデフォルトでJSON-API形式に対応している。 (JSON-APIはEmberのコミュニティの方々が標準化に関わっているとのこと。) モデルはJSON-APIフォーマットで作ると楽。 バックエンドはWebアプリができてから JSON-APIフォーマット を出力するように書き換える予定。

emberアプリ側でバックエンドAPIに合わせたデータアダプタ(Emberではシリアライザと呼ぶらしい)を 書くのはどうかと質問したところ、バックエンドを書き換える方が楽なことが多いと答えをもらった。

-- (時間がなくなってしまった。今日はここまで)