フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜

32,702 views

Published on

Developers Summit 2014:【13-D-3】
https://gist.github.com/t32k/8934355

Published in: Design
0 Comments
177 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
32,702
On SlideShare
0
From Embeds
0
Number of Embeds
4,302
Actions
Shares
0
Downloads
136
Comments
0
Likes
177
Embeds 0
No embeds

No notes for slide

フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜

  1. 1. 13-D-3 #devsumiD フロントエンドエンジニア (仮) ∼え、ちょっとフロントやること多すぎじゃない! ?∼ アメーバ事業本部ゲーム部門コアグループ 石本 光司
  2. 2. @t32k
  3. 3. Web Designer 2008 - 2011
  4. 4. Web Director 2011 - 2012
  5. 5. Web Developer 2012 -
  6. 6. Sass & Compass徹底入門 ∼CSS のベストプラクティスを効率よく実現するために∼
  7. 7. Agenda • • • • フロントエンドエンジニアとは? ツールを管理する スピードを追跡する まとめ
  8. 8. フロントエンドエンジニアとは?
  9. 9. http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
  10. 10. A Baseline for Front-end 1. JavaScript 2. Git(and a GitHub account) 3. Modularity, dependency management, and production builds 4. In-Browser Developer Tools 5. The command line 6. Client-side templating 7. CSS preprocessors 8. Testing 9. Process automation (rake/make/grunt/etc.) 10. Code quality 11. The fine manual
  11. 11. Developer HTML/CSS Coder, JavaScripter, Flash Creator
  12. 12. http://uptodate.frontendrescue.org/
  13. 13. ツールを管理する
  14. 14. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  15. 15. Community App Team Producer UI Designer JavaScript HTML/CSS System Engineer System Engineer System Engineer iOS/Android Engineer
  16. 16. CSS preprocessors
  17. 17. http://mhs.github.io/scout-app/
  18. 18. $9.99 http://livereload.com/
  19. 19. $28 https://incident57.com/codekit/
  20. 20. \(^o^)/ /(^o^)\
  21. 21. http://gruntjs.com/
  22. 22. Installation
  23. 23. http://nodejs.org/
  24. 24. + http://nodejs.org/
  25. 25. $ npm install grunt-cli -g grunt-cliをインストール `-g`はグローバル環境にインストール
  26. 26. Package.json Gruntfile.js(.coffee)
  27. 27. Package.json
  28. 28. $ npm init This 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 fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. package.jsonを作成する 対話形式でいろいろ聞かれるけどENTER!!
  29. 29. $ npm install grunt --save-dev $ npm install grunt-csso --save-dev gruntをインストール grunt-<plugin_name> をインストール `--save-dev`はdevDependenciesに記録
  30. 30. Gruntfile.js(.coffee)
  31. 31. $ npm install grunt-init -g $ git clone https://github.com/gruntjs/grunt-initgruntfile.git ~/.grunt-init/gruntfile $ grunt-init gruntfile grunt-initをインストール GitHubからテンプレートをクローン 対話形式でいろいろ聞かれるけどENTER!!
  32. 32. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
  33. 33. module.exports = function(grunt) { // プロジェクト設定 grunt.initConfig({ // タスク設定 csso: { files: { 'output.css': ['input.css'] } } }); // タスクで必要なプラグインを読み込む grunt.loadNpmTasks('grunt-csso'); // カスタムタスクを登録 grunt.registerTask('default', ['csso']); };
  34. 34. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
  35. 35. grunt.initConfig({ // タスクの設定 csso: {    // dev: {    // files: { // // タスク ターゲット ファイルディレクトリ  アウトプット:インプット 'output.css': 'input.css', }, prod: {・・・} }, task-foo: {・・・} }     
  36. 36. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
  37. 37. grunt.loadNpmTasks('grunt-csso'); npm installしたプラグインを使用する
  38. 38. http://gruntjs.com/plugins
  39. 39. VS. 2294 plugins 284 plugins 2014.02.13
  40. 40. Maple Realistic preprocessors-based CSS framework for mobile.
  41. 41. https://github.com/t32k/maple
  42. 42. grunt-contrib-connect/watch
  43. 43. grunt-sass
  44. 44. grunt-autoprefixer .flexbox { display: flex; } .flexbox {   display: -moz-flex;   display: -webkit-flex;   display: flex; } Before After
  45. 45. 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; ...
  46. 46. grunt-contrib-csslint
  47. 47. grunt-kss
  48. 48. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
  49. 49. https://github.com/t32k/maple/blob/master/Gruntfile.coffee
  50. 50. http://yeoman.io/
  51. 51. $ npm install yo -g $ npm install generator-maple -g Yeomanをインストール generator-<name> をインストール
  52. 52. $ mkdir your_proj && cd $_ $ yo maple $ grunt ワーキングディレクトリを作成・移動 yoコマンドでmapleを実行 gruntデフォルトタスクを実行
  53. 53. generator-maple
  54. 54. スピードを追跡する
  55. 55. http://www.smashingmagazine.com/2013/06/11/front-end-ops/
  56. 56. “ 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
  57. 57. :20 80
  58. 58. http://www.webpagetest.org/
  59. 59. Beyond Onload • Start Render • Speed Index
  60. 60. Private Instance for Ameba
  61. 61. $ npm install webpagetest -g https://github.com/marcelduran/webpagetest-api
  62. 62. Performance Test
  63. 63. Test Build Monitor Deploy Users
  64. 64. Test Build Perf Monitor Users Deploy
  65. 65. まとめ
  66. 66. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  67. 67. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  68. 68. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  69. 69. Front-end Tooling Landscape Boilerplate HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation Abstractions Frameworks CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur Workflow Chrome Backbone, DevTools, Angular, LiveReload, Ember, YUI, Codekit, Agility, CanJS, Brunch, Dojo, Meteor, WebStorm Derby, Spine, Batman, Cujo, IDE, watch, Testing, Tincr, Knockout, JSHint, Knockback, BrowserStack, jQuery Selenium, Mobile, WebGL jQuery UI, Inpector Closure, ExtJS, Montage Performance Build JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespe ed
  70. 70. Client? Server? • Dev? Ops? •
  71. 71. 越境しよう ! by Developers Summit 2008
  72. 72. Thanks! koji.ishimoto @t32k t32k
  73. 73. Photo Credit • • • • • • 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

×