フロントエンドエンジニア（仮）...
TRANSCRIPT
13-D-3 #devsumiD
～え、ちょっとフロントやること多すぎじゃない！？～
アメーバ事業本部ゲーム部門コアグループ石本 光司
フロントエンドエンジニア（仮）
@t32k
Web Designer2008 - 2011
Web Director2011 - 2012
2012 -
Web Developer
Sass & Compass徹底入門 ～CSS のベストプラクティスを効率よく実現するために～
• フロントエンドエンジニアとは？• ツールを管理する• スピードを追跡する• まとめ
Agenda
フロントエンドエンジニアとは？
http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
A Baseline for Front-end
JavaScriptGit(and a GitHub account)Modularity, dependency management,and production buildsIn-Browser Developer ToolsThe command lineClient-side templatingCSS preprocessorsTestingProcess automation (rake/make/grunt/etc.)Code qualityThe fine manual
1.2.3.
4.5.6.7.8.9.
10.11.
+288C�
0B,%_[Z^@.������MJN/4���;-��\�@�>MJN= ��DRI
QJ����,����49@�=�3EY8=?#"��4�6:7@MJNWWW
&('&)! $$GPK@ ��A]
1F<*SUVNHVO,���85*]
DeveloperHTML/CSS Coder, JavaScripter, Flash Creator
http://uptodate.frontendrescue.org/
ツールを管理する
Front-end Tooling Landscape
HTML5 Boilerplate,
Twitter Bootstrap, Backbone
Boilerplate, Angular seed,Ember starter,
Zurb Foundation
Boilerplate Abstractions
CoffeeScript, Sass, Less, Compass,
Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript,
Traceur
Frameworks
Backbone, Angular,
Ember, YUI, Agility, CanJS, Dojo, Meteor, Derby, Spine, Batman, Cujo,
Knockout, Knockback,
jQuery Mobile,
jQuery UI, Closure, ExtJS,
Montage
Workflow
Chrome DevTools,
LiveReload, Codekit, Brunch,
WebStorm IDE, watch,
Testing, Tincr, JSHint,
BrowserStack, Selenium, WebGL Inpector
Performance
JavaScript, CSS and
Heap profiling,
GPU, memory, tracing,
PageSpeed
Build
Grunt, Rake, Marven,
Concat, r.js, Miification,
Image optimization, Compression,
Module loading,
mod_pagespeed
+288C�
0B,%_[Z^@.������MJN/4���;-��\�@�>MJN= ��DRI
QJ����,����49@�=�3EY8=?#"��4�6:7@MJNWWW
&('&)! $$GPK@ ��A]
1F<*SUVNHVO,LXT�85*]
UI Designer
JavaScript
HTML/CSS
Producer
iOS/AndroidEngineer
System Engineer
System Engineer
System Engineer
Community App Team
CSS preprocessors
https://incident57.com/codekit/
$28
＼(^o^)／
／(^o^)＼
http://gruntjs.com/
Installation
http://nodejs.org/
+
http://nodejs.org/
$ npm install grunt-cli -g
grunt-cliをインストール
`-g`はグローバル環境にインストール
Package.json
Gruntfile.js(.coffee)
Package.json
$ npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fieldsand exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package andsave it as a dependency in the package.json file.
package.jsonを作成する
対話形式でいろいろ聞かれるけどENTER!!
$ npm install grunt --save-dev$ npm install grunt-csso --save-dev
gruntをインストール
grunt-<plugin_name> をインストール
`--save-dev`はdevDependenciesに記録
Gruntfile.js(.coffee)
$ npm install grunt-init -g$ git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
$ grunt-init gruntfile
grunt-initをインストール
GitHubからテンプレートをクローン
対話形式でいろいろ聞かれるけどENTER!!
• grunt.initConfig
• grunt.loadNpmTasks
• grunt.registerTask
Anatomy of a Gruntfile
module.exports = function(grunt) { // プロジェクト設定 grunt.initConfig({ // タスク設定 csso: { files: { 'output.css': ['input.css'] } } }); // タスクで必要なプラグインを読み込む grunt.loadNpmTasks('grunt-csso'); // カスタムタスクを登録 grunt.registerTask('default', ['csso']);};
• grunt.initConfig
• grunt.loadNpmTasks
• grunt.registerTask
Anatomy of a Gruntfile
grunt.initConfig({ // タスクの設定 csso: { // タスク dev: { // ターゲット files: { // ファイルディレクトリ // アウトプット:インプット 'output.css': 'input.css', }, prod: {・・・} }, task-foo: {・・・}}
• grunt.initConfig
• grunt.loadNpmTasks
• grunt.registerTask
Anatomy of a Gruntfile
grunt.loadNpmTasks('grunt-csso');
npm installしたプラグインを使用する
http://gruntjs.com/plugins
284 plugins2294 plugins
VS.
2014.02.13
MapleRealistic preprocessors-based CSS framework for mobile.
https://github.com/t32k/maple
grunt-contrib-connect/watch
grunt-sass
grunt-autoprefixer
.flexbox { display: flex;}
.flexbox { display: -moz-flex; display: -webkit-flex; display: flex;}
Before
After
grunt-spritesmith
$fork_offset_x = 0px;$fork_offset_y = 0px;$fork_width = 32px;$fork_height = 32px;...$github_offset_x = -32px;$github_offset_y = 0px;$github_width = 32px;$github_height = 32px;...
grunt-contrib-csslint
grunt-kss
• grunt.initConfig
• grunt.loadNpmTasks
• grunt.registerTask
Anatomy of a Gruntfile
https://github.com/t32k/maple/blob/master/Gruntfile.coffee
http://yeoman.io/
$ npm install yo -g$ npm install generator-maple -g
Yeomanをインストール
generator-<name> をインストール
$ mkdir your_proj && cd $_$ yo maple$ grunt
ワーキングディレクトリを作成・移動
yoコマンドでmapleを実行
gruntデフォルトタスクを実行
generator-maple
スピードを追跡する
http://www.smashingmagazine.com/2013/06/11/front-end-ops/
“It doesn’t matter how many features you have or how sexy your features are if they aren’t delivered to the user quickly, with ease, and then heavily monitored.
― Alex Sexton
80 20:
http://www.webpagetest.org/
• Start Render
• Speed Index
Beyond Onload
Private Instance for Ameba
https://github.com/marcelduran/webpagetest-api
$ npm install webpagetest -g
Performance Test
Users
Monitor
BuildTest
Deploy
Users
Monitor
Perf
Test
Deploy
Build
まとめ
HTML5 Boilerplate,
Twitter Bootstrap, Backbone
Boilerplate, Angular seed,Ember starter,
Zurb Foundation
Boilerplate Abstractions
CoffeeScript, Sass, Less, Compass,
Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript,
Traceur
Frameworks
Backbone, Angular,
Ember, YUI, Agility, CanJS, Dojo, Meteor, Derby, Spine, Batman, Cujo,
Knockout, Knockback,
jQuery Mobile,
jQuery UI, Closure, ExtJS,
Montage
Workflow
Chrome DevTools,
LiveReload, Codekit, Brunch,
WebStorm IDE, watch,
Testing, Tincr, JSHint,
BrowserStack, Selenium, WebGL Inpector
Performance
JavaScript, CSS and
Heap profiling,
GPU, memory, tracing,
PageSpeed
Build
Grunt, Rake, Marven,
Concat, r.js, Miification,
Image optimization, Compression,
Module loading,
mod_pagespeed
Travis
Front-end Tooling Landscape
HTML5 Boilerplate,
Twitter Bootstrap, Backbone
Boilerplate, Angular seed,Ember starter,
Zurb Foundation
Boilerplate Abstractions
CoffeeScript, Sass, Less, Compass,
Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript,
Traceur
Frameworks
Backbone, Angular,
Ember, YUI, Agility, CanJS, Dojo, Meteor, Derby, Spine, Batman, Cujo,
Knockout, Knockback,
jQuery Mobile,
jQuery UI, Closure, ExtJS,
Montage
Workflow
Chrome DevTools,
LiveReload, Codekit, Brunch,
WebStorm IDE, watch,
Testing, Tincr, JSHint,
BrowserStack, Selenium, WebGL Inpector
Performance
JavaScript, CSS and
Heap profiling,
GPU, memory, tracing,
PageSpeed
Build
Grunt, Rake, Marven,
Concat, r.js, Miification,
Image optimization, Compression,
Module loading,
mod_pagespeed
Travis
Front-end Tooling Landscape
HTML5 Boilerplate,
Twitter Bootstrap, Backbone
Boilerplate, Angular seed,Ember starter,
Zurb Foundation
Boilerplate Abstractions
CoffeeScript, Sass, Less, Compass,
Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript,
Traceur
Frameworks
Backbone, Angular,
Ember, YUI, Agility, CanJS, Dojo, Meteor, Derby, Spine, Batman, Cujo,
Knockout, Knockback,
jQuery Mobile,
jQuery UI, Closure, ExtJS,
Montage
Workflow
Chrome DevTools,
LiveReload, Codekit, Brunch,
WebStorm IDE, watch,
Testing, Tincr, JSHint,
BrowserStack, Selenium, WebGL Inpector
Performance
JavaScript, CSS and
Heap profiling,
GPU, memory, tracing,
PageSpeed
Build
Grunt, Rake, Marven,
Concat, r.js, Miification,
Image optimization, Compression,
Module loading,
mod_pagespeed
Travis
Front-end Tooling Landscape
HTML5 Boilerplate,
Twitter Bootstrap, Backbone
Boilerplate, Angular seed,Ember starter,
Zurb Foundation
Boilerplate Abstractions
CoffeeScript, Sass, Less, Compass,
Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript,
Traceur
Frameworks
Backbone, Angular,
Ember, YUI, Agility, CanJS, Dojo, Meteor, Derby, Spine, Batman, Cujo,
Knockout, Knockback,
jQuery Mobile,
jQuery UI, Closure, ExtJS,
Montage
Workflow
Chrome DevTools,
LiveReload, Codekit, Brunch,
WebStorm IDE, watch,
Testing, Tincr, JSHint,
BrowserStack, Selenium, WebGL Inpector
Performance
JavaScript, CSS and
Heap profiling,
GPU, memory, tracing,
PageSpeed
Build
Grunt, Rake, Marven,
Concat, r.js, Miification,
Image optimization, Compression,
Module loading,
mod_pagespeed
Travis
Front-end Tooling Landscape
•Client? Server?•Dev? Ops?
by Developers Summit 2008越境しよう！
• http://www.flickr.com/photos/wwworks/1384954600/
• http://www.flickr.com/photos/trippchicago/1076657776/
• http://www.flickr.com/photos/knitorious/3298975640/
• http://www.flickr.com/photos/culturadotabacoii/6086024124/
• http://www.flickr.com/photos/mah_aaah/3660470519/
• http://jigokuno.com/?eid=306
Photo Credit