muzigram

山椒は小粒でもピリリと辛い

2014/01/19

Go言語 revelで作るWebアプリケーション hello worldまで

PC新調したりしたので。環境構築から
Go言語でWebサーバー立ち上げたりしよう。

サイト

http://robfig.github.io/revel/

getting start

http://robfig.github.io/revel/tutorial/createapp.html

作業のmemo

https://gist.github.com/mogeta/8505371
Loading ....

hello world

revel run myappでサーバー立ち上げ
http://localhost:9000 にアクセスで確認可能

Home
fig1 . hello world

Creating REST APIs with revel

AngularJSとかと組み合わせ用と考えているので、ここらへんを抑えておく。
https://groups.google.com/forum/#!topic/revel-framework/IwkltTuzECM

AngularJSを使うならgenerator-angularがかなりbest way なのでは。というお話「概要編」

結論

特にこだわりや制約がない場合はgenerator-angularを使用すると開発が捗る
muzi:blog mogetta$ node -v
v0.10.21

概要

https://github.com/yeoman/generator-angular
yeomanのテンプレートなんですが

AngularJSを使うのにかなり便利というお話
前提の知識として、yeoman,grunt,bowerなどが必要になりますが
node.jsのインストールさえできればコマンドを叩くだけなので難しくはありません。

使用ライブラリ

使い方を知っていると捗るpackageなど

  • livereload
  • karma
  • compass
  • jshint

使用することによる利点

  • yo angularを使うことによりページやサービスの新規追加が捗る
  • bowerによるフロントエンドのパッケージマネージメント
  • gruntfileが用意されている。以下のタスクなどがある
    • ローカルにサーバを建てる
    • livereloadタスク
    • ファイルのminifyタスク
    • .jshintrcに基づいたチェック
    • karmaを利用したtestの実行体制を用意する。

yo angular

Blog make 80×24
fig.1 yo generator

例えば、新規のルーティング(/newpage)をAngularJS上で作る場合、

  • コントローラを用意する newpage.js の作成
  • ビューとなるテンプレート newpage.html の作成
  • ルーティングを決める app.jsに/newpage を記述
  • index.htmlに newpage.js を埋め込む
  • テストを記述するための test/newpage.js もついでに作成
と5つのステップが必要になります。手がかかりますね。
なのでgenerator-angularの新規テンプレート作成の機能を使います。

https://github.com/yeoman/generator-angular#route
yo angular:route newpage

 すると、上記5つのステップをすべて自動で行ってくれます。
controllerのテストファイルも追加してくれるのでテスト追加忘れも防げそうですね。
 同様にserviceやview,directiveもyo angularで追加可能です。
Sandbox go gitstudy Judge MainActivity blog
fig2. yo angularで構成されるプロジェクト


gruntによる作業の効率化。

yo angularを使うとgruntfile.jsも用意されています。
このgruntfileにはlivereloadタスクやminify,確認用のサーバー設置やテストの実行といったタスクが
用意されており、開発を円滑に進めることができます。

build

また、yo angularを使った開発フローを採用するとindex.htmlに<script>タグによる大量の読み込みが発生してしまいますが、
grunt buildを使うことで読み込むjsファイルをまとめ、minifyするといったことをしてくれるので
そのあたりのオーバーヘッドを気にせず開発を続けられます。

livereload

livereloadを使う場合はchromeのプラグインがおすすめです。
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei


まとめ

以下の様な作業フローになります
  • yo angular myappでアプリ作成
  • yo angular:route,yo angular:directiveなどを使って、新規の開発
  • grunt serveを使ってサーバーを立てて、動作させてみる。livereloadを使って効率的にチェックを行う。
  • karmaを使ってテストを実行する
  • grunt buildで、ファイルをまとめ、minify化し、distディレクトリに出力する。

おまけ:使用コマンドなど

Loading ....