• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Yahoo! Mojito @JSDC

Yahoo! Mojito @JSDC






Total Views
Views on SlideShare
Embed Views



6 Embeds 2,482

http://davidshariff.com 2337
http://www.blisscms.com 102
http://yahoo.mindtickle.com 32
http://www.linkedin.com 9
http://yahoo.mttest.mindtickle.com 1
https://www.linkedin.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Yahoo! Mojito @JSDC Yahoo! Mojito @JSDC Presentation Transcript

    • Yahoo! Mojito 19th May, 2012
    • About me Stuff We Do @ Yahoo! Search – ~40M active users daily – ~290M PVs dailyDavid Shariff, – 47 countriesFront End Engineer,Yahoo! Global Search teamY! Messenger:shariff.david@yahoo.comY! Email:davedsha@yahoo-inc.comWebsite:www.davidshariff.com
    • ProblemToday’s web content is no longer consumed solely onthe desktop by end users.Now, we as developers need to support multipledevices such as Tablets, Smartphones etc…
    • Multiple IOS… Language Objective C Display 480 / 960 x 640 CPU 620MHz ~ 1 GHzhttp://www.flickr.com/photos/rickyromero/2672913333/
    • Then there is Android… Language C/Java Display >= 480 x 800 CPU >= 800MHzhttp://www.flickr.com/photos/60196878@N03/5590831755/
    • What about iPads… Language Objective C Display ~ 1024 x 768 CPU ~ 1GHzhttp://www.flickr.com/photos/sucello/6220857499/
    • Windows phones… Language .NET Display 480 x 800 CPU ~ 1 GHzhttp://www.flickr.com/photos/computer-tech-support/5973483447/
    • Don’t forget others devices… Language C / C++ Display Various CPU Varioushttp://www.flickr.com/photos/wonderdawg777/4403260880/
    • Too many variations across multiple devices 
    • Multiple codebases, high cost. Objective-C1 application Javarequires = C C++ .NET
    • This is slow, time consuming and expensive !!!!!!
    • 麻煩 !!!!
    • Yahoo! Solution: Cocktails Yahoo!’s Solution: Cocktails
    • Yahoo!’s Solution: CocktailsCocktails is a mix of HTML5, Node.JS, CSS3,JavaScript and a lot of ingenious, creative, mindbending tricks from Yahoo!’s engineers
    • Yahoo! MojitoAn environment agnostic, MVCweb application framework…
    • Who uses it today ?
    • Search Direct
    • Yahoo! Fantasy Finance
    • CITIZEN SPORTS FantasyPremier 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 Client PHP etc… JS
    • Yahoo! Mojito• Runs on the client (browser/device) and the server. Server Common Client JS JS JS
    • 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 Mojito Mustache Express YUI 3 ConnectJavaScript Runtime (NodeJS or Browser)
    • Module Widget = MojitA Mojit is an independent unit ofexecution that can be used inside aMojito application
    • Yahoo! OMG Yahoo! OMG
    • Presentation Centric (Grids) Presentation Centric – Mojits !!!
    • 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 - ControllersMojito JS files use YUImodules:
    • Mojit – Controller Action Context (ac.*)From SyntaxModels ac.models.*.getData()Configs ac.config.get(‘key’) Get DataEnvironment ac.device.get(‘make’)Command ac.params.body(‘key’)To SyntaxAssets ac.assets.addCss(‘./main.css’, ‘top’) ac.assets.addJs(‘./foo.js’, ‘bottom’)Response Meta ac.cookie.set(‘yahoo’, ‘rocks’) Push DataResponse Body ac.done(myData) ac.error(‘Opps, Error 500 time’)
    • 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 Binder Mojito Core Invoke Controller UI Action Action Respons e MojitProxyClient Runtime
    • Binder’s Flow – Server Runtime Binder Invoke XHR • Execute UI Action Respons Mojit e • Return Data MojitProxyClient Runtime Server Runtime
    • 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 ?