Released: Project Silk Client-Side Web Development for Modern Browsers

September 18, 2011

The Microsoft patterns & practices team is excited to announce the release of Project Silk.

Project Silk

Client-Side Web Development for Modern Browsers

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). The result is 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 MVC 3.

The concepts explained in this book 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. The image below shows the Mileage Stats client-side objects and their implementation mapped to libraries or frameworks.

SilkArch

Building a rich web application that reduces the number of full-page loads, includes animations, and is responsible for updating the UI dynamically requires a thoughtful approach to managing structure, modularity, communication, navigation, and data. The book details how the Project Silk team designed Mileage Stats and solved a number of challenges.

Links
Audience
  • This guidance is intended for web developers and assumes you have some hands-on experience with ASP.NET MVC, CSS, HTML, JavaScript, and jQuery.
In this Release
  • Project Silk Mileage Stats Reference Implementation full source code
  • Widget QuickStart documentation and source code
  • Unit Test Hands on Labs (3)
  • Project Silk: Client-Side Web Development for Modern Browsers online documentation
  • Mileage Stats Video
About patterns & practices

The Microsoft patterns & practices team provides a wide range of guidance to help customers save time and reduce risk on their software development projects by incorporating proven patterns and practices.  This applied engineering guidance includes both production quality source code and in-depth documentation.

The guidance is designed to help software development teams:

  • Make critical design and technology selection decisions by highlighting the appropriate solution architectures, technologies, and Microsoft products for common scenarios
  • Understand the most important concepts needed for success by explaining the relevant patterns and prescribing the important practices
  • Get started with a proven code base by providing thoroughly tested software and source code that embodies the recommendations

For more information: http://msdn.microsoft.com/practices

Have a great day,

Just a grain of sand on the worlds beaches.


Project Silk Drop 13

July 13, 2011

The patterns & practices Web Guidance team released Drop 13 of Project Silk (7-13-2011). The code changes for this release were minor.

Video

If you have not seen the Project Silk video check it out here.

Chapters

The following chapters are ready for review:

  • Design and Layout (new)
  • Modularity (early draft)
  • Communication (early draft)
  • Navigation (early draft)
  • Server-Side Implementation (updated)
  • Introduction (updated)
  • Architecture
  • Client Data Management and Caching
  • jQuery UI Widgets
  • Application Notifications
  • Security
  • Unit Testing Web Applications
  • Widget QuickStart
  • How to: Check UIElement Properties with Coded UI Test
  • How to: Create Automation Negative case with Coded UI Test
  • How to: Create Web Client UI Test using Coded UI Test

The following chapters are currently being written or will be started soon:

  • HTML Templates

Close

We welcome and appreciate your feedback on the application and book content.

Have a great day,

Just a grain of sand on the worlds beaches.


Project Silk Drop 12

June 23, 2011

The patterns & practices Web Guidance team released Drop 12 of Project Silk (6-23-2011). The code changes for this release were minor.

The next drop will be on or about 6 July 2011.

Chapters

We are providing the guidance chapters in Word document, .pdf, and .chm format. Providing the chapters in Word format makes it easier for the community to provide feedback by using the Word Track Changes feature. If you provide feedback on a chapter, you can upload your feedback to: Project Silk Issue Tracker.

The following chapters are ready for review:

  • Introduction (new)
  • Modularity (new – early draft)
  • Architecture (updated)
  • Client Data Management and Caching (updated)
  • Server-Side Implementation (updated)
  • jQuery UI Widgets
  • Application Notifications
  • Security
  • Unit Testing Web Applications
  • Widget QuickStart
  • How to: Check UIElement Properties with Coded UI Test
  • How to: Create Automation Negative case with Coded UI Test
  • How to: Create Web Client UI Test using Coded UI Test

The following chapters are currently being written or will be started soon:

  • Navigation
  • Communication
  • HTML Templates

Close

We welcome and appreciate your feedback on the application and book content.

Have a great day,

Just a grain of sand on the worlds beaches.


Project Silk Drop 11

June 14, 2011

The patterns & practices Web Guidance team released Drop 11 of Project Silk (6-14-2011). This drop includes work recommended by the advisory board and 3rd party code review of the JavaScript.

Code Updates

  • Significantly reduced the coupling to the mstats global object. Widgets are no longer stored as members on mstats. Instead, widgets are either created in the bootstrapping mileagestats.js or in another managing widget.
  • Added a utility function for mixing in helper methods that simplify the syntax for invoking public method on widgets (when used inside of another widget).
  • Significantly reduced the number of hard-coded URLs. URLs are generally pulled from data- attributes.
  • Corrected an issue with the way that the chart vehicle selection UI was constructed. Changes in jQuery 1.6.1 caused this to surface.
  • Now correctly redirects to the Login page when a session timeouts and JSON request is made while using the Single Page Interface.

Chapters

We are providing the guidance chapters in Word document, .pdf, and .chm format. Providing the chapters in Word format makes it easier for the community to provide feedback by using the Word Track Changes feature. If you provide feedback on a chapter, you can upload your feedback to: Project Silk Issue Tracker.

The following chapters are ready for review:

  • Client Data Management and Caching (new)
  • Architecture (updated)
  • jQuery UI Widgets (updated)
  • Application Notifications (updated)
  • Server-Side Implementation
  • Security
  • Unit Testing Web Applications
  • Widget QuickStart (updated)
  • How to: Check UIElement Properties with Coded UI Test
  • How to: Create Automation Negative case with Coded UI Test
  • How to: Create Web Client UI Test using Coded UI Test

The following chapters are currently being written or will be started soon:

  • Introduction (in progress)
  • Modularity (in progress)
  • Navigation
  • Communication

Video

We have also made a new video for Project Silk that includes a short tour through the countryside with stops for gas and parts. During parts of the video, the Mileage Stats UI displays as a HUD (heads up display). After this short but entertaining introduction a new tutorial video beings.  This video is currently in production and will be released on Channel9 soon.

HUD

Close

We welcome and appreciate your feedback on the application and book content.

Have a great day,

Just a grain of sand on the worlds beaches.


Project Silk Drop 10

June 5, 2011

The patterns & practices Web Guidance team released Drop 10 of Project Silk (6-3-2011). This drop includes work recommended by the advisory board and a review of the JavaScript.

On the server-side we refactored business services layer into task handlers used by the controllers.

On the client-side we refactored and cleaned up the widget code as follows: use of option, _setOption, and _setOptions to be consistent,  namespaced event bindings and unbound them in the destroy method, removed endpoint Url’s from the widgets options these are now extracted from data dash attributes, and cleaned up conditional statements.

On the client-side data manager and widgets, we consolidated saveData and getData into a single call (sendRequest) that takes an option indicating whether or not to cache.

We are now providing the guidance chapters in Word document, .pdf, and .chm format. Providing the chapters in Word format makes it easier for the community to provide feedback by using the Word Track Changes feature.

The following chapters are ready for community review:

  • Application Notifications (new)
  • Server-Side Implementation (updated to reflect refactoring)
  • Architecture
  • Security
  • Unit Testing Web Applications
  • jQuery UI Widgets
  • Widget QuickStart
  • How to: Check UIElement Properties with Coded UI Test
  • How to: Create Automation Negative case with Coded UI Test
  • How to: Create Web Client UI Test using Coded UI Test

Close

We welcome and appreciate your feedback on the application and book content.

Have a great day,

Just a grain of sand on the worlds beaches.


Project Silk Documentation Drop: New Chapters Ready for Review

May 25, 2011

Project Silk from patterns & practices, 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.

Guidance Chapters Ready for Review

Today’s drop includes the following chapters (provided in CHM or PDF format) that are ready for community review. Our team very much appreciates your feedback and technical review. All documentation feedback should be posted in the Issue Tracker; if required, a document can be attached along with the feedback.

  • Architecture
  • jQuery UI Widgets
  • Server-Side Implementation
  • Security
  • Unit Testing Web Applications
  • Widget QuickStart
  • How to: Check UIElement Properties with Coded UI Test
  • How to: Create Automation Negative case with Coded UI Test
  • How to: Create Web Client Test Automation with Coded UI Test

jQuery UI Widget Chapter

The jQuery UI Widget chapter provides comprehensive coverage of the jQuery UI Widget Factory and how to author your own widgets.

Project Silk uses widgets to modularize its client-side JavaScript. Widgets are powerful objects that provide a good amount of built-in infrastructure yet are simple to use. The above Architecture chapter provides the high-level view of Project Silk and explains the important role widgets play.

What you can expect to learn from the widget chapter:

  • How to define and apply widgets
  • How to manage the lifetime of widgets
  • How to define default options that permit overrides and change notifications
  • How to use options for decoupling behavior and facilitating event subscriptions
  • How to use private methods to improve the readability of the code
  • How to define and use public methods, properties, and events
  • How to inherit from a base widget

Downloads

Latest documentation drop (24 May 2011): http://silk.codeplex.com/releases/view/66995

Latest code drop (Drop 9 – 10 May 2011): http://silk.codeplex.com/releases/view/66045

Have a great day,

Just a grain of sand on the worlds beaches.


Project Silk Drop 8

May 3, 2011

The patterns & practices Web Guidance team just released Drop 8 of Project Silk. This drop includes bug fixes, more consistent JavaScript and additional test coverage.

Additionally, two guidance chapters are ready for community review:

  • Server-side Architecture
  • Widget QuickStart (updated 5/3/2011)

What is Project Silk?

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.

Close

We welcome and appreciate your feedback on the application and book content.

Have a great day,

Just a grain of sand on the worlds beaches.


Follow

Get every new post delivered to your Inbox.

Join 248 other followers