Mojito@nodejstw

1,084 views

Published on

Introduction to Mojito and Cocktails @ NodeJS Taiwan community

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,084
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mojito@nodejstw

  1. 1. Mojito and Cocktails@ddsakura
  2. 2. I am…—  ddsakura / 賽拉維.柯南 2
  3. 3. Outline 3
  4. 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. 5. Cocktails is also—  amix of HTML5, NodeJS, CSS3,YUI and a lot of ingenious, creative mind-bending tricks from Yahoo! 5
  6. 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. 7. Eating your own dog food—  like Yahoo! Livestand. 7
  8. 8. Mojito is—  Mojito (/moʊˈhiːtoʊ/) ◦  It is a kind of cocktail 8
  9. 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. 10. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 10
  11. 11. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 11
  12. 12. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 12
  13. 13. Mojito is open!—  http://developer.yahoo.com/cocktails/ mojito/—  https://github.com/yahoo/mojito/ 13
  14. 14. Mojits 14
  15. 15. 16
  16. 16. 17
  17. 17. 19
  18. 18. Mojito application concept 20
  19. 19. Mojito application directorystructure 21
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Template Engine—  Currently, theonly template system allowed is Mustache, so the name of view templates always contains mu—  http://mustache.github.com/ 26
  25. 25. 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
  26. 26. The tools for Multi-Device—  CSS3 Media Queries—  Mojito view template 28
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. DEMO – HTMLFrameMojit & API 32
  31. 31. DEMO – LazyLoad 33
  32. 32. Deployment—  Mojito on Heroku 34
  33. 33. 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
  34. 34. 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
  35. 35. Contact info—  @ddsakura—  Demo sample code https://github.com/ddsakura/ mojitoHelloworld 37

×