FEDM Meetup: Introducing Mojito

Caridy PatiñoBartender at Yahoo! Mojito TeamPrincipal Frontend Engineer at Yahoo!

caridy@yahoo-inc.com@caridy

IntroducingMojito

IntroducingMojito

Yahoo! Cocktails is a mobile application development platform based on open web standards.

A little bit of history...

The Twitter Tale

Twitter launched a new version of the web application that explicitly required javascript

http://twitter.com/?_twitter_noscript=1

Runtime FE Layer CDN API Layer

HTML

Javascript

Content

The problem?The app was sloooowwwww for

some users, specially mobile users.

Less than a year after, Twitter re-architected the infrastructure to get content upfront

The Problem

An Event Apart

#aeaatl

few types of mobile web applicationsthat you can build today

+

Native Web

WebViews + Web App

native wrapper

- Part of hybrid apps- Based on WebViews*- HTML, JS and CSS are bundled with app- Can work offline- Mimic native behavior

Browser based apps

pure web

- Pure web apps- Require a browser- HTML, JS and CSS are downloaded over HTTP- Inherit the freedom of the Web- Discoverability is inherited as well

Our Solution

Javascript Everywhere

https://github.com/languages

http://yuilibrary.com/

Yahoo! hosted a BayJax meetup dedicated to NodeJSMay, 2010

Ryan Dahl: “Introduction to NodeJS”

http://photosnear.me/

YAF Client/Server Demo

A Javascript MVC Framework for mobile applications, focused on supporting multiple runtimes and

customizating per context

Mojito Runtimes

Javascript Runtimes

A runtime is a web engine container that can run a web application in a form of HTML, JS and CSS

A mobile browser, a webview and phonegap areexamples of runtimes

Windows 8 has 4 runtimes:

- IE Start Screen Mode (Formerly known as Metro)- IE Desktop Mode- WebView (within Native Windows 8 App)- Native Windows Runtime (Windows Store apps)

https://github.com/yui/yui3/wiki/Windows-8-JavaScript-Runtimes

Runtimes allow us to run the same web appin different contexts

Every runtime has its own characteristics, features and security models

Developing for a single runtime is notlonger an option for most products

Optimization & Adaptation

Optimization is about customizing the way your app behaves per runtime, it is about producing the right HTML, JS and

CSS per runtime

Adaptation is about customizing the UI per screen size, per connection speed, per feature detection, etc.

the race is just starting

A Javascript MVC Framework for mobile applications!

https://github.com/yahoo/mojito

http://meteor.com/

MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and

browsers

DerbyJS

http://derbyjs.com/

“It's agnostic to how requests are routed, which templating language you use or even if you render your HTML

on the client or the server”

http://twitter.github.com/flight/

Backbone on the Client and Server

http://nerds.airbnb.com/

Mojito Today

// Mojito 101

$ npm install mojito@0.5.4 -g$ mojito version$ mojito create app demo$ cd ./demo$ mojito create mojit foo$ mojito start --context ”environment:dev”$ curl http://localhost:8666/@foo/index

// Mojito 101 (second part)

$ mojito build html5app ./$ mojito jslint app . -p$ mojito test app . --coverage $ mojito docs app ./$ mojito info ./$ mojito help

Current versions:- mojito@0.5.4- yui@3.8.1

One last thing...

http://github.com/yahoo/mojito

Thanks@caridy