Export (0) Print
Expand All

Driving Modernization of Enterprise Web Applications

Quick Reference Guide

Published October 2013

The Internet Explorer LOB Application Development team needed to drive modernization into its existing application portfolio to take full advantage of and promote compatibility with the modern ecosystem. They developed a system that would track and report their progress outward to the business, application owners, and application developers and direct the developer audience to standards, guidance, and best practices for developing apps on the new platforms.

Download

Products

What's in it for you

Download Quick Reference Guide, 284 KB, Microsoft Word file

  • Windows 8.1
  • Internet Explorer 11
  1. Modernize applications. Take advantage of the capabilities of the new, more modern ecosystem to update application portfolios.
  2. Report progress. Develop a program to track and communicate your overall application modernization efforts.
  3. Provide guidance. Provide developers with guidance and best practices for developing modern applications.
  4. Leverage tools in Internet Explorer 11. Developers can use the tools available in Internet Explorer 11 to design modern applications.

Situation

The Microsoft IT Internet Explorer Line of Business (LOB) Application Development team needed to create tools and processes to drive the LOB modernization status of Microsoft IT’s application portfolio within Microsoft. Automated, repeatable testing processes were required to help to modernize existing and design new LOB applications for use within the new Windows ecosystem. Microsoft IT also need a reporting structure that not only provided LOB application modernization status, but also provided feedback and guidance to help application owners and their developers modernize their applications.

A New, More Modern Ecosystem

Previously, with the Windows 8 operating system and Internet Explorer 10, the user interaction model began to move to a more modern touch-first experience on multiple devices.

Now, Windows 8.1 delivers Internet Explorer 11, which uses touch-based functionality allied with HTML version 5 (HTML5) support. The Windows 8.1 operating system delivers a new application execution environment, changing the experience of many of today’s applications:

  • Large desktop applications can coexist with many simple task-based user interfaces (UIs: modern applications).
  • Move from configure/personalize on every device to configure/personalize once, with roaming enabled through the cloud.
  • Users can configure and control their own experience.

Modern Application Traits

Building modern applications is a multifaceted strategy that requires planning and consideration. It is important to leverage modern design principles so that applications can have a similar feel across products: Web, Windows Phone, and Windows, with similar design principles and locations for finding data or buttons. While choices can vary by platform, there are a few traits that can be used as a framework for requirements.

  • Use Windows 8.1 modern design
  • Invest in a great tile
  • Is fast and fluid
  • Feels connected and alive
  • Snaps and scales
  • Integrates with the cloud
  • Shares and searches
  • Embraces Windows 8.1 principals

Solution

Application modernization efforts were developed to track LOB web application modernization efforts on the Internet Explorer platform across Microsoft IT's LOB application portfolio. This system provides detailed guidance and tools for application owners looking to improve the modernization level of their application. LOB web applications are regularly tested across 14 scenarios and assigned a modernization level based on test results that range from Standards Level to Modern Level to Showcase Level.

Aligned with Shared Goals

Aligning with shared goals and Microsoft IT internal strategy, the Internet Explorer LOB Application Development team is working to understand the current modernization status of Microsoft IT’s application portfolio. This is being accomplished by implementing automated and repeatable ways to assess the portfolio, leveraging the Planning IT and Internet Explorer program group’s tools. An organization and application level report card along with developer guidance has provided the tools to track modernization efforts and standards while setting the bar for future application releases.

System Life Cycle

The Internet Explorer LOB team is taking an iterative approach to building the report card and developer guidance. 

  • The system begins with Planning IT and URL extraction
    • A URL sourced from Planning IT along with the application version
    • Manual extraction and "scrub" of URLs
    • Remove duplicate and invalid URLs
  • Assessment and automated test pass
    • Internet Explorer Simple Web Application Toolkit (SWAT) tool scan
    • Import the URL list and process test cases
    • Errors occur if executable URLs or .doc files are identified
  • Report card refresh
    • Test pass incorporated into report card
    • Refresh of application and organization results reports
  • Communication
    • Publish updated test results and new URLs to build modern applications
    • Email communication to developers

SWAT Tools

The SWAT tools scan is an internally-developed equivalent to the code scanning tools that are available at http://www.modern.ie/en-us.  Modern.IE specifically addresses common coding problems that may result from supporting older versions of IE. Since modern versions of Internet Explorer 9 and 10 support HTML5 web standards and older versions of IE do not, writing code for both can be difficult.

Modern.IE scans code (a static web crawl– without executing the code itself) and reports the webpage results in three categories:

  1. Address common problems that result from supporting older versions of IE

  2. Help the site work well across browsers, across devices

  3. Consider building with some new features in Windows 8

Defining Modernization

All IT sites are expected at least to meet the minimum modernization bar (compatible and standards-based).

  • Standards level (or Edge mode). This is the minimum bar for LOB application compliance (LOB applications must pass all test cases in the category).
    • Works on any browser, including modern Internet Explorer in standards mode
    • Does not rely on plug-ins or hard coding to any specific browser version
    • Sites work in Internet Explorer 10 and 11
    • Sites do not use obsolete frameworks
  • Modern level. Web applications that meet Modern level requirements will look great on any device and provide the best user experience possible.
    • Applications that work great and enable work on any device
    • Touch friendly, scale to any screen, leverage modern design, and have a presence on the start screen
  • Showcase level. Web applications that meet Showcase level requirements take advantage of new features and capabilities of the modern Web.  Higher performance and better user experiences are only two of the benefits of implementing showcase features in a web application.
    • Show off the capabilities of Windows, Windows Phone, Internet Explorer, and Office as LOB application platforms
    • Leverage the platforms in the most effective way
    • Tell the story of how IT was able to solve the biggest user pain points

Defining Test Cases

The team defined the test cases, which can be automatically checked on a site using the SWAT and modern.IE tools. A list of URLs from Planning IT were run through the tool automatically:

Standards levelDescriptionShowcase level

Sites must pass all of the below tests or they "don't meet standards level"

Sites must be Standards level and pass all of the below tests

Site must be Modern level and pass at least one of the below tests

  • Site accessible
  • Frameworks and libraries
  • Standards mode
  • Browser plug-ins
  • Feature detection
  • Responsive design
  • Touch first browsing
  • Start Screen tile
  • CSS prefixes
  • Push notifications
  • Application cache
  • IndexedDB
  • Web Workers
  • WebSockets

Report Card

There is a Program Overview landing page that serve as the hub for program content and results. This page provides context about the program a visual interface that illustrates the high-level progress of Modernize IT efforts, descriptions about program components and other areas of interest, and contact information. Key links include:

  • Org report card. Provides an aggregate view into a business process unit’s (BPU) application catalog overall modernization level (group total and individual app).Intended audience: BPU owners.
  • Web application report card. Provides individual application level detail on whether an application was accessible, whether it passed or failed a test case, and its overall modernization level. Intended audience: LOB application developers.
  • Modernization guidance for developers. Provides detailed context and criteria for each test case, resource links from across the Microsoft community, and tools for developing modern applications. Intended audience: LOB application developers.

Developer Tools

F12 tools can debug, test, and help identify performance issues on your web pages and web applications. Rebuilt from the ground up Internet Explorer 11, a brand new UI and new functionality make developing and debugging faster and easier and help address the unique challenges in developing modern applications, including:

  • Debugging complex JavaScript functionality
  • Designing rich, adaptive CSS-based layouts
  • Diagnosing issues with responsiveness and frame rates
  • Detecting memory leaks in long-running scenarios

Note: To access the tools, press F12 on your keyboard.

F12 Tools in Internet Explorer 11

  • Document Object Model (DOM) Explorer. Use the Document Object Model (DOM) Explorer tool to see the state of a web page's DOM, examine HTML structure and CSS styles, and test changes to solve display issues.
  • Console. The Console provides a window into a page’s code. The primary use for the Console tool is to communicate into and out of running web pages.
  • Debugging. Use the Debugger tool to navigate your code as it runs, set watches and breakpoints, view call stacks, and improve the readability of compiled or minified JavaScript.
  • Network. The Network tool helps inspect page load times, responses to asynchronous JavaScript and XML (Ajax) requests, and all network activity used to load and run modern web pages and applications.
  • UI Responsiveness. Use the UI Responsiveness tool to profile a web page's frame rate and different types of CPU usage.
  • Profiler. The Profiler provides detailed performance measurements of the JavaScript code in a web page.
  • Memory. Use the Memory tool to diagnose memory issues that can affect the speed and stability of web pages.
  • Emulation. Use the Emulation tool to test how web pages work with different document modes, user agents, screen sizes and resolutions, and global positioning system location coordinates.

Benefits

  • Modern applications provide a better experience for users and developers. They have a cleaner, new user interface that works well across multiple devices. They also have better responsiveness and use memory more efficiently.
  • Using a report card system helped prioritize, track, and report on LOB modernization efforts across the enterprise. It also helped drive platform adoption, and provided an easier and faster workflow.
  • Including developer guidance and resources helped Microsoft tackle modern application challenges through the support of accurate and actionable diagnostics.
  • Developer tools provide better responsiveness, memory, and emulation. The F12 tools user experience is optimized to support fast, iterative workflows across all stages of web development.

Resources

Microsoft IT Work Smart Guides

See what's new in Internet Explorer 11

Using the F12 developer tools

Internet Explorer Compatibility Cookbook

modern.IE

For More Information

For more information about Microsoft products or services, call the Microsoft Sales Information Center at (800) 426-9400. In Canada, call the Microsoft Canada Order Centre at (800) 933-4750. Outside the 50 United States and Canada, please contact your local Microsoft subsidiary. To access information via the World Wide Web, go to:

http://www.microsoft.com

http://www.microsoft.com/microsoft-IT

© 2013 Microsoft Corporation. All rights reserved. Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft