• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Cocktails – Shaken, Not Stirred @osdc.tw
 

Cocktails – Shaken, Not Stirred @osdc.tw

on

  • 1,372 views

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

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

Statistics

Views

Total Views
1,372
Views on SlideShare
1,052
Embed Views
320

Actions

Likes
6
Downloads
19
Comments
0

3 Embeds 320

http://cire.pixnet.net 316
http://www.linkedin.com 3
http://nodeslide.herokuapp.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Cocktails – Shaken, Not Stirred @osdc.tw Cocktails – Shaken, Not Stirred @osdc.tw Presentation Transcript

    • Cocktails – Shaken, Not Stirred Product engineering, APAC F2E & Mobile Team Eric Chuang
    • I am… Eric Chuang/ ddsakura / 賽拉維.柯南 YAHOO! Product engineering, APAC, F2E & Mobile Team We built 2 4/14/2012
    • 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 spirit. 4 4/14/2012
    • 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
    • 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
    • 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
    • Mojito is Mojito (/moʊˈhiˈto/) ʊ › It is a kind of cocktail 8 4/14/2012
    • 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
    • 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/ 13 4/14/2012
    • 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 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
    • Mojito application concept 17 4/14/2012
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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/myMojit/views/index.iphone.mu.html Run the mojito application › mojito start Go to http://localhost:8666/index 24 4/14/2012
    • 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
    • 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
    • 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
    • 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
    • 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
    • Contact info @ddsakura Demo sample code https://github.com/ddsakura/mojitoHelloworld 30 4/14/2012