PDA

View Full Version : To card, or not to card, that is the question



Khandrish
28 Jun 2013, 10:17 AM
Other than changing the loading behavior of an application and it's views, is there any practical difference between dynamically creating/removing/adding views to a viewport and creating a layout based on cards?

skirtle
28 Jun 2013, 11:43 AM
If the cards have state then it can be quite difficult to implement that using the add/remove approach. By 'state' I don't just mean data changes but also things like scrollbar positions that would be lost if you destroyed and recreated the cards manually.

If your cards don't have any significant state then the destroy/add approach should result in a smaller DOM, which would ultimately give better performance. However, for a small number of cards the performance trade-offs are quite complicated so it isn't clear cut exactly which approach is better from a performance perspective.

Khandrish
28 Jun 2013, 11:52 AM
I hadn't even thought about things such as scrollbar positions and such, and that's an excellent point. In one case I plan on having an infinite scroll grid that I'd rather maintained a consistent 'state' even if that particular view is switched away from and then back to, including where in the grid the user was looking and any selected rows.

You mentioned creating and destroying, which leaves me wondering if it would be possible/reasonable to consider a scenario where they are only instantiated once, but removed from the rendered html page when not actively being viewed. Would they maintain state such as scrollbars in this case? If so, that really just means it comes down to performance in the end...if the application is 'fast enough' and 'lightweight enough' with the simple card approach there isn't any need to complicate it further.

skirtle
28 Jun 2013, 12:01 PM
Removing them from the DOM temporarily isn't really practical as they'd get nuked by the ExtJS Element garbage collector after a few seconds.

If you'd like to know more about the garbage collector, start here:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-property-enableGarbageCollector

then start digging through the source code.

Khandrish
28 Jun 2013, 12:05 PM
Awesome, thank you! It's always hard getting started with a new framework when you know what you want to do but not exactly how to accomplish it. The devil is in the details, as it were. Thanks for helping me understand some of the subtleties, will help quite a bit in my design moving forward.