Ys' Library | プログラミング・ガジェット徒然日記
JavaScriptやHTML、その他プログラミングの中で詰まったこととその解決法、またはガジェットについて書くブログです。
2013年2月11日月曜日
Frontrend vol.4に参加してきた
[Frontrend vol.4](http://atnd.org/events/35720)に参加したのでメモをまとめてみる。 #JavaScript Development Tools ##JavaScript開発の効率アップ ## GUI tools - Chrome Developer Tool - Shortcutを覚えると便利 - 複数の方法でデバッグできる - ブレークポイントはれる。ステップ実行も。 - DOMの属性が変更になった時、 - Error発生時、 - 特定のイベントが発生した時等にもブレークできる - Timeline - Chromeでどのようにイベントが起きているか、いつ描画されているか、等が時系列でわかる - Profile - 重い処理とか調べられる - Chrome url - 様々な情報が閲覧できる - chrome://net-internals、その他いろいろ… - Charles - デバッグ用のProxyサーバをローカルでたてられる - MapLocal - 指定したファイルをローカルのものと置き換えられる - Throttle - 3G回線等の速度のシミュレーションができる - [DocHub](http://dochub.io/#css) - JavaScript, CSS等のAPIのリファレンスサイト - [JSFIDDLE](http://jsfiddle.net/) - オンラインでjsやhtmlを書いてテストできる - jsdo.it等の類似サイトと違い、公開する必要がない - mobileブラウザでもデバッグできる - [jsPerf](http://jsperf.com/) - jsのパフォーマンスを調べるテストをのせられるサイト - 他の人が実行すると、それが蓄積されていく - 他人のテストを改善して公開することもできる - [browserling](http://browserling.com) - 指定したブラウザをエミュレートしてサイトを表示してくれる - 有料サービス。制限ありの無料版もあり ##CUI tools - [JSHint](http://www.jshint.com/) - jsではやってはいけないことを指摘してくれる - サイト版、node.js製のCUIアプリがある - 最近のjsエディタはjshintが組み込まれていることも多い - .jshintrcで警告レベル等設定できる - [./jq](http://stedolan.github.com/jq/) - JSONプロセッサ - JSONの出力結果をクエリで操作 - 最新版は1.2だけど、homebrewだと1.1 - Doctor JS - jsのtagファイルを生成 - Yeoman - Webアプリケーション作成支援ライブラリ - Googleの中の人達で開発(Google製ではない) ##Conclusion - 最近のJavaScript開発には便利なツールがたくさんある - 「不便だな」と思ったらツールを探してみるサイクルを作ると幸せになれる - CUIだからと食わず嫌いしないほうがいいよ! --- #jQuery Performance Tips - 早くするには、マシンの仕事を少なくしろ - パフォーマンスチューニング == 限りなくネイティブなJavaScriptに近づけていく - ファイルサイズをへらす - jQueryは次第に大きくなっている - 1kbにつき1msのパース時間(モバイルデバイス) - IEのバージョンによって1.9と2.0を使い分ける - gruntを使ったカスタムビルドツールが提供されているので、最初は最小構成で開発していくといいのでは。 - セレクタのチューニング - $('#id') < $('tag') < $('.class') < $('e:first-child') < $('その他の拡張') の順で早い ``` $('#target p') //querySelectorAll() -> $('#target').find('p') //getElementById() + getElementsByTagName() $('#target').find('p:first') -> $('#target').find('p:first-child') //getElementById() + querySelectorAll() -> $('#target').find('p').first() ``` - キャッシュの活用も忘れずに - リフローの影響を考える - DOMツリーはマークアップと一対一 - レンダーツリーは視覚要素だけ(headとか、display:noneとかは入らない) - リフローが起きるプロパティの変更はなるべく避ける - border-radiusとかtext-shadowとかはリペイントだけだけどコスト高い… - WebKitではリフローはlayoutと表される - リフローが発生しうるトリガー - CSSの変更、取得 - css(), addClass()... - DOM要素の操作 - html()とか? - 特定のプロパティの取得 - offset()とか - ユーザの操作 - windowサイズの変更とか - 描画する前にプロパティを変更する - 描画の領域を明示しておく - imgは出来る限りwidthとheightを指定する - `</body>`の手前に`<script>`タグを書くと… - scriptタグをhead内に記述する - しかしそれでは全体的に遅くなってしまう - スタイル要素は全てcssファイルに - requireJS等の非同期ローダー - scriptタグのasync属性を指定した上でheadタグ - スタイルの変更はできるだけ末端要素で - アニメーションはposition: absolute, fixedで - テーブルレイアウトは使わない - ボトルネックになりやすい処理 - アニメーションとか色々 - ボトルネックを見つけたい時はchromeのcanaryが便利 - css3のアニメーション使えるところは使う - requestAnimationFrame - throttle/debounce #Conclusion ## "小さな効率は忘れよう ## 時間の97%について語ろう。 ## 早まった最適化は諸悪の根源だ" - TONY HOARE? --- #Testable JavaScript - そもそもなぜテストする必要があるのか? - アプリケーション言語として成長してきた - 本物のプログラミング言語になってきた - 本物? - 今動いているのだからそれでいい、はもはや現実的ではない - リファクタリングを前提で考える - First draft of everything is shit - Ernest Hemingway - ロジックにもデザインがある - BEST PRACTICES - オブジェクト指向 - デザインパターン - MV*構造 - テスト - TDD(テスト駆動開発) - TESTING IS A TOOL - どう使いこなすかは個人の自由 - うまく使いこなせば様々な作業が楽になる ##テストしやすいコードとは? - テストしづらいコードとは - コードの役割分担が複雑で、コードの役割が密接な関係を持っていると、テストを行うことが難しくなる - テストを書くのが難しい、のではなくてテストを書いているコードに問題がある場合が多い - TDDではテストを最初に書くのでテストしづらいコードにはならない、しかし… - テスト書き慣れてない人には難しい… - そこで… - テスト駆動リファクタリング - テスト駆動開発はデザインプロセス - 「JavaScriptパターン」という本がオススメ - モジュールパターン - テストはDOM操作が多いのでQUNITで - 一つのことだけをするメソッドにする(単一責任の原則) - コード量は増えるが、テストしやすく、リファクタリングしやすいコードになる ##ユニットテストツール - Jasmine - BDD(behavior driven development) - QUnit - jQueryが使っている - DOM周りのテストがしやすい - gruntがデフォルトでサポートしているのもQUnit - 結果表示用のHTMLは自分で用意する必要がある - Mocha - もともとNode.jsで開発するために作られた - AssertionのAPIは自分で選ぶ - PhantomJs - ヘッドレスWebkitブラウザ - コマンドラインで実行するブラウザ - [js testing boilerplates](github.com/studiomohawk/js-testing-boilerplates/wiki) - ここでjsのテストツールについてまとめていく予定 - ユニットテスト設定 - テストの自動化 - 面倒な繰り返しは自動化し、大事なことに時間を割けるようにする - grunt - 設定ツールを[js testing boilerplates](github.com/studiomohawk/js-testing-boilerplates)で公開している - [JavaScript-Koans](https://github.com/liammclennan/JavaScript-Koans) - ユニットテストを使ってJavaScriptについての勉強ができる #Conclusion ## テストを書くこと自体よりも、テストしやすいコードを書くのが大事 ## まずはテストを書いてみよう ## どのツールにも得手不得手があるからとりあえずやってみよう ## 自動化すると幸せになれる ## "Why do we fall, sir? So that we can learn to pick ourselves up." --- #jQuery to backbone - backbone - 構造化の手段を提供してくれるライブラリ - 1500行程度の軽量さといじりやすい柔軟さ(コメント込み) - 国内外を問わず利用が広がっている - 依存するライブラリ - jQuery/Zepto.js(lightweight clone) - Underscore.js/Lodash(more faster) #jQuery(これまで) - DOM APIを隠蔽して、簡潔に記述する(write less, do more) - クロスブラウザ対応の諸問題を解決する - プラグインの充実と、エコシステム形成 #フロントエンド実装の変化 - Webサイト - 静的HTML, CMS利用 - 従来のWebサービス、Webアプリ - サーバサードで画面遷移を設計 - 新し目なWebサービス、Webアプリ - シングルページ、リッチインターフェイス -> フロントエンドの比重が上がる jQueryでは解決できない問題が増えていく -> 構造化された設計が必要 #アーキテクチャ - アーキテクチャと言えば猫も杓子もMVC - 1979年に概念が生まれる(smalltalk) - ただし、今のものとは少し概念が違う #Backbone.jsとは - 厳格で多機能で生産性を担保する強いフレームワークではない - 1500行くらいの軽いコード - View Model Collection Router - Controllerはない - 優しい構造化 - MVCを気にしすぎることはない - Todo MVC - 様々なライブラリやフレームワークで同じTodoアプリをつくることで特性を比較 - Todo MVCにあるだけで30以上 - しかし、ほとんどがMV*ではない - 大きな問題を小さく分割して解決する - モジュラーなJavaScript - デザインパターンやアーキテクチャの価値 - View - 見た目とUIにおける入出力 - DOM要素の処理 - Model - 取り扱うデータのいち単位 - ストレージとの通信、同期 - APIや情報のレコードを表現 - Collection - Modelが集合したリスト - リスト操作…where, filterなど - Modelと同様の通信・同期 - Router - URLによるルーティング - hashchange, pushstate - 遷移処理のnavigate - DEMO - GitHub APIを使ったGistのビューワーアプリ - how 1. とりあえずinitializeに全部突っ込む 2. renderに描画を分離 3. templateを分離 4. eventを分離 5. データをModelに入れてみる - Backboneの構造に従って作っていけば、自然とテストしやすいコードになる - ライブラリの利用強度とパフォーマンス - jQueryにも言えるが、使い方によっては簡単に重くなる - パフォーマンスを考えて慎重に使うことが重要 - ライブラリの努力を無駄にしない! #アーキテクチャを考えるためのBackbone - 学習手段としてのライブラリ - Backbone has made me a better programmer - フルスタックではないので学習コストは低い - もちろんデフォルトの機能は限られる - 良い習慣のために、*とりあえず*分けてみる - ものはためし - ライブラリの利用が学習につながる - RequireJSも学習に良い感じ - 派生ライブラリ - Marionette - Chaplin - Vertebrae - ぼくのかんがえたさいきょうの… - 車輪の再発明的な… - 複雑性を増しているだけでは? - 学習目的であればむしろやっていいのでは ##Conclusion #アーキテクチャやデザインパターンは自分で手を動かして覚えていくのが近道 --- こんなかんじで。いろいろ便利なツールの紹介があったので業務でも使っていこうかな。 あと、backbone.jsのソースは読もう。
0 件のコメント:
コメントを投稿
次の投稿
前の投稿
ホーム
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿