フロントエンド実装 グロースのポイント
TRANSCRIPT
フロントエンド
実装
グロースの
ポイント
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