Directory Structure

##fabnavi client side structure

app
├── api
├── assets
│   ├── images
│   ├── javascripts
│   └── stylesheets
├── controllers
├── helpers
├── mailers
├── models
├── uploaders
└── views
    ├── api
    ├── home
    └── layouts

最初にブラウザから見たときに呼び出されるのは views/layouts/application.html.erb と views/home/show.html.slim

そこからjsとcssがロードされる。ちなみに画像とかfontは public/ 以下。

##Client Side JS Architecture

app/assets/javascripts
├── application.js   # 
├── client
│   ├── actions      # "Action" of Flux
│   ├── components   # React Element.
│   ├── constants    # as type
│   ├── dispatcher   # "Dispatcher" of Flux
│   ├── fabnavi.js   # Common setup. "global" means "window" object. gensym is inspired by the idiom of lisp macro.
│   ├── player       # Camera controller and Canvas (without DOM manipulation).
│   ├── stores       # "Store" of Flux
│   ├── templates    # jade (html) template. included by React components. these files have same scope as *.react.js which includes it.
│   └── utils        
│       ├── FabnaviStateMachine.js  # Nested State Machine which decides the behavior of key event. 
│       └── WebAPIUtils.js          # methods that communicate with server
└── dist 　　　　　　　　　　　　　　　
    └── client
        ├── bundle.js      # combined js file
        └── bundle.js.map  # source map

client/components/FabnaviApp.react.js のglobal.onloadがjsのエントリーポイント

##Flux Architecture See => Flux.

だいたいObserver Pattern の各オブジェクトにいい感じの名前をつけてるだけ。

###登場人物

• Store データの保存場所
• Action 飛び交うイベントみたいなやつ
• Dispatcher Actionをdispatchして各Storeに投げつける
• View StoreのデータをDOMにして表示する

###流れ

1. keyEventやServerからデータが帰ってきたりすると, ActionCreatorがActionを作って発火
2. Dispatcherが適切なStoreにActionを投げつける(むしろ, StoreのCallbackをDispatcherに登録しておく)
3. StoreがActionを受け取り, Storeの中のデータを変更する
4. ViewはStoreの変更をwatchしていて, Storeが変更されるとViewが勝手に変更される

重要な事は責任の分離, つまり誰が何を処理すべきかということを明確にすること。

on VM

• VirtualMachine ( vagrant ssh するとここに入れる )

/home/vagrant 
 ├── install.sh
 └── fabnavi5 <-- localのdataディレクトリがvagrant内では, このディレクトリになってる(Synced Dir)
      ├── Gemfile
      ├── Gemfile.lock
      ├── Guardfile
      ├── README.rdoc
      ├── Rakefile
      ├── (node_modules) 
 

• LocalMachine

(your workspace)
 ├ fabnavi5-dev
   ├── README.md
   ├── Vagrantfile
   ├── chef-repo
   └── data <== ("vagrant up" するのに必要)
       ├── Gemfile
       ├── Gemfile.lock
       ├── Guardfile
       ├── README.rdoc
       ├── Rakefile