[Seaside] seaside Digest, Vol 171, Issue 4
Sasa Prokic
prokic_sasa at yahoo.com
Fri Mar 10 15:56:30 UTC 2017
Hi Mariano,
I had similar requirements for caching tabs on a client and I found out that the simplest solution was to use jQuery add-on which was free and had all things I needed. The only problem I had to solve was actually refreshing cached content on demand in case of need. There is a number of such add-ons, if you are interested I can provide you wirh a link to the one I decided to use.
Regards,Sasa Prokic
Sent from Yahoo Mail on Android
On Fri, Mar 10, 2017 at 10:34 AM, seaside-request at lists.squeakfoundation.org<seaside-request at lists.squeakfoundation.org> wrote: Send seaside mailing list submissions to
seaside at lists.squeakfoundation.org
To subscribe or unsubscribe via the World Wide Web, visit
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
or, via email, send a message with subject or body 'help' to
seaside-request at lists.squeakfoundation.org
You can reach the person managing the list at
seaside-owner at lists.squeakfoundation.org
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
From: Mariano Martinez Peck <marianopeck at gmail.com>
To: Seaside - general discussion <seaside at lists.squeakfoundation.org>
Subject: [Seaside] Someone having tabs with Seaside html+js cached on
localStorage?
Message-ID:
<CAA+-=mV1+rj7LVg3G9EKL7i9NCetYaQj9yf+Xo4Uy-DfLyRhkQ at mail.gmail.com>
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
http://marianopeck.wordpress.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/360009f8/attachment-0001.html>
------------------------------
Message: 2
Date: Fri, 10 Mar 2017 16:14:36 +0100
From: Johan Brichau <johan at inceptive.be>
To: Seaside - general discussion <seaside at lists.squeakfoundation.org>
Subject: Re: [Seaside] Someone having tabs with Seaside html+js cached
on localStorage?
Message-ID: <001CB1A3-26E9-4DAF-919B-C61963B3CB2A at inceptive.be>
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 <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-0001.html>
------------------------------
Message: 3
Date: Fri, 10 Mar 2017 12:26:44 -0300
From: "Esteban A. Maringolo" <emaringolo at gmail.com>
To: Seaside - general discussion <seaside at lists.squeakfoundation.org>
Subject: Re: [Seaside] Someone having tabs with Seaside html+js cached
on localStorage?
Message-ID:
<CAJMgPC+T3W02ZNy+JVpzR6eg9ewSit7+aq8SJ-SH-+-tFnGvNw at mail.gmail.com>
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
2017-03-10 12:14 GMT-03:00 Johan Brichau <johan at inceptive.be>:
> 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
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
------------------------------
Message: 4
Date: Fri, 10 Mar 2017 12:34:28 -0300
From: Mariano Martinez Peck <marianopeck at gmail.com>
To: Seaside - general discussion <seaside at lists.squeakfoundation.org>
Subject: Re: [Seaside] Someone having tabs with Seaside html+js cached
on localStorage?
Message-ID:
<CAA+-=mX=K9Rv-kgLsHMxZGuZYU5+_XzHC4exNK6moa34va-AZg at mail.gmail.com>
Content-Type: text/plain; charset="utf-8"
On Fri, Mar 10, 2017 at 12:14 PM, Johan Brichau <johan at inceptive.be> 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 <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
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
--
Mariano
http://marianopeck.wordpress.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/15823057/attachment.html>
------------------------------
Subject: Digest Footer
_______________________________________________
seaside mailing list
seaside at lists.squeakfoundation.org
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
------------------------------
End of seaside Digest, Vol 171, Issue 4
***************************************
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170310/a5803388/attachment-0003.html>
More information about the seaside
mailing list