Thoughts on scaling apps, and Vue might be inefficient about discussion

[brandonjpierce]

@jiyinyiyong I would actually disagree with you that Vue cannot scale well. At my work we have built a rather large application with Vue and it worked out great. The way we accomplished it was treating each little section of our application as a component. Since components are essentially just another Vue instance you can attach data, methods, computed properties to them. This way each section of the application is its own entity.

Since most of our data was being handled by an API (built with php) we simply used promises to batch all of our components together and then instantiate our main Vue instance.

[BigBlueHat]

@brandonjpierce would love to see some examples of the promises approach to batching the components.

I too think the Vue.js approach can scale to "large" web apps, but only time will tell.

[tiye]

@brandonjpierce My point is that Vue's component system does not help with dividing methods into components. So my question is how do you solve this problem? I quite wonder if there's some useful tricks implemented in Vue but not yet well documented(my bad it is I don't understand source code before reading in depth).

Here's what I found, in the docs on component, there are examples:

// Extend Vue to get a reusable constructor
var MyComponent = Vue.extend({
    template: 'A custom component!'
})
// Register the constructor with id: my-component
Vue.component('my-component', MyComponent)

// Implicitly call Vue.extend, then register the returned constructor.
// Use this syntax when you don't need to programatically
// instantiate your component.
// Note: this method returns Vue, not the registered constructor.
Vue.component('my-component', {
    template: 'A custom component!'
})

But not methods and computed properties are written in each component. Which means, I have to put all methods in one instance. When codebase gets larger, managing code would not be as simple as that in Backbone or other tools.
Also in these example template property is filled with a string ot template rather than an id that referring to template in script element. It's sometimes misleading.

[BigBlueHat]

@jiyinyiyong Looks like the docs just need improving. 😸

With the exception of the el property, all other instantiation options can be passed in via .extend() and by extension (heh) via .component().

Here's an example:
https://github.com/BigBlueHat/vue-schema/blob/master/app.js

[BigBlueHat]

You'll also notice that Vue.js can look up templates using DOM id's:
https://github.com/BigBlueHat/vue-schema/blob/master/app.js#L57-L59

[tiye]

@BigBlueHat That's really helpful. It's a lot better when we have this power.
I should suspend this topic before the usage of component is unveiled and documented.

[brandonjpierce]

@BigBlueHat This is a very simplified version of what we are doing (more of a proof of concept):

http://jsfiddle.net/brandonpierce/kL7HR/

[BigBlueHat]

@brandonjpierce very cool! Thanks for sharing (and sorry for the slow reply).