オレオレマイクロフレームワーク

世界最小（自称）のフレームワーク

Webをウロウロしていたりして、「お？このライブラリちょっと使ってみたいな」という時に、HTMLを用意して、jQueryならjQueryを、目的のライブラリはCDNのアドレスとかをindex.xxxxみたいなファイルに書いて、DOMが生成されたら実行されるJavaScriptを書いて、それを指定したりして、とかとか…雛形をコピーしてきてちょこちょこいじるのがめんどくさかったので、バックエンドをnode.jsで書いてAPIとかもサクっと実装出来るように作った、私だけが幸せになれるフレームワークです。
ちなみに、全部CoffeeScript2です。
あと、jQuery3.0と、jQueryUIがデフォルトで読み込まれます←ここポイント

使い方

完全に自分用の備忘録なのですが、使うにはまずgithubからクローンしてきます。

$ git clone https://github.com/digitarhythm/jsframe.git jstest

こんな感じで叩くとカレントディレクトリに「jstest」というディレクトリが出来ます。ディレクトリが無事に出来ていたら中に入ります。

├── apps
│   ├── js
│   │   ├── control
│   │   └── view
│   └── src
│       ├── control
│       └── view
├── config
├── libs
│   ├── control
│   ├── template
│   └── view
├── plugins
└── public

中はこんな感じになっています。中に入って最初に、

$ npm i

と実行し、必要なnodeモジュールをインストールします。
次に、

$ ./build

と実行します。すると、apps/src/viewと、apps/src/controlと、configにファイルが生成され、config以外はコンパイルされます（CoffeeScriptなので）。生成されるファイルは、

apps/src/view/main.coffee
apps/src/control/api.coffee

です。コンパイルされたJavaScriptファイルは、

apps/js/view/main.min.js
apps/js/control/api.min.js

になります。拡張子が「.min.js」になっているのは、npmモジュール「terffee」でコンパイルするため、自動的にminify化されます。そして察しの良い方はディレクトリで分かると思いますが、viewのほうに入っているのがクライアントサイドで実行されるJavaScriptにコンパイルされるソースです。
controlのほうに入っているのが、node.js+expressで実装するAPIにコンパイルされるソースになります（デフォルトでアプリケーションバージョンを返すAPIが定義してあります）。
基本的にはこのファイルを修正して必要な機能を実装していくことになります。

$ ./build -w

を実行すると、

$ build -w
watching directory [プロジェクトのディレクトリ/apps/src/view]
watching directory [プロジェクトのディレクトリ/libs/view]
watching directory [プロジェクトのディレクトリ/apps/src/control]
watching directory [プロジェクトのディレクトリ/libs/control]

と表示され、ソースのタイムスタンプを監視し、変更があった場合に自動的にコンパイルされます。
使いたいプラグインファイルなどは、pluginsディレクトリに入れておくと、自動的に読み込まれます。
CDNなどを指定して読み込ませたい場合は、libs/template/main.ectファイルに記述してください。
CSSなどを使いたい場合もこのテンプレートファイルで指定してください。

Webアプリケーション実行

作っているWebアプリケーションは、node.jsのアプリケーションサーバーでアクセスします。
configに生成された、develop.jsonと、default.jsonで使用するポート番号を指定します。develop.jsonがデバッグモード用で、default.jsonがプロダクト用です。

$ npm run debug

と実行するとデバッグモードでアプリケーションが起動します。node-devを使用して起動するので、ソースの修正をすると自動的にアプリケーションサーバーが再起動して変更が反映されます。停止するにはCTRL+Cを押してください。

$ npm start

と実行するとforeverを使いバックグラウンドで起動します。こちらではソースの修正は自動で反映されませんが、バックグラウンドで動いているプロセスが落ちても自動的に再起動します。

$ npm stop

を実行すると停止します。
デフォルトでは、デバッグモードのアプリケーションに

http://(アドレス):3001/

でアクセスするとブラウザの画面サイズをブラウザに表示します。

http://(アドレス):3001/api/version

でAPIにアクセスすると、package.jsonのバージョン番号を返します。