Yahoo! 應用程式 (YAP) 在前端的開發

2,825 views

Published on

Caja 的限制、JavaScript 的使用、Flex 的入門與結合 YAP

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

No Downloads
Views
Total views
2,825
On SlideShare
0
From Embeds
0
Number of Embeds
348
Actions
Shares
0
Downloads
40
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Yahoo! 應用程式 (YAP) 在前端的開發

  1. 1. YAP 的前端開發 Using HTML and Adobe Flex speaker : josephj6802@gmail.com
  2. 2. 與傳統網頁開發有何不同?
  3. 3. YAP 採用 HTML+YML Opensocial 採用 Gadget XML Facebook 採用 FBML
  4. 4. Caja (pronounced "KA-ha") 卡哈
  5. 5. Sanitizing JavaScript! 幫 JavaScript 消毒! photo credit : http://www.flickr.com/photos/pinkmoose/2162958361/
  6. 6. Virtual Iframe! 跟 Iframe 一樣、保護網頁不被惡意程式修改 photo credit: http://www.flickr.com/photos/markybon/861751906/
  7. 7. 無名小站的安全性演進 • 加入 Y! 前:任意使用 JavaScript 語法 惡意程式可隨意修改無名頁面,非常危險 • ’07/8/14:加上 Iframe 的限制 惡意程式無法危害無名、但仍可植入惡意程式碼危害使用者 • ’08/10/14:Iframe + 白名單 Only 保護了使用者與無名,但非常不方便 • 未來:是否採用 Caja ? 更好的解決方案!
  8. 8. Caja 允許在頁面上放置 Inline、Untrusted 的 HTML/CSS/JavaScript、但仍保證安 全!
  9. 9. 解除 Iframe、白名單、JavaScript 的 限制,才能製作出有趣的應用程式!
  10. 10. IMPORTS___.emitCss___([ '.', ' #show-', ' ol li {n float: left;n list-style-type: none;n margin: 0;n width: 48px;n height: 48px;n overflow: hidden;n margin: 0 5px 5pxn}' ].join(IMPORTS___.getIdClass___())); #show ol li { float:left; list-style-type:none; margin:0; width:48px; height:48px; overflow:hidden; margin:0 5px 5px; } IMPORTS___.htmlEmitter___.b('h1').f(false).ih('People').e('h1').pc('n').b('div'). a('id', 'form-' + IMPORTS___.getIdClass___()).f(false).pc('n ').b('form').a('action', 'people.html') <h1>People</h1> <div id="form"> <form action="people.html"> $v.so('showEl', $v.cm($v.ro('document'), 'getElementById', [ 'show' ])); $v.so('formEl', $v.r($v.cm($v.cm($v.ro('document'), 'getElementById', [ 'form' ]), 'getElementsByTagName', [ 'form' ]), 0)); $v.so('listEl', $v.r($v.cm($v.r($v.cf($v.ro('getElementsByClassName'), [ 'bd', 'div', $v.ro('showEl') ]), 0), 'getElementsByTagName', [ 'ol' ]), 0)); $v.so('errorEl', $v.r($v.cm($v.r($v.cf($v.ro('getElementsByClassName'), [ 'bd', 'div', $v.cm($v.ro('document'), 'getElementById', [ 'error' ]) ]), 0), 'getElementsByTagName', [ 'ol' ]), 0)); $v.so('statEl', $v.cm($v.ro('document'), 'getElementById', [ 'benchmark' ])); $v.initOuter('tStart'), $v.initOuter('tEnd'); var showEl = document.getElementById('show'); var formEl = document.getElementById('form').getElementsByTagName('form')[0]; var listEl = getElementsByClassName('bd', 'div', showEl)[0].getElementsByTagName('ol')[0]; var errorEl = getElementsByClassName('bd', 'div', document.getElementById('error'))[0].getElementsByTagName('ol')[0]; var statEl = document.getElementById('benchmark'); var tStart, tEnd; Original CSS Original HTML Original JavaScript Cajoled HTML Cajoled CSS Cajoled JavaScript
  11. 11. 限制 JavaScript 無法存取全域變數
  12. 12. Caja Resources • Google-caja http://code.google.com/p/google-caja/ • Caja 測試 http://cajadores.com/demos/testbed/ • 如何安裝 Caja http://code.google.com/p/google-caja/ wiki/GettingStarted
  13. 13. Caja in YAP http://developer.yahoo.com/yap/guide/what-are-cajas-limitations.html
  14. 14. HTML 注意事項 • <html/>,<head/>,<body/> 都不需 要,僅需撰寫 <body/> 裡面的內容。 • 外部 JavaScript 與 CSS 皆不支援。 • <object/> 與 <embed/> 皆不支 援,Flash 請用 <yml:swf/>。 • <input type=”radio”/> 在 IE 無法使 用。 • 不支援 <iframe/>
  15. 15. CSS 注意事項 • 常用的 CSS Hack 像是 * 或 _ 皆無法使用。 • 無法使用 Attribute Selector。 input[type=text] • 背景圖檔需使用有 http:// 的絕對路徑(IE 目 前仍看不到)。
  16. 16. JavaScript 注意事項 • 無法使用 eval() • 無法使用 document.write() • alert() 會顯示在 Firebug Console • 永遠用 var 宣告變數 • 無法使用 .prototype = • 支援 setTimeout 與 setInterval • 有插入圖檔需斷掉 src,例 s’ + ‘rc
  17. 17. Browser Support 大部分的瀏覽器都能正常運作 Google Chrome Firefox Opera Safari
  18. 18. However...
  19. 19. IE 6,7 的仍有問題 • background- image 無法使用 • JavaScript 錯誤
  20. 20. 目前仍無解,期待 YOS Team 早日修正
  21. 21. 使用 JavaScript 函式庫
  22. 22. 從蠻荒時代,到有了像 jQuery、YUI 等函式庫 這就是開發者的進化!
  23. 23. 在瀏覽器上建立使用者 UI(控制項) Def. But.Button Label Menu Label Text Field Label Label Text Area click me 傳統內建 UI 使用 YUI 所建立的 UI
  24. 24. 但因為 Caja 的限制,這些函式庫都不支援了 只能回到蠻荒時代
  25. 25. OpenSocial & Gadget Saves!
  26. 26. • opensocial.* 存取使用者(VIEWER)的 Social 資料 • gadget.io.makeRequest 存取遠端資料(可跨網域) YAP 支援
  27. 27. 取得 OpenSocial 的資料
  28. 28. • opensocial 提供下列 RequestType : • FetchPerson:單一 User Profile 資料 • FetchPeople:多個 User Profile 資料 • FetchPersonAppData:取得 Persist 資料 • RemovePersonAppdata:移除 Persist 資料 • UpdatePersonAppData:更新 Persist 資料 • FetchActivities:取得 Updates opensocial.new%RequestType%Request
  29. 29. var req = opensocial.newDataRequest(); req.add(opensocial.newFetchPersonRequest(idSpec), ‘person’); var idSpec = opensocial.IdSpec.PersonId.VIEWER; req.add(opensocial.newFetchActivityRequest(idSpec), ‘activity’); req.send(callback); // 送出 request 並指定 callback function // 可一次索取多種資料,但必須註明 label以便 callback 時區隔 // 指定索取的 user,以目前檢視者為例 // 新增一個 DataRequest 物件 function callback (resp) { } var personData = resp.get(‘person’).getData(); var activityData = resp.get(‘activity’).getData(); // callback // 需指定先前定義的 label var nickname = personData.getDisplayName(); // 取得資料
  30. 30. 使用 gadget.io.makeRequest
  31. 31. 可存取遠端資料、支援 OAuth 最棒的是可使用 YQL!
  32. 32. http://apps.yahoo.com/-ArKraz7e YAP JavaScript 快速上手 ★ 效果測試 ★ 效能 Benchmark ★ 範例程式碼
  33. 33. 使用 Adobe Flex 跳脫 Caja 的限制與不順
  34. 34. Why uses Flex? • Caja 限制太多 • 瀏覽器 Issue • 只有基礎 JavaScript 函式庫可用 • Flash 完全無 Caja 的限制 • 相較於 Flash,Flex 的框架對開發者容 易上手許多
  35. 35. What is Flex? • 可以將 Flex 視為另一套 HTML/ CSS/JavaScript:Flex 由 MXML/ CSS/ActionScript 組成。 • 需要編譯成 Flash 的 SWF 檔。 • 完全是前端 UI 的製作,但提供數種 與後端資料互動的工具。 • 超級豐富的 UI 與優良的 Usability
  36. 36. 超豐富的內建控制項、版面、導覽列、圖表
  37. 37. 整合好的 Flex 3 SDK + Social Flash API,歡迎下載! http://josephj.com/lab/yap_flex_dev.zip
  38. 38. Hello World! 了解基本的 Flex 語法 http://josephj.com/training/flex/hello/index_sample.mxml
  39. 39. Basic Layout 如何處理基本 Layout http://josephj.com/training/flex/layout/index_sample.mxml
  40. 40. fcsh 讓編譯速度暴走
  41. 41. 若只用 mxmlc 做編譯,你會發現速度很慢。 因為 mxmlc 每次都重新編譯所有原始檔... 但 fcsh 會替已編譯過的檔案做 cache, 只編譯有變動的檔案,所以第二次以後的編譯 就會快上許多。(Flex Builder 內建) fcsh ) mxmlc index.mxml fcsh ) compile 1 -benchmark=true
  42. 42. 使用 HTTPService 取得遠端資料 http://josephj.com/training/flex/http-service/index_sample.mxml
  43. 43. amfphp 與後端資料庫的讀寫,只要整理一個 PHP Class 即可
  44. 44. http://josephj.com/training/flex/amfphp/services/yap/demo.php 定義了 demo 類別與公開的 getData 方法 yap 為服務名稱 demo 為類別名稱
  45. 45. 不需做任何事,就會直接顯示在列表介面上供取用
  46. 46. Interact with YAP 如何讓 Flex/Flash 取得YAP 的資料? Flash : http://josephj.com/training/flex/profile/index_sample.mxml HTML : http://josephj.com/training/flex/profile/index.php.txt API Reference : http://developer.yahoo.com/flash/yos/classreference/
  47. 47. samples! 有一大堆 sample 值得你參考喔! http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

×