Project Silk Road Map
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
- UI and UX Design
- Client-Side HTML
- Application Notifications
- Server-Side Implementation
- 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?
- "Spectrum of Web Applications" in Chapter 1, "Introduction"
- "Characteristics of Modern Web Applications" in Chapter 1, "Introduction"
What are the technology choices I should consider when building a web application?
- "Technologies" in Chapter 1, "Introduction"
- "Architectural Alternatives" in Chapter 2, "Architecture"
What do jQuery and jQuery UI offer?
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?
- "Exploring the Mileage Stats Reference Implementation" in Chapter 1, "Introduction"
- "Introduction" in Chapter 2, "Architecture"
How do I install Mileage Stats?
How did the design of Mileage Stats evolve?
- "Designing the Mileage Stats Reference Implementation" in Chapter 4, "Design and Layout"
How does Mileage Stats implement modularity?
How does Mileage Stats manage and centralize application data requests?
- "Data Request" in Chapter 6, "Client Data Management and Caching"
- "Providing Data Asynchronously" in Chapter 11, "Server-Side Implementation"
How does Mileage Stats cache data?
How does Mileage Stats use data- attributes?
- "Using Data- Attributes" in Chapter 7, "Manipulating Client-Side HTML"
- "Providing HTML Structure" in Chapter 11, "Server-Side Implementation"
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?
- "A Helper for Method Invocation" in Chapter 8, "Communication"
- "Method Invocation in Mileage Stats" in Chapter 8, "Communication"
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?
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?
- Chapter 14, "Widget QuickStart"
- "Factors That Influence a Modular Design" in Chapter 5, "Modularity"
- "Using Widgets as Modules" in Chapter 5, "Modularity"
How do I define and apply widgets?
- "Defining a Widget" in Chapter 3, "jQuery UI Widgets"
- "Using a Widget" in Chapter 3, "jQuery UI 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?
What are the benefits of modularity when building hybrid-designed web applications?
- "Modularity" in Chapter 2, "Architecture"
- "Benefits of Modularity for Hybrid-Design Web Applications" in Chapter 5, "Modularity"
What are the factors that influence a module's boundaries?
What are the types of modules to consider in your application?
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?
What are options and strategies for getting the right HTML to the client?
- "The Roles and Responsibilities of Client-Side Languages" in Chapter 7, "Manipulating Client-Side HTML"
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?
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?
- "Loose Communication" in Chapter 2, "Architecture"
- "Publishing and Subscribing" in Chapter 8, "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?
- "Modifying Hyperlinks" in Chapter 9, "Navigation"
- "Responding to User Actions" in Chapter 9, "Navigation"
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?
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?
- "How Individual or Multiple Notification Messages are Displayed" in Chapter 10, "Application Notifications"
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?
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?
- "Rapid Data Modeling Using the ADO.NET Entity Framework and SQL Server Compact" in Chapter 11, "Server-Side Implementation"
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?
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, 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 ASP.NET MVC code?
What is the arrange-act-assert unit test structure?
What are techniques to isolate my tests and components?
- "Isolating Your Tests" in Chapter 13, "Unit Testing Web Applications"
- "Isolating Your Components" in Chapter 13, "Unit Testing Web Applications"
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?