Yahoo! Mojito @JSDC

4,506 views

Published on

Published in: Technology
  • Be the first to comment

Yahoo! Mojito @JSDC

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

×