Pro Yearly is on sale from $80 to $50! »

Mojito and Cocktails

Mojito and Cocktails

Mojito and Cocktails sharing @ NodeJS Taiwan Community

1706dbb4dd8c57a2e35f0cdc09a9a8de?s=128

ddsakura

May 13, 2012
Tweet

Transcript

  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 —  a mix 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. 14 Mojits

  15. None
  16. 16

  17. 17

  18. None
  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 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" } } ]
  25. DEMO - Routing —  Create the file routes.json with the

    following —  Run the mojito application ◦  mojito start —  Go to http://localhost:8666/index 25 [ { "settings": ["master"], "index_route": { "verbs": ["get"], "path": "/index", "call": "@myMojit.index" } } ]
  26. Template Engine —  Currently, the only 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