yahoo! mojito @jsdc
TRANSCRIPT
Yahoo! Mojito
19th May, 2012
About me
Stuff We Do @ Yahoo! Search
– ~40M active users daily– ~290M PVs daily– 47 countriesDavid Shariff,
Front End Engineer, Yahoo! Global Search team
Y! Messenger: [email protected]
Y! Email: [email protected]
Website: www.davidshariff.com
Problem
Today’s web content is no longer consumed solely on the desktop by end users.
Now, we as developers need to support multiple devices such as Tablets, Smartphones etc…
Multiple IOS…
http://www.flickr.com/photos/rickyromero/2672913333/
Language Objective C
Display 480 / 960 x 640
CPU 620MHz ~ 1 GHz
http://www.flickr.com/photos/60196878@N03/5590831755/
Then there is Android…
Language C/Java
Display >= 480 x 800
CPU >= 800MHz
http://www.flickr.com/photos/sucello/6220857499/
What about iPads…
Language Objective C
Display ~ 1024 x 768
CPU ~ 1GHz
http://www.flickr.com/photos/computer-tech-support/5973483447/
Windows phones…
Language .NET
Display 480 x 800
CPU ~ 1 GHz
http://www.flickr.com/photos/wonderdawg777/4403260880/
Don’t forget others devices…
Language C / C++
Display Various
CPU Various
Too many variations across multiple devices
Multiple codebases, high cost.
Objective-C
JavaC
C++ .NET
JavaScript
1 application requires =
This is slow, time consuming and expensive !!!!!!
麻煩 !!!!
Yahoo!’s Solution: CocktailsYahoo! Solution: Cocktails
Yahoo!’s Solution: Cocktails
Cocktails is a mix of HTML5, Node.JS, CSS3,
JavaScript and a lot of ingenious, creative, mind
bending tricks from Yahoo!’s engineers
Yahoo! Mojito
An environment agnostic, MVC web application framework…
Who uses it today ?
Search Direct
Yahoo! Fantasy Finance
CITIZEN SPORTS Fantasy Premier League Football
Yahoo! Mojito
1 Language / codebase for all devices. Optimized high quality experience views for any device with any screen size.
http://store.storeimages.cdn-apple.com http://www.york.ac.uk http://upload.wikimedia.org
How we used to do it..
Server ClientPHP etc… JS
Yahoo! Mojito
Server Common ClientJS JS JS
• Runs on the client (browser/device) and the server.
Yahoo! Mojito
• Built in support for:• Unit testing• Internationalization • Syntax and coding convention checks
• Open source• http://developer.yahoo.com/cocktails/mojito/• http://github.com/yahoo/mojito/
Mojito Architecture
JavaScript Runtime (NodeJS or Browser)
ExpressYUI 3
Connect Mus
tach
e
Mojito
A Mojit is an independent unit of
execution that can be used inside a
Mojito application
WidgetModule = Mojit
Yahoo! OMG
Yahoo! OMG
Presentation Centric – Mojits !!!
Presentation Centric (Grids)
Mojit - MVC
DEMO: Hello World
• $ mojito create app hello_world• $ cd hello_world• $ mojito create mojit myMojit• $ vi application.json• $ vi routes.json• $ mojito start
Go to url http://localhost:8666
Mojit - Structure
• assets– css, imgs etc..
• binders– dom events
• models– data source
• tests– unit tests
• views– device specific markup
• controller– logic
• definition– configs
Mojit - Affinity
• Every controller / model has an affinity to define which runtime it belongs too:
*.[server | common | client].js
– controller.server.js ==> server only– models/foo.client.js ==> client only– controller.common.js ==> client and server
Configuration / Dimensions
Device Specific Views
Switch Image Quality
Change Runtime
Mojit - Controllers
Mojito JS files use YUI modules:
Mojit – ControllerAction Context (ac.*)
From Syntax
Models ac.models.*.getData()
Configs ac.config.get(‘key’)
Environment ac.device.get(‘make’)
Command ac.params.body(‘key’)
To Syntax
Assets ac.assets.addCss(‘./main.css’, ‘top’)ac.assets.addJs(‘./foo.js’, ‘bottom’)
Response Meta ac.cookie.set(‘yahoo’, ‘rocks’)
Response Body ac.done(myData)ac.error(‘Opps, Error 500 time’)
Get Data
Push Data
Views
• Template rendering engine:
Comes default with Mustache.
• Naming Convention:
{action}.{device}.{rendering_engine}.html
index.iphone.mu.html
show_photos.android.mu.html
list_data.mu.html
Binders
Binder’s Flow – Client Runtime
UI Action
Mojito Core
Invoke
Response
ControllerAction
Client Runtime
Binder
MojitProxy
Binder’s Flow – Server Runtime
UI Action
MojitProxy
Binder
Invoke
Response
Client Runtime Server Runtime
• Execute Mojit
• Return Data
XHR
Mojito – Command Line
• $ mojito create app hello_world
• $ mojito create mojit myMojit
• $ mojito test <app | mojit> <name>
• $ mojito jslint <app | mojit> <name>
• $ mojito docs <app | mojit> <name>
Other goodies
• Routes
• Add-ons
• Middleware
• Built-in HTMLFrameMojit and LazyLoadMojit
• Etc…
DEMO:
HTML5 Real-time, Multi-player Game running on Mojito
What other stuff could you do ?
• Handle traffic spikes on the server
– Dynamically react and switch to offload some processes, rendering, fetching etc from the client to the server.
• Detect changes in a device’s latency, and serve different content based on the dimension.
– Put more pressure on the server to do the lion’s share of the work upfront, giving the user a high quality experience still.
Resources
• Yahoo! Cocktails– http://developer.yahoo.com/cocktails/
• Yahoo! Mojito– http://developer.yahoo.com/cocktails/mojito/– http://github.com/yahoo/mojito
Visit Yahoo! Booth & Get a Free
& Various Other Gifts
Questions ?