DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > RequireJS and Google Analytics' Innovative Async Script Loaders

RequireJS and Google Analytics' Innovative Async Script Loaders

Mitch Pronschinske user avatar by
Mitch Pronschinske
·
Mar. 18, 10 · Web Dev Zone · Interview
Like (0)
Save
Tweet
10.08K Views

Join the DZone community and get the full member experience.

Join For Free
As the code complexity of websites grow and assembly gets harder, these sites that more closely resemble web apps require more discrete JavaScript files and modules for development with optimized code in a small number of HTTP calls.  Node.js is a great JS framework for asynchronously running apps, but it starts with synchronous require() calls, which is a problem for require()-esque loader code.  Two projects that help out in these situations: RequireJS and an innovative asynchronous loader for Google Analytics.

RequireJS
RequireJS implements the CommonJS Transport/C proposal API.  This is a loader for plain JS files and more defined modules.  It works best in the browser, but it can also be used in other JavaScript environments like Rhino.  It allows easy debugging because it uses plain script tags for loading.  When the file defines a JS module via require.def(), RequireJS facilitates better CommonJS support and can load multiple versions of a module in a page.  RequireJS also supports module modifiers and has a plugin system for things like i18n string bundles and text file dependencies.

Require JS offers a solution for the require()-esque loader code with the ability to load nested dependencies, ease the use of front-end development with an optimization tool that helps deployment, and a form of #include/import/require.  Dojo, LABjs, and CommonJS script loading APIs don't solve all of the problems that RequireJS solves.  Here is the result of what RequireJS does:
// code that runs asynchronously when the library is loaded
require(["some/script.js"], function() {
//This function is called after some/script.js has loaded.
});

// defining the module and dependencies
require.def(
// The name of this module
"types/Manager",

// The array of dependencies
["types/Employee"],

// The function to execute when all dependencies have loaded. The arguments
// to this function are the array of dependencies mentioned above.
function (Employee) {
function Manager () {
this.reports = [];
}

// This will now work
Manager.prototype = new Employee();

// return the Manager constructor function so it can be used by other modules.
return Manager;
}
);

Google Analytics Asynchronous Tracking
Blocking was a longstanding problem for Google Analytics, but a new asynchronous loader is changing all that.  The Asynchronous API allows you to start pushing commands immediately because you can create an array that uses the push() method to put commands on a queue.  Once the Google Analytics code is done with its asynchronous loading, it takes over the array by wrapping the standard methods.  After that, the Asynchronous API can take the commands and send them back to Google Analytics and push() can perform more tasks.

This snipped is the minimum configuration needed to track a page asynchronously in Google Analytics:
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();

</script>
Google (verb) Analytics Loader (equipment)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Application Scalability — How To Do Efficient Scaling
  • The Right Way to Hybridize Your Product Development Technique
  • What SREs Can Learn From the Atlassian Nightmare Outage of 2022
  • 10 Steps to Become an Outstanding Java Developer

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo