Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mojito trainingKeshavaprasad B S
● What is Mojito?● Mojito Architecture● Installation & Setup● Create a simple weather app○ Understand application componen...
● Mojito is a node module and hence benefits from the speed andscalability on Node.js. It uses express package of Node.js....
● Designed with the goal of runningin multiple runtime environmentsand supporting online and offlineexperiences.○ Mobile b...
1. Download node from http://nodejs.org.2. Do npm install mojito3. alias mojito=~/node_modules/mojito/bin/mojito4. mojito ...
● Basic unit of composition and reuse in a Mojito application● Why Mojit? : Module + Widget = Mojit● Path: <app_name>/moji...
● Represent business logic entities and contain code that accessesand persists data● Can be shared across mojits● Path: <a...
● Path: <app_name>/mojits/<mojit_name>/controller.server.js.● Naming convention:○ For the file name: controller.{affinity}...
● Path:<app_name>/mojits/<mojit_name>/views/<view_file>● Naming convention: {controller_function}.[{selector}].{rendering_...
● Runs only on the client side● Binders can○ Attach event handlers to the mojits DOM node○ Communicate with other mojits o...
Check the code at https://github.com/kbsbng/mojito-examples/tree/master/SimpleWeatherApp. It:● Creates a simple weather ap...
● https://github.com/kbsbng/mojito-examples/blob/master/SimpleWeatherApp/routes.jsonDeep dive: routing
● Helpers:○ For mojit instance, use ac.helpers.set in controller. Examples:■ https://github.com/kbsbng/mojito-examples/blo...
● Example: https://github.com/kbsbng/mojito-examples/tree/master/SimpleWeatherApp/mojits/WeatherDeep dive: Controller acti...
● Using mojitProxy.invoke:○ https://github.com/kbsbng/mojito-examples/blob/master/SimpleWeatherApp/mojits/Weather/binders/...
● mojito-params-addon: http://developer.yahoo.com/cocktails/mojito/api/classes/Params.common.html● mojito-cookies-addon: h...
● Composite mojits○ https://github.com/kbsbng/mojito-examples/blob/master/DemoCompositeMojitApp/application.jsonBuilt-in c...
● To use lazy mojit, app should:○ create a top-level mojit instance of type HTMLFrameMojit○ deploy the mojit instance of t...
● Defaults.json:○ defaults for each mojit.○ Can be overridden by parent mojit○ Configurable based on context● Definition.j...
● Launch an app using a context using --context "environment:<context_name>"Configuration: launch an app using acontext
● yui.config.debug (default: true)● yui.config.logLevel (default: debug)● yui.config.logLevelOrder: (default: [debug, moji...
● Path:○ App level: {application_name}/assets○ Mojit level: {application_name}/mojits/{mojit_name}/assets● Accessing asset...
● http://developer.yahoo.com/cocktails/mojito/docs/Useful links
Thanks!
Upcoming SlideShare
Loading in …5
×

Mojito

985 views

Published on

Yahoo! Mojito beginner training

Published in: Technology
  • Be the first to comment

Mojito

  1. 1. Mojito trainingKeshavaprasad B S
  2. 2. ● What is Mojito?● Mojito Architecture● Installation & Setup● Create a simple weather app○ Understand application components○ Deep dive into few of them● Create a composite mojit● Lazy MojitAgenda
  3. 3. ● Mojito is a node module and hence benefits from the speed andscalability on Node.js. It uses express package of Node.js.● MVC framework built on YUI3● Mojito offers:○ Library for internationalization & localization○ Device specific presentation○ Ability to run the same code on either client or the server○ Integrated unit testingWhat is Mojito?
  4. 4. ● Designed with the goal of runningin multiple runtime environmentsand supporting online and offlineexperiences.○ Mobile browser: supportsHTML-based onlineexperience; may also supportan HTML5-based offlineexperience○ Desktop browser: assumed tobe always connected; supportsHTML-based onlineexperience○ Native client: deployed aspackaged applications,wrapping native chromearound an HTML5-basedexperienceMojito architecture
  5. 5. 1. Download node from http://nodejs.org.2. Do npm install mojito3. alias mojito=~/node_modules/mojito/bin/mojito4. mojito versionInstallation and setup
  6. 6. ● Basic unit of composition and reuse in a Mojito application● Why Mojit? : Module + Widget = Mojit● Path: <app_name>/mojits/<mojit_name>● Mojit components:○ Models○ Controller○ Binders○ View files● Example: https://github.com/kbsbng/mojito-examples/tree/master/HelloWorld/mojits/helloWorldApplication components: mojit
  7. 7. ● Represent business logic entities and contain code that accessesand persists data● Can be shared across mojits● Path: <app_name>/mojits/<mojit_name>/models.● Naming convention:○ For file name: {model_name}.{affinity}.js, where affinity isserver, client or common. For example, flickr.server.js○ For the YUI module name: {mojit_name}Model{Model_name}. For example, in photos/models/flickr.server.js, use the YUI module name photosModelFlickr.○ For the default model.server.js, use the YUI module name{mojit_name}Model.● Example: https://github.com/kbsbng/mojito-examples/blob/master/HelloWorld/mojits/helloWorld/models/foo.server.jsApplication components: model
  8. 8. ● Path: <app_name>/mojits/<mojit_name>/controller.server.js.● Naming convention:○ For the file name: controller.{affinity}.js, whereaffinity is common, server, or client.○ For the YUI module name: use the mojit name.● Example: https://github.com/kbsbng/mojito-examples/blob/master/HelloWorld/mojits/helloWorld/controller.server.js● Controller <=> Model communication:○ through ActionContext: ac.models.get({model_name}).{model_function}● Passing data to the view.○ through ActionContext: ac.done(data).Application components: controller
  9. 9. ● Path:<app_name>/mojits/<mojit_name>/views/<view_file>● Naming convention: {controller_function}.[{selector}].{rendering_engine}.html.Sample names: index.hb.html, photos.iphone.jade.html,landing.android.ejs.html.● Currently supporting templating engines:○ Mustache○ Handlebars (default).● You can fairly easily add support to other templating engines likejade and ejs.● Example: https://github.com/kbsbng/mojito-examples/blob/master/HelloWorld/mojits/helloWorld/binders/index.jsApplication components: View
  10. 10. ● Runs only on the client side● Binders can○ Attach event handlers to the mojits DOM node○ Communicate with other mojits on the page○ Execute actions on the mojit that the binder is attached to○ Refresh the mojit● Example: https://github.com/kbsbng/mojito-examples/blob/master/SimpleWeatherApp/mojits/Weather/binders/index.jsApplication components: binder
  11. 11. Check the code at https://github.com/kbsbng/mojito-examples/tree/master/SimpleWeatherApp. It:● Creates a simple weather app to display temperature of Bangaloreby doing YQL query: "select * from weather.forecast wherewoeid=2295420"● Then, see how to add a forecast action to this module to show theforecast.Create a simple weather app
  12. 12. ● https://github.com/kbsbng/mojito-examples/blob/master/SimpleWeatherApp/routes.jsonDeep dive: routing
  13. 13. ● Helpers:○ For mojit instance, use ac.helpers.set in controller. Examples:■ https://github.com/kbsbng/mojito-examples/blob/master/DemoHandlebarHelpers/mojits/Demo/controller.server.js■ https://github.com/kbsbng/mojito-examples/blob/master/DemoHandlebarHelpers/mojits/Demo/views/index.hb.html○ For global use, use ac.helpers.expose in controller.● Mojito supplied data:○ {{mojit_view_id}}○ {{mojit_assets}} - assets dir of the mojitDeep dive: template and View Engine
  14. 14. ● Example: https://github.com/kbsbng/mojito-examples/tree/master/SimpleWeatherApp/mojits/WeatherDeep dive: Controller actions, action <=>view mapping
  15. 15. ● Using mojitProxy.invoke:○ https://github.com/kbsbng/mojito-examples/blob/master/SimpleWeatherApp/mojits/Weather/binders/index.jsDeep dive: Binder tunneling
  16. 16. ● mojito-params-addon: http://developer.yahoo.com/cocktails/mojito/api/classes/Params.common.html● mojito-cookies-addon: http://developer.yahoo.com/cocktails/mojito/api/classes/Cookie.server.html● mojito-url-addon: http://developer.yahoo.com/cocktails/mojito/api/classes/Url.common.html● mojito-assets-addon: http://developer.yahoo.com/cocktails/mojito/api/classes/Assets.common.html● mojito-composite-addon: http://developer.yahoo.com/cocktails/mojito/api/classes/Composite.common.html● mojito-config-addon: http://developer.yahoo.com/cocktails/mojito/api/classes/Config.common.htmlBuilt-in components: Addons
  17. 17. ● Composite mojits○ https://github.com/kbsbng/mojito-examples/blob/master/DemoCompositeMojitApp/application.jsonBuilt-in components: Mojits:HTMLFrameMojit
  18. 18. ● To use lazy mojit, app should:○ create a top-level mojit instance of type HTMLFrameMojit○ deploy the mojit instance of type HTMLFrameMojit to the client("deploy": true)○ create a container mojit that has children mojit instances("children": { ... })○ defer the dispatch of the mojit instance that will be lazily loaded("defer": true)Built-in components: Mojits: LazyMojit
  19. 19. ● Defaults.json:○ defaults for each mojit.○ Can be overridden by parent mojit○ Configurable based on context● Definition.json:○ metadata for a mojit○ Configurable based on contextConfiguration: application.json, defaults.json, definition.json
  20. 20. ● Launch an app using a context using --context "environment:<context_name>"Configuration: launch an app using acontext
  21. 21. ● yui.config.debug (default: true)● yui.config.logLevel (default: debug)● yui.config.logLevelOrder: (default: [debug, mojito, info, warn,error, none] )Configuration: logging
  22. 22. ● Path:○ App level: {application_name}/assets○ Mojit level: {application_name}/mojits/{mojit_name}/assets● Accessing assets:○ /static/{application_name}/assets/{asset_file}○ /static/{mojit_name}/assets/{asset_file}● Using assets addonAssets
  23. 23. ● http://developer.yahoo.com/cocktails/mojito/docs/Useful links
  24. 24. Thanks!

×