A Server-Side Assist for Loading Client-Side JavaScript Code

A Server-Side Assist for Loading Client-Side JavaScript Code

f you’re at all involved with Web development, you know about AJAX (Asynchronous JavaScript and XML). And you probably noticed the astonishing proliferation of AJAX frameworks, which provide a unified set of libraries for writing AJAX applications more easily.

One of the reasons frameworks are so important is that JavaScript isn’t quite ready for programming in the large. Don’t get me wrong?the language is beautifully designed, but some of the subtleties of in-browser programming, to say nothing of cross-browser portability issues, can make JavaScript development something less than smooth. One example is its poor support for the include statement, which enables one file to draw in the contents of another?usually a file containing a useful library. Just about every language has a mechanism for this, and various Web technologies have a number of different ways of providing include functionality.

The AJAX frameworks solve these problems to one degree or another. Each one attempts to hide platform incompatibilities behind abstractions and adapt some of the metaphors of traditional programming language environments into the browser. However, the browser may not be the proper place to deal with the include limitation. This 10-Minute Solution suggests that you implement include on the server side (using a simple CGI script) rather than trying to get browsers to do it.


JavaScript doesn’t have a function that loads and executes a library file in the middle of executing a main program file. How do I implement this function in JavaScript when it doesn’t have an include directive?


Implement include on the server side using a simple CGI script.

Asynchronous Loading

Include is a pretty simple concept, so you might wonder why this would even be an issue. The answer may lie in the design of early browsers, as well as the more modern browsers that were derived from them. Asynchronous communications has always been essential to Web technology. When a browser loads a Web page, it finds tags that instruct it to load other items?images, applets, frames, scripts, and so on. These items, of course, can be on other servers. Because the browser is loading a number of items from potentially different locations, it loads them asynchronously and in parallel. That way, you can see the Web page that you have loaded from a very fast site, even while waiting for a huge image from a slow site to appear inside that page.

Browsers are so carefully built around asynchronous interaction that it can be tricky to force synchronous loading. If you’ve done any client-side Java programming (especially in the early days of Java), you probably remember how complicated image loading was. You couldn’t just call a function that returned a fully loaded image. Instead, you would initiate a load, and the loading process would invoke callbacks to inform you about the progress of the load, culminating in a final message that told you everything was loaded.

Many programmers wrote their own libraries to take care of all of this (sometimes using threads), so that they could just call a function that returned a fully loaded image. But it was easy to get this code wrong, especially when trying to run the code on different platforms with different patterns of I/O behavior. Finally, such functions moved into the standard Java libraries, but it took quite a while.

So, how does this apply to JavaScript include? It’s pretty much the same thing. JavaScript doesn’t have a function that loads and executes a library file in the middle of executing a main program file. It doesn’t have include as we know it from other languages.

Asynchronous Loading of JavaScript

You can have one script load another in a number of ways. The most common is to simply write a script tag to the end of the document:

  document.write( "" );

The problem with this is that mycode.js is going to be loaded later. The following example shows why this is a problem:

// ...document.write( "" );mylibrary_function( 1, 2, 3 );// ...

This code attempts to load mylibrary.js and then call a function from that library called mylibrary_function(). But the first line only starts the include. It tells the browser to start loading and then continues to the second line, which tries to call the function. But the library isn’t loaded yet, and the function isn’t defined. So the call to mylibrary_function() will fail. (Actually, it probably will fail. I can’t really predict what the browser will do, because the many JavaScript implementations in the numerous browser versions in use today are not consistent.)

This kind of include, then, is a hack. You’ll find some workarounds for these problems as well, such as sleeping or breaking scripts into pieces, but these are also hacks, and they have still more problems of their own.

The XMLHttpRequest Solution

Most AJAX frameworks get around these problems by implementing some kind of include statement. They usually implement it with the XMLHttpRequest object, which is present in the most recent browsers.

The stated purpose of XMLHttpRequest is indicated by its name. It loads an XML file from a server using HTTP. However, it can be used to load any kind of file, including a .js file containing JavaScript code. Pass the loaded code to eval(), and it’s ready to be called.

However, XMLHttpRequest isn’t perfect. It exists in the latest browsers, but not everyone runs the latest browsers, so that won’t do. And you may be subject to the usual complications caused by different browser implementations.

Implement include() on the Server Side

After wrestling with these problems for a long time, I found a solution that took care of them completely. It also had the added benefit of making the loading process much faster. The answer was to implement include() on the server side. It’s important to realize that this is not the same thing as server-side include (SSI), which is a way of allowing .shtml files to include other .shtml files. I’m talking about implementing include on the server side for code that is activated on the client side.

For demonstration, take the following example. Although it is stripped down to the bare essentials, it illustrates the problems you would have when loading a large program.

Suppose you have one Web page called page.html:

JavaScript Include

This page loads the main JavaScript file of your JavaScript application: “main.js” loads the library script “mylibrary.js” and then calls main(), which in turn tries to use the library as follows:

// main.js// This doesn't always work.document.write( "" );document.close();function main(){  alert( "Here's main!" );  mylibrary_function();}main();

I structured the program this way because it reminds me of the familiar structure I have used in other languages. Unfortunately, it doesn’t work. By the time you want to use the code in “mylibrary.js”, it still hasn’t loaded.

Server-Side include

So, let’s change gears and implement the include on the server side. Here’s how it works:

  1. Instead of loading the URL (http://myserver.com/page.html), you use a CGI script (http://myserver.com/jsload.cgi?file=main.js).
  2. The jsload.cgi script takes a single CGI parameter, which names a JavaScript file to load?in this case, “main.js”.
  3. The jsload.cgi script reads main.js from the filesystem.
  4. The jsload.cgi script scans main.js for include("somefile").
  5. The jsload.cgi script replaces include("somefile") with the contents of the file (taking care not to get into an infinite loop in the case of mutually recursive includes).
  6. The jsload.cgi script sends the code to the browser.

This technique is primitive, but it works nicely and it’s quite fast. The speed probably comes from the fact that it creates only one connection. Using the traditional script-tag method may create a new connection for each script.

I ran informal performance tests with the browser and Web server on the same machine, and the results were impressive. My technique sped up the loading of 40 files (about 36k total in size) by a factor of 10.

The Server-Side Script

The following listing shows jsload.cgi, which is really a stub program?it determines which script is being loaded and then calls JSInclude::load():

#!/usr/bin/perluse CGI;use JSInclude;print "Content-type: text/html

";# What script are we loading?$cgi = new CGI();$file = $cgi->param( "file" );$file = "main.js";# Load the script.JSInclude::load( $file );
Security Warning: The jsload.cgi script, as shown above, is not secure. Since it takes a filename as a parameter, it might be possible (on some servers) to load files that shouldn’t be loaded, potentially providing a backdoor vulnerability. Please make sure your permissions are set in such a way that this cannot happen.

JSInclude.pm is where the real action is. JSInclude::load() starts the process by calling include()?that’s the Perl include, not the JavaScript include. Before and after this, however, it prints a preamble and postamble (respectively). These are normally empty, but if you set the '$verbose' variable at the top, the preamble and postamble will time the entire loading process on the client side and display the total loading time.

The following listing shows JSInclude::include():

package JSInclude;my $verbose = 0;sub get_includes( $ ){  my ($filename) = @_;  my @includes = ();  if (open( SRC, $filename )) {    while () {      if (/^s*includes*(s*"(.*)"s*)s*;s*$/) {        my $filename = $1;        push @includes, $filename;      }    }    close( SRC );  }  return @includes;}sub include( $$ );sub include( $$ ){  my ($filename,$already) = @_;  if ($already->{$filename}) {    return;  }  $already->{$filename} = 1;  my $includes = get_includes( $filename );  foreach my $include (@$includes) {    include( $include, $already );  }  if (!open( SRC, $filename )) {    print "Can't open '$filename': $!
";    die;  }  print qq(
);  close( SRC );}sub preamble{  print <    var ___tt = new Date().getTime();    EOF}sub postamble{  print <    ___tt = new Date().getTime() - ___tt;    alert( "Loading: "+(___tt/1000)+" seconds" );    EOF}sub load( $ ){  my ($startfile) = @_;  preamble();  include( $startfile, {} );  postamble();}1;

This function is responsible for reading the contents of the file, scanning it for include(...) statements, and doing the include itself. The actual scanning is done by the get_includes() function.

Note that the include(...) statement in the JavaScript is never executed; instead, it is replaced (here on the server side) by the contents of the included file. Also note that include() maintains a variable called $already, which is a hash containing the names of all the files that have already been included. Including a file multiple times isn’t necessary, and it in fact can lead to infinite loops.

A Cross-Platform include Hack

In the end, the technique described here is as much a hack as any other technique for JavaScript include. However, it relies only on CGI and Perl?two mature and predictable technologies, so you can expect your includes to work across all server and client platforms.

It’s also a lot faster.

devx-admin

devx-admin

Share the Post:
Software Development

Top Software Development Companies

Looking for the best in software development? Our list of Top Software Development Companies is your gateway to finding the right tech partner. Dive in

India Web Development

Top Web Development Companies in India

In the digital race, the right web development partner is your winning edge. Dive into our curated list of top web development companies in India,

USA Web Development

Top Web Development Companies in USA

Looking for the best web development companies in the USA? We’ve got you covered! Check out our top 10 picks to find the right partner

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with

Software Development

Top Software Development Companies

Looking for the best in software development? Our list of Top Software Development Companies is your gateway to finding the right tech partner. Dive in and explore the leaders in

India Web Development

Top Web Development Companies in India

In the digital race, the right web development partner is your winning edge. Dive into our curated list of top web development companies in India, and kickstart your journey to

USA Web Development

Top Web Development Companies in USA

Looking for the best web development companies in the USA? We’ve got you covered! Check out our top 10 picks to find the right partner for your online project. Your

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the state. A Senate committee meeting

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor supply chain and enhance its

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with minimal coding. These platforms not

Cybersecurity Strategy

Five Powerful Strategies to Bolster Your Cybersecurity

In today’s increasingly digital landscape, businesses of all sizes must prioritize cyber security measures to defend against potential dangers. Cyber security professionals suggest five simple technological strategies to help companies

Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019 tech firms, as per data

Huawei Electric Dazzle

Huawei Dazzles with Electric Vehicles and Wireless Earbuds

During a prominent unveiling event, Huawei, the Chinese telecommunications powerhouse, kept quiet about its enigmatic new 5G phone and alleged cutting-edge chip development. Instead, Huawei astounded the audience by presenting

Cybersecurity Banking Revolution

Digital Banking Needs Cybersecurity

The banking, financial, and insurance (BFSI) sectors are pioneers in digital transformation, using web applications and application programming interfaces (APIs) to provide seamless services to customers around the world. Rising

FinTech Leadership

Terry Clune’s Fintech Empire

Over the past 30 years, Terry Clune has built a remarkable business empire, with CluneTech at the helm. The CEO and Founder has successfully created eight fintech firms, attracting renowned

The Role Of AI Within A Web Design Agency?

In the digital age, the role of Artificial Intelligence (AI) in web design is rapidly evolving, transitioning from a futuristic concept to practical tools used in design, coding, content writing

Generative AI Revolution

Is Generative AI the Next Internet?

The increasing demand for Generative AI models has led to a surge in its adoption across diverse sectors, with healthcare, automotive, and financial services being among the top beneficiaries. These

Microsoft Laptop

The New Surface Laptop Studio 2 Is Nuts

The Surface Laptop Studio 2 is a dynamic and robust all-in-one laptop designed for creators and professionals alike. It features a 14.4″ touchscreen and a cutting-edge design that is over

5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in Japan. This innovative approach will

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial intelligence (AI) in journalism. These

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this autumn sale has already created

Cisco Splunk Deal

Cisco Splunk Deal Sparks Tech Acquisition Frenzy

Cisco’s recent massive purchase of Splunk, an AI-powered cybersecurity firm, for $28 billion signals a potential boost in tech deals after a year of subdued mergers and acquisitions in the

Iran Drone Expansion

Iran’s Jet-Propelled Drone Reshapes Power Balance

Iran has recently unveiled a jet-propelled variant of its Shahed series drone, marking a significant advancement in the nation’s drone technology. The new drone is poised to reshape the regional

Solar Geoengineering

Did the Overshoot Commission Shoot Down Geoengineering?

The Overshoot Commission has recently released a comprehensive report that discusses the controversial topic of Solar Geoengineering, also known as Solar Radiation Modification (SRM). The Commission’s primary objective is to

Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing pandemic. This major investment, which

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs that could dramatically change the

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you choose. For example, a self-hosted

Battery Investments

Battery Startups Attract Billion-Dollar Investments

In recent times, battery startups have experienced a significant boost in investments, with three businesses obtaining over $1 billion in funding within the last month. French company Verkor amassed $2.1