Third-party scripts on Rotten Tomatoes

My selfie

James Turner,

Tags: JavaScript

Open up the browser dev tools on Rotten Tomatoes, and, if you're like me and you're just getting into the world of third-party JS frameworks, you'll be astonished at how many JavaScript files the site downloads. Some of them are clearly custom scripts written by the Rotten Tomatoes development team, but many are third-party scripts created by dedicated and generous web developers the world over.

Below is a sampling of about 20 of these scripts, what they do, whether they're free to download, how big and how up-to-date they are, whether there is an active development team behind them, and what their dependencies are (all at time of writing). I've attempted to organise libraries into similar functions, but there's nothing official about these categories.

I try to be neutral in tone as I go through each script. I feel like I've got a rant brewing about bloated webpages, how there should be something similar to content strategy for the back end of a site, and the importance of progressive enhancement. But that's another blog post. Enjoy!

Workhorse libraries

Some JavaScript libraries are just full of useful stuff which you can use and re-use throughout your project. That's what I mean by a ‘workhorse’ library. One potential advantage is that they appear in thousands of other web projects, so they might already be downloaded on your users' devices.

jQuery

What is it? jQuery is unarguably the workhorse library of the web. It's used in thousands, maybe millions of web pro­jects. One of the main reasons for its popularity is that it makes referencing elements and executing actions incredibly easy, and it has a broad library of func­tions, from event handling to Ajax calls to simple animation.

Is it free? Yes.

How big is it? 84kB (minified).

Is it up-to-date? The latest version, 2.2.3, was released on 5 April 2016. It is maintained by a large team of developers.

What are its dependencies? None.

Download it or get more information: jQuery.

Underscore.js

What is it? Underscore is, in the words of its creators, “a JavaScript library that provides a whole mess of useful func­tional programming helpers”. Its helper functions include all manner of operations on arrays and objects (e.g. sort­ing, arithmetic, primary key gene­ration, random sampling), function binding, and much more.

Is it free? Yes.

How big is it? 5.7kB (gzipped and minified).

Is it up-to-date? Last release was 1.8.3 on 15 April 2015. It was originally created, along with Backbone.js, by the team that built DocumentCloud.

What are its dependencies? None.

Download it or get more information: Underscore.js.

Backbone.js

What is it? Unlike other libraries, Backbone isn't simply a collection of useful functions that you can plug into your project. It encourages a whole different way of thinking. Its model-view-collection (MVC) structure, which divorces raw data from the user interface, looks extremely useful for creating complex web apps, allowing users to do the kinds of things that you'd normally expect from an executable file, from managing a simple task list to media streaming, large-scale project management and education-related services. The Backbone.js site showcases sample projects which demonstrate how it can be used.

Is it free? Yes.

How big is it? 23kB (minified).

Is it up-to-date? Version 1.3.3 was released on 5 April 2016.

What are its dependencies? Underscore.js (essential); maybe also jQuery and json2.js, for supporting older browsers.

Download it or get more information: Backbone.js.

RequireJS

What is it? The world of web design is increasingly seeing the value of building things in modular chunks, and then stitching them together. For HTML, we have CMSs like Wordpress. For CSS, we have preprocessors, like Sass and Less. But what about JavaScript? That's where RequireJS comes in useful. It includes tools which minify and combine all the JS files in your project on the fly, or you can preprocess them with Node.js.

Is it free? Yes.

How big is it? 16kB (minified).

Is it up-to-date? Yes. The GitHub repo is very active.

What are its dependencies? None.

Download it or get more information: RequireJS.

UI libraries

If we want to create sleek, bespoke user interfaces which work on all the devices out there, or which push the boundaries of normal browser functionality, then we're going to need a little help. This category includes JS libraries that speed up the process of building responsive sites, user interface widgets, more powerful animations and more ‘tactile’ websites.

jQuery UI

What is it? A plug-in for jQuery that includes a number of UI-oriented tools, such as dragging and dropping, accordion and date picker widgets, and extended animation functions.

Is it free? Yes.

How big is it? 78kB (minified) for the full library. The custom download allows you to leave out those features that you don't need.

Is it up-to-date? At time of writing, the last release was version 1.11.4 on 15 March 2015.

What are its dependencies? jQuery.

Download it or get more information: jQuery UI.

Bootstrap.js

What is it? Bootstrap is a complete HTML, CSS and JS framework for building responsive sites. JS-driven components include dropdown menus, modal dialogs, tabs and interactive carousels.

Is it free? Yes.

How big is it? 37kB for JS, plus 119kB for CSS (both minified). There is a customisation option if you want a slimmed-down version without all the bells and whistles.

Is it up-to-date? Current version is 3.3.6, released November 2015. Watch out for version 4, coming soon, which I guess will feature new CSS developments, such as flexbox and grid.

What are its dependencies? jQuery.

Download it or get more information: Bootstrap.

BezierEasing

What is it? A small library that helps to calculate cubic bezier curves for animations.

Is it free? Yes.

How big is it? 3kB.

Is it up-to-date? Last update was on March 2016. Project by Gaëtan Renaudeau.

What are its dependencies? None.

Download it or get more information: BezierEasing on GitHub.

Marketing and analytics libraries

Do you want to know how popular your website is? Are you testing different versions of your site to see which is the most successful? Are you interested in promoting your site on other websites, or including adverts customised for your users? If so, these libraries are for you.

Optimizely

What is it? Optimizely appears to be an incredibly powerful A/B testing tool. You can make changes to your website in the browser, save each change as an experi­ment, and then start collecting data on which experiments were more suc­cessful (e.g. yielded more conversions). The output is similar to Google Analytics, but instead of just one data stream, you can set up multiple versions of the same site, and compare versions side-by-side. On big sites, this data can inform even minute design decisions, and could increase sign-ups or sales by a con­siderable amount. Here's a marketing video which explains more about it.

Is it free? The Starter plan, which allows you to test one site, is free. The Enterprise plan, which allows you to test multiple sites and customise the data, requires a conversation with the sales team (in other words, it's probably quite expensive).

How big is it? The script for Optimizely on Rotten Tomatoes is 209kB.

Is it up-to-date? Yes. This is a commercial tool, so I'm assuming it's always up-to-date and fully supported.

What are its dependencies? As far as I can see, none.

Download it or get more information: Optimizely.

Adobe Analytics

What is it? Formerly called Omniture SiteCatalyst, this is an analytics service that collects in­formation on the users visiting your site.

Is it free? No.

How big is it? Script on Rotten Tomatoes is 49kB.

Is it up-to-date? Yes.

What are its dependencies? None.

Download it or get more information: Adobe Analytics.

Google Tag Manager

What is it? Google Tag Manager is a way for non-web developers (e.g. marketing departments) to set up and manage multiple analytics scripts, including non-Google services, on their web sites. You add just one script, and then use the Google Tag Manager interface to decide which analytics tags are included on each page. There is a YouTube video demonstrating what Google Tag Manager does.

Is it free? Yes. Requires sign-up.

How big is it? The script on Rotten Tomatoes is 163kB.

Is it up-to-date? This service is provided by Google, so I'm assuming support is still current.

What are its dependencies? None.

Get more information: Google Tag Manager.

Quant.js

What is it? This library was created by Quantcast. As their website says, you can “get the most accurate demographic and lifestyle insights for any audience you want to analyze”. It's about delivering web adverts that are more tailored to end users. Interestingly, there is a page on its website which informs us that Rotten Tomatoes gets a total of 2 million visitors per month in the UK (1.2 million on mobile devices).

Is it free? I would imagine it is priced at a range appropriate for medium- to large-scale web projects.

How big is it? The script on Rotten Tomatoes is 8kB.

Is it up-to-date? Since this is a subscription service, I would assume it is up-to-date and well-supported.

What are its dependencies? None.

Download it or get more information: Quantcast.

Outbrain.js

What is it? Outbrain is a service that promotes your brand and content on other websites. For example, when a user reaches the end of an article or blog post on another site, they might see a list of links to other, hopefully related, articles that are promoted by Outbrain. One of these articles could be yours.

Is it free? No. Starts at $10 per day.

How big is it? The script on Rotten Tomatoes is 49kB.

Is it up-to-date? Yes.

What are its dependencies? None.

Download it or get more information: Outbrain.

Device handling libraries

The most popular way to implement responsive web design is to use CSS @media queries to measure the screen width. If only there were a way to detect with more precision the kind of device (mobile, tablet, desktop), the orientation of the device (portrait, landscape), and the operating system (Windows, iOS, Android, etc). With this category of libraries, we do.

device.js

What is it? Not to be confused with the other device.js, this library detects the type of device, orientation and operating system. It works by inserting CSS classes into the <html> tag, e.g. <html class="android tablet landscape">. Conditional JavaScript is also supported.

Is it free? Yes.

How big is it? 3kB (minified).

Is it up-to-date? Last updated April 2015. Solo project by Matthew Hudson.

What are its dependencies? None.

Download it or get more information: device.js on GitHub.

Hammer.js

What is it? Two small libraries which “add support for touch gestures to your page, and remove the 300ms delay from click”.

Is it free? Yes.

How big is it? 4kB for hammer.js, plus <1kB for hammer-time.js.

Is it up-to-date? Version 2.0.6 was released in January 2016. Originally by Jorik Tangelder, it is supported by a small team of volunteers.

What are its dependencies? None.

Download it or get more information: Hammer.js.

Content formatting libraries

This category includes scripts that manipulate the way content displays. Specifically, it includes line clamping and date formatting libraries. In situations where an element contains more text than space allows, line clamping hides (or clamps) surplus text from view and replaces it with an ellipsis (…) and/or a ‘read more’ link. And, as the name suggests, date formatting includes all manner of functions for retrieving, performing calculations on, and presenting dates and times.

Clamp.js

What is it? A simple JavaScript function which replaces excess text with an ellipsis. You can tell it to clamp after a specified number of lines, at a specified container height, or automatically (when the container height is controlled by CSS, for example).

Is it free? Yes.

How big is it? 2kB.

Is it up-to-date? The code was last tweaked in November 2013. It is a one-man project by Joseph Schmitt.

What are its dependencies? None.

Download it at or get more information at this post on Joe Schmitt's blog Introducing Clamp.js or at the clamp.js GitHub repo.

jQuery.dotdotdot

What is it? A more powerful library that uses jQuery syntax and includes a wider range of options. For example, you can add a ‘read more’ link at the end, or use it to truncate long URLs. You can also add pre-defined CSS classes to elements directly in HTML, and the library will handle these accordingly.

Is it free? Yes.

How big is it? 7kB.

Is it up-to-date? Last release was in March 2016, so it's quite up-to-date. It was originally a one-man project by Fred Heusschen, but has since attracted other contributors.

What are its dependencies? jQuery.

Download it either from the jQuery.dotdotdot website or from the jQuery.dotdotdot GitHub repo.

Readmore.js

What is it? This line clamping library adds an extra affordance to the mix. When you click on the ‘read more’ link, it increases the size of the container to reveal the whole text.

Is it free? Yes.

How big is it? 4kB (minified).

Is it up-to-date? Last release was in November 2015. Solo project of Jed Foster.

What are its dependencies? jQuery.

Download it or get more information: Readmore.js website or Readmore.js GitHub repo.

Moment.js

What is it? A whole set of functions for parsing and formatting dates. It also includes international date formats, so if you want your dates to display in any of a hundred different languages, from Afrikaans to Welsh, this is what you need. You can take it even further with a wide range of plug-ins for things like fiscal dates, Hijri calendar dates, or working with date ranges.

Is it free? Yes.

How big is it? The basic version is 14kB (gzipped and minified). The with-locales version is 52kB.

Is it up-to-date? Support is current (the last commit on Github was 23 minutes ago, at time of writing). It has fantastic documentation, and a wide range of install options.

What are its dependencies? None.

Download it or get more information at the Moment.js website or the Moment.js GitHub repo.

User authentication and cookie libraries

This category includes libraries which help to distinguish human users from automated bots visiting your site, as well as libraries which download temporary cookies.

Recaptcha.js

What is it? A Google product that spots whether a user is a real human or a bot.

Is it free? Yes. You need to sign up for a site key code.

How big is it? The script on Rotten Tomatoes is 115kB.

Is it up-to-date? Yes.

What are its dependencies? None.

Download it or get more information: Google reCAPTCHA.

jQuery Cookie

What is it? A library of functions that allows you to quickly add and read cookies. jQuery Cookie has been superceded by JS-Cookie, and is no longer supported. JS-Cookie does the same job without the jQuery dependency.

Is it free? Yes.

How big is it? 3kB.

Is it up-to-date? Very up-to-date. JS-Cookie was last updated in April 2016.

What are its dependencies? None (or jQuery for the now-obsolete jQuery Cookie).

Download it or get more information: jQuery Cookie. There is also a newer version with no jQuery dependency: js-cookie.

Conclusion

I have mixed feelings about these web development gems. On the positive side, I've discovered a ton of tools that I can plug into my projects, thanks to the dedication of developers around the world. On the downside, I've also learned that big, high-traffic websites seem to be pretty gung-ho about cramming more and more scripts into their web pages. Who's to say that they don't have excellent reasons for including so many scripts? And it's not that I'm singling out Rotten Tomatoes; I'm pretty sure everyone does it.

There are a couple of words of warning about using third-party scripts. Firstly, as the js-cookie site says, don't use GitHub as a CDN, by including direct links to raw files, for example:

<script src="https://raw.githubusercontent.com/js-cookie/.../js.cookie.js"></script>

The reason is that they are text files, and as such they may be blocked by Internet Explorer.

Secondly, in any web project, consider which third-party scripts you really, really can't live without before including them. jQuery UI, for example, is a fairly big library, and the chances are you won't need all of it for your project. Can you use the ‘custom download’ option to trim away the bits you don't need? It's not just file size that's important, but also the number of HTTP requests. A tool like RequireJS can be a great way to compact all your JS into one file. And if it's that important, and it's a relatively small file, you might want to include the script in your HTML as internal JS, rather than as an external file.

So, what are your favourite third-party scripts? How do you decide which libraries to include and which to leave out? How do you cut down on file size, disused code or HTTP requests? And what's your take on big sites like Rotten Tomatoes and the mind-boggling number of scripts it uses?

Skip to navigation