yahoo! mojito @jsdc
TRANSCRIPT
![Page 1: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/1.jpg)
Yahoo! Mojito
19th May, 2012
![Page 2: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/2.jpg)
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
![Page 3: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/3.jpg)
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…
![Page 4: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/4.jpg)
Multiple IOS…
http://www.flickr.com/photos/rickyromero/2672913333/
Language Objective C
Display 480 / 960 x 640
CPU 620MHz ~ 1 GHz
![Page 5: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/5.jpg)
http://www.flickr.com/photos/60196878@N03/5590831755/
Then there is Android…
Language C/Java
Display >= 480 x 800
CPU >= 800MHz
![Page 6: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/6.jpg)
http://www.flickr.com/photos/sucello/6220857499/
What about iPads…
Language Objective C
Display ~ 1024 x 768
CPU ~ 1GHz
![Page 7: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/7.jpg)
http://www.flickr.com/photos/computer-tech-support/5973483447/
Windows phones…
Language .NET
Display 480 x 800
CPU ~ 1 GHz
![Page 8: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/wonderdawg777/4403260880/
Don’t forget others devices…
Language C / C++
Display Various
CPU Various
![Page 9: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/9.jpg)
Too many variations across multiple devices
![Page 10: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/10.jpg)
Multiple codebases, high cost.
Objective-C
JavaC
C++ .NET
JavaScript
1 application requires =
![Page 11: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/11.jpg)
This is slow, time consuming and expensive !!!!!!
![Page 12: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/12.jpg)
麻煩 !!!!
![Page 13: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/13.jpg)
Yahoo!’s Solution: CocktailsYahoo! Solution: Cocktails
![Page 14: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/14.jpg)
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
![Page 15: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/15.jpg)
![Page 16: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/16.jpg)
Yahoo! Mojito
An environment agnostic, MVC web application framework…
![Page 17: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/17.jpg)
Who uses it today ?
![Page 18: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/18.jpg)
Search Direct
![Page 19: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/19.jpg)
Yahoo! Fantasy Finance
![Page 20: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/20.jpg)
CITIZEN SPORTS Fantasy Premier League Football
![Page 21: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/21.jpg)
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
![Page 22: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/22.jpg)
How we used to do it..
Server ClientPHP etc… JS
![Page 23: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/23.jpg)
Yahoo! Mojito
Server Common ClientJS JS JS
• Runs on the client (browser/device) and the server.
![Page 24: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/24.jpg)
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/
![Page 25: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/25.jpg)
Mojito Architecture
JavaScript Runtime (NodeJS or Browser)
ExpressYUI 3
Connect Mus
tach
e
Mojito
![Page 26: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/26.jpg)
A Mojit is an independent unit of
execution that can be used inside a
Mojito application
WidgetModule = Mojit
![Page 27: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/27.jpg)
Yahoo! OMG
Yahoo! OMG
![Page 28: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/28.jpg)
Presentation Centric – Mojits !!!
Presentation Centric (Grids)
![Page 29: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/29.jpg)
Mojit - MVC
![Page 30: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/30.jpg)
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
![Page 31: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/31.jpg)
Mojit - Structure
• assets– css, imgs etc..
• binders– dom events
• models– data source
• tests– unit tests
• views– device specific markup
• controller– logic
• definition– configs
![Page 32: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/32.jpg)
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
![Page 33: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/33.jpg)
Configuration / Dimensions
![Page 34: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/34.jpg)
Device Specific Views
![Page 35: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/35.jpg)
Switch Image Quality
![Page 36: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/36.jpg)
Change Runtime
![Page 37: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/37.jpg)
Mojit - Controllers
Mojito JS files use YUI modules:
![Page 38: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/38.jpg)
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
![Page 39: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/39.jpg)
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
![Page 40: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/40.jpg)
Binders
![Page 41: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/41.jpg)
Binder’s Flow – Client Runtime
UI Action
Mojito Core
Invoke
Response
ControllerAction
Client Runtime
Binder
MojitProxy
![Page 42: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/42.jpg)
Binder’s Flow – Server Runtime
UI Action
MojitProxy
Binder
Invoke
Response
Client Runtime Server Runtime
• Execute Mojit
• Return Data
XHR
![Page 43: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/43.jpg)
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>
![Page 44: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/44.jpg)
Other goodies
• Routes
• Add-ons
• Middleware
• Built-in HTMLFrameMojit and LazyLoadMojit
• Etc…
![Page 45: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/45.jpg)
DEMO:
HTML5 Real-time, Multi-player Game running on Mojito
![Page 46: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/46.jpg)
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.
![Page 47: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/47.jpg)
Resources
• Yahoo! Cocktails– http://developer.yahoo.com/cocktails/
• Yahoo! Mojito– http://developer.yahoo.com/cocktails/mojito/– http://github.com/yahoo/mojito
![Page 48: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/48.jpg)
Visit Yahoo! Booth & Get a Free
& Various Other Gifts
![Page 49: Yahoo! Mojito @JSDC](https://reader035.vdocuments.mx/reader035/viewer/2022081512/555e7264d8b42a41328b45ed/html5/thumbnails/49.jpg)
Questions ?