Project Silk Road Map

  • Article
About the Topic Areas - Immersive Web Applications, Technology Choices, Mileage Stats, Widgets, UI and UX Design, Modularity, Data, Client-Side HTML, Communication, Navigation, Application Notifications, Server-Side Implementation, Security, Unit Testing, Automated Acceptance Testing

This topic presents a road map that will help you locate the appropriate guidance topics within Project Silk: Client-Side Web Development for Modern Browsers.

About the Topic Areas

To help you find relevant content, this document divides the topics into particular areas, and then drills down into each of them. It provides a brief overview of the topic area, followed by considerations and recommendations for each topic area and the location of the relevant guidance content. The high-level topic areas are:

  • Immersive Web Applications
  • Technology Choices
  • Mileage Stats
  • Widgets
  • UI and UX Design
  • Modularity
  • Data
  • Client-Side HTML
  • Communication
  • Navigation
  • Application Notifications
  • Server-Side Implementation
  • Security
  • Unit Testing
  • Automated Acceptance Testing

The following sections describe the content and reference materials for each of these topic areas.

Immersive Web Applications

There is a spectrum of web applications being built today. While there are many types of modern web applications that address many different needs, they all have some common characteristics.

What are the different kinds of web applications?

Technology Choices

The Project Silk team built the Mileage Stats Reference Implementation (Mileage Stats) using JavaScript, jQuery, jQuery UI, the BBQ plug-in, the jqPlot plug-in, Ajax, Modernizr, QUnit, ASP.NET MVC, xUnit.net, Moq, the Entity Framework, Unity Application Block, HTML5, and CSS3.

What are the technology choices I should consider when building a web application?

What do jQuery and jQuery UI offer?

Mileage Stats

Mileage Stats is a comprehensive sample application demonstrating a real-world, interactive, cross-browser, consumer-facing, rich web application. This 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. Below you will find the locations of material that will answer the following questions.

What is Mileage Stats?

How do I install Mileage Stats?

How did the design of Mileage Stats evolve?

How does Mileage Stats implement modularity?

How does Mileage Stats manage and centralize application data requests?

How does Mileage Stats cache data?

How does Mileage Stats use data- attributes?

How does Mileage Stats generate HTML dynamically?

How does Mileage Stats generate jQuery templates?

How does Mileage Stats choose between various communication options?

How does Mileage Stats implement direct method invocation between widgets?

How does Mileage Stats raise and handle events?

How does Mileage Stats implement pub/sub?

How does Mileage Stats keep users within a single-page interface?

How does Mileage Stats modify the URLs sent from the server?

How does Mileage Stats respond to the user clicking on a link?

How does Mileage Stats manage the browser's history?

How does Mileage Stats coordinate widget transitions between the various layouts?

How does Mileage Stats animate screen transitions?

How does Mileage Stats implement Pinned Sites?

What does Mileage Stats server-side architecture look like?

How does Mileage Stats implement the Repository Pattern?

How are data annotation attributes used in Mileage Stats?

How does Mileage Stats implement authentication?

How does Mileage Stats validate input?

What security measures were implemented in Mileage Stats?

What tools were used to facilitate unit testing in Mileage Stats?

What is an example of a unit test on the client side in Mileage Stats?

What is an example of a unit test on the server side in Mileage Stats?

Widgets

When building rich, client-side web applications, some of the visual elements on the page will naturally take on roles, responsibilities, and state. A concept that is central to jQuery UI is the widget.

What is a widget?

What is an example of a widget?

How do I define and apply widgets?

How do I manage the lifetime of widgets?

How do I define default options that permit overrides and change notifications?

How do I decouple widget behavior?

How do I define and use public methods, properties, and events?

How do I use private methods to improve the readability of the code?

How do I define a variable that's available to all instances of the widget, but nowhere else?

How should widgets communicate with each other?

How do I inherit from a base widget?

UI and UX Design

The design process includes the collaboration of stakeholders and team members with different skills and perspectives. If your team invests in a design process, you are more likely to create an application that users enjoy, find useful, and continue to use. Your user experience (UX) design specifies the site's structure, the web pages it uses, what actions users can perform on each page, and the transitions that can occur after a user performs an action. Your user interface (UI) design should be unified and provide a visual signal to your audience that all your elements belong together.

What is the value of design?

What are the designer roles?

What are UX and UI design artifacts?

What are UX considerations?

What are UI considerations?

What are some guidelines for assigning IDs to elements and naming CSS classes?

What are vendor-prefixed attributes?

How do I debug CSS styles?

Modularity

A modular design can make it easier for you to develop, test, deploy, and extend your application. Modular designs also have well-understood benefits that help you unit test your applications and make them easier to maintain over time. However, achieving a modular design in a complex JavaScript application requires specific techniques that may not be immediately obvious.

What are the benefits of modularity when building hybrid-designed web applications?

What are the factors that influence a module's boundaries?

What are the types of modules to consider in your application?

When should I use a JavaScript object, a jQuery plugin, or a jQuery UI Widget?

Data

In rich, interactive, client-centric applications, users expect the application to respond quickly to mouse gestures, page transitions, and the saving of form data. Delays caused by data retrieval or saving data can negatively impact the user's experience and enjoyment of the site. Therefore, carefully managed data retrieval and caching is critical to today's web applications.

How can a loosely coupled data layer simplify caching for client-side data requests?

Why do I need a client-side data management strategy?

What are the benefits of a client-side data manager and the abstraction of data requests?

How do I improve application performance by caching and prefetching data?

Client-Side HTML

Both hybrid and single-page interface web applications that do not perform full-page post backs in order to change the rendered UI must use client-side techniques for manipulating the document object model (DOM). The three client-side technologies you can use when implementing these techniques are HTML, cascading style sheets (CSS) and JavaScript.

What are options and strategies for getting the right HTML to the client?

What are the roles and responsibilities of HTML, CSS, and JavaScript within a client application?

How do I use jQuery to select and manipulate HTML elements?

How do I use jQuery to generate new HTML within the client?

How do I use jQuery Templates to generate new HTML within the client?

How do I choose the most appropriate option when manipulating HTML?

Communication

In a client-side application composed of discrete objects, many of those objects need to communicate with one another. You have a few options when choosing how they do this. Generally, your options are direct method invocation, and an indirect communication mechanism such as events.

What are the options for communicating between objects?

How can the Publish/Subscribe (pub/sub) pattern be used for loosely coupled communication?

How do I implement direct method invocation between widgets?

What are the advantages and disadvantages of direct method invocation?

How do I implement event triggering and handling between widgets?

How do I control dependencies between the objects triggering events and those handling them?

When should I use the Publish/Subscribe (pub/sub) pattern?

How do I use pub/sub to manage multiple handlers and reduce coupling?

When a user performs an action such as selecting a hyperlink or clicking a button, the application modifies the current web page without reloading the entire page, resulting in a more responsive, less jarring experience. Adherence to the Single-Page Interface pattern presents a number of navigation challenges. These challenges include managing the browser's history mechanism so that the back button works as expected, providing direct access to a specific layout or state of the page (deep linking), and implementing anchors that allow users to bookmark the application so that it displays in a specific state.

How do I solve browser history and back-button problems when the site doesn't perform full-page reloads?

How do I keep users within a single-page interface?

How do I manage hyperlinks and respond to user actions?

When do I rewrite URLs and when should I handle the click event?

How do I ensure that deep linking, bookmarking, and the back button work as expected?

How do I coordinate and animate screen transitions?

Application Notifications

Web applications that users consider responsive have one thing in common: they provide appropriate and timely feedback to the user. How the application displays the notifications to the user is almost as important as the information itself.

How do I provide unobtrusive user notification messages?

How do I handle multiple simultaneous notification messages raised by the application?

What are the benefits of encapsulating the display and management of user notification in a single JavaScript object?

How do I display a helpful global error page?

How do I set up a global error handler for Ajax requests?

What are alternatives to modal dialogs for prompting users?

How do I enable application notifications on the desktop with the Pinned Sites API?

Server-Side Implementation

Crafting a well-architected web server application requires meeting the needs of the web client while properly factoring the Microsoft® .NET Framework code on the web server. A web server application is responsible for more than just returning HTML content. Web server applications also involve data models, data access and storage, security, communication, and resource management.

How do I use ADO.NET Entity Framework and the Microsoft® SQL Server® Compact Edition to create a data model?

How do I store loosely typed data?

How do I separate concerns between my data model, business logic, and user interface?

What are the different kinds of models in an MVC application?

What are the things I should think about when designing my MVC application?

Should I create a business services layer?

How do I support interactive web clients with asynchronous data?

What are the different types of data that web clients request from the server and what are the differences between these types?

How do I manage data validation at each level of the stack?

How do I create custom validation attributes?

What other things should I consider when designing my server-side architecture?

Security

You should think about security threats that need to be addressed in any web application and what you should do to mitigate these threats.

What are key security threats that I should address in my web application?

What security features are built into ASP.NET MVC?

How do I protect my application from Cross-Site Request Forgery (CSRF)?

How do I protect my application against JSON hijacking?

How do I secure communication between the client and server?

What are security modifications I should think about to adjust for changes in the deployment environment and security requirements for the application?

Unit Testing

Unit testing, sometimes referred to as developer testing, focuses on testing small pieces of code, such as a class, that a developer is writing. These tests are critical for helping you ensure that the pieces you build work as expected and will operate correctly when combined with other parts of the application. Such testing helps support management of the application over time by ensuring that changes you make don't inadvertently affect other parts of the system.

How do I get started unit testing my JavaScript code?

How do I get started unit testing my ASP.NET MVC code?

What is the arrange-act-assert unit test structure?

What are techniques to isolate my tests and components?

What are things I should consider when testing my jQuery UI Widgets?

What are things I should consider when testing my ASP.NET MVC controllers?

Automated Acceptance Testing

Automated acceptance tests are tests that use code to implement a manual test. Automated acceptance tests are usually written at the user interface level and can validate a high-level of functionality.

How do I ensure that the UIElement properties are displayed with the correct values?

How do I test the error handling capability of the application at the user level?

How do I create an automated test for my web application using Coded UI Test in Microsoft Visual Studio® 2010 Premium or Ultimate edition?

Next | Previous | Home | Community