When technology allows us to apply a new flexible web page development model, is it worth switching to new practices?

In the past few months, new technical products and components have hit the market, giving us the opportunity to build web pages in a more effective and timely manner. Many might say that they have been developing Ajax enabled web pages for years, without issues. Whilst this is true, significant opportunities for improvement have arisen which deserve to be considered. These developments will help give new meaning to the words purity, simplicity, interoperability, reliability, performance and attractiveness.


In the past few months, new technical products and components have hit the market, giving us the opportunity to build web pages in a more effective and timely manner. Many might say that they have been developing Ajax enabled web pages for years, without issues. Whilst this is true, significant opportunities for improvement have arisen which deserve to be considered. These developments will help give new meaning to the words purity, simplicity, interoperability, reliability, performance and attractiveness.

So what’s new?

Let’s have a look at some key events from the past year:

March 2010: Microsoft officially announced that they will contribute a HTML template engine to the jQuery community. In addition, for several months jQuery has benefitted from official Microsoft core support worldwide.

April 2010: Visual Studio 2010 offers comprehensive support for SharePoint 2010 web pages and features development.

May 2010: SharePoint 2010 is shipped with support for .Net Framework 3.5 features as well as Astoria and Rest WCF services.

October 2010: The template engine from Microsoft is now part of the official jQuery web site. It is recognized as a valid beta to be released at a later date, and is available for download now.

 

So what does this mean?

It means that these new tools and architecture will help demonstrate that it is possible to implement the following qualities into real-world, concrete web sites:

Purity: Think about an application in which you can be confident that the database model closely mimics the entities involved in your application.  Moreover, think about the assurance that you don't need to worry so much about the code residing in your business logic tier. You are left with just the design of a user interface using pure web syntax for which you can define several variations according to the miscellaneous target devices. These client layers can continuously access your application whilst in the meantime you can adjust the set and the amount of data they are dealing with, by simply tweaking some urls. Sometimes, you might even find that the only place you will find code is amongst the markup of your page.

Regarding deployment, there is no need to build an installer program or take care of file system structures anymore. Any file (code, resources, images...) can be shipped within a single cabinet file (.wsp) and be added to a SharePoint farm.

Simplicity: As a web application is often multi-tiered, there are often configuration issues (page to web services communication, business logic to databases communication etc.). Using SharePoint you can visualize the publishing of your web application to both an intranet and an extranet whilst retaining the ability to make configurational changes. SharePoint also features host factories code named "Astoria", allowing you to set WCF related configuration keys. Finally, you can override the CreateDataSource method of your entity framework models to get the address of your database from ad hoc configuration lists powered by SharePoint which are therefore in context.

Interoperability: Here is a major difference between the way we used to develop ajax applications many years ago and today. Not only were there far fewer internet browsers on the market, but we were also missing some smart and reliable libraries which would help to perform common tasks in a cross browser manner. jQuery is just that, and it offers superb performance - besides, as long as we only deal with json objects, the client layer is mostly agnostic.

Reliability: With a dramatic reduction in the amount of code, we benefit from the reduced chance for bugs to occur in the application. If a bug is apparent, it will require very little work to recover from it if it is in a javascript file. You can simply upload the updated .js file to your SharePoint library, and there is no need for middle tier recompilation, deployment, strongly typed relationships, versioning hell etc.

Performance: This is where users will see the difference. User actions are completed extremely quickly thanks to low network traffic and local processing for most scenarios. You can even grab cross domain data as the number of jsonp services increases daily. Thanks to the json format, client side parsing of soap xml content is not part of the story anymore. Data provided by the server is seamlessly evaluated and loaded into the javascript engine which makes ready to use, loosely coupled entity graphs available in the browser.

Attractiveness: Unlike using ASP.Net standard web controls, HTML templating gives you total control over the markup used in your page. That means that design and development can easily be performed by different professionals. A developer can easily replace static text in a mockup with template placeholders in order to visualize how the final page will behave.

Despite this long list of benefits, major opportunities have been missed when Microsoft scrapped its AJAX 4.0 framework - especially regarding Entity Framework data context integration (automatic add, update, delete operations from client side). But as you can see, by waiting for the contributed data linking api to reach an acceptable functional level, we can now leverage some really interesting components.

If these concepts appeal to you, you now have a starting point and a list of technical components or commercial products you can refer to:

- A Windows Server 2008 R2 server

- A SQL Server 2008 R2 instance

- A SharePoint 2010 farm

- ADO.NET Data Services Update for .NET Framework 3.5 SP1 for Windows 7 and Windows Server 2008 R2

- Visual Studio 2010 Professional

- jQuery 1.4.4

- jQuery Templates Beta

In fact, the only thing which is not contained in the out of the box offering from Microsoft is the jQuery templating engine. These are simply two small text files that you can embed inline within any web page. You can find these files here:

http://api.jquery.com/category/plugins/templates/

Explaining the exact implementation of each component or product is far beyond the scope of this post. However, below are the major components which make 80 percent of your code disappear from your usual web applications.

- A set of database tables which closely mimic your business model.

- An entity framework model which contains the sub-set of tables required to run your page.

- An ADO.Net Data Service using your entity model and powered by the SharePoint MultipleBaseAddressDataServiceHostFactory.

- An ad-hoc SharePoint configuration list to store all your configuration items such as: Database server name, url of cross-domain web services etc.

- The following JavaScript code snippet to get your full business domain entity graph through a single http request:

var mainModel = null;

 function LoadMyModel()  {

            var modelUrl = "../_vti_bin/MyModel.svc/Roots(1)?$expand=Entity1,Entity2";

            $.ajax({

                url: modelUrl,

                dataType: "text",

                beforeSend: function (xhr) {

                    xhr.setRequestHeader("Accept", "application/json, text/javascript");

                },

                success: function (data, textStatus, xhr) {

                    var res = Sys.Serialization.JavaScriptSerializer.deserialize(xhr.responseText);

                    mainModel = res.d;

                        //Apply Templating

                     $("#modelTemplate").tmpl(mainModel, { myParameter: valParam }).appendTo("#modelContainer");

                },

                error: function (xhr, textStatus) {

                    alert("Failed to load the main model for the page: " + xhr.status);

                }

            });

        }

For technical fellows, this code deserves an explanation. Indeed, the beforeSend event is used to tweak the httpHeaders of the request in order to prevent jQuery to perform the json parsing itself which would cause an error. Instead, we use the JavaScript serializer provided by Microsoft which is compatible with the kind of json we got from Astoria. Then, with a single line of code, you can produce the final rendering of your page in the browser by calling the templating engine (.tmpl). What you see above should be a set of procedural lines of code for a highly customizable web page. The templating section of your page can then be easily and relatively safely modified by other developers or power users using SharePoint designer on a running instance of your application.

This recipe will give you a short insight of all the benefits you might expect from new development practices, and I prompt you to dive deeper into such concepts. Even better, all your ASP.Net skills will still apply in this model – e.g. to optimize server side the initial rendering of the page or the creation of long living global objects.

We talked about Microsoft’s offering because of the multitude of new products they introduced in 2010, but you can also find great tools from other vendors to address the same needs.

As for any technical matter, some training, time and hard work will be required to get acquainted and proficient in such a practice. But then think about the level of flexibility and reactivity you will be able to provide to your business users...


Digital news!

Are you as digitally addicted as we are? We can supply you with a regular dose of digital news. Simply sign-up, or click to Follow us online.

About the author

Sylvain Denis
Sylvain Denis