• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mojito@nodejstw
 

Mojito@nodejstw

on

  • 1,007 views

Introduction to Mojito and Cocktails @ NodeJS Taiwan community

Introduction to Mojito and Cocktails @ NodeJS Taiwan community

Statistics

Views

Total Views
1,007
Views on SlideShare
1,005
Embed Views
2

Actions

Likes
1
Downloads
9
Comments
0

1 Embed 2

http://www.linkedin.com 2

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