[Seaside] Someone having tabs with Seaside html+js cached on localStorage?

[Mariano Martinez Peck]

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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/360009f8/attachment.html>