YUIConf 2012 Talk: Mjata.js — Bring Data Models to Life by Lingyan Zhu

By YUI TeamDecember 17th, 2012

This next video in our YUIConf 2012 video series highlights how YUI can be used as a basis for building higher level frameworks. This team had a specific need for presenting live data and built Mjata.js on top of YUI to meet that need. This talk highlights how extensible YUI is and robust enough for very high traffic sites like Yahoo! Finance. Keep up with our video releases on YUI Theater and YouTube.

In this talk from YUIConf 2012, Lingyan Zhu, a frontend and applications engineer at Yahoo! Finance, talks about developing highly interactive and data-centric web applications using Mjata.js, an extensible YAF-based library for building robust data models and services for JS MVC architectures.

Slides for this talk are available here.


  1. Hand raised.

    I’ve been starting to make use of the App framework, but with arbitrarily complex json documents mapping into the models. (These are views and documents from couchdb.)

    Your work to with JSON Schema for generating models and declarative model-ui binding is just what I was thinking about. I’m curious to see how the javascript object maps into attributes.

    For the model-ui binding I was actually thinking of more of a view generation kind of thing, where the tree of nodes withing a container would be scanned to build the events and event handlers in a view.

    The JSON Schema work could be really useful for validation and automated ui building. Maybe the JSON Schema bits could be broken off for general use.

    Having used angularjs for one project, I can attest that the two way data binding is a huge time saver and encourages one to create more interactive, lively web apps. Data binding is the natural way to do it in Angular, so it is hard to create dead, template-generated content; in yui3 it is the opposite, creating content from templates is easy, manually wiring up ui binding is tedious.)

    One other comment is that it would be great to remove the barrier between model and template rendering, bridged by “toJSON” now.

    I’m resigned for now to doing this by hand, so I obviously think that releasing this stuff as soon as possible would be a good thing!

  2. Hi Erik,

    Thanks for your great suggestions, and your insights about two-way binding.

    Based on your description, the JSON schema feature does seem to be a good fit for your use case. I will work with YUI team for the best way of releasing the JSON schema feature. I’ve also added this as an upcoming topic for YUI roundtable discussions (https://github.com/yui/yui3/wiki/Roundtable-Topics). We can talk about your use cases and requirements in more details.

    Totally agree with you on removing “toJSON” barrier between model and template rendering, especially for template engines that do not require a JS object literal as input (such as Dust, which allows data to be a function). “toJSON” definitely has negative impact on performance, particularly for complex data models. In fact, that was one of the reasons that we came up with the conclusion of avoiding using models on server side if you can. When used on client side, we try to mitigate it by allowing Mjata.Model’s toJSON() to take an array of attributes, so that only these attributes are flattened into objects. This is definitely not ideal though.

    Thanks again and talk to you soon,

  3. [...] the holidays grow near we continue to send you gifts in the form of video releases of YUIConf 2012. If you are interested in learning more about ScrollView, you’ll definitely [...]

  4. Hi Lingyan,
    I just saw your segment of yesterday’s roundtable. Thanks for bringing this up so quickly! I think it will be a big help to lots of us. I’m’ out sick today, so maybe it is a good time to get a start on writing up some use cases. Where should this conversation continue? Right here is fine with me for now.