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

On Fri, Mar 10, 2017 at 12:14 PM, Johan Brichau <[email protected]> wrote:

> 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.
>
>
Thanks Johan,

I haven't thought about that one. Seems like a good idea. Let me ask...when
you need to open a new tab (say a main menu button was clicked), how do you
avoid having to re-render all the "workspace" (all tabs) ?  Do you only
render the new one and do an append() or something?

Thanks in advance,


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


-- 
Mariano
http://marianopeck.wordpress.com

_______________________________________________
seaside mailing list
[email protected]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside