Webフロントエンドの開発環境

itinao 22:55 , , , 0 件のコメント
以前、筆者が担当している案件ではcompassを使用している。と記述しましたが、

他にはどんな開発環境だったのかを紹介したいと思います。

なんの開発をしている？

webviewを使ったスマートフォン向けのアプリ開発。

どんな役割の開発者がいる？

サーバーサイドエンジニア
フロントサイドエンジニア←筆者ここ

フロントエンドの開発環境

<javascript>
フレームワーク：knockout.js
altjsは未使用。
xhrの制御や、独自に必要なものは自前で書く。
書き方はある程度、型にハメてたので煩雑にはならずでした。
$ find . -name "*.js" | xargs wc -l
…
…
 6xxxxx total
この桁数ぐらいの規模。。

<css>
プリプロセッサ：sass
フレームワーク：compass
コンパイルが遅いので、ちょっとカスタマイズして使ってる。
（いずれ、Bourbonと速度比較した記事書きたいなー

<html>
PHPで記述し、共通部分はincludeして使っている。
問題は、PHPを通してるのでレスポンスが若干遅くなってしまう。。
⇒ 今後、デプロイ時にPHPファイルをパースしてHTMLを生成するような仕組みを入れたい。
PHPでの注意点としては、apacheで動的コンテンツもキャッシュされてしまうケースもある。
キャッシュは要注意。
http://www.softel.co.jp/blogs/tech/archives/3459

静的リソースも下記などでキャッシュさせている場合は、取り扱い要注意。
http://httpd.apache.org/docs/2.2/ja/mod/mod_expires.html

<その他>
SenchaAnimator
⇒ 演出部分はSenchaAnimatorで吐き出したものを使用。

 uglifyjs
⇒ デプロイ時に実行し、javascriptファイルの圧縮を行う。

GitHub
⇒ マスターブランチでタグをうってリリースを管理。

jenkins
⇒ GitHubと連動し、自動デプロイする。

どんなフローでデプロイするの？

1. compass実行
⇒ 特定のディレクトリにcssが排出される

 2. 外部のjsライブラリ(knockout.js)などを結合してminifyするスクリプトを実行(滅多に更新なし)
⇒ 特定のディレクトリに~~~.min.jsが排出される

3. 自前で作成したjsライブラリをファイル結合してminifyするスクリプトを実行
⇒ 特定のディレクトリに~~~.min.jsが排出される

4. 特定の環境へアップロード
⇒ rsyncにてアップロードする

筆者の開発環境

Macbook Air + ちっさいモニター
⇒ リモートのWEBサーバで動作確認するので、軽め。

vim
⇒ sublimeとかwebstormとか使ってみたけど、結局はvim。

grunt
⇒ タスクランナー。便利。

karma(mocha + chai + Sinon.JS)
⇒ テストランナー。便利。

Google Chrome Canary
⇒ 開発用chrome拡張機能とか作っていたので、chromeを使うのは案件で強制的。

次やるんだったら...

htmlもHamlやJadeで生成するなど、テンプレートを使ってみたい。
（http://www.mamoida.com/2013/05/frontend-preprocessor/
なんか人気なAngularJSとか別のフレームワークを使う。
altjsで書く。
メモリ管理大変そうだけど、シングルページでつくる。

以上！

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )