フロントエンドエンジニア(仮)

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

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

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

自己紹介

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

  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

ツールを管理する

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

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

スピードを追跡する

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!