Yahoo! Mojito: Part 1 – Hello World!

Yahoo! Mojito:: Part 1 - Hello World:: Artifacts

Yahoo! Mojito is, now, watched officially by 1027 developers (as of writing this article) on Github (see https://github.com/yahoo/mojito/watchers) and is actively contributed by developers across the board (see https://github.com/yahoo/mojito/network). And I’m pretty sure, there will be several others who would have downloaded, installed and tried.

Before getting into this detailed Hell World tutorial, I assume that you’ve already installed Yahoo! Mojito using the instructions given at https://github.com/yahoo/mojito README. I preferred an npm-install to ensure that I get a stable version.

Defining the “Hello World” application:

  1. The first step will be to create an application with defaults, no customization, and get it running.
  2. Next, we’ll make the application run at port 80 and ensure that the content is available at “/” rather than a strange but intuitive default path.
  3. Subsequently, we’ll change the default contents to reflect “Hello World” in the message
  4. And finally, we’ll make the application interactive by creating a simple form that will accept user’s name and say hello to him/her rather than to the whole world 😉

And here’s some vocabulary before we deep dive:

  1. Yahoo! Mojito: MVC framework for JavaScript based application.
  2. Mojito Application: An application based on Mojito framework.
  3. Mojit: A mojito widget – with its own model, view, controller and binder.

We call this application – “HelloWorldApp” and the mojit as “HelloMojit“.


1. Creating application with defaults:

$ mojito create app HelloWorldApp
$ cd HelloWorldApp
$ mojito create mojit HelloMojit
$ cd ..

At this point in time, we have the skeleton of the code ready. Let’s just have a brief look at the artifacts created:

The main configuration file is application.json that defines the application structure, specifically, the mojits and their configuration, application name, port number etc.

If you open the file in an editor, the contents will be as follows:

[
    {
        "settings": [ "master" ],
        "specs": {}
    }
]

What this says is that there is one setting named “master” (default settings to be loaded by Mojito runtime) with empty specs.

We need to tell Mojito that we have a mojit – HelloMojit – and it should pick up most of things on its own. Update the contents of the file to as below:

[
    {
        "settings": [ "master" ],
        "specs": {
            "hello_mojit": {
                "type": "HelloMojit"
            }
        }
    }
]

The updated content tells Mojito runtime that there is a mojit referred to as “hello_mojit” and its underlying type is “HelloMojit“. What exactly does it mean I’ll detail later… we’re ready with the baseline of our application. It’s time to start the server. Issue the command:

$ mojito start

Launch your browser and point it to http://localhost:8666, 8666 being the default port on which the mojito server runs.

Well, very interestingly but probably not surprisingly, we get a 404:

That’s quite understandable as Mojito does not now know what to show at the root path. But what it does know is about the HelloMojit mojit. So, let us now point the browser to http://localhost:8666/@HelloMojit/index. It means point to the HelloMojit and execute the action index, and now you should get

You can also browse to http://localhost:8666/hello_mojit/index. And I don’t think I should need to explain what “hello_mojit” means. If you don’t remember, just look back into the contents of application.json.


Notice: This work is licensed under a BY-NC-SA. Permalink: Yahoo! Mojito: Part 1 – Hello World!

Leave a Reply

Your email address will not be published. Required fields are marked *

question razz sad evil exclaim smile redface biggrin surprised eek confused cool lol mad twisted rolleyes wink idea arrow neutral cry mrgreen

*