フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
•
176 likes•39,251 views
Koji Ishimoto gives a presentation on front-end engineering. He defines a front-end engineer's responsibilities as including JavaScript, version control with Git, modular code, browser developer tools, command line, templating, CSS preprocessors, testing, automation, code quality and manuals. He discusses common front-end tools, managing tools with Grunt, and tracking speed with tools like WebPageTest to monitor performance. The talk aims to provide an overview of the front-end landscape and importance of performance.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
Similar to フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜 (20)
More from Koji Ishimoto
More from Koji Ishimoto (19)
Recently uploaded
Recently uploaded (20)
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
- 2. @t32k
- 3. Web Designer 2008 - 2011
- 4. Web Director 2011 - 2012
- 6. Sass & Compass徹底入門 ∼CSS のベストプラクティスを効率よく実現するために∼
- 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
- 12. Developer HTML/CSS Coder, JavaScripter, Flash Creator
- 15. ツールを管理する
- 17. 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
- 19. Community App Team Producer UI Designer JavaScript HTML/CSS System Engineer System Engineer System Engineer iOS/Android Engineer
- 24. ＼(^o^)／ ／(^o^)＼
- 30. Installation
- 33. $ npm install grunt-cli -g grunt-cliをインストール `-g`はグローバル環境にインストール
- 35. Package.json
- 36. $ 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!!
- 38. $ npm install grunt --save-dev $ npm install grunt-csso --save-dev gruntをインストール grunt-<plugin_name> をインストール `--save-dev`はdevDependenciesに記録
- 41. $ npm install grunt-init -g $ git clone https://github.com/gruntjs/grunt-initgruntfile.git ~/.grunt-init/gruntfile $ grunt-init gruntfile grunt-initをインストール GitHubからテンプレートをクローン 対話形式でいろいろ聞かれるけどENTER!!
- 44. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
- 45. module.exports = function(grunt) { // プロジェクト設定 grunt.initConfig({ // タスク設定 csso: { files: { 'output.css': ['input.css'] } } }); // タスクで必要なプラグインを読み込む grunt.loadNpmTasks('grunt-csso'); // カスタムタスクを登録 grunt.registerTask('default', ['csso']); };
- 46. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
- 47. grunt.initConfig({ // タスクの設定 csso: { // dev: { // files: { // // タスク ターゲット ファイルディレクトリ アウトプット:インプット 'output.css': 'input.css', }, prod: {・・・} }, task-foo: {・・・} }
- 48. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
- 53. Maple Realistic preprocessors-based CSS framework for mobile.
- 58. grunt-sass
- 59. grunt-autoprefixer .flexbox { display: flex; } .flexbox { display: -moz-flex; display: -webkit-flex; display: flex; } Before After
- 60. 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; ...
- 62. grunt-kss
- 63. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask
- 66. $ npm install yo -g $ npm install generator-maple -g Yeomanをインストール generator-<name> をインストール
- 67. $ mkdir your_proj && cd $_ $ yo maple $ grunt ワーキングディレクトリを作成・移動 yoコマンドでmapleを実行 gruntデフォルトタスクを実行
- 68. generator-maple
- 69. スピードを追跡する
- 71. “ 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
- 73. :20 80
- 76. Beyond Onload • Start Render • Speed Index
- 77. Private Instance for Ameba
- 78. $ npm install webpagetest -g https://github.com/marcelduran/webpagetest-api
- 80. Performance Test
- 83. まとめ
- 84. 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
- 85. 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
- 86. 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
- 87. 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
- 89. 越境しよう ！ by Developers Summit 2008