• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript 実践講座 Framework, Tool, Performance
 

JavaScript 実践講座 Framework, Tool, Performance

on

  • 1,191 views

taiga.jp

taiga.jp

Statistics

Views

Total Views
1,191
Views on SlideShare
671
Embed Views
520

Actions

Likes
3
Downloads
4
Comments
0

2 Embeds 520

http://dev.classmethod.jp 519
http://news.google.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 挨拶
  • 自己紹介
  • 参考 http://togetter.com/li/500132
  • ■ jQuery http://jquery.com/ ■ Underscore http://underscorejs.org/
  • ■ html5shiv / html5shim http://girigiribauer.com/archives/719 https://github.com/aFarkas/html5shiv http://www.skyward-design.net/blog/archives/000134.html IE8 以下が無視してしまう article, header, main など HTML5 で登場した新しいタグ認識させる ( createElement して擬似的に認識させる ) ■ selectivizr http://selectivizr.com/ CSS3 セレクタを使う上で問題となるのは IE HTML5 & CSS3 Support ( http://fmbip.com/litmus/ ) で確認すると、 IE6~8 はほとんど対応できていない…そんな IE でも CSS3 セレクタを使えるようにする <!--[if (gte IE 6)&(lte IE 8)]>   <script type="text/javascript" src="selectivizr.js"></script>   <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <![endif]--> lte = Less Than or Equal gte = Greater Than or Equal ■ es5-shim https://github.com/kriskowal/es5-shim ECMAScript5 のメソッドを実装していないブラウザでも使えるように出来るライブラリ ex:Array.prototype.forEach は IE8 以下のブラウザには実装されていない ECMAScript 5 compatibility table http://kangax.github.io/es5-compat-table/ ■ MDN(Mozilla Developer Network) samples Array.forEach Object.create http://html5please.com/
  • ■ Moderinizr http://modernizr.com/ ブラウザの機能の実装状況を調査するためのライブラリ 40 以上のすべての次世代技術を数ミリ秒後にテスト Modernizr と名づけられた boolean プロパティとして、これらの結果を含む JavaScript の Object を作る HTML 要素に何の技術がネイティブサポートするのか、しないのかを正確に説明する class を加える 古いブラウザに機能を与える polyfills を読み込むスクリプトローダーを提供する 参考 http://www.tam-tam.co.jp/tipsnote/html_css/post61.html ■ YepNope.js http://yepnopejs.com/ 条件付きの非同期リソースローダー ( JS, CSS など ) 条件分岐によって読むリソースを切り分ける事に特化したライブラリ Yep(Yes)Nop(No) という口語からつけられた名称 参考 http://blog.mach3.jp/2011/04/yepnope-js.html
  • ■■ お手軽にライブラリを使用 系 ■ HTML5 Boilerplate ( ボイラープレート ) http://html5boilerplate.com/ HTML5 Boilerplate はウェブサイトやアプリケーションを作成するためのテンプレート jQuery や Modernizr が使用できる 参考 http://www.ibm.com/developerworks/jp/web/library/wa-html5boilerplate/ 白石さんの記事 http://builder.japan.zdnet.com/html-css/35032198/ ■■ パッケージマネージャ ■ Bower http://bower.io/ https://github.com/bower/bower Bower は Web 開発向けのパッケージマネージャ ( node.js ベースのパッケージマネージャ ) 画像、 CSS, JavaScript といったリソースを簡単にインストールする事ができ依存関係を管理する 事前に node.js をインストールしておく必要がある 参考 http://blog.mach3.jp/2013/01/bower.html ■■ 足場…ワークフロー環境構築ツール ■ generators(Yeoman) ( ヨーメン / ヨーマン ) Web アプリケーションのための、ツール、フレームワークにて構築されるワークフロー環境 CI にて操作 ・プロジェクトテンプレート ・依存関係を管理のセットアップ ・テストの実行 ・ローカルの開発サーバーを提供 ・および展開の生産コードを最適化するように一元管理 http://yeoman.io/generators.html https://github.com/yeoman/yeoman/wiki/Generators 邦訳 http://qiita.com/sys1yagi/items/da002b32b6663faaa705
  • Browsers releasing very aggressively Modernizing faster than ever before Following standards more than ever before
  • 参考 http://www.tagneto.org/talks/jQueryRequireJS/jQueryRequireJS.pdf http://d.hatena.ne.jp/monjudoh/20101207/1291719328
  • 参考 http://wiki.ecmascript.org/doku.php?id=harmony:modules http://wiki.ecmascript.org/doku.php?id=harmony:modules_examples http://openweb.co.jp/2013/01/18/%E6%B0%97%E3%81%AB%E3%81%AA%E3%82%8B%EF%BC%81%E5%A4%A2%E3%81%8C%E3%81%82%E3%82%8B%EF%BC%81javascript-next-ecmascript6-1-es6%E3%81%AE%E5%9F%BA%E7%A4%8E%E7%9F%A5%E8%AD%98%E9%96%A2%E6%95%B0/
  • ■ Promises http://www.javascriptturnsmeon.com/promises-in-javascript/ 参考 Sample RequireJS 2.1.5 + jQuery 2.0.0 project http://t.co/ip8J7FgGHA コールバック地獄を Promise を使って回避 非同期処理が大変だけど promise で解消 callback は見づらいけど Promise chaining なら綺麗になる
  • Callback のネストより Promises のメソッドチェーン
  • 非同期コードを同期的に記述できる 将来は、 ES6 の “ yield” ( イールド ) と task.js を使うことで改善される…という話 task.js http://taskjs.org/ 参考 http://javascripter.hatenablog.com/entry/2013/05/03/185147 http://d.hatena.ne.jp/amachang/20080303/1204544340 http://developer.mozilla.org/ja/docs/New_in_JavaScript_1.7#Generators
  • 将来は、非同期実行のフローの理解をツールが助けてくれる
  • 日々の運用でコードが汚くなっていきますね…的な話
  • ■■ ビュー系 ■ Underscore ここでは _.templete http://documentcloud.github.io/underscore/#template ■ Mustache http://mustache.github.io/ “ Mustache” というのは口ひげを指す言葉で、「ますたっしゅ」とか発音するっぽい テンプレートタグに使用されている「 { 」が口ひげに似てるから? 様々な言葉で開発されているテンプレートエンジン Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Go, Lua, ooc, C++, ActionScript, Java, ColdFusion, Scala, and for node.js. 参考 http://blog.mach3.jp/2010/10/mustache-template-engine.html ■ Handlebars http://handlebarsjs.com/ JavaScript 用のテンプレートエンジン 参考 http://lealog.hateblo.jp/entry/2012/12/09/093059 http://be-hase.com/javascript/43/
  • ■■ モデル系 ■ Backbone http://backbonejs.org/ http://ando19721226.github.io/Backbone/ MVC フレームワーク 参考 http://appkitbox.com/knowledge/javascript/2013/03/15/backbone-1 ユーティリティー・ライブラリ underscore.js に大きく依存 jQuery/Zepto にも少し依存しています。 モデルの変更内容に応じてアプリケーションの HTML を自動的に更新するためコードの保守が容易になる クライアントサイドでのテンプレート機能の使用が促進されるため、 JavaScript に HTML を埋め込む必要がなくなる
  • ■■ コントローラ系 ■ Knockout http://learn.knockoutjs.com/ MVVM フレームワーク KnockoutJS は、 MVVM( モデル、ビュー、ビューモデル ) 形式の Web アプリケーションフレームワーク 特徴として ・データバインディング ・ UI の自動更新 ・テンプレート ・リストコントロール ・依存性の解決 などが挙げられる Microsoft Ajax CDN   http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js cdnjs   http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js ■ Batman http://batmanjs.org/ JSConff 2011 でプレゼンされた新しい JavasScript フレームワーク Batman が内包する実体は Model, View, Controller だが、強力なデータバインディングエンジンと 純粋な HTML View が存在するので、実際には MVVM ■ Ember http://emberjs.com/ モデルとビューの双方向バインディングと動的プロパティを強み デベロッパーはデータ中心アプローチによるアプリケーション開発を行う事ができる また、 Handlebars によるセマンティックテンプレートを用いて、モデルの変更時に自動的に HTML と CSS が更新される Ember.js には Enumerable API と呼ばれる列挙型の API が用意されていて Backbone.js で言うところの Collection を提供 ( 配列の取り出し、変換、フィルタ、結合など揃っている ) ■ Angular http://angularjs.org/ Google と コミュニティによって開発されているオープンソースのフレームワーク ブラウザ上で動作するウェブアプリケーションの開発に MVC アーキテクチャを取り入れることを目的としている ■ Knockback http://kmalakoff.github.com/knockback/ Knockback は、その名の通り Knockout.js と Backbone.js の良いところ取りの MVC フレームワーク 作者は、 Backbone.js の Model と Collection が気に入っているらしく、 brunch というフレームワークを使って開発したらしい Backbone.js から取り入れたのは ・ O/R マッピング ・シリアライゼーション ・ルーティング ・戻るボタン対応 など Knockout.js から取り入れたのは ・ MVVM ・軽量 DOM 操作 ・データバインディング など Knockback ならでは…の機能として ・遅延ローディング ・動的な配列ソーティング ・ビュー間の状態同期 ・国際化 など 参考 ( これいいかも ) https://gist.github.com/tily/1362110
  • angularjs 人気急上昇
  • 将来的には ES5 (ECMAScript5) の Getter/Setter にて、解決する。 ( すでに Ember や Backbone でも同じような機能は提供されているが… ) http://blogs.msdn.com/b/ie/archive/2010/09/07/transitioning-existing-code-to-the-es5-getter-setter-apis.aspx
  • クライアント端末のトラブルを知れない問題
  • いずれ実装される…?
  • クライアント側のエラーをサーバーに送る。 now - performance.timing.navigationStart をサーバーに送る http://www.html5rocks.com/en/tutorials/webperformance/basics/
  • クライアント側のエラーをサーバーに送る。 now - performance.timing.navigationStart をサーバーに送る http://www.html5rocks.com/en/tutorials/webperformance/basics/
  • ウ●コード
  • Brackets Continuous Compilation extension https://github.com/JoachimK/brackets-continuous-compilation
  • プレゼンの時点で Edge Code CC および  Brackets Sp 26 環境上で正しくインストールできなかったので注意
  • Edge Code CC および  Brackets で実現できる ( コード上で右クリック )
  • TypeScript http://www.typescriptlang.org/ CoffeeScript http://coffeescript.org/ Haxe http://haxe.org Java(GWT) https://developers.google.com/web-toolkit/?hl=ja DART http://www.dartlang.org/
  • Haxe + ChromeDevTool デモ
  • できるようになる…らしい
  • end - start でかかった時間を表示しても、そのあとに CSS スタイルの計算、レイアウト、リペイントがあるので、どうなんでしょう?…という話
  • 参考 https://developers.google.com/chrome-developer-tools/docs/timeline?hl=ja https://developers.google.com/chrome-developer-tools/docs/demos/too-much-layout/?hl=ja
  • 描画系のパフォーマンスツールに関しては Session Web Dev 2 にまとめてます
  • プログラマ向けの API が用意される ( W3C が動いている )

JavaScript 実践講座 Framework, Tool, Performance JavaScript 実践講座 Framework, Tool, Performance Presentation Transcript

  • JavaScript 実践講座Framework, Tool, Performancetaiga.jpTaiga Hirohata
  • AboutFreelance engineer(Flash, Flex, AIR, JavaScript etc)Principle Classmethod, Inc.Adobe Community Professionalhttp://taiga.jp/@taiga© 2013 taiga.jp 2 / 54
  • Practical JavaScripthttp://tv.adobe.com/watch/max-2013/practical-javascript/Original© 2013 taiga.jp 3 / 54
  • AgendaFrameworkToolsPerformance© 2013 taiga.jp 4 / 54
  • 当セッションにおける要素問題 解決策 将来© 2013 taiga.jp 5 / 54
  • Frameworks© 2013 taiga.jp 6 / 54
  • ブラウザ対応一貫性のないブラウザ APIEx : 9 以前の IE は attachEvent()9 以降は addEventListener() を使用ブラウザ機能の矛盾Ex : <input type="data">© 2013 taiga.jp 7 / 54
  • JavaScript LibrariesUtilityjQuery(event listeners, XHR, etc.)http://api.jquery.com/category/events/http://api.jquery.com/Types/#jqXHRUnderscore(collections, etc)http://underscorejs.org/#collections© 2013 taiga.jp 8 / 54
  • JavaScript LibrariesPolyfills古いブラウザでもモダンブラウザと同等の機能を提供html5shiv / html5shimselectivizres5-shimMozilla Developer Network samples© 2013 taiga.jp 9 / 54
  • JavaScript LibrariesFeature detection特徴検出Moderinizrhttp://modernizr.com/YepNopehttp://yepnopejs.com/© 2013 taiga.jp 10 / 54
  • JavaScript LibrariesEase of library useLibrary bundles (HTML5 Boilerplate)Package managers (Bower)Scaffolding generators (Yeoman)© 2013 taiga.jp 11 / 54
  • 非常に積極的にリリースされているこれまで以上に速く近代化している今まで以上に標準に従っていくブラウザの改善© 2013 taiga.jp 12 / 54
  • http://www.w3counter.com/trendsブラウザの改善© 2013 taiga.jp 13 / 54
  •  依存関係分かりますか? 本当にすべてのファイル使ってますか? これらは正しい順序でロードされていますか?<script src="script3.js"></script><script src="script1.js"></script><script src="script11.js"></script><script src="script21.js"></script><script src="script30.js"></script>…依存関係、スパゲッティ© 2013 taiga.jp 14 / 54
  • http://requirejs.org/Module PatternRequireJS PatternRequireJS© 2013 taiga.jp 15 / 54
  • Logger.jsRequireJSdefine(...) {...function print(msg) {console.log(msg);}// Define public APIexports.print = priint;});define(function(require, exports, module) {var Logger = require("pkg/Logger");function sayHelloWorld() {Logger.print("Hello, world!");}// Define public APIexports.sayHelloWorld = sayHelloWorld;});© 2013 taiga.jp 16 / 54
  • Modules in ES6 Harmonymodule "foo" {import "pkgLogger" as Logger;function sayHelloWorld() {Logger.print("Hello, world!");}// Define public APIexport sayHelloWorld;}© 2013 taiga.jp 17 / 54
  • 非同期プログラムは難しいコールバックは悪くない…が改善の余地がある非同期コード© 2013 taiga.jp 18 / 54
  • 非同期処理完了のリスニングリスナーにはオブジェクトが返されるPromisesvar options = … ;var promise = beginSomeAsyncOperation(options);promise.done(function(result) {console.log("Operation finishes with result:" + result); });promise.fail(function(errorCode) {console.log("Operation failed. Error:" + errorCode); });© 2013 taiga.jp 19 / 54
  • 内部的に、非同期 API は処理完了後に遅延オブジェクトを生成して返しますPromisesfunction beginSomeAsyncOperation(options) {var result = new $.Deffered();sendNetworkRequest( function(response) {if(response.error)result.reject(response.error);elseresult.resolve(response.data);});return result.promise(); //req still pending here}© 2013 taiga.jp 20 / 54
  • 「ピラミッド」を回避Callbacksauthenticate(userName, password,fucntion () {findRecord(itemId,...function(item) {applyUpdates(item);saveRecord(item,function (result) {indicateSucess();});});});Promise chainingauthenticate(userName, password).then( function() {return findRecord(itemId);}).then( function(item) {applyUpdates(item);return saveRecord(item);}).then( function(result) {indicateSucess();});© 2013 taiga.jp 21 / 54
  • ES6 Harmony "yield"Promise chainingauthenticate(userName, password).then( function() {return findRecord(itemId);}).then( function(item) {applyUpdates(item);return saveRecord(item);}).then( function(result) {indicateSucess();});ES6 "yield" + task.jsspawn(function() {yield authenticate(userName, password);var item = yield findRecord(itemId);applyUpdates(item);var result = yield saveRecord(item);indicateSucess();});© 2013 taiga.jp 22 / 54
  • 将来は非同期実行のフローをツールが理解して教えてくれる…はずより良いデバッギング© 2013 taiga.jp 23 / 54
  • 手作業によるスパゲッティ化限定的な UI 更新$("project-title").text(filename);$(".dialog .validation-error").toggle(isError);$(".modal-overlay ul.songs li:eq(" + i + ")").addClass("selected");dialog.appendChild(document.createElement("div"));dialog.firstCihld.innerHTML = "<input type=text value="+ htmlEscape(imte.name) + ">";$("#help-sidebar .main-content").html(newContent);© 2013 taiga.jp 24 / 54
  • ViewUnderscoreMustacheHandlebarsTemplating & MVC F/W© 2013 taiga.jp 25 / 54
  • ModelBackboneTemplating & MVC F/W© 2013 taiga.jp 26 / 54
  • ControllerKnockoutBatmanEmberAngularKnockbackTemplating & MVC F/W© 2013 taiga.jp 27 / 54
  • JavaScript F/W Popularity© 2013 taiga.jpfrom GitHub Archive28 / 54
  • プレーンなモデルの使用Ember, Backbonename = model.get("songName");model.set("rating", 5);ES5 Getters/Setters© 2013 taiga.jp 29 / 54
  • プレーンなモデルの使用Knockoutname = model.songName();model.rating(5);ES5 Getters/Setters© 2013 taiga.jp 30 / 54
  • プレーンなモデルの使用Serenadename = model.songName;model.rating = 5;ES5 Getters/Setters© 2013 taiga.jp 31 / 54
  • Web1.0 アプリは常に C/S 往復サーバ上のクラッシュサーバ上の遅延モダンアプリはクライアント処理が主流どのようにクライアント端末上のクラッシュや遅延を知ればよい?サーバログ© 2013 taiga.jp 32 / 54
  • var errors=[];window.onerror = function(msg, fileUrl, lineNum) {errors.push({msg: msg, file: fileTrl, line: lineNum});};setInterval(function() {sendToServer(errors);errors = [];}, 5000);Error Logging© 2013 taiga.jp 33 / 54
  • Open bugs in …WebKitChromeFirefoxフルスタックトレース…?© 2013 taiga.jp 34 / 54
  • <html><head><script>function onLoad() {var now = Date.now();var pageLoadTime = now - pertformance.timing.natigationStart;sendToServer(pageLoadTime);}</script></head><body onload="onLoad()">...Performance APIs© 2013 taiga.jp 35 / 54
  • Tools© 2013 taiga.jp 36 / 54
  • (![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[+!+[]+!+[]]シートベルトなし運転© 2013 taiga.jp 37 / 54
  • 型チェックなし変数の型が動的に変更可能 凸(゚皿゚メ)暗黙の型変換構造化不足繰り返される決まり文句の表記シートベルトなし運転© 2013 taiga.jp 38 / 54
  • コンパイルなし ≒ IDEの文法チェックなしLinting は安全性を与える統合解析 / Linting© 2013 taiga.jp 39 / 54
  • 統合解析 / Lintingex :Brackets Continuous Compilation extensionhttps://github.com/JoachimK/brackets-continuous-compilation© 2013 taiga.jp 40 / 54
  • ヒントを超えた情報完全にインタラクティブな編集コンテキスト スニペット© 2013 taiga.jp 41 / 54
  • 型推論© 2013 taiga.jp 42 / 54
  • 型推論© 2013 taiga.jp 43 / 54
  • 型推論© 2013 taiga.jp 44 / 54
  • クロスコンパイラ© 2013 taiga.jp 45 / 54
  • ソースマップ© 2013 taiga.jp 46 / 54
  • 履歴デバッグ振り返りデバッグ統合的ビュー実行Code/Test/Debug Cycle 融合© 2013 taiga.jp 47 / 54
  • Performance© 2013 taiga.jp 48 / 54
  • var start = Date.now();//... Do do stuff ...var end = Date.now();console.log((end - start) + "ms");//CSS style calculation//Layout//Repaint//User sees update->Date.now()==???評価が難しい© 2013 taiga.jp 49 / 54
  • Timeline panel (http://goo.gl/Vim9r)パフォーマンスツール© 2013 taiga.jp 50 / 54
  • Timeline demo (http://goo.gl/1Z7Jp)パフォーマンスツール© 2013 taiga.jp 51 / 54
  • FPS counter (chrome://flags)パフォーマンスツール© 2013 taiga.jp 52 / 54
  • CSS selector profilingRepaint rectanglesRender layer borders→ Session Web Dev2パフォーマンスツール© 2013 taiga.jp 53 / 54
  • Resource Timingページ上の各リソース読み込みタイミングAsync ScrollスクロールのパフォーマンスをテストするDisplay Performanceフレームレート関連 APIProgrammatic APIs© 2013 taiga.jp 54 / 54