Re: Someone having tabs with Seaside html+js cached on localStorage?

I guess he's not using visibilty to avoid loading the contents of all
tabs at once.

But once loaded I'd do what Johan suggests, only using show/hide of
each tab content (which is loaded on demand).

A more, maybe overkill solution, would be to save on client side when
was the last time you switched to that particular tab (if you have a
way to identify it), so when the user moves between tabs you don't
force an update unless there was certain time since the last update (1
m, 5m, whatever) or, of course, it was the first time you opened the
tab. This way if the click occurs before the update threshold, then
you simply perform a show() on the clicked tab and hide all the
others, if not then you AJAX load its updated contents.

This would have the drawback of having a bigger DOM in the memory of
the client, since each tab, once opened, will remain in the DOM until
closed. But even with a big DOM tree, browsers are optimized for such
scenarios.

Regards,

Esteban A. Maringolo


2017-03-10 12:14 GMT-03:00 Johan Brichau <[email protected]>:
> Hi Mariano,
>
> Why are you not using css visibility?
> This is what we do: render all tabs and use some easy JS scripts to show()
> and hide() the html that needs to be shown.
>
> Johan
>
> On 10 Mar 2017, at 15:38, Mariano Martinez Peck <[email protected]>
> wrote:
>
> Hi guys,
>
> I have an application which is tabbed based...that is, there is a main menu
> and each menu item opens a new tab in a "workspace". The user can then go to
> different tabs. Right now, every single click on a tab, does an ajax request
> and re-renders the "tab contents area". I hate this approach because even if
> the tab/component hasn't changed anything, every single tab click is a
> request + re-rendering. Sometimes the tabs are quite some heavy components
> which takes some time to render. So the application feels slow even when
> simply moving around tabs.
>
> To workaround that I was thinking to cache in localStorage each tabs html
> and then on each click of the tab, do a html() of the "tab contents area" to
> the html cached for that tab.
>
> That seemed like a good idea but after start trying to implement it, and I
> found quite some problems already. The main problem is that <scripts>
> embedded in the html of the tab. That JS is re-executed when I do:
>
> $(''.workspaceTabContents'').empty().html(localStorage[''tabContents'' +
> clickedTabId ]);
>
> And that is bad because each time I click on a tab, the JS is executed again
> and I have side effects. I could workaround this by stripping the <scripts>
> out. But then i have other problems.
>
> For example, I use bootstrap-select for my selects. When you do
> $(''.selectpicker'').selectpicker();   that alters the original HTML. So
> when you click on another tab and you must saved latest HTML of the
> currently selected tab, :
>
> localStorage[''tabContents'' + previousActiveTabId ] =
> $(''.workspaceTabContents'').html();
>
> it is the already modified HTML. Yet it has the JS...so it would duplicate
> my selects...
>
> And this is just to begin with....
>
> Another idea I had is to NOT cache on localStorage on client side but on
> server side. So that is, if a user clicks on a tab and does the ajax
> request, I do not re-render the component in Seaside (avoid all cost of
> #renderContentOn: etc) but instead  answered a cached HTML+JS.  Of course,
> here I still pay request, network, etc, but at least I avoid HTML
> generation.
>
>
> So I wonder...has anyone ever did something like this? Note that at the
> moment I cannot afford going with a client-side UI like angular or whatever.
>
> Thanks in advance,
>
> --
> Mariano
> http://marianopeck.wordpress.com
> _______________________________________________
> seaside mailing list
> [email protected]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>
> _______________________________________________
> seaside mailing list
> [email protected]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
_______________________________________________
seaside mailing list
[email protected]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside