Mojito and Cocktails@ddsakura

I am…

ddsakura / 賽拉維.柯南

2

Outline

3

Cocktails is

an alcoholic mixed drink that contains

two or more ingredients — at least

one of the ingredients must be a spirit.

4

Cocktails is also

a mix of HTML5, NodeJS, CSS3, YUI

and a lot of ingenious, creative mind-

bending tricks from Yahoo!

5

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

6

Eating your own dog food

like Yahoo! Livestand.

7

Mojito is

Mojito (/moʊˈhiˈtoʊ/)

◦ It is a kind of cocktail

8

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

The idea is

From Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 10

The idea is

From Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 11

The idea is

From Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 12

Mojito is open!

http://developer.yahoo.com/cocktails/

mojito/

https://github.com/yahoo/mojito/

13

14

Mojits

16

17

19

Mojito application concept

20

Mojito application directory

structure

21

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

22

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

23

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

24

[

{

"settings": [ "master" ],

"foo index": {

"verbs": ["get"],

"path": "/",

"call": ”@myMojit.index"

}

}

]

DEMO - Routing Create the file routes.json with the following

Run the mojito application◦ mojito start

Go to http://localhost:8666/index25

[

{

"settings": ["master"],

"index_route": {

"verbs": ["get"],

"path": "/index",

"call": "@myMojit.index"

}

}

]

Template Engine

Currently, the only template system

allowed is Mustache, so the name of

view templates always contains mu

http://mustache.github.com/

26

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_photosfunction of the controller and the calling device is an iPhone.

◦ find_friend.android.mu.html - This view template gets data from the find_friendfunction of the controller and the calling device is Android based.

27

The tools for Multi-Device CSS3 Media Queries

Mojito view template

28

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

29

Mojito API Mojito has an API that includes addons

and methods for handling

parameters, cookies, URLs, assets, RE

ST calls, globalization/localization, and

more.

http://developer.yahoo.com/cocktails/m

ojito/docs/api_overview/

http://developer.yahoo.com/cocktails/m

ojito/api/index.html 30

Built-in Mojits

Mojito comes with the built-in utility mojitsthat 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

31

DEMO – HTMLFrameMojit & API

32

DEMO – LazyLoad

33

Deployment

Mojito on Heroku

34

Mojito Shaker

Shaker is a static asset rollup

manager for Mojito applications.

https://github.com/yahoo/mojito-

shaker

http://developer.yahoo.com/cocktails/s

haker/

35

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 36

Contact info

@ddsakura

Demo sample code

https://github.com/ddsakura/mojitoHell

oworld

37