Mojito@nodejstw
Upcoming SlideShare
Loading in...5
×
 

Mojito@nodejstw

on

  • 1,054 views

Introduction to Mojito and Cocktails @ NodeJS Taiwan community

Introduction to Mojito and Cocktails @ NodeJS Taiwan community

Statistics

Views

Total Views
1,054
Views on SlideShare
1,051
Embed Views
3

Actions

Likes
1
Downloads
10
Comments
0

2 Embeds 3

http://www.linkedin.com 2
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

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

Mojito@nodejstw Mojito@nodejstw Presentation Transcript

  • 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—  amix 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 isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 10
  • The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 11
  • The idea isFrom 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
  • Mojits 14
  • 16
  • 17
  • 19
  • Mojito application concept 20
  • Mojito application directorystructure 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 "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
  • 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
  • Template Engine—  Currently, theonly 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_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
  • 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, 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
  • 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
  • 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/ shaker/ 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/ mojitoHelloworld 37