What is Mojito?

What is Mojito? Well, mojito is a traditional cuban drink, and since I’m originally from Cuba, I should know everything about it, and I do!, but today I want to talk about the other Mojito, the one from Yahoo!, the application framework, because today it was officially announced as the newest open source project.

My team and I have been using Mojito for quite some time, we were one of the early adopters within the company, and we used it to build a brand new product from scratch. So, I know a little bit about it, and I know you will have a lot of questions about it. Today, I just want to address general questions, but eventually I want to drill down on some of the topics.


Is Mojito a silver bullet for web applications?

There are not silver bullets in our industry. But IMHO, Mojito brings some new concepts to the table, and specifically it opens a new chapter for efficiency in the web.

How can Mojito help to create more efficient web applications?

Efficiency can be achieved when you have smart software that can react to runtime changes. In the context of web applications, and mobile web applications, the runtime depends on numerous vectors, some of them completely out of our control. For example, connection speed, battery life, traffic peaks, browser capabilities, device capabilities, etc. If the application can monitor each of those vectors, and react per user, per connection, per process, per routine, then you can achieve some mind blowing tricks to make your application really efficient, hence to make the web more efficient. Mojito has two unique features to empower you on this area.

  • Runtime context: which is a predefined set of dimensions/variables with a finite number of possibilities/values that will define the state of the execution at any given time.
  • Environment agnostic: the unique ability to run the same code in different runtimes. E.g.: browser, server, iOS UIWebView or any other phoneGap similar runtime.

When you combine these two features together, you can control how, when and where each piece of logic will be executed, so, you can define very simple rules to make your application to perform better under different circumstances per user, per request, per routine, etc.

What does “context” mean in Mojito?

In terms of JavaScript, a context is a literal object that contains a series of dimensions (properties, for example, region, device, connection speed, network, environment, memory, just to name a few), and each dimension can have a finite number of values. This literal object can be constructed on every request at the server side, or can be defined, redefined at the client side. This literal object will allow you to pick up certain pre-defined configuration that can be used to trigger and execute a certain piece of logic, or can be used just like a dynamic configuration hub for regular settings, language, etc.

This is a concept that we have been using for quite sometime at Yahoo!, but what is new in Mojito is that this context can now travel from server-to-client and vice versa, and can be modified at any given time, giving you full control over it.

Can I really execute the same code in the server and in the client?

Yes, you can. But it’s not magic. You have to define where you want to execute each piece of logic (javascript files) depending of the execution context following a very simple pattern to name your files, e.g.:

  • foo.client.js defines a piece of logic that is only available when running on the client side runtime.
  • bar.server.js defines a piece of logic that is only available when running on the server side runtime.
  • baz.common.js defines a piece of code that is runtime agnostic. In can run on either server or client side.

Now, if you have two pieces with the same name (e.g. foo.client.js and foo.server.js), Mojito will switch between logics automatically depending on the execution runtime. This allows you to tweak your logic easily. Keep in mind that *.client.js or *.server.js will be able to require any other piece of logic that could be client, server or common. This is a very powerful way to organize your code.

How does Mojito compare to other framework out there?

I have used and tried many other Node.JS frameworks in the last two years or so, and all of them (no exceptions) suffer from the same problem, separation between server and client. I think Mojito does a pretty good job blurring that separation, and as a result, you will notice an increase on productivity from the development point of view.

Was Mojito built from scratch in Node.JS?

No. Mojito was built on top of two well known/tested frameworks:

  • YUI Library: which is the foundation of the javascript module structure and the basic abstraction for most of the JavaScript pieces in Mojito. You don’t need to know YUI to use Mojito though, Mojito obscures most of the YUI features, and you can use JavaScript or any other JavaScript library if you want (if it can run in the server side just like YUI does it).
  • Express: “High performance, high class web development for Node.js“ as the underlaying serving platform for the server side.

They are both open source projects.

How hard is to get up to speed on Mojito?

To be honest, it will be hard. You need to be able to reach some level of abstraction to really embrace the Mojito paradigm, but also to be able to squeeze every bit of it. It takes time to understand how it works, and how to tweak it, but it is worth the effort. Especially for those who know YUI, it will be easier to adapt to Mojito.

Which types of web applications are more suitable for Mojito?

Most web applications that are meant to be used in different devices can probably fit into Mojito paradigm. But those that are set to scale in terms of traffic and performance are more suitable for it IMHO.

What kind of cool stuff can I do with Mojito?

As @rw0 mentioned in his post, you can create an application that can easily instrument the latency and response time of every network activity within the app, and translate that in changes in a dimension within the context. Let’s say we have a dimension like this:

{ speed: { fast: null, regular: null, slow: null, shitty: null } }

Based on the instrumentation, you can adjust the value of “speed” overtime. If the user is using an iPhone, connected to a wifi network, and suddenly s/he step out of the room, switching to a shitty 3G connection, and if we can detect that change, and re-asset the “speed” dimension, that means we can easily change the way we serve traffic/content for the user. Maybe we can now make a single request bundling content, assets, data into a single response (JSON), putting some pressure on our servers (which will do the bundling process) for that particular user in order to keep s/he running without a degradation of the service.

What else can I do with it?

Based on the previous example, what if we instrument our servers to detect changes in the level of CPU or memory usage?, and depending on a dimension, we can delegate some bundling, rendering, and fetching processes to our client’s runtime in an event of a traffic peak, instead of just degrading the service, or serving stale content just to avoid an outage. And this is only possible because of JavaScript, and the ability to run it in the server or client based on the execution context. I think this is a killer feature.

Where can I host a Mojito application?

A Mojito application is just a Node.JS application. Ideally, if it is set to scale, you should try to find an elastic cloud (maybe Amazon EC2) to host it. Internally, we use Yahoo! Manhattan Cloud, which is another piece of the Yahoo! Cocktails platform, and hopefully you will be able to use it too soon. Ask @olympum for more details hehehehe!

Where can I download the source code?

Mojito source code is hosted in github.com/yahoo/mojito, go and get it. We hope you can fork it and help us make it better by submitting patches and new features.

How can I use it?

Check the quickstart section from the official page.

That’s all for now, feel free to ask/comment!