In a Best Practices online advisory to browser-based Web site developers published last week, Microsoft paints a compelling picture for favoring JavaScript libraries – especially jQuery – for rendering client-side UI, over the use of plug-ins. If Microsoft is to score a blow against Adobe Flash, it has to strike at plug-ins’ very reason for existence, arguing that jQuery is faster, easier, cheaper, and prettier.
Best Microsoft MCTS Training – Microsoft MCITP Training at Certkingdom.com
Microsoft’s patterns and practices team had been advocating the use of its Silverlight plug-in for composite applications since 2008, with a project it calls Prism. That project remains ongoing, though the emphasis in recent months has shifted to Project Silk, which focuses on what the company describes as ‘building cross-browser Web applications with a focus on client-side interactivity. These applications take advantage of the latest Web standards, including HTML5, CSS3 and ECMAScript 5, along with modern Web technologies such as jQuery, Windows Internet Explorer 9, and ASP.NET MVC3.’
Microsoft’s support for jQuery began three years ago, almost to the day, certainly in earnest though overlapping considerably with the company’s Silverlight plug-in project. While Microsoft isn’t abandoning Silverlight outright (it touted the forthcoming version 5 just last April), it is certainly de-emphasizing its own plug-in.
Last summer in Microsoft’s forums, the company has responded to developers’ inquiries about the relative precedence of Silk over Prism by assuring Silverlight developers that there remains a place for Silverlight in line-of-business applications – programs deployed in-house for employees and knowledge workers, rather than public-facing Web sites. But that was before the Build conference two weeks ago, when the spotlight for Silverlight was pretty much turned off.
The two project teams share many of the same members, and thus are not in competition with one another. But in recent days, the two projects have been sharing more than common members, but language as well. For example, a November 2010 description of the ‘composite application’ in the context of Prism, which does involve Silverlight, reads as follows: ‘Using design patterns that embody important architectural design principles, such as separation of concerns and loose coupling, Prism helps you to design and build applications using loosely coupled components that can evolve independently but which can be easily and seamlessly integrated into the overall application. These types of applications are known as composite applications.’
This type of modularization has come to define the composite application in much of Microsoft’s training. But now, take a close look at this sample from the latest ‘drop’ of the Silk developers’ model app: ‘Within a browser-based application, a module can add or remove user interface (UI) elements, add or enhance functionality (or behavior) already available in the UI, or enhance the user experience (UX). Modules can be built independently of one another but still communicate with each other in a loosely coupled fashion. Modular applications 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.’
The Silk project team is suggesting that many of the same goals previously attributed to Prism are attainable using JavaScript and libraries such as jQuery, through Silk best practices. One independent developer who definitely perceives this trend is Poland-based Bartek Szafko, who wrote last July, ‘When you look side by side on new Win8 shots and silk they look quite similar. I believe Silk guidance will be to Windows 8 just like Prism was to WPF and Silverlight.’
The September drop of Silk features the latest update to the project team’s model app, originally called ‘Mileage Stats’ but which has evolved into an interactive (or, judging from this video, overactive) monitor of all monetary investments in one’s vehicle. The idea here is to show how a modular app can generate statistics and update only the statistics that have changed, or only the changes the user has directly requested, without reloading the entire page.
110926 Mileage Stats app test.png
Silk documentation refers to a certain word you’ll be hearing a lot from Microsoft in the coming years. Referring to the division of on-screen components into widgets as shown in the above figure, the documentation reads: ‘Mileage Stats uses the tile widget to animate the position of all boxes horizontally and vertically, because both the vehicle boxes and the Add Vehicle box need that behavior. The vehicle widget expands and collapses the vehicle boxes, because only they need that behavior.’
Modularization in the Silk model is accomplished through a concept that the original HTML frame elements tried to achieve, but couldn’t: subdividing the screen into regions that can not only be addressed independently, but shifted and resized when necessary without disturbing their contents.
A simpler example of modularization for cross-browser apps from the Silk project (which may be more familiar to jQuery veterans), is this example of a jQuery function that’s wrapped around a set of elements bunched together from HTML. In this case, those elements are keywords from a paragraph tagged with , with each element given the name data-tag. A function, triggered whenever the mouse points to one of these tagged spans, looks up the contents of the span on the Delicious Web site, and posts the textual results of that search in an infobox. The jQuery function which does the wrapping appears below:
The function attaches the infobox directly to the span. Although that infobox has no instructions for its own appearance in this function, it’s given a place in the DOM by the creation function for the infobox element, which in jQuery is called _create. The principle demonstrated here is dynamic tagging. Here, not only can the destinations of old hyperlinks be updated and made more relevant, but the events that are generated as a result of pointing to the tagged span, and the appearance of the box or other gadget displayed on mouse over, are generated entirely on the fly.
This sort of thing has been happening with jQuery-endowed Web pages for the last handful of years, though perhaps not all Web users are appreciating the breadth of the architectural changes embodied here. If you’re wondering, what Microsoft technologies does Silk specifically promote, the answer is server-side ASP.NET MVC, whose latest versions make liberal use of jQuery. The Silk philosophy is a relatively new one for Microsoft: an ideal that the purpose for promoting Microsoft-brand technologies on the server side does not have to be the subsequent promotion of Microsoft technology on the client side.