Your SlideShare is downloading. ×
Cocktails – Shaken, Not Stirred @osdc.tw
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cocktails – Shaken, Not Stirred @osdc.tw

1,271

Published on

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

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,271
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Cocktails – Shaken, Not Stirred Product engineering, APAC F2E & Mobile Team Eric Chuang
  • 2. I am… Eric Chuang/ ddsakura / 賽拉維.柯南 YAHOO! Product engineering, APAC, F2E & Mobile Team We built 2 4/14/2012
  • 3. OutlineYahoo! Presentation, Confidential 3 4/14/2012
  • 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. 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. 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. 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. Mojito is Mojito (/moʊˈhiˈto/) ʊ › It is a kind of cocktail 8 4/14/2012
  • 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. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 10 4/14/2012
  • 11. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 11 4/14/2012
  • 12. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 12 4/14/2012
  • 13. Mojito is open! http://developer.yahoo.com/cocktails/mojito/ https://github.com/yahoo/mojito/ 13 4/14/2012
  • 14. Mojito application concept 14 4/14/2012
  • 15. Mojito application directory structure 15 4/14/2012
  • 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. Mojito application concept 17 4/14/2012
  • 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. 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. 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. 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. 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. The tools for Multi-Device CSS3 Media Queries Mojito view template 23 4/14/2012
  • 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. 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. 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. 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. 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. 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. Contact info @ddsakura Demo sample code https://github.com/ddsakura/mojitoHelloworld 30 4/14/2012

×