[Seaside] Someone having tabs with Seaside html+js cached on localStorage?
Johan Brichau
johan at inceptive.be
Fri Mar 10 15:14:36 UTC 2017
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 <marianopeck at gmail.com> 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 <http://marianopeck.wordpress.com/>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/daf182a0/attachment.html>
More information about the seaside
mailing list