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.


IE9 Pinned Site Jump List Items Not Displaying Consistently Across Computers

May 29, 2011

Those following my blog know that I’ve been working on the Microsoft patterns & practices Web Guidance team and we are using Project Silk as the basis for delivering our web guidance.

One of the early project work items was to demonstrate IE9 windows shell integration or pinned sites. Project Silk has a nice pinned sites experience that includes static and dynamic jump list items as well as dynamic notification icons.

The dynamic jump list items and notification icons are driven by the number of overdue maintenance reminders the currently logged in user needs to attend to.

Our team had a lingering problem with the dynamic jump lists; they were not displaying consistently across team member computers. As you can imagine, this was a source of frustration since the feature is actually cool and requires very little in the way of code to implement.

I got up early this morning and started writing the Application Notifications chapter which includes our implementation of IE9 pinned sites. I’ve not been able to see the dynamic jump list items on my laptop or home computers. I spent about an hour debugging our JavaScript, hoping to find something wrong. No such luck.

Others on the Internet have reported similar problems with solutions ranging from disabling all shell extensions, to clearing out the jump list folders. (Not something I want to recommend to users of Project Silk.)

Turns out, the displaying of jump list items is tied to a Taskbar and Start Menu Properties dialog setting, “Store and display recently opened items in the Start menu and the taskbar.”

Required Configuration for Jump List Items to Display

If you’re like me and don’t want Windows adding items to an already busy start menu, you turn off both of the below options. However, for jump lists to work, you’ll need to enable the second option.

RequiredConfiguration

Not sure why jump list item displaying is tied to this setting, will have to inquire about this.

BadConfiguration

Close

You can follow Project Silk, provide feedback on the code and book chapters here.

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.


Follow

Get every new post delivered to your Inbox.

Join 240 other followers