JS.next: A Manager's Guide

Chapter 4. Where to Start

It’s settled then. You are going to begin integrating ES6 into your projects. Still, you may have some questions about where to start. Or maybe you would like some best practices for your organization. The following suggestions may make this transition easier.

Incidental Functionality First

Your team will need to gain some momentum when using these new constructs, especially if you’re catching up on your innovation debt. I suggest you pick a portion of your app that isn’t considered “core functionality.” Let your team train up on areas of your app that are value-add and provide incidental functionality. This will allow you to leverage your team’s training process while minimizing any risk involved.

Graceful Degradation

Some browsers have more capabilities than other browsers. Maybe you’ve decided that you want to use some functionality that doesn’t exist in all browsers. In other words, your users will have a different experience on your site, depending on their web browser. When implementing different features for different browsers, there are two competing ideologies:

Progressive enhancement suggests that you begin by building your site for the worst-case and most basic scenario. Once that exists, you add functionality for the more capable browsers.

Graceful degradation suggests that you build your app for the most capable browser. Once that exists, you find alternate functionality or turn off the functionality for less-capable browsers.

I recommend that you start out by implementing graceful degradation. Allowing your team to focus on the best possible scenario will produce the best possible experience for your customers. You may then combine your best-case scenario with Traceur-Compile (see Traceur-Compiler), Chrome Frame (see Chrome Frame), and/or traditional monkey-patching. Combining these technologies may even enable the worst of browsers to run the latest ES6 code.

Note

Monkey-patching is the term used to describe the act of modifying JavaScript’s default behavior. An example of monkey-patching could be adding JSON.parse and JSON.stringify functionality into IE7. Because IE7 was released prior to the explosion of JSON, it doesn’t have support for the JSON API. However, a handful of libraries out there monkey-patch IE7 so that it has JSON.parse and JSON.stringify functionality. Monkey-patching is also known as duck-punching and polyfilling.

However, please do not shy away from shutting off different pieces of your site to users who are on older browsers. As discussed previously, herding your users to an evergreen (auto-updating) browser will reduce your development and maintenance costs. Further, as a member of the web community, we all have a duty to protect our users. While modern browsers are much faster and more capable than older browsers, that isn’t why you should help your users upgrade to a better browser. You should help them upgrade so that they can use a browser that has the latest security patches and updates. You should help them upgrade so that they can be safe.

Note

Evergreen browsers automatically update themselves. Additionally, evergreen browser remain up-to-date, regardless of your operating system. This ensures that you have the freshest speed, security, and functionality enhancements available.

Train Your Teams

Once you’ve seriously committed to training your team, those commitments should be made very apparent to your team. Your commitment should be more than simply giving them goals on their annual performance review or buying each member a book and asking them to read it. Create a culture based on the results of the training. Recognize, reward, and promote individuals who are leading the way and helping others to learn.

The number of pure JavaScript conferences is increasing. Both locally and nationally, these conferences are becoming viral. Find two or three of them and send your teams. If the conference is during the work week, pay your employees to attend the conference. Don’t require your team to use vacation days to go to a conference. If the conference is on a weekend, make strong recommendations that they attend. Have team members return and present their findings to the rest of the team. If you have to, offer comp time for those who use weekends to attend conferences.

Do everything in your control to get your teams trained and talking to each other about JavaScript.

Traceur-Compiler

Some developers want a way to write ES6 code and have it magically converted into a version of JavaScript that even IE6 can speak. If that thought has ever crossed your mind, then you are in luck. Google has a project called Traceur-Compiler. The goal of the Traceur-Compiler project is to allow developers to learn the latest version of JavaScript, without having to worry about their code breaking in older browsers. The Traceur-Compiler takes your latest ES6 code and converts it into code that even “oldIE” can speak.

Several other projects have the same aim as Traceur-Compiler. As I looked around, I found Traceur-Compiler to be the most powerful of all those projects. It comes complete with a gruntjs plugin to make coding in ES6 very easy. However, by the time you read this, another library may have taken Traceur-Compiler’s place atop the list of the best ES6 transpilers. If you decide to go this route, please do some research first.

Chrome Frame

While the rest of us were dreaming about the day when “oldIE” JavaScript would disappear completely, Microsoft went to great lengths to ensure that it will be around for a long time. Among the many steps taken by Microsoft was that of enabling “compatibility mode” in Internet Explorer. Compatibility mode makes a newer IE act like it is an older version of itself. For example: in IE9, you can enable IE7 compatibility mode. This will make IE9 act like it’s IE7. As puzzling as that may sound, Microsoft went to some lengths to enable this functionality.

Fate, it seems, is not without a sense of irony.

— Morpheus

Using Microsoft’s own backdoor into compatibility mode, Google created a way to make the IEs think that they are Google Chrome. Google does this by having your users install a small plug-in called Chrome Frame. After Chrome Frame’s quick install, your IE users can have the same experience as your Google Chrome users. The bonus is your users will not need admin rights to install this Chrome Frame dependency.

Once your users have installed Chrome Frame, all you need to do is include a simple Chrome Frame meta tag in the head your HTML. That will tell IE to act like it is Chrome. When the Chrome Frame meta tag isn’t present, IE will continue to act like IE. This means that you will need to keep your jars of paste locked up, as IE may still try to eat them.

If your users are internal customers, and you have the ability to automatically push Chrome Frame out to them, it is a must have. When you have control over their environment, pushing Chrome Frame can be a completely transparent process. If your users are not internal, then your users will need to manually install Chrome Frame. There are many libraries available that your team can use to walk your users through the Chrome Frame install process.

Your programmers aren’t the only people who will thank you for implementing Chrome Frame. Your designers will thank you as well. Chrome Frame overrides IE’s rendering engine as well as its JavaScript engine. Page elements will suddenly have rounded edges and gradients. Having been part of a large Chrome Frame rollout in the past, I can tell you that many of our users noticed the improvements immediately. Pages that took several seconds to load in the past, began loading in under a second.

Summary

Every organization is different. Each team will need to set its own pace. With innovation in general, constant progress is key. Aggressively seek out new opportunities to help your projects stay on track with your innovation goals. The total reduction in costs for standardizing on modern technologies will make your efforts worth it. The age of “oldIE” isolation has already begun.