フロントエンドエンジニア（仮）〜え、ちょっとフロントやること多すぎじゃない！？〜

1. 13-D-3 #devsumiD フロントエンドエンジニア（仮） ∼え、ちょっとフロントやること多すぎじゃない！？∼ アメーバ事業本部ゲーム部門コアグループ石本光司

2. @t32k

3. Web Designer 2008 - 2011

4. Web Director 2011 - 2012

5. Web Developer 2012 -

6. Sass & Compass徹底入門 ∼CSS のベストプラクティスを効率よく実現するために∼

7. Agenda • • • • フロントエンドエンジニアとは？ツールを管理するスピードを追跡するまとめ

8. フロントエンドエンジニアとは？

9. http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/

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 ﬁne manual

11. Developer HTML/CSS Coder, JavaScripter, Flash Creator

12. http://uptodate.frontendrescue.org/

13. ツールを管理する

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 Workﬂow 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. Community App Team Producer UI Designer JavaScript HTML/CSS System Engineer System Engineer System Engineer iOS/Android Engineer

16. CSS preprocessors

17. http://mhs.github.io/scout-app/

18. $9.99 http://livereload.com/

19. $28 https://incident57.com/codekit/

20. ＼(^o^)／／(^o^)＼

21. http://gruntjs.com/

22. Installation

23. http://nodejs.org/

24. + http://nodejs.org/

25. $ npm install grunt-cli -g grunt-cliをインストール `-g`はグローバル環境にインストール

26. Package.json Gruntﬁle.js(.coffee)

27. Package.json

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. $ npm install grunt --save-dev $ npm install grunt-csso --save-dev gruntをインストール grunt-<plugin_name> をインストール `--save-dev`はdevDependenciesに記録

30. Gruntﬁle.js(.coffee)

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. Anatomy of a Gruntfile • grunt.initConfig • grunt.loadNpmTasks • grunt.registerTask

33. module.exports = function(grunt) { // プロジェクト設定 grunt.initConfig({ // タスク設定 csso: { files: { 'output.css': ['input.css'] } } }); // タスクで必要なプラグインを読み込む grunt.loadNpmTasks('grunt-csso'); // カスタムタスクを登録 grunt.registerTask('default', ['csso']); };

35. grunt.initConfig({ // タスクの設定 csso: { // dev: { // files: { // // タスクターゲットファイルディレクトリアウトプット:インプット 'output.css': 'input.css', }, prod: {・・・} }, task-foo: {・・・} }

37. grunt.loadNpmTasks('grunt-csso'); npm installしたプラグインを使用する

38. http://gruntjs.com/plugins

39. VS. 2294 plugins 284 plugins 2014.02.13

40. Maple Realistic preprocessors-based CSS framework for mobile.

41. https://github.com/t32k/maple

42. grunt-contrib-connect/watch

43. grunt-sass

44. grunt-autoprefixer .flexbox { display: flex; } .flexbox { display: -moz-flex; display: -webkit-flex; display: flex; } Before After

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. grunt-contrib-csslint

47. grunt-kss

49. https://github.com/t32k/maple/blob/master/Gruntfile.coffee

50. http://yeoman.io/

51. $ npm install yo -g $ npm install generator-maple -g Yeomanをインストール generator-<name> をインストール

52. $ mkdir your_proj && cd $_ $ yo maple $ grunt ワーキングディレクトリを作成・移動 yoコマンドでmapleを実行 gruntデフォルトタスクを実行

53. generator-maple

54. スピードを追跡する

55. http://www.smashingmagazine.com/2013/06/11/front-end-ops/

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. :20 80

58. http://www.webpagetest.org/

59. Beyond Onload • Start Render • Speed Index

60. Private Instance for Ameba

61. $ npm install webpagetest -g https://github.com/marcelduran/webpagetest-api

62. Performance Test

63. Test Build Monitor Deploy Users

64. Test Build Perf Monitor Users Deploy

65. まとめ

70. Client? Server? • Dev? Ops? •

71. 越境しよう！ by Developers Summit 2008

72. Thanks! koji.ishimoto @t32k t32k

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

フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜

Koji Ishimoto