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

I wanna be a front-end engineer.md

• Developers Summit 2014：【13-D-3】フロントエンドエンジニア（仮）～え、ちょっとフロントやること多すぎじゃない！？～
• フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜 // SlideShare

2年前でWebデザイナーだった私がどのようにフロントエンドエンジニアなっていったのか。デザイナーにもなれず、エンジニアにもなれないどっちつかずな職種で自分のアイデンティティを模索し、日々の膨大なタスクに追われながら、フロントエンドのワークフロー(Grunt)、最適化（パフォーマンス）について考えたことを紹介します。

『（仮）が取れた時、運命の技術者に出会える・・・』

自己紹介

• Koji Ishimoto - t32k.me
• Web Performance
  • High Performance Web Design
  • Coding Web Performance
  • Long Life Web Performance Optimization
• Web Analytics
  • Using Google Analytics with jQuery Mobile
  • 大規模サイトにおけるGoogleアナリティクス導入から成果まで
• Sass/Compass
  • スマートフォンWebアプリ最適化”３つの極意”
  • パフォーマンスから考えるSass/Compassの導入・運用
  • モバイル制作におけるパフォーマンス最適化について
  • Manning: Sass and Compass in Action

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

• A Baseline for Front-End Developers - Adventures in JavaScript Development

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

• How to keep up to date on Front-End Technologies - The Recipe

ツールを管理する

Front-end Tooling Landscape

• Boilerplate : HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation
• 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

GUI Apps

• Sass: Syntactically Awesome Style Sheets
• Scout - Compass and Sass without all the hassle
• LiveReload
• CodeKit — THE Mac App For Web Developers

Grunt

• Grunt: The JavaScript Task Runner
• node.js

$ npm install grunt-cli -g

Package.json

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

$ npm install grunt --save-dev
$ npm install grunt-csso --save-dev

Gruntfile.js

$ npm install grunt-init -g
$ git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
$ grunt-init gruntfile

Gruntfile.js

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

• Plugins - Grunt: The JavaScript Task Runner
• t32k/maple
• Yeoman - Modern workflows for modern webapps

$ npm install yo -g
$ npm install generator-maple -g
$ mkdir your_proj && cd $_
$ yo maple
$ grunt

スピードを追跡する

• Front-End Ops | Smashing Magazine

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

• High Performance Web Sites - O'Reilly Media
• WebPagetest - Website Performance and Optimization Test
• WebPagetest in 5 minutes — MOL
• marcelduran/webpagetest-api
• TAP Plugin - Jenkins - Jenkins Wiki
• Velocity 2013 レポート｜サイバーエージェント 公式エンジニアブログ

$ npm install webpagetest -g

Thank you!