ただふれたものについて書くブログ

あんまり正しくない話を適当に書くブログ

express + AngularJS + mongooseで掲示板っぽいものを作ってみたときに調べたこと

express + AngularJS + mongooseで ざっくり簡単な掲示板っぽいものを作ってみました。

ページ: http://board-example-4100.herokuapp.com/

github: https://github.com/hiroosak/board-example

調べたこと

  • Node.js
    • passport
    • mongoose
    • express-jwt
    • swagger
    • mocha
  • Yoemon
    • yoemon
  • Grunt
    • grunt-contrib-compass
    • grunt-contrib-concat
    • grunt-contrib-uglify
    • grunt-contrib-htmlmin
    • grunt-contrib-jade
  • フロント
    • bower
    • mocha
    • AngularJS
      • angular-route
      • angular-animate
      • angular-resource
      • angular-bootstrap
    • Karma
      • unit, e2e
    • fontawesome
    • bootstrap 3.0
  • その他

ピックアップ

 hackathon-starter

https://github.com/sahat/hackathon-starter

スターターキット。ファイル構成の参考に。

passport

http://passportjs.org/

認証ミドルウェア。OAuth2, OAuth, ユーザー名/password の認証もサポート。

express-jwt

https://github.com/auth0/express-jwt JSON Web Token。APIの認証をトークンにするのに利用。

swagger

https://github.com/wordnik/swagger-node-express

API ドキュメント生成。その場で確認出来るので一度作ると便利。 ただし、パラメータ設定に癖があり、柔軟性がちょっと悪い。

Grunt

最近はsassやらcoffeescriptやらstylus やらJadeとかメタ言語が多いので、最終的にどういう風にファイルを変換させていくかを決める必要がある。

感想

Yeoman generator

express を使う場合、最初から自力でGruntfileを作ったりするのが大変なので Yeoman (http://yeoman.io/) で、最初に初期構成を作ったりする。

Railsなら rails new 。これさえあれば、すぐに開発に取りかかれる!と思いきや、 generator は自分で欲しいものを検索をして、取ってくる必要がある。

これがベストプラクティスがわかるところがないので、 何個か探してみるものの数が多すぎ、かつ、generator も 物によってファイル・フォルダ構成変え過ぎで どれがいいのかよくわからなくなってしまいました。

結局上のhackathon-starterが一番参考になりました。

Cookies VS Tokens

http://blog.auth0.com/2014/01/07/angularjs-authentication-with-cookies-vs-token/

AngularJSは、非同期でモジュールの取得を行っていくけれど Cookieベースの場合、CSRFトークンの更新を非同期の場合に行わないようにしたり swaggerにAPI仕様を落としこむ時に面倒なことがある。 ネイティブアプリとブラウザで共通で使う場合とか考えると、 今後はTokenの選択肢が有力になっていきそう。

AngularJS の高めな学習コスト

AngularJS 学習コスト高いと周りで言われているけれど 実際に使ってみて、覚えなきゃいけなさそうなのが多い。 ただ公式のチュートリアルを一通り触ると出来たような気になれるのはとても良い。 karma を使ったテストの書き方がきちんと書かれているのもいい。

でも既存のライブラリを使う場合、慣習に倣うために一旦モジュールを作成する必要がある。

グローバル変数を使わないというメッセージだけど、 あの長すぎる引数のDIのおかげで心理的コストが高い気がする。 evilをふさぐ何かが欲しい。

それに既存のbootstrapなどを使いたい場合、その知識+AngularJS向けラッパーを覚えなきゃいけない。これもきついところがある。

APIドキュメント

swagger ( http://swagger.wordnik.com/ )つかってみた。

最近のWebサービスは、ブラウザでもスマホでも、タブレットでも、ネイティブアプリでも機能提供するのが当たり前なわけで、ビューとデータをきっちりわけないと作業量がかさむ。

その解決案としてAPIの完全分離で、ここのドキュメントは複数人でやっていると必須になってくる。

Facebooktwitterのかっこいい、かつリクエスト確認できるドキュメントをみて、こういうの簡単に作りたいってなって、候補となるのがswagger。

2ファイルJSONファイルを指定すれば、クライアントドキュメントを作成してくれる。 ただ、このJSONファイルがなかなか面倒で、 特定のパラメータの属性によって、別のオブジェクトの動きが変化する。 コード読んだほうが早かったりする。

まとめ

  • express のベストプラクティスが今イチわからない
  • AngularJSでWebサービス作るときは、認証の仕様を先に決めたほうが良さそう
  • swagger 大変。慣れるまでしんどい。なれてからもしんどい。ドキュメントを管理するの大変。
  • mongoose のことタイトルに書いて、なにも触れていないけれど、わかりやすい