Send seaside mailing list submissions to
To subscribe or unsubscribe via the World Wide Web, visit
or, via email, send a message with subject or body 'help' to
You can reach the person managing the list at
When replying, please edit your Subject line so it is more specific
than "Re: Contents of seaside digest..."
Today's Topics:
1. Someone having tabs with Seaside html+js cached on
localStorage? (Mariano Martinez Peck)
2. Re: Someone having tabs with Seaside html+js cached on
localStorage? (Johan Brichau)
3. Re: Someone having tabs with Seaside html+js cached on
localStorage? (Esteban A. Maringolo)
4. Re: Someone having tabs with Seaside html+js cached on
localStorage? (Mariano Martinez Peck)
----------------------------------------------------------------------
Message: 1
Date: Fri, 10 Mar 2017 11:38:06 -0300
Subject: [Seaside] Someone having tabs with Seaside html+js cached on
localStorage?
Message-ID:
Content-Type: text/plain; charset="utf-8"
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
-------------- next part --------------
An HTML attachment was scrubbed...
------------------------------
Message: 2
Date: Fri, 10 Mar 2017 16:14:36 +0100
Subject: Re: [Seaside] Someone having tabs with Seaside html+js cached
on localStorage?
Content-Type: text/plain; charset="utf-8"
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 <
[hidden email]> 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
> _______________________________________________
> seaside mailing list
-------------- next part --------------
An HTML attachment was scrubbed...
------------------------------
Message: 3
Date: Fri, 10 Mar 2017 12:26:44 -0300
Subject: Re: [Seaside] Someone having tabs with Seaside html+js cached
on localStorage?
Message-ID:
Content-Type: text/plain; charset=UTF-8
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
> 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
>
> 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
> _______________________________________________
> seaside mailing list
>
>
>
> _______________________________________________
> seaside mailing list
>
------------------------------
Message: 4
Date: Fri, 10 Mar 2017 12:34:28 -0300
Subject: Re: [Seaside] Someone having tabs with Seaside html+js cached
on localStorage?
Message-ID:
Content-Type: text/plain; charset="utf-8"
On Fri, Mar 10, 2017 at 12:14 PM, Johan Brichau <
[hidden email]> 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
>
> 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
> _______________________________________________
> seaside mailing list
>
>
>
> _______________________________________________
> seaside mailing list
>
>
--
Mariano
-------------- next part --------------
An HTML attachment was scrubbed...
------------------------------
Subject: Digest Footer
_______________________________________________
seaside mailing list
------------------------------
End of seaside Digest, Vol 171, Issue 4
***************************************
Locked
