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

608

Published on

Yahoo! Mojito beginner training

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
608
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×