Does anyone know a good play plugin that automatically minifies javascript and css to attach to a production play server?
I've found this one, but I guess there are more out there:
https://github.com/greenlaw110/play-greenscript
The main problem I see here is that the having javascript being generated from the play side, the plugin would have to detect JS code that gets generated on the fly. Mainly because I'm writing values directly into the javascript like:
function foo${handlerID}(someVar){
var x = ${some_val};
(...)
}
var t = foo${handlerID}('bar');
The reason we do minimizing/compressing/merging for css/js/img is because we want to save the network bandwidth and accelerate application performance, lower the server's load and make the user be more happy.
When you are putting those groovy variables into your javascript code you are shifting to the other way, i.e. making the server slowing down. Because each request will get a different javascript file to be downloaded, and the user will be no longer benefit from the local cached js copies. For the same reason using greenscript or any other minimizing tool to compress it is meaningless, because each time your need to compress and merge again instead of get it directly from cache.
If there are cases that you HAVE TO put the groovy variables into some javascript code, you'd better separate them from other parts (which should reasonably be most the majority). By doing that you could still using greenscript or press to process your static js files and leave the dynamic parts stay inside your view.
Check out the press module.
As long as the generated Javascript and css are in their separate own respective files you should be able to minify them automatically.
Related
I'm using babylon.js as a framework for easy access to WebGL. Unfortunetaly, I'm struggling a bit with managing my code.
For example, I want to create a mesh in a js-file, then I want to edit its position in another js-file.
So what I need is that the index-file loads all javascript-files like their code was written as one large block in the index file.
Using jQuerys getScript for example runs the other js-File, but does not implement it into the code like it was one file.
EDIT: using the php-include it works how it should. Just for understanding: The server is creating the output in this case, doesn't it?
Looking forward answers!
Browser interprets JS files as it receives them. In case of jQuery, requireJS or other loaders new tag is added to the page, so browser loads a new file, and processes it as a new file.
The only way to achieve what you want is to make server compile different files together and give it to browser as one file. This is what PHP does, this is what any other compiler is for (like Grunt).
On a large scale though, it may be a bad idea to write code in different files such as it works differently whether it's loaded as is or compiled to one file. It can be a major pain to support that code later on.
I am transferring a PHP framework to JavaScript. In PHP, I have one file per class and so when transferring it over, I am also creating one file per JavaScript class.
However, unlike with PHP, with so many JavaScript files, this will reduce the loading time of my page (I plan to have 30+ classes).
I like to have one class per page simply because when developing it is easier to navigate around my framework.
What is the best approach to keep this ease of development yet not have so many javascript files that the HTML page has to load?
There are server-side tools that allow you to automatically combine JavaScript/CSS files into one HTTP request.
e.g.
minify
You could also do this manually when bringing code into production. However I assume that's not something that you would want to do with 30+ files (however for people with only a few, this is a relatively simple solution).
You should make sure all of your JS files are packed/minified to make their file size as small as possible. And also make sure your server is gzip'ing everything so the data it's sending is compressed.
Finally, you should make sure these types of files are cached properly by the browser. You can easily accomplish this by adding a version number to the end of these files and changing the expires header to be far into hte future.
In my project each page has a bunch of dependent Javascript and Css. Whilst developing I just dumped this code right into the page but now I'm looking to clean it up...
it appears that the general approach out there is to package all the Javascript/CSS for an application into two big files that get minimised.
This approach has the benefit that it reduces bandwidth since all the front-end code gets pulled in just once from the server... however, I'm concerned I will be increasing the memory footprint of the application by defining a whole ton of functions for each page that I don't actually need - which is why I had them on a per-page basis to begin with.
is that something anyone else cares about or is there some way to manage this issue?
yes, I have thought of doing conditional function creation since I need to run code conditionally for each page anyway - though that starts to get a bit hackish in my view.
also, is there much cost to defining a whole ton of Css that is never used?
Serving the javascript/CSS in one big hit for the application, allows the browser to cache all it needs for all your pages. If the standard use case for your site is that users will stay and navigate around for a while then this is a good option to use.
If, however, you wish your landing page to load quickly, since there is a chance that the user will navigate away, consider only serving the CSS/javascript required for this page.
In terms of a performance overhead of a large CSS file - there will be none that is noticeable. All modern browsers are highly optimised for applying styles.
As for your javascript - try not to use conditional function creation, conditional namespace creation is acceptable and required, but your functions should be declared only in one place.
The biggest thing you can do for bandwidth is make sure your server is compressing output. Any static document type should be compressed (html, js, css, etc.).
For instance the jQuery Core goes from approx. 90KB to 30KB only because of the compressed output the server is sending to browsers.
If you take into account the compression, then you have to create some mammoth custom JS includes to really need to split-up your JS files.
I really like minifying and obfuscating my code because I can put my documentation right into the un-minified version and then the minification process removes all the comments for the production environment.
One approach would be to have all the shared javascript minified and compressed into one file and served out on each page. Then the page-specific javascript can be compressed/minified to its own files (although I would consider putting any very common page's javascript into the main javascript file).
I've always been in the habit of compressing/minifying all of the CSS into one file, rather than separate files for each page. This is because some of the page-specific files can be very small, and ideally we share as much css across the site as possible.
Like Jasper mentioned the most important thing would be to make sure that your sever is GZIPing the static resources (such as javascript and css).
If you have a lot of javascript code you can take a look on asynchronous loading of js files.
Some large project like ExtJs or Qooxdoo have build in loaders to load only required code, but here is a lot of libs which simplify this, and you can use in your project (e.g. head.js, LAB.js).
Thanks to them you can build application which loads only necessary files, not whole javascript code which in case of big apps can be a heavy stuff for browser.
I left this question as generic as possible, but I do have a specific problem that I need to solve in my application and the answer to this would help.
The application I am working on uses PHP/MySQL as its backend, and is set up so that no text/words/phrases visible to the user are hardcoded in the HTML/JS that is output to the browser, rather they are stored in a database table associated with a language key that is used to fetch the correct translation of the word/phrase based on the user's language preference. Now this works great for text that exists inside the application's HTML, but in order for this system to work with the javascript files, all javascript must be placed in a .php file and wrapped in <script></script> tags and included inline with the HTML, CSS ect.
This creates some problems with the flexibility in the system's javascript, as it cannot be included as external scripts via <link> tags (I guess unless you set the .php file's headers manually), and perhaps more importantly it cannot be minified/packed etc. when served in the production environment.
My first thought of a solution to this problem is to have a php script that's placed before any other javascript which loops through every record in the language database table and creates an associative javascript array using the language key as the array keys and setting their value to the translated phrase according to the user's preference. So, in this way all javascript files could be made into actual .js files and link'ed, minified, packed, etc. as needed, and they would just reference the phrases they need from the master language array that was created (i.e. alert(LANGUAGE.some_text);)
Only problem is, the number of elements in this array could easily get into the thousands possibly even bigger. So back to my original question, what is an acceptable max size for a javascript array, based on the average PC? Or am I attacking this problem entirely wrong to begin with?
I think the problem has less to do with how much data javascript can theoretically handle and more to do with how your application is handling the data.
It sounds like you're returning all of the phrases for the user's language on every page, not just the phrases they need on that particular page. If that's the case, fixing it will be part of the solution to your problem.
The rest of the solution will be not using javascript for anything until the app is completely functional. Then go back and do progressive enhancement stuff with js.
Instead of generating javascript from those database queries, generate pages (server-side) in the user's natural language, and serve them from a separate subdomains/subdirectories. Have your web server load the appropriate config for the user's language based on subdomain/subdirectory.
It's not the answer you were looking for, but I hope it helps.
JavaScript is by its nature a scripting language. The interpreter is nestled inside the browser's kernel. Correct me if I'm wrong, but I don't believe there is a definitive upper limit. The only thing that constricts an unlimited upper bound are memory constraints.
You can house gigs of uncompressed data (more if you compress it).
You're more likely to get one of the top errors in the list here, before you'll see any "upper bound limit reached."
in order for this system to work with the javascript files, all javascript must be placed in a .php file and wrapped in tags and included inline with the HTML, CSS ect.
This creates some problems with the flexibility in the system's javascript, as it cannot be included as external scripts via tags
Actually, not necessarily true. You can serve javascript files (not html) using PHP. Of course doing this most likely mean that all your javascript file will have the extension .php but that is a small matter. If you don't care about being strictly correct you don't even have to set the Content-type to js since browsers will treat anything served by <script> tags as javascript anyway.
A lot of sites actually do this, though not necessarily in PHP. Google, Yahoo etc often serve javascript using a server side scripting language to enable them to do any or all of the following:
automatically concatenate javascript/css files into a single file
automatically minify the javascript/css files
automatically obfuscate the javascript files
automatically do dependency resolution to source needed javascript files
Some people use mod_rewrite to rename the .php (or .pl or .cgi) files to .js to hide the details of the implementation. But it's strictly not necessary.
Here's an example bookmarklet that I serve as a .php file.
I tried solving a similar problem as a non-web programmer before, and ended up hosting the language package as a separate XML which JS queries into. Bad idea, and I'll tell you why. Google can't see pages filled dynamically with JS. But if that's no issue to you, I would recommend that way, simply because I don't know any other. :)
The method Array.prototype.push , append arguments to the end of the array, and return the new length.
In some JavaScript engine such as v8, the length is bounded to 32bit unsigned integer, so this might be the limit you want to know.
Can we use any type of javascript code as a external .js file or sometime it's necessary to place in <head>?
The only time you would ever need to inline a js function in your HTML using the <SCRIPT> tags is if your javascript is generated by your server side program depending on the data, user settings etc.
Even this case is extemely rare as as you should be able to create a .js function whose behaviour is controlled by passing parameters.
Apart from keeping everything tidy and in the place where you expect to find it, there is a network performance advantage in that *.js files are cached on the client side so you are not constantly sending the same stuff over the network again and again.
Unless it is a Dynamic content which is placed by the server side scripts (very rarely used as there are many more better alternative methods) .. You can use JS in an external file ..
External js is re-usable .. I mean can be used by more than one HTML page .. So obviously it brings down the burden on browser ..
The site providing the live telecast or the NEWS/information (example:cricket scores etc) real-time examples for Dynamic content ..
You can place it all in an external file. It's much cleaner, and easier to maintain. It's a good practice to keep Javascript and CSS in their own external files. Do away with inline switching between CSS, HTML and Javascript for a much better organized project and less frustration down the road.
if using jquery then $.document.ready() is the way to go