LightSwitch Conclusion

Over the past few weeks I have been taking a look at Microsoft LightSwitch HTML client “framework”. I have reviewed the basic components of a LightSwitch project, written an application and come to my own conclusions on where LightSwitch fits and where it doesn’t.

These are my opinions based on my study and nothing more.

What LightSwitch is…

LightSwitch is an excellent tool if you want to create a phone or tablet application with a minimum investment in time and resource. It is also an excellent tool if you wanted to add phone/tablet touch capable modules to your existing enterprise application.

LightSwitch can provide a tool to rapidly prototype a touch based application prior to making a significant investment in a touch enabled mobile device platform.

What LightSwitch is not…

LightSwitch, of course, is not a replacement for an enterprise application nor is it a replacement for any data entry centric application. This is not even because LightSwitch is not cool tech but simply because the touch interface is not the right platform for these type of applications. Yes, this is more a statement on the state of touch interfaces than it is an indictment of LightSwitch but this is the space that LightSwitch has presented itself as a tool in the solution stack.

The wrap up…

I will use LightSwitch HTML Client as a tool in my toolbox when I need to develop touch based mobile applications. I think it fits very well in that space. There is very little doubt in my mind that used in the right space and for the right application LightSwitch HTML Client will be an awesome tool.

It like so many other technologies needs to be positioned in the overall stack properly. Just like JavaScript/jQuery is for behavior in the user interface, HTML is for structure, CSS is for style and presentation and server side code is for the heavy lifting each component must be placed properly or it will fail to meet our client’s needs.

The Series…

LightSwitch HTML Client (Part 1)
The LightSwitch Software Stack (Part 2)
The User Interface (Part 3)
Asynchronis Pattern (Part 4)
WinJS Part(5)
datajs (Part 6)

Next…

Real Time Web coming soon to a site near you…

WinJS Part(5)

Part 5

The Windows Library for JavaScript provides a set of new controls designed for Windows Store apps using JavaScript, such as the WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListView, and WinJS.UI.Rating controls. It also includes two style sheets (one with a dark color scheme and one with a light) that give your app the look and feel of Windows 8.

The WinJs.UI has the following controls available.

  • AppBar
  • DatePicker
  • FlipView
  • Flyout
  • ListView
  • HtmlControl
  • Menu
  • PageControl
  • Rating
  • SemanticZoom
  • SettingsFlyout
  • TimePicker
  • ToggleSwitch
  • Tooltip
  • ViewBox

The one problem that I have with the WinJS library is that it only works with Windows 8 Windows store applications.

The WinJS namespace provides special Windows Library for JavaScript functionality, including Promise and xhr.

The challenge with WinJS is that many of the features only work on Windows 8 applications.

Additional Reading

LightSwitch HTML Client (Part 1)

Part 1

The new path forward?

I have been surveying the landscape recently trying to decide where to spend my professional development time for the next 12 to 18 months. I have shied way from LightSwitch in the past because it was based on Silverlight and XAML and I didn’t think that either of those technologies were worth any investment of my time. Recently I have been encouraged to take another look at LightSwitch in the HTML client version. I have decided to pursue this since it fits directly inline with my desire to master the HTML5 stack.

The following series of articles will chronicle my learning and evaluation experience.

The Overview

LightSwitch HTML Client is a HTML5 and JavaScript based application development “framework” environment for building touch based applications. Using a responsive design philosophy you can develop applications starting with the handheld device and increasing functionality based on the client environment. Using Visual Studio you can point and click your way to a functional application within minutes. I personally have done it in as little as 30 minutes.
LightSwitch Architecture

As you can see from the above graphic the application developer has a variety of options at their finger tips with the promise of new levels of productivity. Substantially gone are the days of spending hours and hours on plumbing code.

I am excited to embark on this journey and hope that you enjoy coming along with me.

Additional Reading

LightSwitch HTML Client Architectural Overview

HTML5 “Stack”

Lately I have been doing a lot of work with what I am calling the HTML5 Stack.  This stack consists of HTML5, CSS3, JavaScript, jQuery and jQueryUI.

I am very impressed with the breadth of capabilities that the stack delivers to the application developer.  From the much improved semantic correctness of HTML5 to the wonderful new additions to css in CSS3, I have been really enjoying the new play ground.

As simple example…

One of the issues a developer faces is when to put up a message and when to take it down.  This seems like a trivial issue but the orchestration makes it sometimes quite complex.  Say we have an error message that we want to place on the web page but the when and how to dispose of that message can get quite messy.

The other day I focused on the issue for a project and found that with a couple of little lines of code the problem just goes away.

The Page

<meta charset="utf-8" />
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.css" rel="stylesheet" /> 	
<link href="css/myCss.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.js"></script>

<input id="errorMessage" type="text" value="Yo John" /><a id="lnkClose" onclick="closeErrorMessage()" href="#">x</a>
<input id="showHide" onclick="showErrorMessage('Yo man this is cool', 5000, true)" type="button" value="Show" />

MyScripts.js

$(function () {
     $('#errorMessage').hide();
});

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Show an error message for 5 seconds (1 second = 1000 milliseconds)
showErrorMessage = function (message, duration, IsSticky) {
   $('#errorMessage').show();
   $('#errorMessage').val(message);
   if(!IsSticky) {
     $('#errorMessage').fadeOut(duration);
   }
   else {
     $("#lnkClose").show();
   };
};

closeErrorMessage = function () {
   $("#lnkClose").hide();
   $('#errorMessage').fadeOut(0);
}

In this example you can now display an error message with a timeout value (1000 = 1 second) or sticky so that the user has to dispose of the error on a case by case basis.

Historically this would have been a task of determining when the event should be shown, when it should be removed, what each of the initiating events would be and on and on. Now it is just show the error set the timeout and move on with the rest of the interaction.

I have decided to spend the next 12 to 18 months really mastering this “stack”. I would be pleased if you would join me on this adventure.

Thanks
JD