cocktails – shaken, not stirred @osdc.tw
DESCRIPTION
This slide is talking about YAHOO! Cocktails and Mojito @osdc.tw eventTRANSCRIPT
Cocktails – Shaken, Not StirredProduct engineering, APAC
F2E & Mobile Team
Eric Chuang
04/10/20232
I am… Eric Chuang/ ddsakura / 賽拉維 .柯南 YAHOO! Product engineering, APAC, F2E & Mobile Team We built
04/10/20233Yahoo! Presentation, Confidential
Outline
04/10/20234
Cocktails is an alcoholic mixed drink that contains two or more ingredients — at
least one of the ingredients must be a spirit.
04/10/20235
Cocktails is also a mix of HTML5, NodeJS, CSS3, YUI and a lot of ingenious, creative
mind-bending tricks from Yahoo!
04/10/20236
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
04/10/20237
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/
04/10/20238
Mojito is Mojito (/moʊˈhiːtoʊ/)
› It is a kind of cocktail
04/10/20239
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
04/10/202310
The idea is
From Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011
04/10/202311
The idea is
From Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011
04/10/202312
The idea is
From Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011
04/10/202313
Mojito is open! http://developer.yahoo.com/cocktails/mojito/ https://github.com/yahoo/mojito/
04/10/202314
Mojito application concept
04/10/202315
Mojito application directory structure
04/10/202316
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
04/10/202317
Mojito application concept
04/10/202318
Configuration Application Configuration
› The application is configured in the application.json file in the application directory.
› http://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_configuring.html
04/10/202319
Configuration Routing
› In Mojito, routing is the mapping of URLs to specific mojit actions. This section will describe the routing configuration file routes.json
› http://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_configuring.html
[ { "settings": [ "master" ], "foo index": { "verbs": ["get"], "path": "/", "call": ”@myMojit.index" } }]
04/10/202320
DEMO - Routing Create the file routes.json with the following
Run the mojito application› mojito start
Go to http://localhost:8666/index
[ { "settings": ["master"], "index_route": { "verbs": ["get"], "path": "/index", "call": "@myMojit.index" } }]
04/10/202321
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.
04/10/202322
Template Engine Currently, the only template system allowed is Mustache, so the
name of view templates always contains mu http://mustache.github.com/
04/10/202323
The tools for Multi-Device CSS3 Media Queries
Mojito view template
04/10/202324
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
04/10/202325
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
04/10/202326
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_framework_mojits.html
04/10/202327
DEMO – HTMLFrameMojit & API Edit application.json file Edit routes.json Edit controller file
Run the mojito application Go to http://localhost:8666/index
index: function(ac) { ac.assets.addBlob('<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">', 'top'); …. }
04/10/202328
DEMO – LazyLoad Edit application.json file Create and Edit container mojit Edit myMojit Controller Run the mojito application Go to http://localhost:8666/index
04/10/202329
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
04/10/202330
Contact info @ddsakura Demo sample code https://github.com/ddsakura/mojitoHelloworld