I'll start to develop a new app that uses a lot of heavy js librarys (prototype, scriptaculous, tinymce and so on).
Someone told me to make all the app using ajax, so all the js files will be loaded only once.
My question is, I really must do everything on ajax?
Lets say if I call myapp.com/projects and projects use all those js files, then I click on a "show" link and I'm redirected to myapp.com/projects/1 on this redirect, all js will be reloaded again?
No, your Javascript files will not be loaded again, they will be cached on the client.
But yes, your application will need to check with the server at every page load, the server often responding that the scripts have not changed. By using AJAX, you reduce the number of connections to the server. You can reduce the number of connections by concating all you Javascript files into one.
Note however that AJAX will add some new problems, like forcing you to track memory leaks as your application will never unload its objects if you never reload a new page.
If you are not at ease with Javascript, I strongly suggest sticking with the "old" model of reloading the page everytime. If you have performance issues, you can deal with them later.
Reloading Images, Scripts, etc...
Short answer: yes
Long answer: depends
When you view a page, your browser will request the HTML, once it has the HTML it will start to load external references (images, scripts, etc...). When it goes to request an image or a script, your browser may send a header which says when it got it last and stored it in its cache. The web server may respond with a 304 Not Modified code which tells the browser to use the cached version saving it from downloading it again.
Even if the browser doesn't use these headers, it will still be caching, it just won't know when the cache should expire. When you use the rails helpers to include images and scripts, it will append a number onto the end of the url which is unique to scripts contents. So if you change the contents, a new url will be used forcing the browser to get the updated version.
Use Google's Ajax Libraries API! Google now hosts the most popular js libraries including Prototype, Scriptaculous and jQuery. Once they host a specific version they are committed to hosting that version indefinitely.
There is a small Rails plugin by Ryan Heath at github:
script/plugin install git://github.com/rpheath/google_ajax_libraries_api.git
Then in your views instead of using the default
<%= javascript_include_tag :defaults =>
use this instead:
<%= google_jquery =>
<%= google_prototype =>
<%= google_scriptaculous =>
You can specify versions if you want. Check out Ryan's readme at github for more information.
This way you don't have to bother setting up an asset host (at least not for your standard javascript) and save yourself a truckload of bandwidth!
Related
Using Delphi XE6, I've written lots of service applications that use TIdHTTPServer. Every now and again, a javascript file will fail to load in Firefox, and when I check the Delphi application's log, there's no mention of it.
Example:
In TIdHTTPServer.OnCommandGet, first thing I do is log the requested page. After the page loads in Firefox, the log shows the page request, 3 CSS requests and 3 JS requests - for this example it is correct. But sometimes, and it's usually after I haven't requested the page for a while, despite closing Firefox, and the Delphi service application, one of the JS requests is missing, and it's not loaded in Firefox, so things don't work.
Not sure if it's relevant, but one of the techniques I use is appending the file's last modified timestamp code as a parameter when requesting the file.
eg. in the HTML, it will say <script type="text/javascript" src="general.js?rnd=20150522155113"></script>
I do this to ensure updates to JS and CSS files are always reloaded and not cached.
I'm not sure how to go about solving this. The issue affects multiple delphi projects. I only use Firefox, so not sure if other browsers are affected. Any help is appreciated.
I am struggling to get some performance in my MVC application.I am loading a partial page (popup) which is taking hardly 500ms. But each time the popup loads it also downloads 2 jQuery files as well.
is it possible to use the jQuery from cache or from parent page?
I have attached the image in red which shows 2 additional request to server.
In order to improve the performance you can try with the following approaches:
see if your application server supports GZip and configure the application/server to return the responses always archived in Gzip
Use minified version of JQuery
there are also Packing libraries where you can pack all the imported resources, such as CSS files and JS files, and the browser will do only 1 request per resource type. For instance, in Java we have a library called packtag.
In general, I recommend you using Google Chrome browser and its performance analyzer. It will give you good hints.
In the Bundle config use this code
BundleTable.EnableOptimizations = true;
and also indclude both files in single bundle.
Does the popup use an iframe or does it's content just get added to the DOM of the current page?
If it gets added to the current page you could try just adding the script references to the parent page instead. It might not always be the best idea if the parent page has no need for those two files, but if the parent page also uses the jQuery validation then the popup will be able to use the parent's reference to the script file.
For an iframe I'd suggest looking at Gzip and minification to make the scripts load faster.
If I have an application that uses PJAX or Turbolinks then I am seeing a problem when new code is deployed to the server - say Heroku. The issue is that users who are accessing the application will continue to use the Javascript from the previous version of the application (since it is already loaded into the browser), but will get the HTML pages from the new version. Sometimes the new HTML code assumes the new Javascript is loaded so things don't work properly.
Have others noticed this problem? What do you do about it? It seems like this would be a common problem for single-page Javascript applications (like those based on Backbone and Ember) too. Meteor at least seamlessly upgrades the code in the client, as a way to deal with this problem.
https://github.com/rails/turbolinks/#asset-change-detection looks like the answer. In your script tags, put data-turbolinks-track. Then I assume what happens is that when turbolinks loads a page, it looks for that script tag, and if the URL has changed (it will change automatically if you use the asset pipeline) then it reloads the whole page for you.
taking pivotaltracker as an example, they check for the client connection and force the user to reload their clients if a new version arrived.
as long as you don't provide backwards compatibility within your app, there is nothing else you can do.
If you're using Pjax, you can add
<meta http-equiv="x-pjax-version" content="v123">
to your header. You can use a server defined value for the content attribute, and then before you deploy, just make sure that value is updated. Once it's deployed, subsequent Pjax requests will see this header has been updated, cancel it's Ajax request, and pull down a full page reload.
For Turbolinks 5, you can add data-turbolinks-track="reload" to your script and stylesheet links in the header. Turbolinks will watch these files for changes on each request. Then upon deployment, just like Pjax, it will request a full page reload.
Classic Turbolinks just requires the attribute data-turbolinks-track instead.
You can read more and see other functions on Pjax's GitHub page: https://github.com/defunkt/jquery-pjax or Turbolinks: https://github.com/turbolinks/turbolinks.
For Turbolinks Classic: https://github.com/turbolinks/turbolinks-classic
I'm taking a look at Hogan.js by Twitter.
http://twitter.github.com/hogan.js/
They talk about being able to precompile templates via the server which I understand can be a perf gain.
Currently every time I render the template I perform the following after an AJAX hit to the server to get data:
var template = Hogan.compile($('#seasonsTmpl').html());
$('#main').html(template.render(data));
Given the following template:
<script type="text/html" id="seasonsTmpl">
<ul>
{{#season}}
<li>{{.}}</li>
{{/season}}
</ul>
</script>
What can I do to "precompile" server side using an ASP.MVC backend? Is this not possible as it seems to be centered around using Node.js?
You have the right idea to optimize your templates. There are two options, and the choice probably depends on whether you want to render your templates client-side or server-side.
If you want to render them client-side, you can do a true precompile using Hogan.js. Yes, this does not run on .NET, but I think you've misunderstood when precompilation is possible. Rather than expecting it to happen on each web request, or page load, you can compile your templates up-front as part of your build process. You will need to install node and npm to set this up, but you only need to run this locally on your own machine, or a build box if you use one. Whenever you update your templates, you would run Hogan again to update the output file. The compiled output will be a JavaScript file full of functions that are optimized for later use. These functions include your template strings, along with the logic to render the data a la Mustache. You can then include the output file just like any other JavaScript include, or include it with the other sources for minification if you do that.
The second option is to render the templates server-side. This is different than precompilation, the server will compile and render the templates again for each web request. Step away from Hogan.js and look at a .NET alternative such as Nustache. The great thing about Mustache is it has a spec and has been ported to several server-side languages.
There's a fundamental difference in these options in terms of where the rendering happens. You might even want to leverage both approaches in certain scenarios, say if you want to render the initial page load server-side using Nustache, but have dynamic elements that must be rendered in the browser using templates precompiled through Hogan.
More info:
Nustache on Github
I hope you find this helpful!
I'm page caching the majority of my pages and using a dynamic js file to inject the user specific content.
So in my header file I have something like this:
<%= javascript_include_tag '/dynamic_header/current' %>
What this will do is execute the dynamic_header controller show.js.erb view which gets returned alongside the page and handles the injection of the dynamic content.
All well and good until I test under safari. (Firefox works fine)
It seems safari caches this file far too heavily and doesn't notice when it changes, which is every time there is a new flash messages or when a user logs in or out.
Is there an easy way in my controller to add an expires header to this file? Or do people have any other suggestions on how to make safari notice that the cached file has changed.
Thanks.
Normally static files have their modified date appended to the end of them to fix caching issues. Since your file is dynamic you should just add the current time to the end of the path.
This is not supported by javascript_include_tag, so you will need to write the script include tag by hand like so:
<script type="text/javascript" src="/dynamic_header/current?t=<%=Time.now.to_i%>"></script>
Good luck!
Maybe you can add this header:
Cache-Control: no-cache
The best way to do this is probably hooking into rack