February 14, 2014

フロントエンドエンジニア（仮）

〜え、ちょっとフロントやること多すぎじゃない！？〜

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

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

自己紹介

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

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

JavaScript
Git(and a GitHub account)
Modularity, dependency management, and production builds
In-Browser Developer Tools
The command line
Client-side templating
CSS preprocessors
Testing
Process automation (rake/make/grunt/etc.)
Code quality
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

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

grunt-contrib-connect/watch

grunt-sass

grunt-contrib-csslint

grunt-kss

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

Thank you!