第1回 Build Insider OFFLINE勉強会のメモ

Blogを書くまでが勉強会!

という事で第1回 Build Insider OFFLINEに参加して来たのでその際のメモ。（間違っているなどの箇所が有れば修正します！)

★JavaScripライブラリーを使い倒そう！(Wingsプロジェクト　安西さん)

1.手間を省こう系

• jQuery,protorype.js
• jQueryUIなどのUIライブラリ。Choosen,竹取JS,FullCalendar,jqPlot(グラフ)など
• Twitter Bootstrap
• jQueryMobile

使いまくると読み込むファイル数が多くなり、表示速度が遅くなるので注意。

高速化のポイント

• ファイル数を少なく
• CSSスプライト
• JavaScriptの読み込みタイミング
• ブラウザキャッシュ

2.言語特性補う系

• CoffeeScript
• TypeScritp

3.フレームワーク系

• Backbone.js
• Angular.js
• Knockout.js
• Ember.js
• Spine.js

4.ゲーム系

新人教育にゲーム系フレームワーク利用させるのはオブジェクト指向の理解としても有効だった。

• enchant.js
• Unity

5.サーバー系

• Node.js
• Express.js

6.テスト系

テストフレームワーク

• Qunit
• Mocha
• Jasmine

テストを書いてからメソッドを書く。→TDD形式。 ユーザーからの振る舞い→BDD形式。

• JSTestDriver
• sinon.js

静的解析

• JSHint
• Jscoverage

JSテストでLinux,Mac,WindowsをVMで立ててJenkinsとJsTestDriverを利用した。

★3つのMVC系人気フレームワーク、Backbone.js／AngularJS／Knockout.js

Backbone.js（LINE株式会 清水さん）

• Angluar.jsはフルスタック
• MVCモデル
• BackboneにはPluginなどがある。Utilityも存在。
• Plugin→backbone relational,backbone forms,marionettejs,backbone boilerplate
• Angular.jsはPC,モバイルはBackbone.jsの方が使いやすい印象。（Angularはフルスタックだからでかい）
• BackboneはREST使うとすごく短いコードで書ける。
• テストはGruntを利用。jasmine,mochaなど。テストコードが書きやすい。
• Gruntのwatchタスクでファイル変更を監視して、テストコード自動実行みたいなの便利。
• Grunt notifyで実施したテストでエラーだった場合にMacのNotification(Growl)なども出来て便利。

Angular.js(金井さん)

得意

• CRUDとか強力。
• 管理ページ、マイページ作成など得意。

苦手

• モバイル系は苦手。というかファイルサイズがかなり大きい。
• ゲームなどのグラフィックの扱い。

テスト

• Karma

モバイルについて

• ngMobileというのが追加されてはいるが、現在はフルスタックのため、全ての機能がある。
• 元からダウンロードするアプリとか(リソースにAngularJSを置く)であればモバイルでも有用。

UI

• AngularUIなど、色々あるので外部のものを利用するのが良さげ。

Knockout.js(沢渡さん)

• MVVMパターン
• 単一のライブラリでjQueryにも依存しない。
• 他のフレームワークと比べると軽量。
• Observableとは？Knockout.jsの機能。機能の通り、値が変わったか、などを確認出来る。varで宣言した値が変わった場合などの監視も可能。
• subscribeで変更された時に通知する先を指定可能。コールバック関数を宣言。
• ko.computedはobservableと同様に値の監視が出来る。
• もう一つの大きな機能。バインディングが存在する。

★スマホ向けWebアプリ開発で使えるフロントエンド高速化手法( 株式会社gloops　児玉さん)

基本

• styleは上に、scriptは下に
• 画像の形式。もしくは画像をCSSで代用。
• minify化、キャッシュの利用。
• CSSスプライトの利用。
• DataURIスキームを使う。

CSSスプライト

• HTTPリクエストが減る。一回に。
• デメリットとしては画像の表示は遅くなる。

DataURIスキーム

• HTTPリクエスト無し
• CSSスプライトより表示処理は早い
• デメリットとして画像ファイルの容量が大きくなるのでキャッシュが必須。

どの程度まで頑張る？

• 1秒以内とか目標を。

ページサイズとHTTPリクエスト減らしても遅い場合は？

• CSSセレクタは右から左へ解釈されるのでそこを考慮すべき。ただし、そこまで改善が見込めない場合も有るので、やりすぎは良くない。
• 処理が重いCSS。border-image,background-size グラデーション、box-shadow,text-shadowなど。
• Gooogle Chrome Canaryで設定するとCSSの描画を繰り返す事が出来るので、そこで処理のボトルネックを探す事が出来る。
• JSでfor文のlengthは変数に入れて回すべき。処理速度の観点から。
• dom操作するとブラウザ側でスタイルやレイアウトの再計算が行われるので、なるべく少なくすべき。

ユーザー体感速度の高速化

• 操作出来る部分を先に表示する。例えば画像のレンダリング順番を変える。cssのbackground-imageよりimageタグの方が先にレンダリングされる。
• touchイベントとmouseイベントは違う。PCはmouseイベントのみ。また、スマホではtouchイベントが早い。
• touchstart→指が触れて発生。touchhend→ディスプレイから指を離すと発生。