Prepare for a future without Internet Explorer

For years, IT organizations have been tied to Microsoft’s Internet Explorer browser, which for years was the standard Web browser. But IE fell further and further behind in terms of modern HTML compatibility. And as mobile devices and Macs grew in popularity, its proprietary technologies like ActiveX and Java versions shifted from being powerful tools to balls and chains that kept expensive-to-update specialty apps from working in a mobile, cross-platform world. The compatibility differences from one version of IE to the next further complicated the situation.

Microsoft has spent several years urging enterprises to move to the latest versions of IE, to little avail. Instead, usage of Google Chrome, Apple Safari, and Mozilla Firefox have soared, with many companies even standardizing on IE for legacy usage and Chrome for modern usage.

Microsoft has now taken a radical new tack in Windows 10: Introduce a new browser, called Edge (what had been code-named Project Spartan), that jettisons the legacy technologies and adopts much more of the modern HTML specification. Edge is a significant refactoring of Microsoft’s Trident HTML rendering engine, focusing on the HTML5 specification, and dropping much of the legacy of earlier Internet Explorer releases. It’s essentially Microsoft’s Chrome or Safari.

As Windows 10 rolls out and (as Microsoft hopes) displaces Windows XP, Windows Vista, Windows 7, and Windows 8, we’re going to see older, less-capable, and buggy IE versions fade away. The old Trident rendering engine will still be available in IE11, but unless you’ve set the appropriate group policies, Windows 10 will default to the Edge browser. It’s clear that IE11’s inclusion in Windows 10 is as a transition aid; It should not count on its existence for much longer.

Microsoft’s move to Edge will force IT to address the same issues that Chrome, Firefox, and Safari have already raised: dropping legacy IE technologies can cause problems for existing sites and services. If you’ve been building sites that are designed for IE6 or IE7, you’re going to have issues with a modern browser like Edge, as it won’t support all many old APIs and features.

Your compatibility stopgap in Windows 10: IE11

Windows 10 has some support for older sites and services through IE11’s Enterprise Mode, which is best thought of as a IE8 emulator. It’s a very good emulator and brings back numerous features, like CSS Expressions, that have been deprecated in previous IE releases. It even reports itself as IE8 to ActiveX, allowing older controls that rely on version checks to continue running. But Enterprise Mode runs slowly compared to the standard IE11.

You’ll still have to make changes to sites to run in Enterprise Mode. Older versions of IE handled key HTML directives differently, either due to bugs or a now-obsolete understanding of what the W3C meant by a specific standard, including how it handles the key doctype directive. Luckily, those changes can be very small; in many cases altering one line of HTML can help an IE6-specific site work in newer browsers.

It’s easy to test whether Enterprise Mode is necessary for your sites or content: Start by testing in IE11’s native rendering engine. If the code doesn’t run, then try it in Enterprise Mode. If you still have problems, you can turn on IE’s Compatibility View to enable older content to run in its limited IE7 support.

Microsoft seems to assume that enterprises will run nonmodern Web apps internally for some time to come, since a new group policy setting redirects all intranet traffic from Edge to IE11.

IE11 with its Enterprise Mode is at best a backstop. It gives you breathing room — for your Windows users, anyhow — while you consider how to approach modernizing sites and applications for the latest generation of browsers. Adding an emulation layer brings a performance penalty, and while IE11 is a lot faster than IE8, its Enterprise Mode is slower than it normally performs.

The approach works, but you shouldn’t rely on it for the long term or for Web services you make available to Android, iOS, and OS X users, which covers most customers and many employees.

How to rebuild your services for the plug-in-free Web

The sustainable approach is to refactor your Web apps and services for the modern Web, both desktop and mobile. If you haven’t already done so for Chrome, Firefox, or Safari compatibility, you’ll need to do it for Edge compatibility.

Back in the early days of the Web, browsers were –l to be honest — dumb. They merely rendered the HTML they were sent, displaying images as required and offering forms for input to remote servers. Interactivity was for forms and CGI scripts. But as demands on the Web grew, and browsers became more and more important, we started to use them as applications in their own right — and as hosts for other applications.

Microsoft’s ActiveX technologies arrived with IE3, using the object tag to embed code in Web pages. That code could be your own COM Windows code, or it could be Java or Adobe Flash. With access to a page’s document object model and the ability to step outside a browser’s security sandbox, technologies like ActiveX became popular for both internal and external applications — as well as offering a route into corporate networks for malware. Another technology, Browser Helper Objects, was used by toolbars and some plug-ins, giving them access to the DOM. It too has been used for malware, as well as by intrusive toolbars and to hijack browser search.

The way browsers are built and work has changed. Security has become increasingly important, and as both HTML5 and JavaScript have added features, the need for plug-ins has faded. That means the days of the plug-in are numbered, and it’s time to stop relying on native code in your browser.

Windows 10’s Edge follows the Metro version of Windows 8’s IE10 in not supporting ActiveX plug-ins or Browser Helper Objects. (IE10 for the traditional Windows Desktop did support ActiveX.) Support for Flash is baked in, but with Flash no longer core to Adobe’s Web portfolio, it’s likely only to be used by sites that need an encrypted video stream.

It’s not Microsoft alone walking away from the plug-in. Google is doing the same with Chrome’s plug-in support, focusing instead on JavaScript/HTML-based extensions, while Mozilla’s work on its JavaScript precompiler lets JavaScript code run at near-native speeds. Microsoft will provide a similar extension model in Edge, allowing tools like password managers and ad blockers to keep running. You’re already able to create applications using a similar model for Office, apps that run in the Web Office clients as well as on the desktop.

Much of what could be done in an ActiveX control or a Flash application can now be done in HTML5 with JavaScript.

Starting with the obvious video and audio, you can use built-in browser features to play streamed content — and the HTML standards group has recently added support for secure media streams, so it’s easier to walk away from Flash and Silverlight. If you’ve used the Web on an iOS or Android device, you probably haven’t missed plug-ins at all.

The Web without plug-ins is pretty much the Web you’re familiar with. It’s more secure and more reliable — and you won’t find your search engine of choice suddenly replaced by someone’s shopping engine. In most cases public-facing sites run fine without plug-ins, and it’s worth disabling them in a test browser to see how your own sites work, especially those inside the firewall.

Although most sites don’t need them, some plug-ins might be harder to leave behind. There’s a once-popular Oracle Web form tool that’s kept many companies stuck on IE6, as it’s too expensive to upgrade to a newer release. Moving away from tools like this will require redesigning back-end servers and applications as well as rewriting your Web pages.

Rebuilding the server side for the modern Web

Making back-end changes isn’t as hard as it used to be. Frameworks like ASP.net MVC and Ruby on Rails are designed to simplify building and fleshing out application skeletons, while lightweight servers like Node.js let you quickly roll out new services without consuming resources. Similarly, with JavaScript frameworks like AngularJS, it’s easier to develop the browser elements of a modern Web application. Tools like AngularJS offer familiar desktop development concepts, including data binding, helping handle data delivered from servers and letting you build Web applications that run in a single page.

You’ll also want to investigate the use of scaffolding generators to help build application frameworks. Need an ASP.Net MVC or an Express Node.js application? Go with a tool like Yeoman to quickly build all the core files you need — both server- and client-side — ready for customization.

If writing code is an issue, most business applications are now, if not fully Web-enabled, at least able to offer APIs to Web applications. If your current applications don’t have Web support, it’s worth considering examining upgrade options or looking for third-party tools that can add Web application support to your applications. You may also want to look at cloud-hosted alternatives to on-premises applications, as they will handle Web UIs for you. Do you really need that old copy of Siebel CRM, when Salesforce.com does everything you want and gives you a modern Web UI at the same time?

As some once-influential Web technologies become obsolete, you’ll need to make additional changes. If you’ve been using Flash to build interactive sites, you can start to move to HTML5 animations. Built using HTML5, CSS, and JavaScript, modern Web animations may not be as capable as Flash, but they’re more than adequate for creating animated user experiences. You don’t even need to learn new skills: Adobe’s Edge tool brings Flash Builder-like timelines to HTML5 development, so you can draw out animations and tie them to page interactions.

As HTML5 continues to evolve, it’s clear that it’ll subsume more and more functionality that was once the province of plug-ins — including into the back end. For example, the latest developments in WebAudio are bringing technologies like MIDI into the browser, allowing it to be used to deliver interactive audio, rather than playing downloaded music or streaming.

Moving applications off old IE versions

The first step in any migration process is to understand what Web applications you have running, both inside and outside your firewall. You can start this process by scanning your network ports, looking for services running on ports 80 and 443. This will give you a list of running Web servers that can then be compared with current inventory. Those servers can be cataloged further, producing a list of running Web applications.

If you’re still using IE6, IE7, or IE8 and are worried about the effects of shifting to a modern browser, it’s often a lot easier to make the move than you might think. Many tools are available, from libraries you can use to enhance page content to toolkits and services that can help debug code and find issues.

JavaScript libraries are a powerful tool for anyone wanting to update a site to support modern browsers. Tools like jQuery contain a mix of user interface elements that can quickly replace ActiveX controls and plug-ins, as does Microsoft’s WinJS, which includes controls that replicate many familiar Desktop application views — for example, with a ListView that can be used to display list and grids and works with AngularJS data bindings. You can also take advantage of libraries like Twitter’s Bootstrap, which make it easy to hook controls into a page framework.

One useful library that can help make the process of migrating to modern browsers is Modernizr, which lets you design pages and applications that can fall back to less-complex implementations on older, less capable browsers. It’s customizable, so you can choose the features you want to support — and get a smaller library with your own build. The result is a smart tool that checks for specific features, then dynamically styles content appropriately. It’ll also test for HTML5 element support, letting you choose alternative implementations when they’re not available.

Not every application can be moved to a modern browser, at least not without significant work. At some point you’ll have to decide whether to retire or replace them. If your users run only Windows, you can create some breathing room for that decision by using Windows 10’s IE11 Enterprise Mode, as noted earlier.

Debugging and testing the modern Web

Working with application owners, you can test how applications run in an assortment of modern browsers, from different vendors. There’s a wide range of tools to help you understand issues with pages, including the built-in debugging tools in Internet Explorer (press F12 in IE9 or later), the powerful Firebug Firefox debugging extension, Safari’s Developer menu, Chrome’s Developer Tools, and Telerik’s Fiddler debugger.

Pressing F12 in IE lets you examine how pages render HTML content, as well as change the rendering engine and document modes on the fly. You can also explore the effects of using browser-sniffing by changing the browser user agent string or by tweaking the available capabilities. There’s the option of using familiar application debugging techniques for JavaScript, including using breakpoints, as well as exploring CSS and HTML — again with the option of tweaking CSS style sheets on the fly. Similar tools are built into Chrome and Safari, and you can download Firebug to add debugging support to Firefox.

With many Web applications now using REST techniques to transfer data to and from servers as part of an MVC (model-view-controller) or similar design pattern, tools like Telerik’s Fiddler allow you to examine the HTTP traffic between your browser and a server. It can capture all your traffic so that you can check that requests and responses are being set correctly, as well as using breakpoints to let you change the content of HTTP interactions.

Another option, Vorlon.js, lets you debug Web applications across multiple devices remotely. When you’re running the Node.js-based Vorlon.js server, adding a line of code to Web applications makes them visible in a local console. You can then see console debugging messages, as well as explore the DOM on remote devices (with the option of remotely modifying CSS properties). If you’re using Modernizr in your apps, you can also see the capabilities of the current target device, while an object explorer drills down into JavaScript variables.

Working with the modern Web is much like working with any other application platform. Debugging tools are widely available, both in and outside the browser, along with various tools to help understand browser/server interactions. You’ll also find a new generation of JavaScript-aware editors like GitHub’s Atom and Microsoft’s Visual Studio Code that work with modern Web frameworks and with debugging tools.

Moving to a responsive Web for a mobile Web

Modern Web applications can also take advantage of new CSS features to build responsive sites. With responsive elements, one Web application can be used to deliver content to mobile, desktop, and tablet devices, tuning its look and feel automatically to fit different screen sizes. (InfoWorld.com does that, for example.) You don’t need separate desktop and mobile teams — one team builds one app.

Building a responsive UI for an app can feel like a complete rework, but if you’re using the same underlying form fields and JavaScript libraries, the work can be carried out without affecting your applications. If you are taking the opportunity to refactor designs and services, then switching to a responsive design is a logical part of the process — and essential for customer-facing sites.

Instead of thinking of a page as a single linear entity, responsive design treats it as a reflowable collection of objects. CSS media queries identify the current browser size and capabilities; those results are used to reflow elements for various screen sizes.

For CSS features that deliver responsive designs, you can use tools like Modernizr to detect whether a browser can support specific responsive design features — an approach that’s a lot more useful than sniffing browser user agents.

Tools like Adobe’s Dreamweaver can help lay out responsive designs, with templates and layout tools that deliver the JavaScript and CSS code needed to sniff screen resolutions and reformat content. Most UI libraries now support responsive design or offer mobile alternatives that can be used as part of a responsive design.

The future of the modern Web app: ES6 and WebAssembly

The heart of a modern Web application is JavaScript. It’s a powerful tool, but doesn’t have all the features of a desktop language. That’s being addressed by updates to the underlying ECMAScript standard, including the soon-to-be-released ECMAScript 6. ES6 will make it easier to build larger-scale Web applications, with support for JavaScript modules and generic functions.

You can get started with ES6 in existing browsers using technologies like TypeScript, which are JavaScript-derived languages that cross-compile to JavaScript. There are also functional programming alternatives based on languages like Clojure. That’s certainly a more advanced approach than traditional JavaScript development, but it allows you to deliver more complex applications — it’s the technique used to deliver services like Gmail.

Mozilla has taken the cross-compiler model a stage further with the development of Asm.js. Here a subset of JavaScript can be used to build Web applications and passed through a compiler that optimizes your code for speed, compiling it as bytecode ahead of time, ready for the browser.

Asm.js’s speed has led to the decision to form the WebAssembly cross-browser working group to develop a bytecode and compiler for browsers that will work with languages like C and C++, while still able to work with JavaScript modules and APIs in next-generation browsers. Although WebAssembly is still some ways away, it’s a sign of how Web technologies are evolving to support application development.

The world of Web applications has evolved appreciably since the days of Internet Explorer 6. Walking away from that legacy makes sense for Microsoft, especially considering the gaps that still exist between IE and its competitors. It makes even more sense for IT, given the cross-platform, multiple-device environment essentially all companies now effectively operate in.

That means you’re going to need to retool your applications to support the current and future versions of all the major browsers, both inside and outside the firewall.