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