Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
For the best experience please use the latest Chrome, Safari or Firefox browser.
フロンドエンド開発で楽したい
〜ユーザーと自分、みんなに優しく〜
@DBFluteフェス2013
About me
- shoito, ショイト
- フロントエンド寄りのエンジニア
- astah(JUDE)開発 -> nic◯nic◯の開発
- 興味: WebTech, Scala/Java, Elasticsearch, Chrome拡張
- 宮城 → 福井 → 東京
- http://about.me/shoito
Background
- 某社新人さん:
- 「IEやChromeで楽にJSのテストできないですか?」
- 「JSの結合?Closure Compiler使ってます。」
- 「Lint?ナニソレ?」
今日のキーワード
- Grunt, Bower
- JSHint/JSLint
- Optimize image
- Concat, Minify, Uglify
- Performance, Memory Leak
- Chrome拡張
楽したいこと
- コードレビュー
- リロード
- テストの実行
- JS/CSSファイルの結合
- 画像ファイルサイズの縮小
- ブラウザのキャッシュ対策
- gzip圧縮
- 計測
コードレビューでこんなコトない?
- レビューア:
- 「これ崩れてるけどタブインデントになってない?」
- レビューイ:
- 「うち、インデントってスペースだっけ?」
本質的じゃないコト、自動チェックできるコトの指摘。
コードレビューでこんなコトない?
- レビューア:
- 「比較は==じゃなくて===使うルールだよ」
- レビューイ:
- 「忘れてました」
本質的じゃないコト、自動チェックできるコトの指摘。
$ npm install jshint -g
$ jshint app.js
app.js: line 4, col 11, Expected '===' and instead saw '=='.
app.js: line 5, col 8, Expected 'i' to have an indentation at 7 instead at 8.
.jshintrc
{
"eqeqeq": true,
"indent": 4
}
ページを確認しててこんなコトない?
- レビューア:
- 「何かページの表示が遅くなった気がする...」
- (...通信内容を確認...)
- (hoge.png 100KB, fuga.png 200KB, piyo.png 300KB)
- 「画像サイズでかっ!」
OptiPNG, jpegtran
$ optipng hoge.png
** Processing: hoge.png
500x223 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 3x8 bits/pixel, RGB
Input IDAT size = 100330 bytes
Input file size = 100381 bytes
...
Output file size = 60150 bytes (40231 bytes = 40.00% decrease)
高速なフィードバックループ
- JS変更 -> JSHintチェック -> テスト -> リロード
- CSS変更 -> CSSLintチェック -> リロード
- HTML変更 -> HTML Lintチェック -> リロード
- ...more
なぜこんなことをするのか?
- ユーザーのため
- デザイナー/エンジニアのため
- インフラコストのため
手作業じゃ面倒, 忘れるし間違う, 同じことを繰り返したくない
Gruntfile.{js,coffee}
module.exports = function(grunt) {
grunt.initConfig({
concat: {
dist: {
src: ['.tmp/js/*.js'],
dest: 'js/app.js'
}
},
uglify: {
dist: {
src: 'js/app.js',
dest: 'js/app.min.js'
}
}
});
};
LiveReload
- JSの更新
- CSSの更新
- HTMLの更新
- ...more
How to use Karma
$ npm install karma -g
$ mkdir project && cd project
$ karma init
$ karma start
$ npm install grunt-mocha --save-dev
package.json
devDependencies": {
"grunt-mocha": "~0.2.3",
...
$ npm install
ここからは時間があれば
Static Site Generators
Adobe Prerelease Program
Mac/iOS Developer Programs