Javascript in the Browser(s)

Posted by Anthony Tilelli on August 29, 2020

JavaScript runs different across browser vendors, versions, and extensions, making it difficult to determine if code will run as intended. To minimize the chances of an issue, we must employ strategies:

  • Learn about the audience we will be targeting.
  • Converting newer syntax to older, more adopted versions and add new functions if needed.
  • Check for the existence of specific browser APIs before using it.

Get to know your Audience

Selecting who will use your website is one of the first steps to inform its design. Designing for the general public have different considerations than a corporate only audience. The general public will generally use a variety of browsers and technology stack while a corporate environment will be more uniform.

If you do not already have a website and traffic, it is helpful to look at globals stats tracker or similar sites. Once you have your website and traffic, you can use analytics tools to analyze your usage.

While it may be tempting to try and target 100% of all users’ configurations, it can be exceedingly difficult. Setting reasonable requirements will help with sanity and ensure a stable product. Once you have browser data, you can look into what the oldest required browser supports. Site such as CanIuse or MDN will show how browser adoption. For example, BigInt is, at this time, at a lower adoption and should likely be avoided to be relied on.

Converting modern JS to browser friendly code

You may still want to use modern syntax and functions in javascript in your development to take advantage of advancements. BabelJS will transpile your code into browser-friendly syntax. Additionally, BabelJS will let you take advantage of non-ECMAScript standard javascript syntax, such as type-checking offered by Facebook Flow and React JSX.

If you need to use a function that is not defined om older browsers, then a Polyfills can be used to add it. Polyfills are libraries that check for a set of functionally, and if it doesn’t exist, it will add it’s version, for example, Fetch Polyfill. Since polyfill requires users to download additional files and run more code, it can slow down the start-up of a user’s experience, and its usage should be strategic.

Babel Js example

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

Checking for browser support

Even when using BabelJS and Polyfill, specific API may be missing or not add-able via polyfills, such as WebStorage API/Cache and Service Workers. In this case you will need a test for the supportability at runtime. If WebStorage API is not available, you may want to store your data in cookies. ServiceWorkers availability can vary based on many factors, such as secure context and if the user is in private browsing mode (firefox).

Example of Testing for WebStorage

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

Example of Testing for Service Workers

if ('serviceWorker' in navigator) {
  // Supported!
}