55
Caridy Patiño Bartender at Yahoo! Mojito Team Principal Frontend Engineer at Yahoo! [email protected] @caridy

FEDM Meetup: Introducing Mojito

Embed Size (px)

DESCRIPTION

Instead of Introducing Mojito, I want to recap on the state of the industry, and specifically on a new trending about frameworks and platforms that are trying to blur the line between server and client. Mojito, MeteorJS, DerbyJS and others are part of that group. I also want to provide more details about the motivations, challenges and the state of the Yahoo! Cocktails platform.

Citation preview

Page 1: FEDM Meetup: Introducing Mojito

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

[email protected]@caridy

Page 2: FEDM Meetup: Introducing Mojito

IntroducingMojito

Page 3: FEDM Meetup: Introducing Mojito

IntroducingMojito

Page 4: FEDM Meetup: Introducing Mojito

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

Page 5: FEDM Meetup: Introducing Mojito

A little bit of history...

Page 6: FEDM Meetup: Introducing Mojito

The Twitter Tale

Page 7: FEDM Meetup: Introducing Mojito
Page 8: FEDM Meetup: Introducing Mojito

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

Page 10: FEDM Meetup: Introducing Mojito

Runtime FE Layer CDN API Layer

HTML

Javascript

Content

Page 11: FEDM Meetup: Introducing Mojito

The problem?The app was sloooowwwww for

some users, specially mobile users.

Page 12: FEDM Meetup: Introducing Mojito

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

Page 13: FEDM Meetup: Introducing Mojito

The Problem

Page 14: FEDM Meetup: Introducing Mojito

An Event Apart

#aeaatl

Page 15: FEDM Meetup: Introducing Mojito
Page 16: FEDM Meetup: Introducing Mojito
Page 17: FEDM Meetup: Introducing Mojito
Page 18: FEDM Meetup: Introducing Mojito

few types of mobile web applicationsthat you can build today

Page 19: FEDM Meetup: Introducing Mojito

+

Native Web

WebViews + Web App

native wrapper

Page 20: FEDM Meetup: Introducing Mojito

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

Page 21: FEDM Meetup: Introducing Mojito

Browser based apps

pure web

Page 22: FEDM Meetup: Introducing Mojito

- 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

Page 23: FEDM Meetup: Introducing Mojito

Our Solution

Page 24: FEDM Meetup: Introducing Mojito

Javascript Everywhere

Page 25: FEDM Meetup: Introducing Mojito

https://github.com/languages

Page 26: FEDM Meetup: Introducing Mojito

http://yuilibrary.com/

Page 27: FEDM Meetup: Introducing Mojito

Yahoo! hosted a BayJax meetup dedicated to NodeJSMay, 2010

Ryan Dahl: “Introduction to NodeJS”

Page 28: FEDM Meetup: Introducing Mojito

http://photosnear.me/

YAF Client/Server Demo

Page 29: FEDM Meetup: Introducing Mojito

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

customizating per context

Page 30: FEDM Meetup: Introducing Mojito

Mojito Runtimes

Page 31: FEDM Meetup: Introducing Mojito

Javascript Runtimes

Page 32: FEDM Meetup: Introducing Mojito

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

Page 33: FEDM Meetup: Introducing Mojito

A mobile browser, a webview and phonegap areexamples of runtimes

Page 34: FEDM Meetup: Introducing Mojito

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

Page 35: FEDM Meetup: Introducing Mojito

Runtimes allow us to run the same web appin different contexts

Page 36: FEDM Meetup: Introducing Mojito

Every runtime has its own characteristics, features and security models

Page 37: FEDM Meetup: Introducing Mojito

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

Page 38: FEDM Meetup: Introducing Mojito

Optimization & Adaptation

Page 39: FEDM Meetup: Introducing Mojito

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

CSS per runtime

Page 40: FEDM Meetup: Introducing Mojito

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

Page 41: FEDM Meetup: Introducing Mojito

the race is just starting

Page 42: FEDM Meetup: Introducing Mojito

A Javascript MVC Framework for mobile applications!

https://github.com/yahoo/mojito

Page 43: FEDM Meetup: Introducing Mojito

http://meteor.com/

Page 44: FEDM Meetup: Introducing Mojito

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

browsers

DerbyJS

http://derbyjs.com/

Page 45: FEDM Meetup: Introducing Mojito

“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/

Page 46: FEDM Meetup: Introducing Mojito
Page 47: FEDM Meetup: Introducing Mojito

Backbone on the Client and Server

http://nerds.airbnb.com/

Page 48: FEDM Meetup: Introducing Mojito

Mojito Today

Page 49: FEDM Meetup: Introducing Mojito
Page 50: FEDM Meetup: Introducing Mojito

// Mojito 101

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

Page 51: FEDM Meetup: Introducing Mojito

// Mojito 101 (second part)

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

Page 53: FEDM Meetup: Introducing Mojito

One last thing...

Page 54: FEDM Meetup: Introducing Mojito

http://github.com/yahoo/mojito

Page 55: FEDM Meetup: Introducing Mojito

Thanks@caridy