View
910
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Yahoo! Mojito beginner training
Citation preview
Mojito training Keshavaprasad B S
● 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 Mojit
Agenda
● Mojito is a node module and hence benefits from the speed and scalability 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 testing
What is Mojito?
● Designed with the goal of running in multiple runtime environments and supporting online and offline experiences.○ Mobile browser: supports
HTML-based online experience; may also support an HTML5-based offline experience
○ Desktop browser: assumed to be always connected; supports HTML-based online experience
○ Native client: deployed as packaged applications, wrapping native chrome around an HTML5-based experience
Mojito architecture
1. Download node from http://nodejs.org.2. Do npm install mojito3. alias mojito=~/node_modules/mojito/bin/mojito4. mojito version
Installation and setup
● 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/helloWorld
Application components: mojit
● Represent business logic entities and contain code that accesses and 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 is server, 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.js
Application components: model
● Path: <app_name>/mojits/<mojit_name>/controller.server.js.
● Naming convention:○ For the file name: controller.{affinity}.js, where
affinity 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
● 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 like jade and ejs.
● Example: https://github.com/kbsbng/mojito-examples/blob/master/HelloWorld/mojits/helloWorld/binders/index.js
Application components: View
● Runs only on the client side● Binders can
○ Attach event handlers to the mojit's 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.js
Application components: binder
Check the code at https://github.com/kbsbng/mojito-examples/tree/master/SimpleWeatherApp. It:● Creates a simple weather app to display temperature of Bangalore
by doing YQL query: "select * from weather.forecast where woeid=2295420"
● Then, see how to add a forecast action to this module to show the forecast.
Create a simple weather app
● https://github.com/kbsbng/mojito-examples/blob/master/SimpleWeatherApp/routes.json
Deep dive: routing
● 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 mojit
Deep dive: template and View Engine
● Example: https://github.com/kbsbng/mojito-examples/tree/master/SimpleWeatherApp/mojits/Weather
Deep dive: Controller actions, action <=> view mapping
● Using mojitProxy.invoke:○ https://github.com/kbsbng/mojito-
examples/blob/master/SimpleWeatherApp/mojits/Weather/binders/index.js
Deep dive: Binder tunneling
● 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.html
Built-in components: Addons
● Composite mojits○ https://github.com/kbsbng/mojito-
examples/blob/master/DemoCompositeMojitApp/application.json
Built-in components: Mojits: HTMLFrameMojit
● 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
● 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 context
Configuration: application.json, defaults.json, definition.json
● Launch an app using a context using --context "environment:<context_name>"
Configuration: launch an app using a context
● yui.config.debug (default: true)● yui.config.logLevel (default: debug)● yui.config.logLevelOrder: (default: ['debug', 'mojito', 'info', 'warn',
'error', 'none'] )
Configuration: logging
● 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 addon
Assets
● http://developer.yahoo.com/cocktails/mojito/docs/
Useful links
Thanks!