Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript 実践講座Framework, Tool, Performancetaiga.jpTaiga Hirohata
AboutFreelance engineer(Flash, Flex, AIR, JavaScript etc)Principle Classmethod, Inc.Adobe Community Professionalhttp:/...
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 t...
JavaScript LibrariesUtilityjQuery(event listeners, XHR, etc.)http://api.jquery.com/category/events/http://api.jquery.com...
JavaScript LibrariesPolyfills古いブラウザでもモダンブラウザと同等の機能を提供html5shiv / html5shimselectivizres5-shimMozilla Developer Networ...
JavaScript LibrariesFeature detection特徴検出Moderinizrhttp://modernizr.com/YepNopehttp://yepnopejs.com/© 2013 taiga.jp 10 ...
JavaScript LibrariesEase of library useLibrary bundles (HTML5 Boilerplate)Package managers (Bower)Scaffolding generato...
非常に積極的にリリースされているこれまで以上に速く近代化している今まで以上に標準に従っていくブラウザの改善© 2013 taiga.jp 12 / 54
http://www.w3counter.com/trendsブラウザの改善© 2013 taiga.jp 13 / 54
 依存関係分かりますか? 本当にすべてのファイル使ってますか? これらは正しい順序でロードされていますか?<script src="script3.js"></script><script src="script1.js"></scrip...
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;});def...
Modules in ES6 Harmonymodule "foo" {import "pkgLogger" as Logger;function sayHelloWorld() {Logger.print("Hello, world!");}...
非同期プログラムは難しいコールバックは悪くない…が改善の余地がある非同期コード© 2013 taiga.jp 18 / 54
非同期処理完了のリスニングリスナーにはオブジェクトが返されるPromisesvar options = … ;var promise = beginSomeAsyncOperation(options);promise.done(funct...
内部的に、非同期 API は処理完了後に遅延オブジェクトを生成して返しますPromisesfunction beginSomeAsyncOperation(options) {var result = new $.Deffered();sen...
「ピラミッド」を回避Callbacksauthenticate(userName, password,fucntion () {findRecord(itemId,...function(item) {applyUpdates(item);sa...
ES6 Harmony "yield"Promise chainingauthenticate(userName, password).then( function() {return findRecord(itemId);}).then( f...
将来は非同期実行のフローをツールが理解して教えてくれる…はずより良いデバッギング© 2013 taiga.jp 23 / 54
手作業によるスパゲッティ化限定的な UI 更新$("project-title").text(filename);$(".dialog .validation-error").toggle(isError);$(".modal-overlay...
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});};se...
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;s...
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© 2...
ヒントを超えた情報完全にインタラクティブな編集コンテキスト スニペット© 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...
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© 201...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
150421 es6とかな話
Next
Download to read offline and view in fullscreen.

4

Share

Download to read offline

JavaScript 実践講座 Framework, Tool, Performance

Download to read offline

taiga.jp

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

JavaScript 実践講座 Framework, Tool, Performance

  1. 1. JavaScript 実践講座Framework, Tool, Performancetaiga.jpTaiga Hirohata
  2. 2. AboutFreelance engineer(Flash, Flex, AIR, JavaScript etc)Principle Classmethod, Inc.Adobe Community Professionalhttp://taiga.jp/@taiga© 2013 taiga.jp 2 / 54
  3. 3. Practical JavaScripthttp://tv.adobe.com/watch/max-2013/practical-javascript/Original© 2013 taiga.jp 3 / 54
  4. 4. AgendaFrameworkToolsPerformance© 2013 taiga.jp 4 / 54
  5. 5. 当セッションにおける要素問題 解決策 将来© 2013 taiga.jp 5 / 54
  6. 6. Frameworks© 2013 taiga.jp 6 / 54
  7. 7. ブラウザ対応一貫性のないブラウザ APIEx : 9 以前の IE は attachEvent()9 以降は addEventListener() を使用ブラウザ機能の矛盾Ex : <input type="data">© 2013 taiga.jp 7 / 54
  8. 8. 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
  9. 9. JavaScript LibrariesPolyfills古いブラウザでもモダンブラウザと同等の機能を提供html5shiv / html5shimselectivizres5-shimMozilla Developer Network samples© 2013 taiga.jp 9 / 54
  10. 10. JavaScript LibrariesFeature detection特徴検出Moderinizrhttp://modernizr.com/YepNopehttp://yepnopejs.com/© 2013 taiga.jp 10 / 54
  11. 11. JavaScript LibrariesEase of library useLibrary bundles (HTML5 Boilerplate)Package managers (Bower)Scaffolding generators (Yeoman)© 2013 taiga.jp 11 / 54
  12. 12. 非常に積極的にリリースされているこれまで以上に速く近代化している今まで以上に標準に従っていくブラウザの改善© 2013 taiga.jp 12 / 54
  13. 13. http://www.w3counter.com/trendsブラウザの改善© 2013 taiga.jp 13 / 54
  14. 14.  依存関係分かりますか? 本当にすべてのファイル使ってますか? これらは正しい順序でロードされていますか?<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
  15. 15. http://requirejs.org/Module PatternRequireJS PatternRequireJS© 2013 taiga.jp 15 / 54
  16. 16. 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
  17. 17. Modules in ES6 Harmonymodule "foo" {import "pkgLogger" as Logger;function sayHelloWorld() {Logger.print("Hello, world!");}// Define public APIexport sayHelloWorld;}© 2013 taiga.jp 17 / 54
  18. 18. 非同期プログラムは難しいコールバックは悪くない…が改善の余地がある非同期コード© 2013 taiga.jp 18 / 54
  19. 19. 非同期処理完了のリスニングリスナーにはオブジェクトが返される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
  20. 20. 内部的に、非同期 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
  21. 21. 「ピラミッド」を回避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
  22. 22. 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
  23. 23. 将来は非同期実行のフローをツールが理解して教えてくれる…はずより良いデバッギング© 2013 taiga.jp 23 / 54
  24. 24. 手作業によるスパゲッティ化限定的な 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
  25. 25. ViewUnderscoreMustacheHandlebarsTemplating & MVC F/W© 2013 taiga.jp 25 / 54
  26. 26. ModelBackboneTemplating & MVC F/W© 2013 taiga.jp 26 / 54
  27. 27. ControllerKnockoutBatmanEmberAngularKnockbackTemplating & MVC F/W© 2013 taiga.jp 27 / 54
  28. 28. JavaScript F/W Popularity© 2013 taiga.jpfrom GitHub Archive28 / 54
  29. 29. プレーンなモデルの使用Ember, Backbonename = model.get("songName");model.set("rating", 5);ES5 Getters/Setters© 2013 taiga.jp 29 / 54
  30. 30. プレーンなモデルの使用Knockoutname = model.songName();model.rating(5);ES5 Getters/Setters© 2013 taiga.jp 30 / 54
  31. 31. プレーンなモデルの使用Serenadename = model.songName;model.rating = 5;ES5 Getters/Setters© 2013 taiga.jp 31 / 54
  32. 32. Web1.0 アプリは常に C/S 往復サーバ上のクラッシュサーバ上の遅延モダンアプリはクライアント処理が主流どのようにクライアント端末上のクラッシュや遅延を知ればよい?サーバログ© 2013 taiga.jp 32 / 54
  33. 33. 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
  34. 34. Open bugs in …WebKitChromeFirefoxフルスタックトレース…?© 2013 taiga.jp 34 / 54
  35. 35. <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
  36. 36. Tools© 2013 taiga.jp 36 / 54
  37. 37. (![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[+!+[]+!+[]]シートベルトなし運転© 2013 taiga.jp 37 / 54
  38. 38. 型チェックなし変数の型が動的に変更可能 凸(゚皿゚メ)暗黙の型変換構造化不足繰り返される決まり文句の表記シートベルトなし運転© 2013 taiga.jp 38 / 54
  39. 39. コンパイルなし ≒ IDEの文法チェックなしLinting は安全性を与える統合解析 / Linting© 2013 taiga.jp 39 / 54
  40. 40. 統合解析 / Lintingex :Brackets Continuous Compilation extensionhttps://github.com/JoachimK/brackets-continuous-compilation© 2013 taiga.jp 40 / 54
  41. 41. ヒントを超えた情報完全にインタラクティブな編集コンテキスト スニペット© 2013 taiga.jp 41 / 54
  42. 42. 型推論© 2013 taiga.jp 42 / 54
  43. 43. 型推論© 2013 taiga.jp 43 / 54
  44. 44. 型推論© 2013 taiga.jp 44 / 54
  45. 45. クロスコンパイラ© 2013 taiga.jp 45 / 54
  46. 46. ソースマップ© 2013 taiga.jp 46 / 54
  47. 47. 履歴デバッグ振り返りデバッグ統合的ビュー実行Code/Test/Debug Cycle 融合© 2013 taiga.jp 47 / 54
  48. 48. Performance© 2013 taiga.jp 48 / 54
  49. 49. 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
  50. 50. Timeline panel (http://goo.gl/Vim9r)パフォーマンスツール© 2013 taiga.jp 50 / 54
  51. 51. Timeline demo (http://goo.gl/1Z7Jp)パフォーマンスツール© 2013 taiga.jp 51 / 54
  52. 52. FPS counter (chrome://flags)パフォーマンスツール© 2013 taiga.jp 52 / 54
  53. 53. CSS selector profilingRepaint rectanglesRender layer borders→ Session Web Dev2パフォーマンスツール© 2013 taiga.jp 53 / 54
  54. 54. Resource Timingページ上の各リソース読み込みタイミングAsync ScrollスクロールのパフォーマンスをテストするDisplay Performanceフレームレート関連 APIProgrammatic APIs© 2013 taiga.jp 54 / 54
  • jitenoswal1

    Mar. 4, 2015
  • KanSakamoto

    Sep. 18, 2013
  • sekka3

    Jul. 2, 2013
  • msasabuchi

    Jun. 26, 2013

taiga.jp

Views

Total views

2,033

On Slideshare

0

From embeds

0

Number of embeds

610

Actions

Downloads

7

Shares

0

Comments

0

Likes

4

×