Mojito
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

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

Views

Total Views
904
On Slideshare
766
From Embeds
138
Number of Embeds
4

Actions

Shares
Downloads
1
Comments
0
Likes
2

Embeds 138

http://blog.kbsbng.com 135
http://pinterest.com 1
http://feeds.feedburner.com 1
http://4086193888946829557_2d1ee29cc3aee21bd5f542a526ec3060985a9787.blogspot.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 http://nodejs.org.2. 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: https://github.com/kbsbng/mojito-examples/tree/master/HelloWorld/mojits/helloWorldApplication 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: https://github.com/kbsbng/mojito-examples/blob/master/HelloWorld/mojits/helloWorld/models/foo.server.jsApplication 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: 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. ● 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. ● 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. 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. ● https://github.com/kbsbng/mojito-examples/blob/master/SimpleWeatherApp/routes.jsonDeep dive: routing
  • 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. ● Example: https://github.com/kbsbng/mojito-examples/tree/master/SimpleWeatherApp/mojits/WeatherDeep dive: Controller actions, action <=>view mapping
  • 15. ● Using mojitProxy.invoke:○ https://github.com/kbsbng/mojito-examples/blob/master/SimpleWeatherApp/mojits/Weather/binders/index.jsDeep dive: Binder tunneling
  • 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. ● Composite mojits○ https://github.com/kbsbng/mojito-examples/blob/master/DemoCompositeMojitApp/application.jsonBuilt-in 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. ● http://developer.yahoo.com/cocktails/mojito/docs/Useful links
  • 24. Thanks!