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

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 <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