Frontrend Vol.4 メモ http://atnd.org/events/35720

frontrend-04.md

Frontrend 04

JavaScript Development Tools

id:Layzie

GUI ツール

Chrome Develoepr Tools

• Chrome DevTools.next
• command + shift + O
• command + option + F grep

Charles

• Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy
• Debug proxy
• Maplocal: ローカルのデータでサーバー上のデータを上書きしたり出来る
• Throttle: 3G 相当の速度を再現

DocHub

• DocHub | Instant Documentation Search

jsfiddle

• Create a new Fiddle - jsFiddle
• Debug on mobile: モバイルのデバッグが出来るのが便利

jsperf

• jsPerf: JavaScript performance playground

browserling

• browserling - interactive cross-browser testing
• UA 仮想確認ツール
• 20 USD / mo 安い...!?

CUI ツール

JSHint

• // Your code goes here.

jq

• jq
• JSON processor
• npm install -g jq
• cat foo.json | jq '.results[]' | {from_user, test}

Doctor JS

• Doctor JS
• npm install -g jsctags

Yeoman

• Yeoman - Modern workflows for modern webapps

Nodefront

• Nodefront by karthikv

jQuery Performance Tips

@pocotan001

速くするには、マシンの仕事を、少なくしろ。

• パフォーマンスとメンテナンス性のトレードオフ
• 2012-05 を境に JavaScript と jQuery の利用推移が逆転 (jQuery 増) した

ファイルサイズを減らす

• 1ms / 1kb のパース時間 (モバイル)
• MSIE の条件付コメントで読み込む jQuery を変更
• Grunt のカスタムビルドで不要な機能を削除
• ajax/css/effects/offset/dimensions の削除が可能 (最小構成から増やして行く)
• jquery/jquery-migrate · GitHub
• jquery-migrate.js による deprecated feature detection が提供されている

セレクタの高速化

// slow
$('#target p')
document.querySelectorAll('#target p')

// fast
$('#target').find('p')
document.getElementById('target') AND $.find('p')

リフローの影響を考える

• CSS Reflow - jQuery.com - YouTube
• リフロー: レイアウトの再計算 ("layout" in Chrome)
• リペイント: 色の変更等

視覚化

Chrome Developer Tools: Rendering -> Show piant rectangles

• offset や position は取得だけでもリフローが発生

// Reflowed
$('<p/>').append($body).hide()

// Non-Reflowed
$('<p/>').hide().append($body)

jQuery Animation vs. CSS3 Animation

• gnarf37/jquery-requestAnimationFrame · GitHub

throttle/debounce

• jQueryを使った文字数カウントとthrottle/debounce - ELAB.
• Ben Alman » jQuery throttle / debounce: Sometimes, less is more!

まとめ

小さな効率は忘れよう。
時間の 97 % について語ろう。
はやまった最適化は諸悪の根源だ。

- Tony Hoare?

• Fastersite: How (not) to trigger a layout in WebKit

Testable JavaScript

@cssrader

テストしやすい JavaScript

テストしてますか

• テストはしてないが、テストしたい!
• Kent Beck, father of TDD
• tdd - How deep are your unit tests? - Stack Overflow

リファクタリングを前提で考える

The first draft of anything is shit

テストしづらい?

• 文脈型のコードの色付して分類し、役割を見分ける
• テストが難しいのであれば、テストしようとしているコードがテストしやすいコードになっていない
• Adventures in JavaScript Development
• テスト駆動開発
• テスト駆動リファクタリングから
• Steve Freeman

単一責任の原則

Write programs that do one thing and do it well.

• Unix philosophy - Wikipedia, the free encyclopedia

studiomohawk/QOF · GitHub

ユニットテストのツール

Jasmine

• BDD
• introduction.js
• Like rspec

Qunit

• QUnit
• Used by jQuery team
• Easy to test DOM

Mocha

• Mocha - the fun, simple, flexible JavaScript test framework
• Mocha doesn't have default assertion, but you can choose
• Chai, as assertion system
• Assert - Chai

PhantomJS

• PhantomJS: Headless WebKit with JavaScript API

Wiki

• Home · studiomohawk/js-testing-boilerplates Wiki

テストのセットアップ

テスト自動化

• Grunt による自動化
• studiomohawk/js-testing-boilerplates · GitHub

テストにふれる

• JavaScript Koans
• mrdavidlaing/javascript-koans · GitHub
• studiomohawk/javascript-koans · GitHub

まとめ

テストしやすい JavaScript を書く事

Why do we fall sir?
So we might learn to pick ourselves up

- Alfred Pennyworth

• 結合テスト
• CasperJS, a navigation scripting and testing utility for PhantomJS | CasperJS 1.0.2
• Selenium - Web Browser Automation

jQuery to Backbone

@ahomu

アーキテクチャを意識した JavaScript

• Backbone: 構造化の手段を提供
• Selector = jQuery
• Utility = Underscore

Addy Osmani

MVC since 1979

Smalltalk