Closure UI package design goals under rendering

[Paweł Gałązka]

I'm wondering why dom structure is created when render() method is
invoked ? Why dom structure is not created in ui widget constructor,
then we can operate on widget dom structure right away (even if it's
not in document). In google closure approach, when we have some widget
method (setTitle for example) we have to remember to handle situation
when widget doesn't have dom structure yet and when it's already have.
It's a little bit problematic.

So what's the main pros for this approach ? (I know that in this
approach we can nicely seperate data model from renderer but is it so
important ?)

[Dave Fisher]

I think Michael Bolin's Closure book does a nice job of explaining the pros and cons of decoration vs rendering.  You should check it out for a more complete answer to the question.

Chapter 8.

[Andre Tannus]

That's a good question.

I believe one of the reasons is because you might never call render, but instead use decorate.

In that case you'll have wasted resources and cycles creating dom you'll never use.

If you look at decorate, you'll see it expects a certain dom structure to be already available in the DOM.

It then simply applies the component to that DOM, much ligher than rendering...

Another advantage of decorating is that your user sees the page right away, even before your widget gets initialized.

Finally, if you want the component's DOM ready you can just call createDom() after you instantiate it, like

var myButton = new goog.ui.Button('Hello');

myButton.createDom();

Be sure to check out what createDom does... In fact, check out how these work:

.render()

.createDom()

.decorate()

decorateInternal()

.enterDocument()

dispose()

disposeInternal()

exitDocument()

Check the implementation on these methods for the goog.ui.Component class and for a goog.ui.Control you like (such as goog.ui.Button).

Michael Bolin's book was esxellent too.

--

A ciência consiste em perturbar um sistema e analisar sua reação. Eu, sou uma perturbação.

André Tannús | Ideas at Epungo

ata...@epungo.com.br | +55 11 8053-7636 | +55 11 2389-4360 

"Somewhere, something incredible is waiting to be known."

Carl Sagan

[Paweł Gałązka]

I read Michael Bolin book and I've already looked at 8 chapter and to
be honest I doesn't found satisfied answer.
I admit that decorating probably have huge impact to this design.
But if I use mostly rendering ?

> atan...@epungo.com.br | +55 11 8053-7636 | +55 11 2389-4360

[Hunter Blanks]

Pawel,

This may be a somewhat biased opinion, but in my experience, decorating only comes into play when you start using templates. So, if you render the bulk of your page on the server side (like a lot of Google's products do, presumably for faster page loads on older browsers), you're probably going to use lots of decorating, and you'll need to write your own components so they support decorating, too.

If you render the bulk of your page on the client side, such that your servers basically only send down page containers, then you're probably going to use lots more rendering. Moreover, if your components use templates (which tend to be pretty handy), then the most sensible thing tends to be that you couple each component to a template. And once you've done that, you've pretty much committed to writing components that can be rendered, but not generally decorated. (It's just less duplicate logic).

All this said, even in this scenario, decorating is really handy for installing Google's own components inside of your own. So, you might have a template like:

{template .buttonTray}

<div class="my-button-tray">

    <div class="left-button goog-link-button">Left</div>

    <div class="middle-button goog-link-button">Middle</div>

    <div class="right-button goog-link-button">Right</div>

</div>

{/template}

and a component with methods like:

Tray.prototype.createDom = function() {

    this.element_ = soy.RenderAsFragment(...);

};

Tray.prototype.enterDocument = function() {

    goog.base(this, 'enterDocument);

    var dom = this.getDomHelper();

    var el = this.getElement();

    this.linkChildren_ = [];

    goog.array.forEach(['left', 'middle', 'right'],

        function(name) {

            var linkEl = dom.getElementsByTagNameAndClass(

                'div', name + '-button', el

                );

            goog.asserts.assert(linkEl);

            var link = goog.ui.decorate(linkEl);

            link.setModel(name);

            link.setParent(this);

            this.linkChildren_.push(link); // save these off so we can dispose of them on exit...

        });

    

    this.getHandler().listen(goog.ui.Component.EventType.ACTION, this, this.handleButtonAction);

};

Hope it helps,

HJB