Prepare for a future without Internet Explorer

IE is on its way out, so it's time for IT and Web services creators to make the switch to the modern Web

1 2 Page 2
Page 2 of 2

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. ( 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.

Copyright © 2015 IDG Communications, Inc.

1 2 Page 2
Page 2 of 2
InfoWorld Technology of the Year Awards 2023. Now open for entries!