Introducing Mojito

@caridy Caridy Patino Principal Frontend at Yahoo! Search YUI Evangelist
Mojito Ambassador [email protected]

@caridy Mojito Javascript Application Framework

@caridy “Introducing Mojito”

@caridy Mojito is a MVC framework for mobile application

@caridy Why do we need another MVC framework ?

@caridy With Mojito we are trying to ﬁll a gap
in our industry

What is missing in our industry compared with others?

Evolution of the industry...

It is all about the market

Performance as a product feature

Efﬁcient as a feature as well

@caridy Case I: Trafﬁc peaks

@caridy Social networks are responsible for the majority of the
trafﬁc peaks

What can we do in an event of a trafﬁc
peak?

We can let them die !

We can put more money on them

We can degrade the service

@caridy Monitoring is a standard equipment nowadays

@caridy What if we delegate some routines to the client?

Twitter Model Twitter Model Twitter API

Twitter Model Twitter Model YQL Twitter API

@caridy Case II Variable Connection Speed

@caridy There is a new vector that can affect our
product drastically: connection speed ( 3G/4G/wiﬁ/etc )

@caridy Slowness and unresponsiveness can lead the user to close
the app and move on.

Huge gap between download & upload

@caridy When running on 3G/4G we need to reduce the
amount of requests

@caridy Mashing up data, css, js, base64 images, etc can
make a big difference when running in 3G/4G

@caridy What if we create a web app that reacts
to changes in the connection speed?

@caridy How can mojito help to solve those problems?

@caridy Personalize the way your product behaves per user, per
request, per connection speed, per routine, etc, etc, etc

@caridy Mojito is an application framework based on Node.JS

@caridy Why Node.JS ?

@caridy https://github.com/popular/watched

@caridy ... but, why ?

@caridy ... because it is JavaScript !

@caridy https://github.com/languages

@caridy Javascript in the browser VS Javascript in the server

@caridy

@caridy It is just Javascript

@caridy Node.JS is certainly changing the way we approach problems,
and the way we solve problems for the web !

@caridy Mojito uses Node.JS as the server runtime infrastructure

@caridy Runtimes in Mojito

@caridy can provide a runtime for Mojito Apps

@caridy Why does this matters ?

@caridy

@caridy Javascript is everywhere

@caridy http://www.olympum.com/architecture/the-nodejs-innovation-advantage/

@caridy Understanding Mojito

@caridy Mojits

@caridy Modules Widgets

@caridy + Modules Widgets

@caridy Mojit

@caridy A mojit is an independent piece of software can
be used within a mojito application

@caridy A mojito application is an aggregation of mojits Mojit
Foo Mojit Bar Mojit Baz Mojito App

@caridy Mojit Structure - deﬁnition - controller - models -
views - binders - assets - tests Mojito App

@caridy Each JavaScript file within a mojit should define its
affinity: models/foo.<client|common|server>.js

JavaScript ﬁles in a mojit should be YUI Modules

@caridy Dimensions and Conﬁgurations

@caridy We can extend Mojito with custom dimensions through the
middleware addon

@caridy Dimensions and conﬁgurations are complex structures that can increase
the complexity of the testing.

@caridy But they open a door for endless opportunities to
customize and optimize the behavior of the app.

@caridy Execution Context

@caridy The context is an object that represents the current
state of the execution

@caridy The context object is composite by all the dimensions
and the current value of each of those dimensions

@caridy Based on the execution context Mojito can compute the
proper conﬁguration at any given time

@caridy Controllers & Actions

Invoking @PageLayout.index will trigger the index action

@caridy Views & Binders

Mustache or Handlebars

@caridy Other structures in mojito: routes, application, addons, middleware, etc

@caridy Mojito 101

$ npm install -g mojito $ mojito create app hello
$ cd hello $ npm install . $ mojito create mojit HelloMojit $ mojito start http://localhost:8666/@HelloMojit/index

$ mojito build html5app $ cd artifacts/builds/html5app/ $ open index.html
$ mojito build html5app \ --context=”device=iphone&lang=en-GB”

$ mojito test app . $ mojito docs mojit Bar
Other available commands: build, compile, create, docs, gv, help, info, jslint, start, test, version

@caridy Quick recap...

@caridy Mojito Application Framework https://github.com/yahoo/mojito/

@caridy Projects under “Yahoo! Cocktails”

@caridy Mojito Shaker Shaker is a static asset rollup manager
for Mojito applications. To be announced on April 27 http://github.com/yahoo/mojito-shaker

@caridy Grasshopper Grasshopper (aka ghh) is a command line deployment
tool for Node.JS applications.

@caridy Manhattan Elastic cloud for Node.JS applications.

Livestand is a mojito application for iPad

@caridy Thank you! @caridy

@caridy

Introducing Mojito

Introducing Mojito

Other Decks in Programming

Featured

Transcript