Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 138 135 1 1 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Mojito trainingKeshavaprasad B S
  • 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. ● 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. ● 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. 1. Download node from Do npm install mojito3. alias mojito=~/node_modules/mojito/bin/mojito4. mojito versionInstallation and setup
  • 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: components: mojit
  • 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: components: model
  • 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:● 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. ● 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,● Currently supporting templating engines:○ Mustache○ Handlebars (default).● You can fairly easily add support to other templating engines likejade and ejs.● Example: components: View
  • 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: components: binder
  • 11. Check the code at 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. ● dive: routing
  • 13. ● Helpers:○ For mojit instance, use ac.helpers.set in controller. Examples:■■○ 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. ● Example: dive: Controller actions, action <=>view mapping
  • 15. ● Using mojitProxy.invoke:○ dive: Binder tunneling
  • 16. ● mojito-params-addon:● mojito-cookies-addon:● mojito-url-addon:● mojito-assets-addon:● mojito-composite-addon:● mojito-config-addon: components: Addons
  • 17. ● Composite mojits○ components: Mojits:HTMLFrameMojit
  • 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. ● 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. ● Launch an app using a context using --context "environment:<context_name>"Configuration: launch an app using acontext
  • 21. ● yui.config.debug (default: true)● yui.config.logLevel (default: debug)● yui.config.logLevelOrder: (default: [debug, mojito, info, warn,error, none] )Configuration: logging
  • 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. ● links
  • 24. Thanks!