Your SlideShare is downloading. ×
0
Cocktails – Shaken, Not Stirred            Product engineering, APAC                   F2E & Mobile Team                  ...
I am… Eric Chuang/ ddsakura / 賽拉維.柯南 YAHOO! Product engineering, APAC, F2E & Mobile Team We built                      ...
OutlineYahoo! Presentation, Confidential   3   4/14/2012
Cocktails is an alcoholic mixed drink that contains two or more ingredients — at  least one of the ingredients must be a ...
Cocktails is also a mix of HTML5, NodeJS, CSS3, YUI and a lot of ingenious, creative  mind-bending tricks from Yahoo!    ...
Cocktails and YUI YUI is a free, open source JavaScript and CSS framework for building  richly interactive web applicatio...
Eating your own dog food We’ve been working with Cocktails for a while internally  ›   building hybrid apps like Yahoo! L...
Mojito is Mojito (/moʊˈhiˈto/)                   ʊ ›   It is a kind of cocktail                                8   4/14/2...
Mojito is Mojito is a MVC application framework built on YUI 3. One Language  ›   Mojito allows developers to write clie...
The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011   10   4/14/2012
The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011   11   4/14/2012
The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011   12   4/14/2012
Mojito is open! http://developer.yahoo.com/cocktails/mojito/ https://github.com/yahoo/mojito/                           ...
Mojito application concept                    14       4/14/2012
Mojito application directory structure                    15               4/14/2012
DEMO - Hello World Install nodejs and npm Get mojito from npm registry  ›   npm install mojito -g Create a mojito appli...
Mojito application concept                    17       4/14/2012
Configuration Application Configuration  ›   The application is configured in the      application.json file in the appli...
Configuration Routing                                                    [ ›   In Mojito, routing is the mapping of URLs ...
DEMO - Routing Create the file routes.json with the following      [          {              "settings": ["master"],     ...
Views in Mojito The views are HTML files that can include template tags, such as  Mustache tags, and are located in the v...
Template Engine Currently, the only template system allowed is Mustache, so the name  of view templates always contains m...
The tools for Multi-Device CSS3 Media Queries Mojito view template                         23   4/14/2012
DEMO – Views for different Devices Create index.iphone.mu.html  ›   cp index.mu.html index.iphone.mu.html  ›   vi mojits/...
Mojito API Mojito has an API that includes addons and methods for handling  parameters, cookies, URLs, assets, REST  call...
Built-in Mojits Mojito comes with the built-in utility mojits that make developing  applications easier. HTMLFrameMojit ...
DEMO – HTMLFrameMojit & API   Edit application.json file   Edit routes.json   Edit controller fileindex: function(ac) {...
DEMO – LazyLoad   Edit application.json file   Create and Edit container mojit   Edit myMojit Controller   Run the moj...
Conclusion Cocktails is an ecosystem mix of HTML5, NodeJS, CSS3, YUI and  relative technology Mojito is a MVC applicatio...
Contact info @ddsakura Demo sample code https://github.com/ddsakura/mojitoHelloworld                                30  ...
Upcoming SlideShare
Loading in...5
×

Cocktails – Shaken, Not Stirred @osdc.tw

1,298

Published on

This slide is talking about YAHOO! Cocktails and Mojito @osdc.tw event

Published in: Technology, Education
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,298
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Cocktails – Shaken, Not Stirred @osdc.tw"

  1. 1. Cocktails – Shaken, Not Stirred Product engineering, APAC F2E & Mobile Team Eric Chuang
  2. 2. I am… Eric Chuang/ ddsakura / 賽拉維.柯南 YAHOO! Product engineering, APAC, F2E & Mobile Team We built 2 4/14/2012
  3. 3. OutlineYahoo! Presentation, Confidential 3 4/14/2012
  4. 4. Cocktails is an alcoholic mixed drink that contains two or more ingredients — at least one of the ingredients must be a spirit. 4 4/14/2012
  5. 5. Cocktails is also a mix of HTML5, NodeJS, CSS3, YUI and a lot of ingenious, creative mind-bending tricks from Yahoo! 5 4/14/2012
  6. 6. Cocktails and YUI YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications › http://developer.yahoo.com/yui/ › https://github.com/yui YUI3 is a foundation for Cocktails Mojito built using YUI3 › Mostly subset of Mojito : YUI App Framework 6 4/14/2012
  7. 7. Eating your own dog food We’ve been working with Cocktails for a while internally › building hybrid apps like Yahoo! Livestand. http://itunes.apple.com/us/app/livestand- from-yahoo!/id469314404?mt=8 › Fantasy Finance, a Web site. http://finance.yahoo.com/fantasy-finance › Fantasy Premier League Football, a mobile Web app. http://uk.premierleague.fantasysports.yahoo.com/ 7 4/14/2012
  8. 8. Mojito is Mojito (/moʊˈhiˈto/) ʊ › It is a kind of cocktail 8 4/14/2012
  9. 9. Mojito is Mojito is a MVC application framework built on YUI 3. One Language › Mojito allows developers to write client and server components in the same language - JavaScript, using the same framework. Two Runtimes › Mojito can run on the client (in the browser) and on the server (with Node.js). In addition, Mojito has built-in support for internationalization and testing 9 4/14/2012
  10. 10. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 10 4/14/2012
  11. 11. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 11 4/14/2012
  12. 12. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 12 4/14/2012
  13. 13. Mojito is open! http://developer.yahoo.com/cocktails/mojito/ https://github.com/yahoo/mojito/ 13 4/14/2012
  14. 14. Mojito application concept 14 4/14/2012
  15. 15. Mojito application directory structure 15 4/14/2012
  16. 16. DEMO - Hello World Install nodejs and npm Get mojito from npm registry › npm install mojito -g Create a mojito application › mojito create app helloworld Create a mojit in application › mojito create mojit myMojit Modify the controller.server.js › vi mojits/myMojit/controller.server.js Run the mojito application › mojito start Go to http://localhost:8666/@myMojit/index 16 4/14/2012
  17. 17. Mojito application concept 17 4/14/2012
  18. 18. Configuration Application Configuration › The application is configured in the application.json file in the application directory. › http://developer.yahoo.com/cocktails/moj ito/docs/intro/mojito_configuring.html 18 4/14/2012
  19. 19. Configuration Routing [ › In Mojito, routing is the mapping of URLs { to specific mojit actions. This section will "settings": [ "master" ], describe the routing configuration file routes.json "foo index": { "verbs": ["get"], › http://developer.yahoo.com/cocktails/moj ito/docs/intro/mojito_configuring.html "path": "/", "call": ”@myMojit.index" } } ] 19 4/14/2012
  20. 20. DEMO - Routing Create the file routes.json with the following [ { "settings": ["master"], "index_route": { "verbs": ["get"], "path": "/index", "call": "@myMojit.index" } } ] Run the mojito application › mojito start Go to http://localhost:8666/index 20 4/14/2012
  21. 21. Views in Mojito The views are HTML files that can include template tags, such as Mustache tags, and are located in the views directory We call these files view templates Naming Convention for view templates › {controller_function}.[{device}].{rendering_engine}.html Example › greeting.mu.html - This view template gets data from the greeting function of the controller and the calling device is determined to be a Web browser. › get_photos.iphone.mu.html - This view template gets data from the get_photos function of the controller and the calling device is an iPhone. › find_friend.android.mu.html - This view template gets data from the find_friend function of the controller and the calling device is Android based. 21 4/14/2012
  22. 22. Template Engine Currently, the only template system allowed is Mustache, so the name of view templates always contains mu http://mustache.github.com/ 22 4/14/2012
  23. 23. The tools for Multi-Device CSS3 Media Queries Mojito view template 23 4/14/2012
  24. 24. DEMO – Views for different Devices Create index.iphone.mu.html › cp index.mu.html index.iphone.mu.html › vi mojits/myMojit/views/index.iphone.mu.html Run the mojito application › mojito start Go to http://localhost:8666/index 24 4/14/2012
  25. 25. Mojito API Mojito has an API that includes addons and methods for handling parameters, cookies, URLs, assets, REST calls, globalization/localization, and more. http://developer.yahoo.com/cocktails/mojito/docs/api_overview/ http://developer.yahoo.com/cocktails/mojito/api/index.html 25 4/14/2012
  26. 26. Built-in Mojits Mojito comes with the built-in utility mojits that make developing applications easier. HTMLFrameMojit › The HTMLFrameMojit builds the HTML skeleton of a Web page. LazyLoadMojit › This allows Mojito application to load the page quickly and then lazily load parts of the page. http://developer.yahoo.com/cocktails/mojito/docs/topics/mojito_frame work_mojits.html 26 4/14/2012
  27. 27. DEMO – HTMLFrameMojit & API  Edit application.json file  Edit routes.json  Edit controller fileindex: function(ac) { ac.assets.addBlob(<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">, top); …. }  Run the mojito application  Go to http://localhost:8666/index 27 4/14/2012
  28. 28. DEMO – LazyLoad Edit application.json file Create and Edit container mojit Edit myMojit Controller Run the mojito application Go to http://localhost:8666/index 28 4/14/2012
  29. 29. Conclusion Cocktails is an ecosystem mix of HTML5, NodeJS, CSS3, YUI and relative technology Mojito is a MVC application framework › One language › Two Runtimes Mojito is available under a BSD license A lot of docs are available, we can start from http://developer.yahoo.com/cocktails/mojito/ We also have forum to discuss this: http://developer.yahoo.com/forum/Yahoo-Mojito 29 4/14/2012
  30. 30. Contact info @ddsakura Demo sample code https://github.com/ddsakura/mojitoHelloworld 30 4/14/2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×