Introduction To Yahoo Mojito and Its Client and Server Seamlessness [screencast]

Hi There,


Mojito is a model-view-controller (MVC) application framework built on YUI 3 and its open source. Most notable feature of mojito is its capability to give you seamless MVC framework to manage your code on server as well as on client. Applications built on Mojito consists of  small components called Mojits which are independent UI element which can have their own Model,View, Controller and Binders.

Mojito features:

1. Local Command Line development Tools.
2. Library for simplifying internationalization & localization.
3. Integrated unit testing.
4. Device Specific Presentation.
5. Single MVC to manage Client and Server code seamlessly.   

Here is screen cast to show you some awesomeness of Yahoo Mojito. Watch the Youtube video.

ScreenCast

How to setup this example

1. Install Node
2. Install Mojito



npm install mojito -g



3. Create App and Mojit



$ mojito create app youtubesearch
$ cd youtubesearch
$ mojito create mojit containerMojit
$ mojito create mojit searchResultMojit



4. Modify application.json
5. Modify routes.json
6. Modify mojits MVCs. Get the full code here



Get from github
git clone https://github.com/markandey/mojito-example-youtube.git

HTMLFrameMojit is inbuilt mojit in the Mojito framework which creates basic html layout. In the example we have created a containerMojit, which is a composite mojit. Then In searchResultMojit we have created binder to handle click of search button. We are using mojitProxy to tunnel the request to mojit. We never bothered about the location of searchResultMojit and framework automatically tunnels the request to mojit either it is on server or it is on client. There is a way to lazyLoad a mojit.

I have used YQL to get youtube search result. To Read more about the YQL read here.


Where to Host Mojito Application
You can host mojito on any node.js server, Try Openshift, its free and easy to deploy.
You can also try http://www.nodejitsu.com/