Publicis Mojito

477 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
477
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • The Yahoo home page for tablets is a Mojito application.It’s pretty typical, it has lots of sections.
  • For example, our universal header, login widget with it’s membership module api among other things– sometimes there is a team just working on thisThe center section is a basic YUI slide view– it consumes various web services so you get a mix of curated and customized contentThese sections aren’t just partial views pulled in from a file system, they are mini MVC thingys that are composed and packaged in a web page.
  • All that can be HARD
  • Java, PHP, Objective-C, Apache, SDKs, APIs, and all this different tooling for izations, testing etc.
  • Use the same languageWrite to a common frameworkServe (or publish ) HTML5
  • Node.js – evented I/O on google’s v8 javascript engineHigh throughput, low latencyMachine code InliningIncremental GC
  • We’re betting on the web.Focusing on javascript as the language, and a framework that can be used on different platforms and runtimes.
  • MODULE = programming conceptWIDGET = UI conceptMODULE + WIDGET = MOJIT
  • Now that we have a single language and framework to focus on, it’s obvious that we don’t have to think about what we’re going to build in PHP or Java or whatever, and what we’re going to send to the client to render.Take that one step further, we can see that we no longer have to think about this at design and implementation time. These decisions can be moved to RUNTIME.Search has some beta products that instrument the client and it’s connection, and decided what to render (rich or plain) and where (on the client or pre-render on node.js)
  • Mojito gives you the way to run in different places, but doesn’t do the device or platform specific work for you.It’s also not super easy. It helps if you know YUI and Yahoo configuration concepts.
  • Create – quickly generate dirstruct & boilerplateJslint – Doug Crockford’s syntax linterStart – start a node instance running mojitoTest – unit tests with YUI TestBuild – create a device container for use in Xcode (soon android SDK, Windows Phone)Compile – static asset rollups for over the wire performance optimizationDocs – generate API docs using YUI DocGv – create a graph using graphviz
  • Organize by mojitMojits can have their own configsCan be configured by application.json or parent mojitsRoute to mojit “instances” with routes.json
  • YQL provides a fast and clean API for web services that work on the server or client– perfect for Mojito
  • Publicis Mojito

    1. 1. MojitoIsao Yagiisao@yahoo-inc.com
    2. 2. THIS IS MOJITO
    3. 3. THESE ARE MOJITS
    4. 4. THIS IS MOJITO Need these: • Personalization • Internationalization • Localization • Instrumentation • Monetization
    5. 5. THIS IS MOJITO And we need to provide our experiences across various devices. It needs to be accessible and inclusive. It needs to be safe and fast.
    6. 6. PRE-MOJITODevelopers using lots of languages, toolchains, and stacks. Nokia iOS Desktop ConnectedTV Feature Phones Android Apps Apps Web Modules Widgets Views Apps Native Native Maple, YUI Konfabulator BluePrint Native Java, ObjC Java, ObjC Apache/PHP/JS JavaScript Apache/PHP Java
    7. 7. REBOOT
    8. 8. MOJITO• Open source github.com/yahoo/mojito• 100% Javascript• Build on YUI• Runs on Node.js in the Yahoo! cloud (Manhattan)• Same core runtime on the browser• Same core runtime in iOS & Android
    9. 9. MOJITO “The web is THE platform” -- Bruno Fernandez-RuizStart with Javascript, with YUI providingbrowser abstraction, libraries and patterns.Provide a rich MVC framework with the“Mojit” as the organizing principle.
    10. 10. “MOJIT” A kind of MODULE… or a kind of WIDGET… …“MOJIT”
    11. 11. MOJITS• Have models, views, controllers, and binders• Can communicate with other mojits by messaging• Don’t have to know about other mojits• Can be composed together• Can run on server or client or both
    12. 12. MOJITODoes not:• Provide user interface abstractions• Provide any magic, like having your browser app work like a native mobile appDoes:• Let developers write javascript everywhere• Let developers use the same framework and idioms
    13. 13. MOJITO: COMMAND LINE% npm install –g mojito% mojito helpAvailable commands: build, compile, create, docs,gv, help, info, jslint, start, test, version
    14. 14. MOJITO: AN APPLICATION Bundle things by app or mojit Affinity: server, client, common Views can be selected by device
    15. 15. MOJITO: A VIEWMustache template engine (or choose your own)
    16. 16. MOJITO: A CONTROLLER ACTION
    17. 17. MOJITO: A MODEL
    18. 18. MOJITO: RUNNING ON YOUR MAC
    19. 19. THANK YOUhttps://github.com/yahoo/mojito/http://developer.yahoo.com/cocktails/isao@yahoo-inc.com

    ×