Dundee University HackU 2013 - Mojito

  • 95 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
95
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Yahoo! Mojito Neha Thaker Yahoo!
  • 2. What is Mojito?• Mojito is a model-view-controller (MVC) application framework .• Built on YUI 3• Written in JavaScript• Cross-Platform Apps
  • 3. Why Mojito?• One Language• Two Runtimes• Views for Different Devices• Progressive Enhancement• Localization and Internationalization
  • 4. What is MojitoMVC Framework for Server + Client in One Language
  • 5. Mojito Architecture
  • 6. Mojito Applications
  • 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. 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. 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. 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. 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. 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. Why Mojito?• One language• Device aware• Use any library (jQuery, bootstrap, Dojo …) – With YUI• Context aware – Server – Client – Universal!
  • 14. Join the Mojito community! Thanks!