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.

Yahoo! 釀的酒 - 淺嚐 Cocktails

3,994 views

Published on

@HTML5開發者論壇, 北京 2012

Published in: Technology

Yahoo! 釀的酒 - 淺嚐 Cocktails

  1. 1. Yahoo! 酿的酒– 浅尝 Cocktails Yahoo! 前端工程师 廖英翔 Aug 18, 2012
  2. 2. About廖英翔/Clay LiaoYahoo! 前端工程师微博/Twitter @clayliao 1
  3. 3. Agenda 网路应用程式的新挑战 Cocktails 解决方案 Mojito框架介绍 DEMO 2
  4. 4. 网路应用程式的新挑战 3
  5. 5. 1. 终端设备愈益复杂 4
  6. 6. 复杂的使用情境 圖片來源: Apple 5
  7. 7. 2. 要懂的程式语言愈来愈多 6
  8. 8. 工程师必须身怀绝技 PHP/Java/ASP/.Net Python/Ruby/Perl JavaScript CSS HTML YUI/jQuery Node.js … 圖片來源 7
  9. 9. 3. 一个产品 多个 Codebase 8
  10. 10. The Solution: Yahoo! Cocktails解决之道:Yahoo! Cocktails 9
  11. 11. Yahoo! Cocktails Mojito Manhattan 圖片來源: Mojito, Manhattan 10
  12. 12. 11
  13. 13. 开源项目 http://developer.yahoo.com/cocktails/mojito/ 12
  14. 14. Production-ready Yahoo! Axis Fantasy Finance Sportacular Search Direct … iPhone iPad 14
  15. 15. One language, Two Runtimes一种语言 两个运行环境 15
  16. 16. 纯正 100% JavaScript Server Common Client JS JS JS 16
  17. 17. Views for Different Devices一套代码支援多种终端设备 17
  18. 18. android.mu.html blackberry.mu.html iphone.mu.html 18
  19. 19. 更多内建支援功能 单元测试 Unit Test 多国语系 Internationalization 渐进式增强 Progressive Enhancement … 19
  20. 20. Mojito 101: Quick Start第一次 Mojito 就上手 20
  21. 21. Quick Start: 安装 Mojito Installation $npm install mojito -g 21
  22. 22. Quick Start: 建立 Mojito App Create a Mojito Application $mojito create app hello_world $cd hello_world $mojito create mojit myMojit 22
  23. 23. Quick Start: 打完收工 Running the Application $mojito start http://localhost:8666/@myMojit/index 23
  24. 24. Architecture Mojito Mustache Express YUI 3 Connect JavaScript Runtime (Node.js or Browser)
  25. 25. 目录结构 application.json mojits - models - views - controller - assets assets 25
  26. 26. “Mojit”==Module + Widget  The User Interface - Model + Controller + View  The User Interaction - Binder 26
  27. 27. DEMO:Bomberman 多人实时在线游戏 纯HTML/CSS/ JavaScript HTML5/Canvas CSS 3 源码 27
  28. 28. Thank You! 28
  29. 29. Resources Yahoo! Cocktails - http://developers.yahoo.com/cocktails Yahoo! Mojito - http://developers.yahoo.com/cocktails/mojito Yahoo! Mojito Shaker - http://developer.yahoo.com/cocktails/shaker/ 29

×