WIP 0.6.* Roadmap #104

Closed
tbranyen opened this Issue Jul 9, 2012 · 21 comments

6 participants

@tbranyen
Owner

Features to add:

  • Swapping layouts will be inherently easier, with a new method, swap.  This will allow you to construct a new layout and swap it out (but keep the subviews).

  • Change the way Views are constructed. Instead of using Backbone.View, opt for Backbone.LayoutView. Will offer a managed mode configurable in LayoutManager.configure to augment Backbone.View if you want to use that instead.

  • No longer allow render to be overridden. Instead two new methods will be added. beforeRender and afterRender. render will always be set to the correct method under the hood which would allow easy compatibility with plugins like backbone-forms (which override render). Going to emit these as events as well.

  • Nesting of Layout's will be possible.

  • renderText and renderNode methods will be added to get directly at text and Node elements. #101

  • Floating the idea of removing asynchronous capabilities... (make sync requests in development and in production).

Issues to resolve:

  • View retention bug with remove

  • After setViews and insertViews bulk calls, render should be called on the items added, not the parent #103

  • Ensure setView and insertView work consistently, regardless of events #100

  • Ensure setView removes View's correctly (append mode to normal) #99

Documentation:

  • Migration docs from 0.5 to 0.6 (specifically for LayoutView and render)

  • readme needs some general review and love

@alex-seville

If you're not using plugins, what will the render method do "under the hood"?

@tbranyen
Owner

It will do the same thing the default already does except with added hooks. Will probably look something like this.

render: function(manage) {
  // Emit beforeRender event.
  this.trigger("beforeRender");

  // Trigger the render
  return manage(this).render().then(function() {
    // Emit the afterRender event.
    this.trigger("afterRender");
  });
}
@tvpmb

To use afterRender() it would look something like this?

var view = Backbone.View.extend({
  afterRender: function() {
    // some jQuery plugin stuff perhaps
    // note: some plugins require this.el to work properly, i dunno why
    // so usually, I endup with something like this:
    // $('selector', this.el).plugin();
    // I'm also guessing that "el" would need to be "this.el" since the render function isn't passing that?
  }
});

I guess beforeRender wouldn't get an el because it hasn't been rendered yet...?

@tbranyen
Owner

Well each should get an el. Since Backbone creates that during the initialization phase and its the same shared object throughout the lifetime of the View.

@tvpmb

Ok sounds good- the reason I was commenting is in previous versions of BBLM, the jQ plugins wouldn't work unless I had it setup like this:

render: function(manage) {
  var view = manage(this);

  return manage.render().then(function(el) {
    // jQ plugin
    $('selector', el).plugin();
  });
}
@czzarr

these all look very good to me. do you have an ETA on 0.6 (pre-docs and readme) ?

@chewbranca

I'm a big fan of the pre/post render hooks, but removing the ability to override the render function complicates partial updates. I would love to see render functions along the lines of renderNew, renderUpdate, and the renderText function you mentioned.

@tvpmb

Come to think of it, I've got some place in my code where I'm doing conditional logic inside the render, if there is a sub-view inside that view.

Also, currently I'm doing this.collection.each() inside the render to render out lists, how would this be done if render cannot be overridden?

@mattmichler

I'm assuming you would handle sub-views/partial updates in beforeRender.

@tvpmb

Ah...good point. Was not thinking about that.

@chewbranca
@tbranyen
Owner

@chewbranca I believe the above would allow parity with the existing render override. If anything is missing, I will absolutely resolve it for full parity.

@tbranyen
Owner

@czzarr I'm fixing the bugs for a 0.5.3 release (they will be cherry-picked into the wip branch) this week. I'm hoping to have a 0.6 beta ready before this weekend, but with a talk on Saturday that may not be realistic.

@czzarr

ok cool, eagerly awaiting it!

@tbranyen
Owner

I've gotten all the features complete. Waiting on a few issues to clear up in the tracker and then I'm ready to merge.

Everyone please test: https://github.com/tbranyen/backbone.layoutmanager/blob/wip/backbone.layoutmanager.js

Thanks =) 0.6.0 is around the corner!

@tvpmb
@czzarr

hopefully will be able to test it this coming week!

@czzarr

hey @tbranyen I tried layout manager the last 2 days, but I'm afraid it's not a good fit for my application. Here are my reasons:

  • we use requirejs and the text plugin so all the stuff about fetching templates is useless to us, and I don't like bundling useless stuff unless it's absolutely necessary or the rest is hugely advantageous
  • it derives too much from the backbone way as I see it (that's a very personal thing, not saying there is a general backbone way)
  • the code is very complicated to understand for me with all the deferreds and promises. I'm more used to evented stuff.
  • I realized it's not really what I need or want, what I'm looking for is a simple enhanced view with after render events. Looks like i'm gonna have to code it myself (I might reuse some of your patterns though, it was definitely interesting for me to dive right into your code, as I'm not used to manipulating inheritance and overrides like this)
@tbranyen
Owner
  • What exactly does LayoutManager do that "fetches" template? The fetch function is three lines of code and looks in the DOM.

  • derives or diverges? If you mean the former, that's by design. If you mean the latter, you'll have to help me figure out how this could diverge less.

  • I'm sorry you find the API confusing. It was designed to be incredibly user friendly and I've been making more attempts at unifying methods. What parts specifically did you find hard to comprehend?

  • In LayoutManager 0.6 its as easy as

new Backbone.View({
  template: "name",

  afterRender: function() {
    // Elements width.
    this.$el.width();
  }
}).render(function() {
  // Contents
  this.$el.html();
});
@czzarr
  • the stuff about prefix, caching, isn't that only to work with fetching templates? maybe I completely misunderstood the code.
  • sorry I indeed meant diverges. It's hard for me to explain, but after having spent a bunch of time with Backbone (I first wrote my own MVC framework to understand how they worked and then pivoted to Backbone to get something I was sure was very robust and more extensible), I had some difficulties using LayoutManager. I'm sorry I can't be very precise. Basically it's an aggregate of small stuff such as the fact that there is a whole new API for rendering views, a serialize function, a fetch function. Also in the docs I think it'd be much easier for people to understand if you put
var myLayout = new Backbone.LayoutView.extend({ ... });

rather than

var myLayout = new Backbone.Layout();

People will feel more at home imo. (I know I would)

  • You shouldn't be sorry! The thing is i'm not used to deferreds and promises at all so if you think it's very user friendly I'm probably lacking somewhere. I found the render function especially hard to understand.
  • Right. I meant to say I hoped there would be a setting such as
Backbone.LayoutManager.configure({
  afterRender: function () {
    // applies to all managed views and can be overriden at the view level
  }
})

I tried it but it didn't work (only applied to the layout view itself iirc)

@tbranyen
Owner

@czzarr

  • Again you're referring to mere lines of code. This library is 2kb min and gzipped, its not a concern.

  • Backbone.Views have no api to branch from. I don't know what else you would expect. Your example doesn't make sense. LayoutViews are not Layouts. You cannot call new on an extend like you're showing.

  • If you wanted a global afterRender you wouldn't put that in configure. You'd do something like

Backbone.View.prototype.afterRender = function() {
  // Global afterRender.
};
@tbranyen tbranyen closed this Aug 3, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment