スクリプト言語とか使わないHTML,CSSオンリーデザイナさんとシステムを構築する時の全体構成案。
サーバ間通信
RESTfulによるJSONでのやりとり。
サーバ側言語
好みの問題。
- Scala (静的。速度を求めるならAkka, 求めないならPlay)
- Python3 Flask (動的。サクッと作りたい時)
クライアント言語
- ES2016以降 (babel等トランスパイラでブラウザに優しくする)
JSライブラリ
- axios (デザイナさんがどうしてもjQuery使いたかったら折れる)
- Vue.js (.vueコンポーネントにせずhtml,js,css分ける)
AltCSS
- Stylusで!と圧をかける。LESS等、生CSSでなければしぶしぶ折れる。
タスクランナー
- gulp使ってたけどnpmで十分そう。SEが率先して用意する。
と思ったらWindowsだとパスのワイルドカードが展開されない罠。
http://neos21.hatenablog.jp/entry/2017/07/14/004416
npm run build でgulp実行する案、頂こう。gulpをグローバルインストールしなくて済むし.binとか参照しなくていいし。
npm run {build・clean・watch}のみできるようにする感じ。
js,css圧縮はローカルではやらず、CI環境で実施(gulpを直接叩く)。
HTMLテンプレート
- ワンソース案件でなければモックが出来上がった段階で共通項をすぐEJSで纏める。そして教え、布教する。
ディレクトリ構成
├── build -- coverage等の出力先。.gitignore対象
├── dist -- 最終成果物の出力先。.gitignore対象
└── src -- HTMLやrobots.txt等
└── assets -- 素材ディレクトリを束ねる
├── ejs -- EJSテンプレート置き場
├── img -- 画像置き場
├── script -- jsやaltJS置き場
├── style -- stylusとか置き場
└── vendor -- 外部ライブラリ。jQueryだとjs,css両方あるのでまとめてvendor
デザイナさんには予めこの構成でと伝えるとやりやすくなるはず。