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.
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.
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.
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.
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.
Fate, it seems, is not without a sense of irony.
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.
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.