Announcing the LightSwitch HTML Client!

We are thrilled to announce our upcoming support for building cross-browser, mobile web clients with Visual Studio LightSwitch! The new HTML5 and JavaScript-based client is an important companion to our Silverlight-based desktop client that addresses the increasing need to build touch-oriented business applications that run well on modern mobile devices.

When we began work on Visual Studio LightSwitch 2011, we wanted to create a tool that made business application development much easier by abstracting the technology decisions and interactions that make building rich, secure, and relevant business applications so difficult. Our first iteration focused on the fundamentals—an N-Tier application composed of a rich desktop, data-centric client and cloud-ready middle-tier that contained the application’s core business logic. Silverlight was the natural choice for our desktop client because we wanted to offer modern, highly interactive UI that made data-centric tasks easy.

Following our initial release, we heard resounding feedback from our community that they needed to expose application data more broadly—to clients that may not be built with LightSwitch or run on platforms we don’t currently support. So with Visual Studio 2012 we updated our middle tier to use the Open Data (OData) Protocol, allowing application data to be published and consumed using a standards-based medium.

But exposing application data in a standards-compliant format was only half of the equation: We continued to hear requests for clients that could run on the myriad of mobile devices cropping up in the business landscape, each with their own development model and technology requirements. With many employees bringing their own devices to the workplace, building a native client for every device and deploying each implementation to separate app stores is rarely feasible. Standards-compliant HTML5 and JavaScript was a natural technology choice given its growing support and vibrant development community.

The existing Silverlight client and upcoming HTML-based client are complementary offerings—the Silverlight client will remain the go-to choice for building rich desktop applications; the user experience focus for the HTML client will be touch-first and optimized for mobile devices. As a companion to the desktop client, the HTML client will be best-suited for browsing data that is created and managed using the Silverlight desktop client.

The development experience

We kept this complementary relationship in mind as we updated the LightSwitch development experience to support HTML: you’ll be able to have Silverlight and HTML clients side-by-side in your LightSwitch project. You can simply add an HTML client to your existing LightSwitch project; each client will share the same data and metadata defined for the middle-tier.


Silverlight and HTML clients side-by-side in the same project

Once you’ve added the HTML client to your project, the development experience for creating screens and defining data will feel very familiar.


Screen templates for the HTML Client

When the project is run, the startup client—denoted in Solution Explorer—will be run. Similar to other web tools, your default web browser will be used for the client when you run an HTML client.


First look at an HTML client

A look inside

Following best-practice design guidelines and common conventions has been a driving tenet for LightSwitch since its inception, and we’re following suit as we create the HTML client. For starters, our application model and end-user experience is based on the extremely useful jQuery Mobile Framework. jQuery Mobile does a great job of abstracting browser idiosyncrasies into a simple, unified framework. (You can check out the browsers that work best with jQuery Mobile and by extension, LightSwitch, here.) LightSwitch’s use of jQuery Mobile means that you can easily use any JQuery Mobile control or plug-in inside LightSwitch as-is. For example, the following snippet of JQuery will wire-up the “Swipe to delete” plugin to a LightSwitch list item.

lightSwitchApplication.Home.prototype.Appointment_postRender = function (element, contentItem) {

$(element).find(“li”).attr(“data-swipeurl”, “deletecustomer.html”);


The HTML client includes two new jQuery Mobile themes–dark and light. Both themes are CSS 3.0 compliant. In response to continued requests for greater control over the look-and-feel of LightSwitch applications, we’ve structured and commented the CSS so you can more easily override the default look. We’re also putting together some in-depth posts on the UI that we’ll have available with the LightSwitch HTML Client Preview that is coming soon.

Our HTML projects will look-and-feel pretty familiar to those who have used other Visual Studio web development tools (ASP.NET, MVC, etc): HTML projects use standard naming conventions for the folders and files in the project. This has a useful side-benefit of being able to use tools such as NuGet to find and install community libraries into your LightSwitch clients.


Using NuGet to install extensions

Just as we wanted to follow conventions in the development experience, we’ve gone to great pains to make sure the HTML we create is semantically correct and the resulting DOM structure looks familiar. For example, the email editor control is just an <input> element of with the HTML5 “email” type.


Looking forward

This is big day for everyone on the team, and we’re excited to share this milestone with all of you. We’re putting the finishing touches on an early preview release of the HTML client. Look for more details on availability and some in-depth posts on everything we’re announcing today in the next few weeks. We’re very much looking forward to your feedback, questions, and suggestions. Please use the LightSwitch HTML Client forum to post your feedback and check the HTML Client Resources Page on the Developer Center for the preview download, videos and articles as they become available!

-Joe Binder, Senior Program Manager, Visual Studio LightSwitch Team