Does the double subclassing produced from designer affects the performance...

[predator]

Hi to all,

I would really appreciate if somebody with experience comment on my questions.

I am currently experimenting with ext designer in attempt to write a big application using it.

We know that the designer produces two files for each component, the ui.js one that is subclassing the base ext component and the .js one that is subclassing the ui.js one. I understand that this double subclassing is needed so custom methods, listeners, handlers and etc can be written in the .js one and thus preserving them when future changes to the design are needed. However can you please tell me is this affecting somehow the productivity of the systems in terms of speed and memory usage ?

Secondly I would like to ask is there a point in subclassing(extending) the base component in a first place when it is not going to be used more than once in the application? and also does it have any impact of the productivity of the application.

And lastly a question than is not related directly to designer but is a combination of the both questions above.

Can somebody please explain in a plain text, which approach is considered a best practice in writing big applications with ext. Subclassing(extending) base components even if they are not going be reused and doesnt have any extra functionality in them(as what ext designer is doing) or simply use the base classes with json config objects.

Any comments are greatly appreciated.
AA

[ssamayoa]

Performance & memory usage:
I wonder also but with the current computer power I think such subject shouldn't be a concern. Even a iPhone is far more powerfull that the company server I have in early 2000s (by the way was an Acer 9100B with 2 Pentium 400Mhz, 128MB RAM and 2 x 8GB SCSCI disks for 100+ users).

Subclassing:
It matters most in large applications. I recomend you to buy Jesus García's book (Ext in action) and look at the example application to see what I mean. Sure there will be cases were designer's output will be enougth, if is that the case just instantiate the UI class and ignore the extending class.

The real benefit of the designer is the time saved in GUI design and prototiping which affects the time to market of your application.

Regards.

[jarrednicholls]

We know that the designer produces two files for each component, the ui.js one that is subclassing the base ext component and the .js one that is subclassing the ui.js one. I understand that this double subclassing is needed so custom methods, listeners, handlers and etc can be written in the .js one and thus preserving them when future changes to the design are needed. However can you please tell me is this affecting somehow the productivity of the systems in terms of speed and memory usage ?

There is a marginal memory footprint to create a new prototype function. That footprint depends on the class being sub-classed. Sub-classing involves creating a new function/prototype and copying all attributes and functions over to it, as well as a reference to the "superclass" prototype. If a class is size N (including a superclass reference), then with each sub-class, you increase the footprint by a factor of N (the sub-class' superclass value overwrites the base-class' value) before doing any additional implementation to that sub-class obviously. It sounds worse than it really is, because it's a small amount of memory overall. When components render themselves in the DOM, that's when you see real memory footprints take place. This still prototyping stuff is nada in comparison.

From a performance perspective, this is again rather marginal with today's JS engines. You could say that with every sub-class, when you implement an "overridden" function that calls up to the superclass' implementation, you're adding one more function call to the chain. A prime example is "initComponent". If your sub-class doesn't provide an overridden implementation of some base-class function, then there's no performance hit, that is, the base-class function is executed directly.

Secondly I would like to ask is there a point in subclassing(extending) the base component in a first place when it is not going to be used more than once in the application? and also does it have any impact of the productivity of the application.

Separation of concerns and a true component-oriented design (not to be confused with an Ext.Component, though it applies for that concept as well) make it worthwhile to create sub-class components for each major or sub-major part of your application. This does not mean you need to sub-class all components, that would be ludicrous. But, breaking your application down into pieces is best suited via sub-classing...just as the Designer produces. You can think of each sub-class as an "engine" for that part of your application. Just as you stated above, you can group your behavior, event listeners, etc. within the sub-class. Even if it's being used once, it makes for much cleaner, concise, organized, and readable code.

If you were using 100% JSON configurations, you would have to place your event handler code in either global functions or functions scoped within a closure (which can be a dagger for performance and garbage collection), or even worse, all inline functions with absolutely no sense of re-usability or software patterns whatsoever. Keeping behavior code in a class is a better approach, and is easy to "clean up" by both the developer (e.g., destroy, removing event listeners, cleaning up DOM nodes, etc.) as well as the garbage collector (there won't be function references lying around).

If you weren't using the Designer, then you would simply take the code generated in ".ui.js" and add your implementation to that file directly. We do a second sub-class for the simple reason you already mentioned above: we need to regenerate the UI configuration code without overwriting your implementation code. In a non-Designer environment, there would be no benefit in doing an additional sub-class.

And lastly a question than is not related directly to designer but is a combination of the both questions above.

Can somebody please explain in a plain text, which approach is considered a best practice in writing big applications with ext. Subclassing(extending) base components even if they are not going be reused and doesnt have any extra functionality in them(as what ext designer is doing) or simply use the base classes with json config objects.

Any comments are greatly appreciated.
AA

I believe I answered this question above. The sub-classes are encompassing all of your components that are children of that "top-level" component (notice the children are all JSON configurations). The way that is organized is up to you. That is, you decide what "parts" of your application you want as sub-classes. You can get as granular or monolithic as you see fit. The true "extra functionality" is meant for you to add in the ".js" implementation file. The Designer is just getting you started, if you will...

[predator]

Thank you.