I'm learning how to use Magento e-commerce system, and I'm reading its documentation, but I don't understand some term, a "pre-compiled JavaScript library". What do they mean by that? How can JavaScript code be compiled?
The web downloader for upgrading and installing Magento without the
use of SSH (covered in Chapter 2). • js—The core folder where all
JavaScript code included with the installation of Magento is kept. We
will find all pre-compiled libraries of JavaScript here.
Source:
http://www.magentocommerce.com/wiki/2_-_magento_concepts_and_architecture/magento_s_base_structure
I do not know what Magento e-commerce uses, but I know what JavaScript Compilers are.
Pre-Compiled JavaScript is not practical as the various JavaScript interpreters will have their own method of compiling. Therefore, when most people talk about Compiling JavaScript, they are usually referring Minified JavaScript.
However, the latest minifiers go way beyond. A good example is Google Closure Compiler Advanced Mode. It is related to Google Closure Library and Tools, but is well designed even when used by itself.
There is an Online Demo of Closure Compiler.
It is called a Compiler because it is more than a minifier and the name JavaScript Compiler is not used for anything else. For example: This code
function hello(name) {
alert('Hello, ' + name);
}
hello('New user');
compiles to alert("Hello, New user"); in advanced mode. Single-use functions are removed, variable names are shortened, and even re-used.
It is very thorough. Simple mode assumes that there might be other JavaScript involved. in which case it would preserve the hello function. Advanced mode assumes that there is only a single JavaScript file, or that it is properly exported.
The one thing that keeps this from really being compiled is that it is not bytecode like compiled C or Java would be. It still has to be compiled at run-time like Perl.
Magento has an configuration option in the admin at
System -> Configuration -> Developer -> JavaScript Settings
named Merged Javascript Files.
When this setting is on, Magento will take all the javascript files it knows about, "compile" them to a minified version to product smaller files sizes, and then combine all the javascript files into a single javascript file. This way, instead of opening multiple network connections to download multiple files, Magento will open a single network connection to open one file.
So, when the documentation says that folder contains the pre-compiled versions, it means that's where the individual javascript files are stored, and where the files are loaded from when Merged Javascript Files
The term compilation comes from Computer Science. A compiler takes source code, and transforms it from one language into another language.
Traditionally, it's meant taking code from a higher level language (C, .NET, Java, etc.), and transforming it into the machine code (assembly code) that's understood by the computer chip. However, the term is generic and more modern usage includes taking the source code written in one language (Javascript) and transforms it into a different form (minified javascript).
Related
Our app has several JS library dependencies which are already minified. We're considering concatenating them into a single file to reduce the volume of separate threads the browser needs to download them all.
The minifiers I've looked at so far don't handle this well (examined Google Closure Compiler, YUI Compressor). I don't really need my already minified libraries minified again. What is the standard practice for this in the JS world? And do I need to worry about specifying order?
Question is similar for CSS. These libraries provide pre-minified CSS, which I'd like to concatenate together.
You typically wouldn't minify code that is already minified. If the provided minified library was minified in a bad way (like packer), it would be better to minify the original library source code using your favorite minifier.
In your case it's better to look at concatenation only.
You can do this using Gulp or Grunt. Both are able to generate sourcemaps.
I have not had any trouble with use strict when concatenating multiple libraries to a single file, but it is something to pay attention to. Properly written libraries apply use strict only to their library scope, to not affect the global scope / other libraries.
If some silly library applies use strict to the global scope, and another silly library is not compatible with strict, Firefox (probably Chrome as well) throw a strict violation error immediately, so this error is easy to spot.
I've recently created a JavaScript library using Google's Closure Compiler: https://github.com/bvaughn/task-runner
I intend for this library to be used by applications that also require the full Closure Library, and so I want the built version of my library (Task Runner) not to include a subset of Closure Library. If Task Runner includes a subset of Closure Library, and another application includes the full Closure Library, a race condition will exist between which loads Closure last (last in wins). It also bloats the size of the Task Runner file.
However I'm having trouble. If I don't require any of the Closure library classes, Task Runner builds fine (obviously). However if I require something (goog.dom for instance) then my "compiled" JavaScript file also includes a portion of the Closure library. Is there a way to tell the Closure Compiler to leave certain JavaScript files/modules/whatever out of the built result?
FWIW, the Plovr experimental-exclude-closure-library option seems to somewhat describe the functionality I'm looking for.
On the surface what you are asking makes no sense. You want to depend on/use code from Closure-library, but not include it in your output. This isn't really possible nor how the library and compiler function together.
There is a rather small list of primitive functions defined in Closure-library that are completely removed/replaced when compiled with Closure-compiler. goog.require and goog.provide are the two most prominent of those.
For the vast majority of the Closure-Library, if you use or depend on a class, method or object that specific code will appear in the compiled output. And because that library code itself may depend on other parts of the library, even more code may be included in the compiled result.
The difference between using Closure-compiler with Closure-library as compared to more traditional JavaScript libraries is that ONLY the parts of the code determined to be called and used are included in the output. This is much more granular than a simple file inclusion - prototypes, variables, constants, etc will all be excluded because the compiler can determine that they are never used.
Distributing a Library
If you are building a library which depends on Closure-library, you have two options.
Distribute a compiled/built version
You would compile your library using Closure-library; exporting any public API methods and properties. Others who utilize your library with Closure-compiler or Closure-library will need to use an externs file and include your library AFTER compilation.
Distribute your library as source
You would simply distribute your library source code. Others would goog.require your library as part of their source and build process. If Closure-library is used in both projects, it will only be included once in the build process.
There is no hybrid approach where you compile your code but exclude Closure-library. This violates the principle that all of the source code will be compiled simultaneously.
You can peruse my Geolocation-marker library to see an example. I provide a compiled standalone version of the code for use, but the uncompiled source can also be included in other projects which use Closure-library.
I have been improving the structure of a web app's frontend and have done things like combine and minify css/js files, version files, and building out some templates. However I was looking at some web tools and it is saying there is a ton of unused js/css. Are there any suggestions on
-discovering the completely necessary code
-combining, minifying, and versioning the right code for the page
I am mainly looking for like a logical suggestion any code samples would be great. I am specifically using python, cheetah templates, yui-compressor, modified time for versioning, mod_rewrite and gzip on apache
Check out the Dust-Me Selectors Firefox extension for streamlining CSS:
Dust-Me Selectors is a Firefox
extension (for v1.5 or later) that
finds unused CSS selectors.
It extracts all the selectors from all
the stylesheets on the page you're
viewing, then analyzes that page to
see which of those selectors are not
used. The data is then stored so that
when testing subsequent pages,
selectors can be crossed off the list
as they're encountered.
You can test pages individually, or
spider an entire site, and you'll end
up with a profile of which selectors
are not used anywhere.
For JavaScript, take a look at the Google Closure Compiler which can calculate codependencies within your code and remove redundancies.
The Closure Compiler is a tool for
making JavaScript download and run
faster. It is a true compiler for
JavaScript. Instead of compiling from
a source language to machine code, it
compiles from JavaScript to better
JavaScript. It parses your JavaScript,
analyzes it, removes dead code and
rewrites and minimizes what's left. It
also checks syntax, variable
references, and types, and warns about
common JavaScript pitfalls.
For a project I'm tangentially working on, I need a way to compile JavaScript into some intermediate language or bytecode so that I can single-step through it. I know that many of the JavaScript engines in modern browsers do something like this, but they don't make the resulting bytecode accessible. Is there a good off-the-shelf tool for this sort of JavaScript compilation?
Not exactly sure of your needs, however maybe Rhino could work for you.
The JavaScript compiler translates
JavaScript source into Java class
files. The resulting Java class files
can then be loaded and executed at
another time, providing a convenient
method for transfering JavaScript, and
for avoiding translation cost.
More about the compile function is located here.
Given a need to write command line utilities to do common tasks like uploading files to a remote FTP site, downloading data from a remote MySQL database etc.
Is it practical to use JavaScript for this sort of thing? I know there are JavaScript interpreters that can be run from the command line, but are there libraries for things like FTP and database access the way there are for e.g. Java? If so, what's the best place to look for them? (Google searches with JavaScript in the keywords always seem to return many pages of browser specific things.)
And is there a way to package a JavaScript program up as a standalone executable on Windows?
Update: I've decided Python is a better tool for this kind of job, but the answers to the original question are still good ones.
Standalone executable?
By the way you ask the question, I'm not sure if you are aware, but the Windows Script Host - included in Windows - allows you to run .js files from the command-line. Your javascript will not be an executable, it will remain a script, a text file. The script runs within cscript.exe, which is provided by WSH. There's no compilation required. Maybe you knew all that.
I use Javascript this way for various utilities on Windows.
I think your instinct is right on the availability of libraries. You are sort of on your own to find all those things. Although, once you find them, it's not hard to package Javascript libraries as COM components and allow re-use from anywhere. See here for an example of packaging the Google Diff/Patch/Match Javascript library in COM.
Addendum: Once a bit of code is available within COM, it can be consumed by any Javascript running on the machine. Some examples of COM objects available to Javascript scripts running in WSH:
MSXML2.XMLHTTP object - used in AJAX, but can be used for any HTTP communication. There also an object for the XSLT engine so you can do transforms from script.
Excel.Application - allows you to open up Excel spreadsheets and automate them from Javascript.
Communicator.UIAutomation - automate MS Communicator (send IM's via script)
COM objects for Google Earth.
SlowAES - an all-Javascript implementation of AES encryption.
You can use Rhino to compile Javascript into Java byte code, and get access to all Java libraries.
Or you could use JScript.net, and get access to the .net libraries. .net includes a jsc.exe that produces exe-files.
Both of these requires the respective framework to be installed to be able to run.
Node.js is by far the best environment for running non-browser JS. I've used Rhino and SpiderMonkey, and there's a pretty huge difference in everything from the basics like how errors are handled to the size of the community using the tool. Node is pitched for "server-side" JS - building server apps in JS. It's great for this. But it works equally well for building command line tools.
The NPM package manager (bundled with Node) provides a nice global directory for finding and installing packages. It works much better than other language equivalents like PECL / Pear / CPAN / etc. Several high quality tools like JSHint, The Jade templating language, and the CoffeeScript compiler are all already available through NPM/Node:
npm install -g jshint, coffee-script, jade
jshint my_code.js
jade < my.jade > my.html
For args parsing, there are packages like commander.js. I currently use a heavily extended version of Commander in my underscore-cli command-line tool.
For messing with JSON or for doing command-line JS work (similar to "perl -pe"), check out underscore-cli - It's a really powerful tool for processing JSON data, processing underscore templates, and running JS expressions from the command-line. I use it for 1001 different things that would otherwise be really annoying to accomplish.
Rhino is bundled with JDK 1.6, jrunscript.exe in the bin directory will allow you to run any Javascript you want. Since it runs under Java you get access to any Java libraries that you may have.
We use it from the command line extensively. It's very good at that.
One way is to write these utilities as AIR applications - They can be written in JavaScript and need not have a UI. They have access to the command line, and there are existing ActionScript 3 libraries that can handle FTP etc. These ActionScript APIs can be called from JS, in AIR applications. AIR applications also have access to a sqlite database.
jslibs is a good standalone JavaScript runtime that support many 3rd party open source libraries like zlib, SQLite, NSPR, libiconv, libTomCrypt, OpenGL, ...