kernelci-frontend: browser cache, and reloads

Hi Milo,

I don't know much about javascript, but having to rename files each
time we change code seems clunky to me.

This might be just as nasty of a hack, but couldn't we put some magic
string all the .js loads.  Locally we did and experiment by hacking
the minimized require.js with a magic string (I think this[1] is what
would be needed in original.)  Combined with [2], then just changing
the string in those 2 places would force a browser cache reload, no?

For someone that actually knows javascript, there's probably a better
way of doing that with a global variable or similar, but this hack
seems to work without having to change all the filenames.

Note that this is especially useful when changing any of the .js files
that are not (currently) versioned.

Any thoughts on this approach, or perhaps a better one?

Kevin

[1]

diff --git a/app/dashboard/static/js/lib/r.js b/app/dashboard/static/js/lib/r.js
index d4a2a8755722..240b9a7e0bb0 100644
--- a/app/dashboard/static/js/lib/r.js
+++ b/app/dashboard/static/js/lib/r.j

@@ -1920,7 +1920,7 @@ var requirejs, require, define, xpcUtil;

                     //Join the path parts together, then figure out

if baseUrl is needed.
                     url = syms.join('/');
-                    url += (ext || (/^data\:|^blob\:|\?/.test(url) ||
skipExt ? '' : '.js'));
+                    url += (ext || (/^data\:|^blob\:|\?/.test(url) ||
skipExt ? '' : '.js?2018-09-14'));
                     url = (url.charAt(0) === '/' ||
url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url;
                 }
[1]

diff --git a/app/dashboard/templates/base-all.html

b/app/dashboard/templates/base-all.html
index ba8e7d47fb1c..1ed2fc221812 100644

--- a/app/dashboard/templates/base-all.html
+++ b/app/dashboard/templates/base-all.html

@@ -30,5 +30,5 @@
 <input type="hidden" id="page-len" value="{{ page_len }}">
 {%- endblock %}{# content block #}
 {%- block scripts %}
-<script data-main="/static/js/{{ data_main }}"

src="/static/js/lib/require.js"></script>
+<script data-main="/static/js/{{ data_main }}"
src="/static/js/lib/require.js?2018-09-14"></script>
 {%- endblock %}

On Fri, Sep 14, 2018 at 11:34 PM Kevin Hilman [off-list ref] wrote:

Hi Milo,

I don't know much about javascript, but having to rename files each
time we change code seems clunky to me.

This might be just as nasty of a hack, but couldn't we put some magic
string all the .js loads.  Locally we did and experiment by hacking
the minimized require.js with a magic string (I think this[1] is what
would be needed in original.)  Combined with [2], then just changing
the string in those 2 places would force a browser cache reload, no?

You can use that approach to bust the cache, yes, it will work.
The "issue", probably less likely these days, is that browser might
not cache a resource with a query string, so it could end up
requesting the same file each time you access the page.

Versioning the file is a better approach, and today there are better
ways of doing it than it has been done in kernelci.

For someone that actually knows javascript, there's probably a better
way of doing that with a global variable or similar, but this hack
seems to work without having to change all the filenames.

Note that this is especially useful when changing any of the .js files
that are not (currently) versioned.

Any thoughts on this approach, or perhaps a better one?

I personally wouldn't touch the r.js code base.

A better pre-processor/bundler than require.js should be used (webpack
+ a jinja2 template loader - assuming the latter exists), but it would
need to either inject the correct URL into the templates or tamper the
templates at build time.
It's probably going to be quite a lot of work.

Note: for development purposes, I never ran the build step and always
ran the application in the browser with the browser cache disabled.
The JS/CSS bump should only be done when pushing/deploying in
production to limit it.

-- 
Milo Casagrande [off-list ref]