This document provides an overview and agenda for a Mojito training session. It discusses what Mojito is, its architecture, how to install and set it up, how to create a simple weather application in Mojito, and various Mojito components like mojits, models, controllers, views, binders, addons, configuration, assets and logging. It also provides links to code examples and documentation.
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 Mojit
Agenda
3. ● 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?
4. ● 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
5. 1. Download node from http://nodejs.org.
2. Do npm install mojito
3. alias mojito=~/node_modules/mojito/bin/mojito
4. mojito version
Installation 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/helloWorld
Application components: mojit
7. ● 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
8. ● 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
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 like
jade and ejs.
● Example: https://github.com/kbsbng/mojito-
examples/blob/master/HelloWorld/mojits/helloWorld/binders/index.js
Application components: View
10. ● 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/i
ndex.js
Application 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 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
13. ● Helpers:
○ For mojit instance, use ac.helpers.set in controller. Examples:
■ https://github.com/kbsbng/mojito-
examples/blob/master/DemoHandlebarHelpers/mojits/Dem
o/controller.server.js
■ https://github.com/kbsbng/mojito-
examples/blob/master/DemoHandlebarHelpers/mojits/Dem
o/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
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 context
Configuration: application.json, defaults.
json, definition.json
20. ● Launch an app using a context using --context "environment:
<context_name>"
Configuration: launch an app using a
context