フロンドエンド開発で楽したい

〜ユーザーと自分、みんなに優しく〜

@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)

Grunt - JavaScript Task Runner

JSHint/JSLint, concat, minify, revision
Watch, LiveReload
Compile CoffeeScript, LESS
...more

Automation!

高速なフィードバックループ

JS変更 -> JSHintチェック -> テスト -> リロード
CSS変更 -> CSSLintチェック -> リロード
HTML変更 -> HTML Lintチェック -> リロード
...more

なぜこんなことをするのか？

ユーザーのため
デザイナー/エンジニアのため
インフラコストのため

手作業じゃ面倒, 忘れるし間違う, 同じことを繰り返したくない

How to use Grunt

$ npm install grunt-cli -g
$ mkdir project && cd project

$ npm init
$ npm install grunt --save-dev

<Define Gruntfile.{js,coffee}>
$ grunt <task>

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'
      }
    }
  });
};

Gruntfile.{js,coffee}の定義めんどい...

grunt-initやYeomanで初期ファイルを作る手もある

弊社事例

LiveReload

JSの更新
CSSの更新
HTMLの更新
...more

How to use Karma

$ npm install karma -g
$ mkdir project && cd project

$ karma init
$ karma start

grunt-contrib-*

grunt-*

$ npm install grunt-mocha --save-dev

package.json

devDependencies": {
    "grunt-mocha": "~0.2.3",
    ...

$ npm install

ここからは時間があれば

Static Site Generators

HTML Slideshow Tools

Adobe Prerelease Program

Mac/iOS Developer Programs

Thanks

fb/twitter shoito