もっと良くなるHTMLアプリケーション設計と実装2013年 06月 21日株式会社ミツエーリンクス黄(ホァン) 聖實ADC MEETUP 07 - MAX RETWEET1
MAXの関連セッションChristophe  Coenraets  Technical  Evangelist  for  Adobe@ccoenraetshttp://coenraets.orgArchitecting  a  PhoneGa...
自己紹介インタラクション・アーキテクト⻩黄(ホァン)  聖實・WEB/モバイル(iOS、Android、Windowsストア)コンテンツ開発・Windowsストアアプリのデザインコンサルティング・動画配信サービスコンテンツ開発・言語のマークアッ...
本日の内容1。Webアプリについて2。HTMLアプリ設計と実装のガイド3。最後に4
Webアプリ5
Webアプリアプリストアに出せないiOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS6
PhoneGapはWebアプリをHybridアプリ化してくれる。iOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS7
HybridアプリNativeの機能の一部も使える、Web技術ベースのアプリ。8
PhoneGapはWebアプリとデバイスのAPIをつなげてくれる。iOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS9
Hybrid Native必要スキル HTML, JS, CSS Objective C, Java, C/C++クロスプラットフォーム Yes Noデバイス APIs Yes Yes配布 App Store App Store更新 App S...
クロスプラットフォーム対応Web技術を知っていれば、たくさんのクロスプラットフォーム対応にも、⾔言語の悩みがない。Hybridアプリの“11
“パフォーマンスWebアプリが遅くなる80〜~90%の理理由は、アプリ⾃自体の問題ではなくボトルネックの問題である。Hybridアプリの12
“パフォーマンスボトルネックの原因は、ネットワークや他のことが原因で、アプリを解析するエンジンの問題ではない。Hybridアプリの13
それでは、本題に入ります。14
#1  抽象的なデーターアクセス15
データーアクセス抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONアプリ※仕様策定を廃止(W3C)16
抽象的なデーターアクセス$.ajax({url: ‘/api/story/3’}).done(function(story){// Code});17
・テスト環境がネットにつながらなかったら?・アクセスの方法を切り替える必要があったら?・その他、仕様が変わったら?データーアクセス課題①18
抽象的なデーターアクセスデーターにアクセスする構造とそれを直接に操作する手続きをまとめて定義すること。抽象的なデーターアクセス19
要は、構造をまとめることです。抽象的なデーターアクセスIn-Memoryデーターにアクセスする。LocalStorageデーターにアクセスする。Ajaxでネット上のデーターにアクセスする。データーにアクセスする。}20
抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONデーターインターフェースアプリ抽象的なデーターアクセス21
抽象的なデーターアクセスdataAdapter.findByTitle(‘写真’).done(function(story) {// Code});※どこにアクセスしているか分からなくするのがポイント。22
・共通のAPI抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONデーターインターフェースアプリ23
抽象的なデーターアクセスサンプルAbstract Adapter24
抽象的なデーターアクセスdataAdapter.findByTitle(‘写真’).done(function(story) {// Code});抽象化されたデーターアダプター共通のルール25
In-Memory/LocalStorage/Ajax など、データー取得スピードがバラバラ。抽象的なデーターアクセス課題②26
抽象的なデーターアクセスdataAdapter.findByTitle(‘写真’).done(function(story) {// Code});実行タイミングは?27
・共通のAPI・非同期処理抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONデーターインターフェースアプリ28
抽象的なデーターアクセスDeferred & Promise指定の処理を連結した際、その結果を非同期でコールバックする処理モジュール。jQueryの29
抽象的なデーターアクセスfunction testDeferred() {var deffered = $.Deferred();var results = 処理用コードdeferred.resolve(results);return defe...
抽象的なデーターアクセスサンプルDeferred & Promise31
・共通APIを持っているため、対応がしやすい。・動的なプロトタイプを作るときに処理スピードが早い。・デバックがしやすい。抽象的なデーターアクセスメリット32
#2  デバイスでもブラウザでも動くアプリ33
デバイスでもブラウザでも動くアプリJavaScriptの標準ダイアログは、PhoneGapアプリでもブラウザでも動く。  ・Webアプリも対応可能。  ・デバックがしやすい。34
デバイスでもブラウザでも動くアプリしかし、タイトルが「index.html」に表示されるのは、PhoneGapアプリ らしい 表示ではない。35
デバイスでもブラウザでも動くアプリ・JavaScript API:alert(message);・PhoneGap API:navigator.notification.alert(message, alertCallback, [title]...
デバイスでもブラウザでも動くアプリどうすればいいの?37
デバイスでもブラウザでも動くアプリ「抽象的な仕組み」で作成する。  ・ブラウザではJavaScript alertで表示。  ・デバイスではNative alertで表示。解決案38
デバイスでもブラウザでも動くアプリJavaScript Native通知インターフェースアプリ39
デバイスでもブラウザでも動くアプリサンプルAbstract Notification40
#3  シングルページ中⼼心の設計41
シングルページ中心の設計マルチページ VS シングルページ42
シングルページ中心の設計マルチページ43
シングルページ中心の設計マルチページクライアント(HTML/CSS)サーバー(Java/.Net/PHP/...)クライアントはサーバーにページ(UI)を要求する。データー(SQL/...)44
シングルページ中心の設計シングルページクライアント(HTML/JS/CSS)サーバー(Java/.Net/PHP/...)データー(SQL/JSON/InMemory/...)クライアントはサーバー/データーにデーターを要求し、ページ(UI)は...
シングルページ中心の設計<html><head><title>Single Page</title><script src=”app.js”></script></head><body></body></html>46
シングルページ中心の設計マルチページ シングルページページ数 複数ページ 1ページUIの生成先 サーバー クライアントマークアップ言語 Java, .NET, PHP,... JavaScriptオフラインサポート Limited Yes画面の...
・UIをクライアントで生成するので、 ページ表示までの待ち時間が短い。・同じアセットは初回のみ読むなど、無駄な読み込みが少ない。・オフラインでも動く。・UIの表示、ページの切り替えなどをクライアントで コントロールするため、ユーザー経験中心の操...
・クライアント側のロジックが複雑になる。・メモリ管理が必要。・モジュール化戦略が必要。シングルページ中心の設計デメリット49
シングルページ中心の設計サンプルSingle Page50
シングルページ中心の設計var html = ‘’+ ‘<div class=”header”>’+ ‘<a href=”#” class=”button-left”>List</a>’+ ‘<h1>Stories</h1>’+ ‘</div>...
シングルページ中心の設計しかし、JavaScript実装者がHTMLコーディングもしなければならない。52
#4  テンプレートの適⽤用53
テンプレートの適用ロジックからUIを分離54
シングルページ中心の設計var html = ‘’+ ‘<div class=”header”>’+ ‘<a href=”#” class=”button-left”>List</a>’+ ‘<h1>Stories</h1>’+ ‘</div>...
シングルページ中心の設計<div class=”header”><a href=”#” class=”button-left”>List</a><h1>Stories</h1></div><div class=”details”><img sr...
テンプレートの適用繰り返すコードに適用57
テンプレートの適用<li><a href=”#story/:1”>第1話</a></li><li><a href=”#story/:2”>第2話</a></li><li><a href=”#story/:3”>第3話</a></li>・・・<l...
・UIとロジックの分かれているので、保守性が高い。・ツール化できる。テンプレートの適用メリット59
・Mustache.js・Handlebar.js・Underscore.jsテンプレートの適用紹介60
テンプレートの適用サンプルHandlebar.js61
シングルページ中心の設計<script id=”home-tpl” type=”text/x-handlebars-template”><span id=”title”>{{title}}</span><span id=”thumb”><img...
#5  MV*  デザインパターン(MVC/MVMC/MVP/・・・)63
MV*デザインパターン要は、「構造的」に分けよう。64
MV*デザインパターンModelvar Story = function() {this.url = “/story”;this.validate = function() {};};65
MV*デザインパターンViewvar StoryView = function() {this.initialize = function() {};this.render = function() {};};66
MV*デザインパターンControllervar JSONPAdapter = function(url) {this.findById = function(id) {return $.ajax({url: url + “/” + id, d...
MV*デザインパターンサンプルMVC (Model-View-Controller)68
#6  フレームワークの選択69
フレームワークの選択フレームワークFullStack CustomStackUIDojo ToolkitjQuery MobileSenchaTwitter BootstrapZurb FoundationRadchetArchitecture...
フレームワークの選択Topcoathttp://topcoat.io71
フレームワークの選択サンプルTopcoat72
#7  ルーティンの使⽤用73
ルーティンの使用シングルページは物理的なページ移動は行わないため、ページURLの#(ハッシュ)以降の文字列の変化でページを識別する。74
ルーティンの使用マルチページpage1.htmlpage2.htmlpage3.htmlpage4.htmlシングルページ#page1#page2#page3#page4index.html Routing75
ルーティンの使用サンプルBackbone.js - Routing76
#8  デバイス特⻑⾧長を⽣生かした設計77
デバイス特長を生かした設計操作 マウス タッチ通知 JavaScript Nativeストレージ オンライン オフラインセンサー No Yes78
デバイス特長を生かした設計サンプルClick VS Touch79
#9  HTML”らしさ”を隠す80
・alert()・-webkit-touch-callout: none; リンクを長押しした際のポップアップメニューを隠す。・-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );リンクをタッチした際...
#10  パフォーマンスのための設計82
・UIはクライアント側に持つ。・UIの表示はデーターの読み込みとは別にする。・キャッシューしなさい。(データー、セレクター、テンプレート)・ハードウェア加速を使う。・Clickイベントは300ms以上遅延する。(UXを考えよう)パフォーマンスの...
・CSSスプライトシートを使う。・影とグラデーションを減らす。・レイアウト更新を減らす。・今使っているフレームワークが本当に必要か。・テスト!テスト!テスト!パフォーマンスのための設計84
最後に85
1. 抽象的なデーターアクセス2. デバイスでもブラウザでも動くアプリ3. シングルページ中心の設計4. テンプレートの適用5. MV* デザインパターン最後に86
6. フレームワークの選択7. ルーティングの使用8. デバイスの特長を生かした設計9. HTML らしさ を隠す10. パフォーマンスのための設計最後に87
ありがとうございました。@siriz88
Upcoming SlideShare
Loading in …5
×

もっと良くなるHTMLアプリケーション設計と実装

4,167 views

Published on

Adobe MAX 2013で行った「Architecting a PhoneGap Application」セッションをベースにADC MEETUP 07イベント用に再構成したした内容になります。

※スライドに使われたサンプルは以下のURLからダウンロードできます。
http://www.mitsue.co.jp/knowledge/resources/2013/adc_retweet07_architecting.zip

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,167
On SlideShare
0
From Embeds
0
Number of Embeds
143
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

もっと良くなるHTMLアプリケーション設計と実装

  1. 1. もっと良くなるHTMLアプリケーション設計と実装2013年 06月 21日株式会社ミツエーリンクス黄(ホァン) 聖實ADC MEETUP 07 - MAX RETWEET1
  2. 2. MAXの関連セッションChristophe  Coenraets  Technical  Evangelist  for  Adobe@ccoenraetshttp://coenraets.orgArchitecting  a  PhoneGap  Application(10  architectural  principles)http://adobe.ly/166OJmk2
  3. 3. 自己紹介インタラクション・アーキテクト⻩黄(ホァン)  聖實・WEB/モバイル(iOS、Android、Windowsストア)コンテンツ開発・Windowsストアアプリのデザインコンサルティング・動画配信サービスコンテンツ開発・言語のマークアップより、ロジックの設計や実装が好きです。3
  4. 4. 本日の内容1。Webアプリについて2。HTMLアプリ設計と実装のガイド3。最後に4
  5. 5. Webアプリ5
  6. 6. Webアプリアプリストアに出せないiOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS6
  7. 7. PhoneGapはWebアプリをHybridアプリ化してくれる。iOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS7
  8. 8. HybridアプリNativeの機能の一部も使える、Web技術ベースのアプリ。8
  9. 9. PhoneGapはWebアプリとデバイスのAPIをつなげてくれる。iOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS9
  10. 10. Hybrid Native必要スキル HTML, JS, CSS Objective C, Java, C/C++クロスプラットフォーム Yes Noデバイス APIs Yes Yes配布 App Store App Store更新 App Store + Instant App Storeパフォーマンス Fast Faster10
  11. 11. クロスプラットフォーム対応Web技術を知っていれば、たくさんのクロスプラットフォーム対応にも、⾔言語の悩みがない。Hybridアプリの“11
  12. 12. “パフォーマンスWebアプリが遅くなる80〜~90%の理理由は、アプリ⾃自体の問題ではなくボトルネックの問題である。Hybridアプリの12
  13. 13. “パフォーマンスボトルネックの原因は、ネットワークや他のことが原因で、アプリを解析するエンジンの問題ではない。Hybridアプリの13
  14. 14. それでは、本題に入ります。14
  15. 15. #1  抽象的なデーターアクセス15
  16. 16. データーアクセス抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONアプリ※仕様策定を廃止(W3C)16
  17. 17. 抽象的なデーターアクセス$.ajax({url: ‘/api/story/3’}).done(function(story){// Code});17
  18. 18. ・テスト環境がネットにつながらなかったら?・アクセスの方法を切り替える必要があったら?・その他、仕様が変わったら?データーアクセス課題①18
  19. 19. 抽象的なデーターアクセスデーターにアクセスする構造とそれを直接に操作する手続きをまとめて定義すること。抽象的なデーターアクセス19
  20. 20. 要は、構造をまとめることです。抽象的なデーターアクセスIn-Memoryデーターにアクセスする。LocalStorageデーターにアクセスする。Ajaxでネット上のデーターにアクセスする。データーにアクセスする。}20
  21. 21. 抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONデーターインターフェースアプリ抽象的なデーターアクセス21
  22. 22. 抽象的なデーターアクセスdataAdapter.findByTitle(‘写真’).done(function(story) {// Code});※どこにアクセスしているか分からなくするのがポイント。22
  23. 23. ・共通のAPI抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONデーターインターフェースアプリ23
  24. 24. 抽象的なデーターアクセスサンプルAbstract Adapter24
  25. 25. 抽象的なデーターアクセスdataAdapter.findByTitle(‘写真’).done(function(story) {// Code});抽象化されたデーターアダプター共通のルール25
  26. 26. In-Memory/LocalStorage/Ajax など、データー取得スピードがバラバラ。抽象的なデーターアクセス課題②26
  27. 27. 抽象的なデーターアクセスdataAdapter.findByTitle(‘写真’).done(function(story) {// Code});実行タイミングは?27
  28. 28. ・共通のAPI・非同期処理抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONデーターインターフェースアプリ28
  29. 29. 抽象的なデーターアクセスDeferred & Promise指定の処理を連結した際、その結果を非同期でコールバックする処理モジュール。jQueryの29
  30. 30. 抽象的なデーターアクセスfunction testDeferred() {var deffered = $.Deferred();var results = 処理用コードdeferred.resolve(results);return deferred.promise();}ここにデーター読み込み処理を入れると、読み込み完了後返す。(非同期)30
  31. 31. 抽象的なデーターアクセスサンプルDeferred & Promise31
  32. 32. ・共通APIを持っているため、対応がしやすい。・動的なプロトタイプを作るときに処理スピードが早い。・デバックがしやすい。抽象的なデーターアクセスメリット32
  33. 33. #2  デバイスでもブラウザでも動くアプリ33
  34. 34. デバイスでもブラウザでも動くアプリJavaScriptの標準ダイアログは、PhoneGapアプリでもブラウザでも動く。  ・Webアプリも対応可能。  ・デバックがしやすい。34
  35. 35. デバイスでもブラウザでも動くアプリしかし、タイトルが「index.html」に表示されるのは、PhoneGapアプリ らしい 表示ではない。35
  36. 36. デバイスでもブラウザでも動くアプリ・JavaScript API:alert(message);・PhoneGap API:navigator.notification.alert(message, alertCallback, [title], [buttonName])36
  37. 37. デバイスでもブラウザでも動くアプリどうすればいいの?37
  38. 38. デバイスでもブラウザでも動くアプリ「抽象的な仕組み」で作成する。  ・ブラウザではJavaScript alertで表示。  ・デバイスではNative alertで表示。解決案38
  39. 39. デバイスでもブラウザでも動くアプリJavaScript Native通知インターフェースアプリ39
  40. 40. デバイスでもブラウザでも動くアプリサンプルAbstract Notification40
  41. 41. #3  シングルページ中⼼心の設計41
  42. 42. シングルページ中心の設計マルチページ VS シングルページ42
  43. 43. シングルページ中心の設計マルチページ43
  44. 44. シングルページ中心の設計マルチページクライアント(HTML/CSS)サーバー(Java/.Net/PHP/...)クライアントはサーバーにページ(UI)を要求する。データー(SQL/...)44
  45. 45. シングルページ中心の設計シングルページクライアント(HTML/JS/CSS)サーバー(Java/.Net/PHP/...)データー(SQL/JSON/InMemory/...)クライアントはサーバー/データーにデーターを要求し、ページ(UI)はクライアントで生成。45
  46. 46. シングルページ中心の設計<html><head><title>Single Page</title><script src=”app.js”></script></head><body></body></html>46
  47. 47. シングルページ中心の設計マルチページ シングルページページ数 複数ページ 1ページUIの生成先 サーバー クライアントマークアップ言語 Java, .NET, PHP,... JavaScriptオフラインサポート Limited Yes画面の切り替え ブラウザ 開発者パフォーマンス 遅い 早いアセットの読み込み ページを読み込む度に 1回47
  48. 48. ・UIをクライアントで生成するので、 ページ表示までの待ち時間が短い。・同じアセットは初回のみ読むなど、無駄な読み込みが少ない。・オフラインでも動く。・UIの表示、ページの切り替えなどをクライアントで コントロールするため、ユーザー経験中心の操作ができる。シングルページ中心の設計メリット48
  49. 49. ・クライアント側のロジックが複雑になる。・メモリ管理が必要。・モジュール化戦略が必要。シングルページ中心の設計デメリット49
  50. 50. シングルページ中心の設計サンプルSingle Page50
  51. 51. シングルページ中心の設計var html = ‘’+ ‘<div class=”header”>’+ ‘<a href=”#” class=”button-left”>List</a>’+ ‘<h1>Stories</h1>’+ ‘</div>’+ ‘<div class=”details”>’+ ‘<img src=”thumbnail/’ + e.thumb + ‘_.jpg” />’+ ‘<h1>’ + e.title + ‘</h1>’+ ‘<p class=”duration”>’ + e.duration + ‘</p>’+ ‘</div>’;51
  52. 52. シングルページ中心の設計しかし、JavaScript実装者がHTMLコーディングもしなければならない。52
  53. 53. #4  テンプレートの適⽤用53
  54. 54. テンプレートの適用ロジックからUIを分離54
  55. 55. シングルページ中心の設計var html = ‘’+ ‘<div class=”header”>’+ ‘<a href=”#” class=”button-left”>List</a>’+ ‘<h1>Stories</h1>’+ ‘</div>’+ ‘<div class=”details”>’+ ‘<img src=”thumbnail/’ + e.thumb + ‘_.jpg” />’+ ‘<h1>’ + e.title + ‘</h1>’+ ‘<p class=”duration”>’ + e.duration + ‘</p>’+ ‘</div>’;55
  56. 56. シングルページ中心の設計<div class=”header”><a href=”#” class=”button-left”>List</a><h1>Stories</h1></div><div class=”details”><img src=”thumbnail/{{thumb}}_.jpg” /><h1>{{title}}</h1><p class=”duration”>{{duration}}</p></div>56
  57. 57. テンプレートの適用繰り返すコードに適用57
  58. 58. テンプレートの適用<li><a href=”#story/:1”>第1話</a></li><li><a href=”#story/:2”>第2話</a></li><li><a href=”#story/:3”>第3話</a></li>・・・<li><a href=”#story/:{{id}}”>第{{id}}話</a></li>58
  59. 59. ・UIとロジックの分かれているので、保守性が高い。・ツール化できる。テンプレートの適用メリット59
  60. 60. ・Mustache.js・Handlebar.js・Underscore.jsテンプレートの適用紹介60
  61. 61. テンプレートの適用サンプルHandlebar.js61
  62. 62. シングルページ中心の設計<script id=”home-tpl” type=”text/x-handlebars-template”><span id=”title”>{{title}}</span><span id=”thumb”><img src=”{{thumb}}.jpg” /></span><span id=”duration”>{{duration}}</span></script>1. テンプレートの指定 (HTML)var myData = [{‘title’: ‘TITLE1’, ‘thumb’: ‘0001’, ‘duration’: ’05:20:12’},{‘title’: ‘TITLE2’, ‘thumb’: ‘0002’, ‘duration’: ’02:17:06’}];var homeTpl = Handlebars.compile($(“#home-tpl”).html());$(‘body’).html(homeTpl(myData));2. テンプレートの読み込み (JavaScript)62
  63. 63. #5  MV*  デザインパターン(MVC/MVMC/MVP/・・・)63
  64. 64. MV*デザインパターン要は、「構造的」に分けよう。64
  65. 65. MV*デザインパターンModelvar Story = function() {this.url = “/story”;this.validate = function() {};};65
  66. 66. MV*デザインパターンViewvar StoryView = function() {this.initialize = function() {};this.render = function() {};};66
  67. 67. MV*デザインパターンControllervar JSONPAdapter = function(url) {this.findById = function(id) {return $.ajax({url: url + “/” + id, dataType: “jsonp”});};this.findByTitle = function(searchKey) {return $.ajax({url: url + “?title=” + searchKey, dataType:“jsonp”});};};67
  68. 68. MV*デザインパターンサンプルMVC (Model-View-Controller)68
  69. 69. #6  フレームワークの選択69
  70. 70. フレームワークの選択フレームワークFullStack CustomStackUIDojo ToolkitjQuery MobileSenchaTwitter BootstrapZurb FoundationRadchetArchitectureDojo ToolkitjQuery MobileSenchaBackbone.jsAngularJSEmberKnockoutDOMDojo ToolkitjQuery MobileSenchajQueryzepto.js70
  71. 71. フレームワークの選択Topcoathttp://topcoat.io71
  72. 72. フレームワークの選択サンプルTopcoat72
  73. 73. #7  ルーティンの使⽤用73
  74. 74. ルーティンの使用シングルページは物理的なページ移動は行わないため、ページURLの#(ハッシュ)以降の文字列の変化でページを識別する。74
  75. 75. ルーティンの使用マルチページpage1.htmlpage2.htmlpage3.htmlpage4.htmlシングルページ#page1#page2#page3#page4index.html Routing75
  76. 76. ルーティンの使用サンプルBackbone.js - Routing76
  77. 77. #8  デバイス特⻑⾧長を⽣生かした設計77
  78. 78. デバイス特長を生かした設計操作 マウス タッチ通知 JavaScript Nativeストレージ オンライン オフラインセンサー No Yes78
  79. 79. デバイス特長を生かした設計サンプルClick VS Touch79
  80. 80. #9  HTML”らしさ”を隠す80
  81. 81. ・alert()・-webkit-touch-callout: none; リンクを長押しした際のポップアップメニューを隠す。・-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );リンクをタッチした際のハイライトカラーを消す。HTML らしさ を隠す81
  82. 82. #10  パフォーマンスのための設計82
  83. 83. ・UIはクライアント側に持つ。・UIの表示はデーターの読み込みとは別にする。・キャッシューしなさい。(データー、セレクター、テンプレート)・ハードウェア加速を使う。・Clickイベントは300ms以上遅延する。(UXを考えよう)パフォーマンスのための設計83
  84. 84. ・CSSスプライトシートを使う。・影とグラデーションを減らす。・レイアウト更新を減らす。・今使っているフレームワークが本当に必要か。・テスト!テスト!テスト!パフォーマンスのための設計84
  85. 85. 最後に85
  86. 86. 1. 抽象的なデーターアクセス2. デバイスでもブラウザでも動くアプリ3. シングルページ中心の設計4. テンプレートの適用5. MV* デザインパターン最後に86
  87. 87. 6. フレームワークの選択7. ルーティングの使用8. デバイスの特長を生かした設計9. HTML らしさ を隠す10. パフォーマンスのための設計最後に87
  88. 88. ありがとうございました。@siriz88

×