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 1 and 1 and type the answer here:
  • Post
  • This is amazing news! I wasn't hugely impressed with the first beta of LS v2, but this changes EVERYTHING.

    Thanks you Microsoft, you've just given us a huge productivity boost! All you need to do now is fix that awful UI in VS2012 :)

  • LS and this HTML5 thing is exatly the reason why I subscribed to MSDN Pro and will push the METRO and WindowsPhone development more and more ... thanks :-)

  • This is a wonderful feature. Can't wait until the download becomes available!

  • Congratulations and thank you.  This is a great move, and bravo to the people who selected jQuery Mobile.

  • It's time to climb abourd the Lightswitch Platform!

  • For the promise feature, why you introduce this depedency with windows 8 (WinJS).

    Without this constraint you have all the element to build a completly platform (OS) agnostic client HTML with Lightswitch.

    Or Winjs could also use on platform runing on IOS or Android?

  • Good question, apacifico. The subset of WinJS we depend on is cross-browser compatible, so the LightSwitch HTML client will run on platforms other than Windows 8. We have been testing on both iOS and Android.

    Stephen Provine

  • Like datajs we have jaydata that offer an abstraction for the datasource. You can consume not just odata service but more and the model of provider is open. We have a linq like syntax in javascript and we can use other datasource easily (sqlite, yql,websql, indexdb, ...).

    Ok to keep the edmx to represent the abstraction of the datamodel and made odata as the first provider but why not open more the silo alowing other data source. With jaydata you have this abstraction. You keep concentrate on odata but don't close the integration with other datasource.

    Regards

    Angelo Pacifico

  • With this new Lightswitch Client, it is possible to support local validation or business rule before submit a request to the odata service? If yes the validation is written once and projected automatically in javascript for the local validation or you have to switch manually the language (c#, vb, javascript) to use in function of the tier where you put the logic?

    Do you support disconnected scenario , like local storage and provide an infrastructure to synchronise the backend when is up again?

    Regards

    Angelo Pacifico

  • Angelo,

    Your question on datajs is a fair one, and during the product cycle we considered whether it was necessary to expand beyond the single LightSwitch OData source on the HTML client. However, we ultimately chose for this release to keep the V1 LightSwitch architecture, where all data comes from a single LightSwitch-implemented OData source that has all the added benefits of LightSwitch server-side business logic and pipeline. Even as we added support for arbitrary OData sources in Dev11, you connect to these via the LightSwitch server, not directly from the client. I believe we will want to introduce connections to arbitrary data directly from the client, but we did not get to that for this release, and we may well take a look at JayData at that time.

    Regarding local validation or business rules, we scoped built-in support for this on the client-side to declarative rules only - those you define as part of the data model in the LightSwitch designer. However, you will be able to override what happens when you save and write code that performs custom validation before submitting to the service (but not in the current preview). Again, our intention is to expand beyond this scope in future releases. It was hard to cut imperative validation this time around, but the multiple language problem was one that we wanted to think through more carefully before jumping too deeply into that space.

    Finally on the disconnected scenario, we do not support that this release. We had talked about it, but it was pushed out to a future release in favor of getting an initial release out sooner.

    Thanks for the questions! In the future, I would post these questions to the forums rather than as comments on the blog - the forum is better suited for Q&A.

    Stephen Provine

  • This has sold me.  I'm going to start working with Lightswitch, and see what I can do with it.

  • Fantastic :-)

    Been using LS since Beta and the progress on this product (and VS) is what I think follows our business needs perfectly... bit impatient now on getting my hands on the final release!

    Keep up the good work and looking forward to more good news!!!!

  • When are you planning to release the HTML client for Lightswitch ?

  • @Rupali - You can download the preview release of the HTML Client here: msdn.microsoft.com/.../htmlclient

    Please let us know what you think by visiting the forum: social.msdn.microsoft.com/.../threads

    Cheers,

    -Beth

  • We're very impressed with LightSwitch and see it's place between Microsoft Access solutions and full-blown .NET database applications. Just wrote a paper about the benefits and limitations of it:

    Microsoft Visual Studio LightSwitch for Microsoft Access, SQL Server, and Visual Studio .NET Database Developers

    www.fmsinc.com/.../lightswitch

    Hope this helps.

Page 3 of 4 (47 items) 1234