HTML5 Stack Updated

During the last few weeks I have been working on a new prototype for my company. The idea is to provide a template for the developers to use as a starting point for their applications. I thought that this would be a perfect application for the HTML 5 stack that I outlined in my article HTML 5 Stack.

During the project I have decided that I need to add another component to the stack; AngularJS. I have been working with it for a bit now and really like what it has to offer. From client side data binding to full support for the end-to-end project requirements it will make life for my developers much easier and in time development much quicker.

So what’s in the stack?

The Front End

    HTML 5
    CSS 3
    AngularJS / AngularJS-UI
    jQuery (optional)

The Back End

    WebAPI 2

There are obviously more things that will go in and out of projects based on need like SignalR, OData, etc…

Additional Reading

HTML 5 Stack
AngularJS Site

datajs (Part 6)

Part 6

datajs is a new cross-browser JavaScript library that enables data-centric web applications by leveraging modern protocols such as JSON and OData and HTML5-enabled browser features.

Under the covers datajs.js is simply a wrapper for the following javaScript files:

  • utils.js
  • xml.js
  • deferred.js
  • odata-utils.js
  • odata-net.js
  • odata-handler.js
  • odata-gml.js
  • odata-xml.js
  • odata-atom.js
  • odata-metadata.js
  • odata-json-light.js
  • odata-json.js
  • odata-batch.js
  • odata.js
  • store-dom.js
  • store-indexeddb.js
  • store-memory.js
  • store.js
  • cache-source.js
  • cache.js

Each of the files provides functions to work with odata calls in your application.

Additional Reading

OData Code Snippets

Asynchronis Pattern (Part 4)

Part 4

The Event-based Asynchronous Pattern makes available the advantages of multithreaded applications while hiding many of the complex issues inherent in multithreaded design.

Using a class that supports this pattern can allow you to:

  • Perform time-consuming tasks, such as downloads and database operations, “in the background,” without interrupting your application.
  • Execute multiple operations simultaneously, receiving notifications when each completes.
  • Wait for resources to become available without stopping (“hanging”) your application.
  • Communicate with pending asynchronous operations using the familiar events-and-delegates model. For more information on using event handlers and delegates, see Events and Delegates.

By using the Asynch pattern in the LightSwitch HTML client the developer can build responsive user interfaces that are capable of doing a lot of work. Typically we use a BackgroundWorker component when building simple multi-threaded applications but as we start to build more complex solutions we will want to build a set of methods, generally analogous to the ones working on the current thread, to handle the computing. The biggest challenge that I have found in doing this kind of work is the lack of ability to update across threads. With some ingenuity you can overcome this nicely. LightSwitch HTML client solves many of those issues for you as it generates the application.

In the HTML client, we chose to expose promise objects to represent asynchronous work. Promise objects provide the most flexible set of options when working in an asynchronous environment and make it easier to structure code in its logical order of execution.

There are a number of promise object implementations available. We chose to utilize the WinJS implementation of promise objects as it was one of the more complete offerings and provided technical alignment with the Windows 8 development experience.

Additional Reading

Event-based Asynchronous Pattern Overview on MSDN
Using Promise objects with LightSwitch

The User Interface (Part 3)

Part 3

The Microsoft LightSwitch team chose to change the paradigm associated with the user interface of the HTML client.

SDI (Single Document Interface) instead of MDI (Multiple Document Interface) aligns with the ‘Responsive Design’ philosophy of starting with the mobile application and adding functionality for larger view ports. The SDI interface also provides a task oriented UI that works well with phones and tablets.

One of the things that was most difficult for me was to overcome my focus on packing as much on a screen as functionally possible. I focused on minimizing the number of clicks and screens/pages/forms that a user was required to interact with. On a mobile phone or table I really needed to change this philosophy and focus every touch on accomplishing something of significance.

The LightSwitch team also focused on screen reuse, tabbed documents and functional interaction to create the compelling user interface of the HTML client.

Navigation boundaries is another new, at least to me, concept that presents some interesting opportunities and challenges. The Save boundary, the Nested boundary and the None boundary have been defined to provide interaction context within the LightSwitch application.

Navigation Boundaries

Each time a user moves between tabs in a screen, shows a dialog or shows another screen, a navigation boundary is crossed. There are three boundary options that may be applied at a navigation boundary that affect both the navigation to the target and the return from the target to the source.

The Save boundary option is only applicable when showing another screen:

Before navigating to the target, if there are changes in the data workspace the user is prompted to save or discard these changes.
While showing the target, the shell exposes “Save” and “Discard” buttons.
Before returning from the target, if there are changes in the data workspace the user is prompted to save or discard these changes.

The Nested boundary option is applicable when showing a dialog or another screen:

Before navigating to the target, a new nested change set is started on the data workspace.
While showing the target, the shell exposes “OK” and “Cancel” buttons.
Before returning from the target, if there were changes made the user is prompted to keep or cancel these changes.

The None boundary option is applicable for all navigation scenarios (and is the only option available when moving between tabs in a screen):

Before navigating to the target, no specific behavior occurs.
If the target is another screen tab, the shell exposes the previously visible buttons.
If the target is a dialog or another screen, the shell exposes a “Back” button.
Before returning from the target, no specific behavior occurs.

Additional Reading

Responsive Web Design with Ethan Marcotte