Introduction to Mojito and Cocktails @ NodeJS Taiwan community

1. Mojito and Cocktails
@ddsakura

2. I am…
— ddsakura / 賽拉維.柯南
2

3. Outline
3

4. Cocktails is
— an
alcoholic mixed drink that contains
two or more ingredients — at least one
of the ingredients must be a spirit.
4

5. Cocktails is also
— amix of HTML5, NodeJS, CSS3,YUI and a
lot of ingenious, creative mind-bending
tricks from Yahoo!
5

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
6

7. Eating your own dog food
— like Yahoo! Livestand.
7

8. Mojito is
— Mojito (/moʊˈhiːtoʊ/)
◦ It is a kind of cocktail
8

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

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

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

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

13. Mojito is open!
— http://developer.yahoo.com/cocktails/
mojito/
— https://github.com/yahoo/mojito/
13

14. Mojits
14

16. 16

17. 17

19. 19

20. Mojito application concept
20

21. Mojito application directory
structure
21

22. 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

23. 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

24. Configuration
— Routing [
{
◦ In Mojito, routing is the "settings": [ "master" ],
mapping of URLs to "foo index": {
specific mojit actions. This "verbs": ["get"],
"path": "/",
section will describe the "call": ”@myMojit.index"
routing configuration file }
routes.json }
◦ http:// ]
developer.yahoo.com/
cocktails/mojito/docs/
intro/
mojito_configuring.html
24

25. 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 25

26. Template Engine
— Currently, theonly template system
allowed is Mustache, so the name of view
templates always contains mu
— http://mustache.github.com/
26

27. 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.
27

28. The tools for Multi-Device
— CSS3 Media Queries
— Mojito view template
28

29. 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

30. 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
30

31. 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
31

32. DEMO – HTMLFrameMojit & API
32

33. DEMO – LazyLoad
33

34. Deployment
— Mojito on Heroku
34

35. Mojito Shaker
— Shaker is a static asset rollup manager for
Mojito applications.
— https://github.com/yahoo/mojito-shaker
— http://developer.yahoo.com/cocktails/
shaker/
35

36. 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

37. Contact info
— @ddsakura
— Demo sample code
https://github.com/ddsakura/
mojitoHelloworld
37