Announcing the LightSwitch HTML Client!

Announcing the LightSwitch HTML Client!

Rate This
  • Comments 47

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.

clip_image001

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.

clip_image003

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.

clip_image005

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.

clip_image007

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.

clip_image009

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

Leave a Comment
  • Please add 2 and 1 and type the answer here:
  • Post
  • This is Awesome

    Finally The most awaited and demanded feature integrate in LightSwitch

  • Amazing!!

  • This will be the game changer!

  • Wow ! Congratulations. This is a big step forward in the success of LightSwitch. I'm proud being an early adopter of this beautiful product !

  • SO COOOL!

  • Hi LS Team

    The LightSwitch HTML Client already in Visual Studio 2012 RC or its going to be release.

    Regards

  • Hi Babloo,

    HTML support is not available in the VS 2012 RC.  We'll be posting details about availability very soon.  Stay tuned!

    Joe Binder

  • This is awesome. This is big!

    Can't wait.

  • Simply... Amazing!

    Thank you soo much! Looking forward to the release of the first preview!

  • Indeed, if this plays, it will be a game changer! This is practically Access for the Web - and iOS! If it works, why on earth should I do adhoc business app development in monotouch, sencha touch, or the like? It's a no-brainer. Well done!

  • I'm a big fan of apple, and should be watching their sermon right now :), but this is bigger news!

  • Fantastique!!

  • Just perfect!!

  • That rocks.

  • IMHO they should implement the same thing for Silverlight, replacing the Silverlight plugin with simple HTML/CSS3/JScript.

    I wish I could continue developing in Silverlight, there is nothing that compares to XAML+C#/VB.NET in code maintability and efficiency, especially not html JScript.

    I wish they implement this and Silverlight becomes really multi-platform and plugin-free. I wonder why they haven't done this before.

    I would like to hear what you personally think about this topic, please send me a PM via my blog: blogs.microsoft.co.il/blogs/shimmy

Page 1 of 4 (47 items) 1234