Dundee University HackU 2013 - Mojito

265 views
177 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
265
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dundee University HackU 2013 - Mojito

  1. 1. Yahoo! Mojito Neha Thaker Yahoo!
  2. 2. What is Mojito?• Mojito is a model-view-controller (MVC) application framework .• Built on YUI 3• Written in JavaScript• Cross-Platform Apps
  3. 3. Why Mojito?• One Language• Two Runtimes• Views for Different Devices• Progressive Enhancement• Localization and Internationalization
  4. 4. What is MojitoMVC Framework for Server + Client in One Language
  5. 5. Mojito Architecture
  6. 6. Mojito Applications
  7. 7. Creating a Mojito application• Use the command-line tool mojito. – $ mojito create app <mojito_app>• Create a mojit – $ mojito create mojit <mojito_app>
  8. 8. Application Directory Structure[mojito_app]/|-- application.json|-- assets/ -- favicon.icon|-- yui_modules/ -- *.{affinity}.js|-- index.js|-- mojits/ -- [mojit_name] -- assets/ -- yui_modules/ `-- *.{affinity}.js -- binders/ -- {view_name}.js -- controller.{affinity}.js -- defaults.json -- definition.json -- lang/ -- {mojit_name}_{lang}.js -- models/ -- {model_name}.{affinity}.js -- tests/ -- yui_modules/ `-- {module_name}.{affinity}-tests.js -- controller.{affinity}-tests.js `-- models/ -- {model_name}.{affinity}-tests.js -- views/ -- {view_name}.{view_engine}.html -- {view_name}.{device}.{view_engine}.html|-- package.json|-- routes.json|-- server.js
  9. 9. Configurationapplication.json{ "settings": [ "device:android" ], "selector": "android"}, { "settings": [ "device:blackberry" ], "selector":"blackberry" }, { "settings": [ "device:iphone" ], "selector": "iphone" }routes.json[ { "settings": [ "master" ], "simple": { "verbs": ["get"],"path": "/", "call": "simple.index" } } ]
  10. 10. controller.server.jsYUI.add(simple, function(Y, NAME) { Y.namespace(mojito.controllers)[NAME] = { index: function(ac) { var today = new Date(), data = { type : simple, time : { hours: today.getHours()%12, minutes: today.getMinutes()<10 ? "0" +today.getMinutes() : today.getMinutes(), period: today.getHours()>=12 ? "p.m." : "a.m."}, show : true, hide : false, list : [{id: 2}, {id: 1}, {id: 3} ], hole : null, html : "<h3 style=color:red;>simple html</h3>” }; ac.done(data); } }; }, 0.0.1, {requires: []});
  11. 11. views/index.hb.html<div id="{{mojit_view_id}}" class="mojit"> <h2 style="color: #606; font-weight:bold;">Simple View</h2> <div>type: {{type}}</div> <div>time: {{#time}}{{hours}}:{{minutes}} {{period}}{{/time}}</div> <div>show: {{#show}}{{type}}{{/show}}</div> <div>hide: {{#hide}}{{type}}{{/hide}}</div> <div>no show: {{^show}}{{type}}{{/show}}</div> <div>no hide: {{^hide}}{{type}}{{/hide}}</div> <div>list: {{#list}}{{id}}{{/list}}</div> <div>hole: {{^hole}}no list{{/hole}}</div> <div>html: {{{html}}}</div></div>
  12. 12. Products built on Mojito• AT&T Uverse app• Yahoo! – Yahoo! Axis A search browser that provides a completely new way to search and browse the web. – Livestand – A personalized living magazine – Yahoo! Fantasy Finance –A stock trading game – Citizen Sports – Fantasy Premier League Football game – Search Direct – A search feature delivering rich components from Yahoo! Products.
  13. 13. Why Mojito?• One language• Device aware• Use any library (jQuery, bootstrap, Dojo …) – With YUI• Context aware – Server – Client – Universal!
  14. 14. Join the Mojito community! Thanks!

×