Search

I've been working on a project which is quite heavy on inline scripts, as they are dynamically built via data-sources.

I was wondering weather anyone actually tried to use a javascript page-type and returned a dynamically generated script from within Symphony. I'm considering this because it could be potentially faster since browsers cache the scripts, and I would not have to add some of the data-sources to all the pages I require it within symphony. Any suggestions on doing so would be appreciated. I've read something on JSON in another thread but there doesn't seem to be anything relating to working directly with scripts.

I once built JavaScript pages in Symphony, that's perfectly possible. You will need the Content Type Mappings extension, of course, to set the right Content-type header. Most of your output will be in CDATA sections. If you want, I can try and find some example code for you.

But: No, there would be no caching in the browser, since Symphony always sets various no-cache headers.

What do you mean by

they are dynamically built via data-sources

Can you give me an example? I'm wondering if there are ways to externalize your scripts.

Page HTTP Caching is in use at one of my sites now. You could use this to tell the browser it can cache the JavaScript "page" by giving the pages a max-age in seconds.

Ah good point @micheal-e, very interesting replies I'm sure its useful. I assume if I had to set the content-type and make sure that the Javascript looks fine I should be ok to chuck this into the Javascript template. Then I could set some page caching to increase the cache time of this file. Can't wait to finish this and showcase it :)

I have some XSLT in a script tag coming up like this.

 <xsl:for-each select='/data/attractions/entry'>
    <xsl:variable name='attraction-id' select='@id'/>
    <xsl:variable name='url'>
        <xsl:call-template name='attraction-url'/>
    </xsl:variable>
    <xsl:variable name='seo-title'>
        <xsl:apply-templates select='current()' mode='seo-title'/>
    </xsl:variable>
    marker = L.marker([<xsl:value-of select='location/@latitude'/>, <xsl:value-of select='location/@longitude'/>], {icon: L.divIcon({className: '<xsl:value-of select='type/item/@handle'/>-icon'}), title: "<xsl:value-of select='name'/>",entryID: <xsl:value-of select='@id'/>,url: "<xsl:value-of select='$url'/>",seotitle: "<xsl:value-of select='$seo-title'/>"});
    marker.on('click', onMarkerClick);
</xsl:for-each>

I'm doing some other stuff in between too just removed some so it looks clearer. I have something around 400+ of these in the datasource which equates to a few thousand lines of javascript inline (which admittedly is not so cool) hence why I want to set it apart.

For one or two older projects I have created custom JavaScript pages in Symphony but I find it much easier today to store the needed data in data-attributes that are parsed in an external but static script file.

Would that work in your situation?

not exactly; someone has been adding map-based data into the symphony backend; which I obviously need to be translated into marker-data. The number of such markers I believe will increase over time; and I was trying to abstract this from having it inline.

I am still not too sure about the JS cache; most likely I might leave this to remain un-cached but this way I would increase the performance of standard pages due to having less XML to generate / process + the html looking nicer. As it is; it works fine was just wondering if putting it into a custom Javascript page would make it more efficient or otherwise better segmented.

In your case, data-attributes are probably not the right solution. But you might add your parameter/value pairs as a jQuery object to the <head> of your pages and use a static Javascript file. I do this, and it works great. The object looks like this, basically:

    &lt;script type="text/javascript">
(function($){
    Webomat = {
        'clientDomain':'example.com',
        'targetBlankOnExternal':true,
        'timeNow':'1358346831',
        'retinafy':true
    };
})(jQuery.noConflict());
    &lt;/script>

This is created in XSLT, of course, similar to this:

    &lt;script type="text/javascript"><![CDATA[
(function($){
    Webomat = {
        'clientDomain':']]><xsl:value-of select="$client-domain"/><![CDATA[',
        ...
        'retinafy':]]><xsl:value-of select="$retinafy"/><![CDATA[
    };
})(jQuery.noConflict());
]]>&lt;/script>

This method is much more comfortable than building all the JavaScript in XSLT.

I can not edit my above post. so I add it here: Please use standard opening brackets for the script elements. The forum has replaced them by entities.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details