projectsilk

Overview

Project Silk provides guidance for building cross-browser web applications with a focus on client-side interactivity. These applications take advantage of the latest web standards like HTML5, CSS3 and ECMAScript 5 along with modern web technologies such as jQuery, Internet Explorer 9, and ASP.NET MVC3.

To illustrate this guidance, the project includes a reference implementation called Mileage Stats that enables its users to track various metrics about their vehicles and fill-ups. Much of the effort in building Mileage Stats was applied to the usability and interactivity of the experience. Animations were included to enhance the enjoyment of the site and AJAX is used to keep the interface responsive and immersive. A great deal of care was also taken to ensure the client-side JavaScript facilitates modularity and maintainability. To accomplish these design goals, the JavaScript code was structured into “widgets” that benefit from the jQuery UI Widget Factory.

Getting Started

About the Mileage Stats RI

The Mileage Stats RI is a multi-page interactive web application where the pages are rendered without requiring a postback. This creates the illusion of a desktop application. The lack of postbacks enable rich UI transitions between states (pages.) The browser application runs very fast because of the client-side data caching.

The Mileage Stats RI JavaScript is modularized using jQuery UI Widgets. The widgets allow breaking the UI into small discrete stateful objects; providing a clean separation of responsibilities and concerns. See the Widget QuickStart (included with the latest download) for an example application that uses the jQuery UI widget factory.

Mileage Stats uses OpenID for authentication.

Mileage Stats uses Internet Explorer 9 Pinned Sites features. Below you can see the notification icon that indicates there are more than 3 outstanding maintenance tasks for the owner's three vehicles. Mileage Stats also displays dynamic jump lists for maintenance tasks.

Mileage Stats contains a rich chart page that allows the selection of three charts, vehicle selection, begin and end date, and data selection. The chart data requires no postback and runs very fast.

Featured Fork

The NavigationSilk fork is provided by Graham Mendick as "A conversion of the Project Silk Dashboard to ASP.NET Web Forms using the http://navigation.codeplex.com/ project, concentrating on the navigational aspects i.e. deep linking, bookmarking, browser history and progressive enhancement". Have a look.

If you would like to use the Project Silk code to show other ideas or alternatives and have your fork mentioned here, just drop us a line.

Intended Audience

This guidance is for existing web developers who are interested in taking advantage of the latest web standards and technologies.

Last edited Nov 22, 2011 at 11:47 PM by donsmith, version 65