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

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

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

13. http://uptodate.frontendrescue.org/

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 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

19. Community App Team Producer UI Designer JavaScript HTML/CSS System Engineer System Engineer System Engineer iOS/Android Engineer

20. CSS preprocessors

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

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

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

24. ＼(^o^)／／(^o^)＼

29. http://gruntjs.com/

30. Installation

31. http://nodejs.org/

32. + http://nodejs.org/

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

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

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に記録

40. Gruntﬁle.js(.coffee)

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']); };

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

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

50. http://gruntjs.com/plugins

51. VS. 2294 plugins 284 plugins 2014.02.13

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

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

57. grunt-contrib-connect/watch

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; ...

61. grunt-contrib-csslint

62. grunt-kss

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

65. http://yeoman.io/

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. スピードを追跡する

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

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

74. http://www.webpagetest.org/

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

81. Test Build Monitor Deploy Users

82. Test Build Perf Monitor Users Deploy

83. まとめ

88. Client? Server? • Dev? Ops? •

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

90. Thanks! koji.ishimoto @t32k t32k

91. 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

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

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

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

Más de Koji Ishimoto

Más de Koji Ishimoto (19)

Último

Último (20)