Appendix A. Service Workers: A Great Opportunity to Adopt ES2015

ECMAScript 2015 (also known as ES2015, ES6, and ES6 Harmony) is the 2015 update to the ECMAScript language specification—the specification that JavaScript implements—and the first major update to it since ES5 in 2009.

ES2015 adds many new language features to ECMAScript (and thus, to JavaScript), including arrow functions, constants, promises, classes, modules, for/of loops, template strings, and much more.

Quite simply, it makes writing JavaScript a much more pleasant experience and helps you write more elegant code.

Unfortunately for developers looking to write with ES2015, many users still use older browsers that do not fully support ES2015.

This problem can be solved by transpiling ES2015 code to older ES5 code at build time using a tool like Babel. This process takes your code and changes any syntax that isn’t compatible with ES5 into one that is compatible. Unfortunately, adding this extra build step is something many developers are not comfortable with, or choose not to do, and so they are unable to enjoy these new language features.

Service workers, however, provide a great opportunity to get started with ES2015. As all browsers that currently implement service workers also implement most ES2015 features, you can safely use these new features in your service worker file—no transpilation needed.

We have already used a few ES2015 features in our service worker, including promises, string.includes(), string.startsWith(), and more. Let’s see a few other ways we can improve our service workers with ES2015.

Template Literals

Template literals make creating multiline strings, and strings that contain variables, much more elegant.

Unlike strings, which are enclosed in double or single quotes, template literals are enclosed by backticks (`). Within these backticks, you can include multiline strings and placeholders. A placeholder is indicated by a dollar sign and curly braces, and can contain variables or expressions.

Compare how you would compose a string using normal strings versus the same message composed using template literals.

Multiline string with expressions using normal strings:

var message =
"Nightly rate: " + rate + "
"+
"Number of nights: " + nights + "
"+
"Total price: " + (nights * rate);

Multiline string with expressions using template literals:

var message =
`Nightly rate: ${rate}
Number of nights: ${nights}
Total price: ${(nights * rate)}`;

Arrow Functions

Arrow functions provide a shorter syntax to defining functions, often resulting in code that is much more elegant and expressive.

Note that unlike old-school function expressions, arrow functions share the same this as their surrounding code.

Compare these two implementations of code that respond to events with content from CacheStorage or by fetching it from the network.

Old-school functions:

event.respondWith(
  caches
    .open("cache-v1")
    .then(function(cache) {
      return cache.match(event.request);
    })
    .then(function(response) {
      return response || fetch(event.request);
    })
  );

The same logic, with arrow functions:

event.respondWith(
  caches
    .open("cache-v1")
    .then(cache => cache.match(event.request))
    .then(response => response || fetch(event.request))
);

Object Destructuring

Object destructuring lets you unpack specific values from an object into distinct variables:

var reservationDetails = {nights: 3, rate: 20};
var {nights, rate} = reservationDetails;
console.log("Number of nights", nights);
console.log("Nightly rate", rate);

One common use for this is to access specific attributes in an object passed to the function as one of its arguments.

Compare these two examples that show how you would access properties of an object passed to a function, with and without destructuring.

Passing an object as an argument:

var reservationDetails = {nights: 3, rate: 20};
var logMessage = (reservation) => console.log(
  `${reservation.nights} nights: ${reservation.nights * reservation.rate}`
);
logMessage(reservationDetails);

Destructuring an object passed as an object:

var reservationDetails = {nights: 3, rate: 20};
var logMessage = ({nights, rate}) => console.log(
  `${nights} nights: ${nights * rate}`
);
logMessage(reservationDetails);

More ES2015

These samples are just a few of the many new language features introduced in ES2015 and show only a fraction of what is possible.

I encourage you to explore ES2015 further. Your code, and your enjoyment of it, will benefit tremendously.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset