フロントエンド実装 グロースのポイント

フロントエンド

実装

グロースの

ポイント

CSS、JS、画像ファイルの

リクエスト数は

少ない方がいい？

CSS、JS、画像ファイルの

ファイル容量は

少ない方がいい？

http2 ?

all you need is

control

controllable

uncontrollablecontrollable

uncontrollablecontrollable

git grunt

jenkins

uncontrollablecontrollable

concat minify

uglify optimize

autoprefix sprite

and more…

git grunt

jenkins

uncontrollablecontrollable

concat minify

uglify optimize

autoprefix sprite

and more…

no compile

no rule

git grunt

jenkins

no compile

no rule

git grunt

jenkins

uncontrollablecontrollable

concat minify

uglify optimize

autoprefix sprite

and more…a.css

b.css

c.js

d.js

d.png

e.jpg

f.css

g.js

h.png

i.jpg

no compile

no rule

git grunt

jenkins

uncontrollablecontrollable

concat minify

uglify optimize

autoprefix sprite

and more…a.css

b.css

c.js

d.js

d.png

e.jpg

f.css

g.js

h.png

i.jpg

refactoring

no compile

no rule

git grunt

jenkins

uncontrollablecontrollable

concat minify

uglify optimize

autoprefix sprite

and more…

a-b.css

c-d.js

d-e.png

f.css

g.js

h.png

i.jpg

no compile

no rule

git grunt

jenkins

uncontrollablecontrollable

concat minify

uglify optimize

autoprefix sprite

and more…

a-b.css

c-d.js

d-e.png

f.css

g.js

h.png

i.jpg

add

k.jpg

i.css

j.js

git grunt

jenkins

uncontrollablecontrollable

concat minify

uglify optimize

autoprefix sprite

and more…

a-b.css

c-d.js

d-e.png

refactoring

k.jpg

i.css

j.js

no compile

no rule

f.css

g.js

h.png

i.jpg

no compile

no rule

git grunt

jenkins

uncontrollablecontrollable

concat minify

uglify optimize

autoprefix sprite

and more…

a-b-i.css

c-d-j.js

d-e-k.pngf.css

g.js

h.png

i.jpg

goal setting

リクエスト数 ： 150 → 100 ？

control

css

sass

autoprefixer

csscomb

csso

etc…

.hoge{height:

282px;margin:-240p

x auto 100px}

// hoge

.hoge {

margin: -240px

auto 100px;

height: 282px;

}

JS

concat

uglify

etc…

a.Utility={console:fu

nction(a){a=a||

null,console.log(a)}}

WIN.Utility = {

console:

function(value) {

value = value || null;

console.log(value);

}

};

sprite

spritesmith

etc…

$a: (0px, 0px, 0px,

0px, 38px, 49px,

73px, 107px, '../

img/sprite-

sample.png', 'a', );

image

imageAlpha

imageOptim

etc…

※ 一部マニュアル作業を含む

operation

css

SMACSS

壊れにくいCSS運用

： モジュール構造

OOCSS ： レイアウト

BEM ： 命名規則

repository

statserverside

.editorconfig .gitignore

Gruntfile.js package.json

/dist /tmp /src

build process

/src 開発コード

/dist出力コード

flow

Server-side

Front-end

Designer

Director

Server-side

Front-end

Designer

Director

全職域が動作状態のクオリティを担保

sekiyaeiji2015/08