Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now

1.2 The Challenges

In this lesson, I’ll share some of the challenges my team faced when building Milojs for the Daily Mail. I’ll explain some of the creative solutions we found to technical problems—returning a function from a constructor, using eval and doT.js templates to generate access methods—and some techniques we used to identify performance problems. I’ll also tell you about some of the interpersonal issues we faced, and steps that we took to mitigate them.

Code Snippet

The following snippet demonstrates the interface for data i/o for Milo models.

var m = new milo.Model();
m('.a.b.c[3].d').set('Safe deep data access.');
m.on('.a.b.c[*]', function (msg, data) {
    //Deep data change subscriptions including wildcards
});

Now, to establish a data binding between the model and a UI component, all that’s needed is a call to Milo’s data minder. The following snippet establishes a two-way binding, two levels deep (e.g. between arrays of objects).

milo.minder(m, '<<<->>>', todos.data);

Below is an example of how to declare a Milo component. This showcases Milo’s facetted component architecture, a strategy that allows for versatility and flexible composition of functionality.

var ComponentClass = milo.createComponentClass({
    className: 'ComponentClass',
    facets: { 
        data: {}, // empty object or undefined means no config needed
        item: {},
        css: {
            classes: { // css facet is linked to the model to allow
                       // data driven design
                '.userHandle': isAuthor
            }
        }
    },
    methods: {
        init: init,
        start: start
    }
});

Related Links

1.Create a New JavaScript Framework: Challenges of Rolling Your Own
2 lessons, 12:52

Free Lesson
1.1
Introduction
00:47

1.2
The Challenges
12:05