Mojito and Cocktails

Mojito and Cocktails sharing @ NodeJS Taiwan Community

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