Chapter 1: Introduction
Project Silk provides guidance for building maintainable cross-browser web applications that are characterized by an intentional design, rich interactivity, and a responsive user interface (UI), resulting in an immersive and engaging user experience (UX). Such applications take advantage of the latest web standards, including HTML5, CSS3, and ECMAScript version 5, and modern web technologies such as jQuery and ASP.NET MVC3.
The concepts explained in the Project Silk written guidance are demonstrated via a real-world customer-facing web application called the Mileage Stats Reference Implementation (Mileage Stats). Mileage Stats allows users to track and compare their vehicles' fuel efficiency, usage, and operating costs, and to schedule vehicle maintenance reminders.
This section describes how to install and start exploring the Project Silk guidance. You can download Project Silk from MSDN®.
- jQuery: Selectors, wrapped sets, chaining
If you are not familiar with these concepts or have not used them in your own projects, see the "Further Reading" section at the end of this chapter for more information on these topics.
Mileage Stats was designed to run and was fully tested on Microsoft Windows® 7 and Windows Server® 2008 operating systems. In addition, it has been smoke tested on Windows Vista® and Windows XP but not exhaustively tested.
Before you can compile and run Mileage Stats, the following must be installed:
- Microsoft® Visual Studio® 2010 Professional, Premium, or Ultimate edition development system
- Microsoft Visual Studio 2010 SP1
- ASP.NET MVC 3
- Microsoft SQL Server® Compact 4.0
- ADO.NET Entity Framework 4.1 - Update 1
- NuGet version 1.4 or later
- Internet Explorer 9 or another modern web browser
Downloading and Installation
Project Silk includes the written guidance you're reading now and the source code for both the Mileage Stats Reference Implementation and Widget QuickStart. To download and install, simply follow these steps:
- Download Project Silk from the Microsoft Download Center.
- To extract the download, run the .exe file. This will extract the source code and documentation into the folder of your choice.
Spectrum of Web Applications
There is a spectrum of web applications being built today that can be grouped into four application types. These types of web applications are categorized by their full-page reload behavior and the amount of client-side interactivity they provide. Each application type provides a richer experience than the one listed before it.
- Static sites. These consist of static HTML pages, CSS, and images. They are static in that as each page is navigated to, the browser performs a full-page reload and there is no interaction with portions of the page. In addition, the page does not change no matter who requests it or when.
- Single-page interface. In this model, a full-page load happens only once. From that point on, all page changes and data loading is performed without a full-page reload. Hotmail, Office Live, and Twitter are examples of single-page-interface web applications.
Characteristics of Modern Web Applications
While there are many types of modern web applications, addressing many different needs, they all have some characteristics in common.
- They are standards-focused. To have the broadest reach across multiple platforms and devices, applications attempt to implement the current and evolving standards and adopt future standards once ratified.
- They limit full-page reloads. Modern web applications seek to limit the number of full-page reloads. Reloads are much slower than a localized Ajax call to update a portion of the UI. Full-page reloads also limit the ability to animate state or page changes. By not performing a full-page reload, users can be kept in context, providing a fluid experience as they navigate from one task to another.
- They are asynchronous. Modern web applications use Ajax to dynamically load data, page fragments, or other assets instead of performing a full-page reload to acquire data or HTML content. Because the loading of data is asynchronous, the UI is able to stay responsive and keep the user informed while the data request is being fulfilled. This asynchronous on-demand loading also reduces application response time because requests can be tuned to return only the data and other content that needs to change.
- They manage data. When applicable, modern web applications provide client-side data caching and prefetching to boost client-side performance. This enables the UI to immediately respond to user input gestures because it does not have to make a call to the server for data. Data caching also serves to minimize the impact on server resources, increasing application scalability because fewer calls to the server are required.
Considerations for Building Modern Web Applications
In the next two sections we will examine the skill sets a project team will need and the technologies used when building a modern web application.
Developing modern web applications requires a broad range of skills. Depending on your application requirements, your team will need expertise provided by people in the following roles:
- Designer roles. These will be responsible for user experience, user interface, and graphics.
- Client-side developer roles. These will bring programming expertise in the areas of user interface, user interaction, and test.
- Server-side developer roles. These will have programming expertise in the areas of web pages, business objects and logic, databases, and test.
The composition of the web project team will vary from project to project based on the application's requirements and the team's resources. For example, on a large project, each of the roles above would probably be filled by a different person or possibly a team. On a small project, team members will likely fill multiple roles with augmentation from consultants as required to fill in the gaps.
On Project Silk, all of the above roles were filled by a lead developer, web designer, server-side developer, and two client-side developers. Project Silk also had a test team that consisted of a test manager, test program manager, and two software test engineers. The test team was responsible for testing browser compatibility, deployment testing, performance testing, stress testing, and security testing. To accomplish this, the test team set up a lab with servers running Windows Server® 2008, each with different configurations, and client computers configured with different operating systems and browsers. These systems were then used to perform daily automated and manual tests.
- Understanding closures and variable scoping is important. They are used intentionally and often by allowing variables defined within one scope to be used in another function.
- The object that the this keyword refers to changes based on where it is used. For example in a single method, this may refer to the object the method is defined on, and in a loop within that same method this may refer to the current item of the collection being iterated over. You should understand its rules.
- Objects without type definitions are very common and use an object literal syntax. The commas between properties and functions used in these object literals may cause syntax errors until you are familiar with them.
- Functions are called on the jQuery object itself. For example, the extend function merges the properties and methods of two different objects together. It looks like this: $.extend(targetObject, objectToMerge).
- Methods are called on the wrapped set. A wrapped set is the result of a query that uses a selector to find elements in the DOM. To call a method on a wrapped set of elements, a selector is used to select elements in the DOM. For example, to add the listing CSS class to all ul elements directly inside a div element, $('div ul').addClass('listing') can be used.
jQuery also provides features to raise and handle events, make Ajax requests, and process the data returned from Ajax requests. To be successful developing with jQuery, you should:
- Know that the selector syntax uses and extends the CSS selector syntax. The better you're able to leverage this syntax, the cleaner your HTML can be.
- Understand what the wrapped set is, how it's different from an array of DOM elements, and which you're working with at any given time. For example, when using $.each, inside the callback, this is not wrapped.
- Understand that animations are asynchronous and are queued. Use a named queue or the stop method to gain more control over how the animations behave.
In the past, the client-side application would use navigator.userAgent to determine which browser was in use and choose its code paths accordingly. Today, the accepted practice is to explicitly detect each feature the application intends to use.
ASP.NET MVC Razor
Razor is the name of one of the view engines in ASP.NET MVC 3 (WebForms is the other). The razor view engine is used to render MVC views, which are comprised of HTML and server-side code.
The Razor syntax is clean and concise, and easy to learn, and Visual Studio includes IntelliSense® and syntax highlighting for Razor syntax.
For a more detailed overview of Razor, see "ASP.NET MVC 3 Overview, The Razor View Engine" in the "Further Reading" section.
Dependency injection is a variant of the Inversion of Control design pattern. Dependency injection containers reduce the dependency coupling between objects by providing a facility to instantiate instances of classes and manage their lifetimes based on the configuration of the container. During the creation of objects, the container injects into the object any dependencies the object requires. If those dependencies have not yet been created, the container creates and resolves their dependencies first.
Dependency injection provides several benefits:
- Reduced coupling; classes and components don't have to locate dependencies or manage their lifetimes.
- Improved testability; dependencies can be easily substituted with mocked implementations.
- Improvedflexibility and maintainability; dependencies can be replaced easily.
ASP.NET MVC 3 provides better support for applying dependency injection and for integrating with dependency injection or inversion of control containers. For more information about dependency injection in ASP.NET MVC 3, see "ASP.NET MVC 3 Overview, Dependency Injection Improvements" in the "Further Reading" section. For an introduction to dependency injection and inversion of control, see "Loosen Up: Tame Your Software Dependencies for More Flexible Apps" in MSDN Magazine.
Exploring This Guidance
The purpose of this guidance is to show you how to plan, design, and build a rich, interactive web application your users will enjoy using. This guidance includes the following resources:
- Mileage Stats Reference Implementation. Comprehensive sample application demonstrating a real-world, interactive, cross-browser, consumer-facing, rich web application. The reference implementation is intentionally incomplete, but does illustrate the core concepts, design patterns, coding patterns, security requirements, web technologies, and unit testing necessary to be successful.
- Widget QuickStart. Small sample application that demonstrates how to use and develop jQuery UI Widgets.
- Documentation. This guidance provides an architectural overview of rich web applications and chapters that cover the design, concepts, patterns, security, testing, and implementation of Mileage Stats. This guidance also includes documentation that covers the Widget QuickStart and How-to topics on automated testing.
Exploring the Mileage Stats Reference Implementation
Mileage Stats is an ASP.NET MVC application that enables users to track and compare various metrics about their vehicles including fuel consumption, fuel costs, miles driven, and maintenance reminders. The application is a multi-page interactive web application where the pages are rendered without requiring a full-page reload. The lack of full-page reloads enables rich UI transitions between states (pages) and the application runs fast because of the client-side data caching and some data prefetching.
The design and implementation of the Mileage Stats solution is used for illustration throughout the guidance and will be covered in the remaining chapters. Now let's walk through Mileage Stats from a user's perspective.
Using Mileage Stats
Unauthenticated users accessing Mileage Stats will be redirected to the landing page to sign in. Mileage Stats uses third-party OpenID providers for user authentication. Mileage Stats supports deep linking, so that previously authenticated users returning to the website can go directly to any page.
For Internet Explorer 9 users, Mileage Stats provides a customized pinned sites experience that is accessed from the landing page. The image below shows the pinned site running in the pinned sites customized chrome of Internet Explorer 9. The menu, favorites bar, command bar, and status bar have been removed from view. The back and forward buttons are rendered with a custom color, and the site's favicon is displayed to the left of the back button, which navigates to the landing page.
The first time a new user logs into Mileage Stats, the summary pane will display the "Complete your Registration" form pictured below. This form will continue to be displayed in the Summary pane until the user clicks the Save button. Further edits to the user's profile can be made by clicking the Profile link at the top right of the browser window.
Third-party authentication providers do not uniformly expose their user data to applications requesting authentication services. For example, a user may have an OpenID account, but Mileage Stats may not be able to request information such as the user's first and last name from the provider to populate the Display Name field. The UX designer did not want to force a new user to complete a form in order to use Mileage Stats. Instead, we implemented a non-intrusive form for collecting the new user's name, country, and postal code. New users can immediately use Mileage Stats and can complete the registration information at their leisure.
The dashboard provides a summary view of the user's vehicles. From here the user can add a new vehicle, drill down to more detail for a vehicle, and see maintenance reminders that are overdue or due soon. There is a navigation bar at the top of the browser window that provides top-level navigation to the Dashboard, Charts, or Profile pages and a link to sign out of the application.
A high-value scenario for this guidance was to demonstrate fluid and rich UI transitions and animations. The image below shows the application transitioning from the Dashboard (two column vehicle listing) to the Details view (single column vehicle listing) in response to the user clicking the Details button in Hot Rod's vehicle tile. The image demonstrates the synchronization of opacity and position animations as the summary pane, vehicle tiles, and info pane animate into their respective positions.
The Details view displays aggregated monthly trends for fuel efficiency, distance traveled, and fuel cost. Users are able to quickly see trends in their vehicle usage as well as overdue maintenance reminders. In addition to displaying maintenance reminders, the Details view allows users to edit or delete the vehicle, as well as navigate to the Fill ups and Reminders views.
The Charts page provides three charts, which allow users to easily compare their vehicles' fuel efficiency, distance travelled, and cost. The displayed data can be filtered by vehicle and date range. The data displayed in these charts is prefetched and cached, providing a fast user experience.
Exploring the QuickStart
The Widget QuickStart is a small, focused application that illustrates the way Mileage Stats uses the jQuery UI Widget Factory to create maintainable widgets that implement client-side behavior.
Exploring the Documentation
The documentation includes the following:
- Chapter 2, "Architecture." This chapter explains the Mileage Stats client-side architecture by studying how its structure, modularity, communication, navigation, and data relate to one another.
- Chapter 4, "Design and Layout." This chapter explains the importance of an iterative design process and the roles different team members fulfill. After a survey of user experience and UI design considerations, we will walk through the design and building of Mileage Stats and see how these considerations influenced the application.
- Chapter 7, "Manipulating Client-Side HTML." This chapter discusses how an interactive application like Mileage Stats can manage client-side HTML changes without having to fully reload the page each time the user navigates or completes a task.
- Chapter 9, "Navigation." Rich web applications support client-side transitions, animations, and deep linking. Even when the site avoids the use of full-page refreshes, users expect their browser back button to function as expected. This chapter explains the challenges client-side web developers face maintaining the browser history when using Ajax calls instead of full-page reloads. In addition, the Mileage Stats state-change management is fully explained.
- Chapter 10, "Application Notifications." Web applications that users consider responsive have one thing in common: they provide appropriate and timely feedback to the user. In this chapter we show how to provide unobtrusive feedback to the user and how to implement notifications on the desktop with the Internet Explorer 9 Pinned Sites API.
- Chapter 14, "Widget QuickStart." This topic describes the Widget QuickStart and includes information on attaching widgets, widget initialization, and widget interactions.
- "How to: Check UIElement Properties Using Coded UI Test." This How-to topic walks you through the creation of an automated test that checks that UIElement properties in Mileage Stats are displayed with the correct values. It uses Coded UI Test that is available in Visual Studio 2010 Premium or Ultimate Edition.
- "How to: Create an Automated Negative Test Case Using Coded UI Test." This How-to topic walks you through the creation of an automated negative test case that checks the error handling capability of Mileage Stats. It uses Coded UI Test that is available in Visual Studio 2010 Premium or Ultimate Edition.
- "How to: Create a Web Client UI Test Using Coded UI Test." This How-to topic walks you through the creation of an automated test that verifies that the correct controls are displayed with the correct values. It uses Coded UI Test that is available in Visual Studio 2010 Premium or Ultimate Edition.
- "Project Silk Road Map." This list helps you locate sections of the guidance by topic.
- "Glossary." This topic provides a summary of the terms, concepts, and technologies used in this guidance.
- "Bibliography." This is a summary of the resources referred to in the guidance.
Project Silk's community site is http://silk.codeplex.com. There, you can post questions, provide feedback, or connect with other users to share ideas. Community members can also help Microsoft plan and test future offerings. In addition, the community site has links to tutorial videos, MSDN content, and the Readme file.
For information on the designer role, see Chapter 4, "Design and Layout."
For information on unit testing, see Chapter 13, "Unit Testing Web Applications."
"ASP.NET MVC 3 Overview, The Razor View Engine" on ASP.NET:
"ASP.NET MVC 3 Overview, Dependency Injection Improvements" on ASP.NET:
"Loosen Up: Tame Your Software Dependencies for More Flexible Apps" in MSDN Magazine:
"Entity Framework 4.1 Released" on the ADO.NET team blog:
"Entity Framework 4.1 Update 1 Released" on the ADO.NET team blog:
jQuery Documentation Main Page:
ASP.NET MVC 3:
NuGet version 1.4 or later:
Internet Explorer 9: