MSDN UK Team blog

Get all the latest Microsoft developer news, tools, downloads, tutorials and tips right here, every day.
Search Form
Unfiltered HTML
Developers code with microsoft

How to: MicroFinance App, Creating the Front End

Unfiltered HTML
Unfiltered HTML

How to: MicroFinance App, Creating the Front End

  • Comments 1

by Matt Robinson, Mando Group

We embarked on a proof of concept project to create a line of business web application using some of the latest technologies such as Windows Azure and HTML5 and see if we could combine these technologies with great design to produce an awesome experience for the end user.  You can see the application itself, MicroFinance, at http://labs.mandogroup.com, our research & development site.

Creating the Front End

One of the core project objectives was to utilise the new capabilities brought forward with HTML5 and CSS3 and showcase what could really be done without the fledging plugin support that we as interactive designers and developers have enjoyed the use of over the past decade or so, and to prove the use of new methods as we push forward into this new era of plugin independent development. Many of us in the web community have played around with these new techniques, in enclosed sandbox projects or showcase, but we are often are hesitant to bring them into our core production because of the uneven support modern browsers currently offer for the likes of CSS3. We all endeavour to be as ‘backwards compatible’ as possible to impress the community with our shiny new toy-box without a heavily degraded experience for the narrowing audience of hesitant users. There were no such restrictions here, so we couldn't wait to get started!

As we knew which technologies we were working with and what few restrictions we had to complete this project we had to decide what we were actually going to do with this new-found freedom. There is much to say about the Designer / Developer relationship in modern web production. Within Mando we try to work as dynamically and cooperatively as possible because quite simply, it just works better that way. With each team member able to contribute throughout rather than waiting for their turn in the production line, we were able to ensure the final product was just what we wanted and what we all expected.

Modernising with Modernizr

Before we moved any further forward and looked at some of the more complicated elements of the application it was time to bring in a few 3rd party elements to streamline the development process and introduce a few cutting edge techniques into our kit. After adopting JQuery as our enhanced JavaScript platform of choice we needed a nice way to detect the features present on both iOS Safari for iPad and IE9 for the desktop, and cater for their unique attributes whilst trying to maintain a familiar user experience across each device… enter Modernizr.

Many of us use Modernizr now as an alternative to numerous platform / browser conditional statements to get around the varying support for the new HTML5 / CSS3 standards preferring ‘Feature Detection’ or ‘Browser Detection’ to figure out what we can offer the user. In the context of the MicroFinance project, this gave us a simple, effective way to branch off only where we needed to throughout the code to support multiple platforms whilst maintaining singular scripts as we tweaked our way to our final working solution with minimal duplication.

Primarily Modernizr was used to distinguish between touch and non-touch supported devices and to determine whether or not CSS3 transitions were available using JavaScript as a fall-back for our animation requirements. This meant that the final version was responsive enough to utilise touch input and touch swipes where standard mouse / keyboard input was more cumbersome and unnatural. Movement would feel just as slick and beautiful on iOS as it would with IE9, and where JavaScript generated animations were found to be sluggish and laboured, lacking the JavaScript engine support of IE9, it could be easily replaced with hardware accelerated CSS3 transitions.

For more information on Modernizr visit http://www.modernizr.com/

View Models… It's a Knockout… (JS)

Since this was a web application of sorts, at Mando we try and take an architectural approach even in our Front End. With this in mind we had already separated our presentation out from our enhanced functionality and each of the 5 core views, Login, Customers (Dashboard), Customer Details, and Business Intelligence had their own view models. Using individual view models meant that we could target the views in isolation and instantiate new instances of objects from our toolkit independently to keep it all nice and clean. Later in the project a need to load data via AJAX into our Front End solution had arisen and so we needed to manage asynchronous data which would shape the state of the application instantly.

Whilst not the most typical or necessary use of Knockout we felt it would be great to incorporate it as it has become part of Mando's core Front End platform for more complicated projects to manage data and its interaction with the UI. Data which had been loaded via AJAX was then pushed into a number of knockout 'observables' which was then bound to the task / meeting calendar control, transforming the representation of data instantly as new tasks were added.

Knockout is an elegant way to monitor and handle the state of an application and integrates easily into so many projects, taking away much of the painstaking creation of complex event structures and letting you really concentrate on the core of what you are trying to achieve. I fully recommend any developers involved in creating increasingly more complicated JavaScript based web solutions to take a look to see how much it can help!

For more information on KnockoutJS visit http://www.knockoutjs.com

Working with a Blank Canvas

We were given relatively free reign to use whichever technologies supported by IE9 (and to a lesser extent Safari iOS) necessary to create some interesting alternative UI elements and to demonstrate as many as reasonably possible to show off the new IE platform and what they are giving to us as developers to play with.

As part of the design we wanted to incorporate some custom graphs and an interactive timeline element which could be delivered without need to use plugins, which meant relying entirely on new methods introduced to us in IE9. We found that two methods were available to us for this task: SVG or the HTML5 Canvas element. Since we wanted the flexibility to eventually receive graph data Asynchronously via AJAX I felt that using JavaScript driven canvas drawing was the way to go.

I was tasked to create two graphs, the first of which was a dual layer line graph (depicted below), featuring as a comparison between two fictional graph representations (generated randomly but that could be easily modified to accept a JSON object) which the user could grab and drag to reveal more or less of the upper layer, a tactile element which worked a treat especially on touch devices. Using canvas we could interpret the data and draw it onto the canvas directly, meaning that any changes to the data would be accurately represented with no change to the logic or tweaking of any elements.

clip_image002

The second graph was a free rotating pie chart (depicted below) which had to feel natural and responsive both on desktop and touch devices. This element also could potentially be fed via a JSON object so Canvas felt right again here, but this element had a more complicated drag mechanism which required a little bit of maths to get right. Drawing elements directly to a canvas was such an advantage in both cases. Rather than having to make do with tiled graphics or layered HTML elements we were able to draw exactly what we wanted, where we wanted it to display the graphical data we wanted to show and nothing more.

clip_image004

Coming from a Flash / ActionScript background my only real gripe with Canvas is the inability to directly attach events to segments of canvas drawings. This is a limitation we had always had in flash but our ability to independently layer sprites and give them their own extended characteristics and properties was sorely missed here. As always in development though, there is always another way around any issue and so interrogation of mouse position compared against other tracking values seemed to work great as a substitute. Ultimately Canvas is great for adding animated elements and custom graphical elements with a bit of patience, but by itself it needs a lot of work to really get some interactive value out of it.

In addition to the graphs I was also tasked to create an interactive calendar which had to meet our design specifications. Whilst we were all involved in the design process, some blanks were left to fill in during development. This time the element actually had to be fed via JSON following user interactions on the page rather than just be ready for it. A clever mix of CSS3, Canvas and JavaScript helped us to create a slick timeline-based calendar (depicted below) with a great feeling of motion for that modern responsive feel that Microsoft had asked for.

clip_image006

Face to Face with HTML5 Video

Many of us are keen to start using video in modern web design, it’s a format we are all happy with and have enjoyed since the dawn of television but the web front end has had difficulties over the past few decades in really giving us what we want. Bandwidth used to be a real problem but as compression has got better and high speed networking has improved the infrastructure is now in place – the only issue is that never before has a standardised delivery mechanism across browsers been put in place.

We have relied on plugins to bridge the gap, but HTML5 video really provides us with a simple and effective method of delivering video content. Streaming may not be available to us in HTML5 video just yet but it’s a great step in the right direction.

We utilised the video element of HTML5 to deliver what appeared to be simultaneous live video feeds of fictional customers held within the customer’s account on the app (depicted below). We wanted to really make it feel alive so we had the videos play almost instantaneously on load, giving it that newsroom feel on a personalised interface. Whilst IE9 handled this just great, we did struggle to maintain a fluid interface on some other browsers, especially on touch interfaces where we were forced to disable these elements. Perhaps most browsers just aren’t ready for this intensity just yet but we were really happy with that ‘up to the minute’ feel this created as our users hit the dashboard.

The ideal intention would be to provide a webcam integration feature which would encourage the user to talk in real time rather than a series of looped videos, but it provided the outward visual experience we were looking to imitate.

clip_image008

Putting it All Together

With our elements prepared in isolation and tested across the target browsers I set about building upon the view models mentioned earlier to control timing and tie together functionality between each of the elements by allowing them to communicate with one and other using a simple event structure.

Using data attribute tags now available to us as valid mark-up in HTML5, a single ‘Class’ was created which controlled the introduction sequence for each of the panels. We wanted to have the effect of the interface building up in front of the user to mimic the motion of the Microsoft future interface concepts. With these tags we were able to specify order and behaviour of each of the UI elements as they appeared on the screen, which were then interpreted by our JavaScript ‘Class’ to modify their animation behaviours accordingly.

A few semi-scripted feedback events were placed throughout the application, such as event notifications on randomised timers and the world map feature which simulated customer actions ‘around the globe’, signifying their geographical location and action summary as an animated blip of light. This was made possible by the Canvas and helped to breathe some life into the experience, making sure that the user felt truly connected as we simulated other users connecting to the app elsewhere in real-time.

Once the elements were in place we had just enough time to polish up the implementation of the design, which was a cinch due to the great deal of CSS3 support we had in IE9; rather than having to create a complex set of images to achieve certain visual effects we could apply most of it directly in the stylesheet, reducing load times and making tweaks and maintenance simple and clean.

Now that our application had been designed and built in an offline environment, we were tasked with connecting up the data services and hosting the application within Azure. This will be discussed in a dedicated series of blog posts on MSDN in the coming weeks.

Conclusion

In a brief conclusion I must say that IE9 on the whole in terms of feature support and performance is an Internet Explorer to be proud of. Whilst IE has traditionally been some cause of frustration for web developers over the years, I can honestly say that developing something special for IE9 was a pleasure. Technical challenges were primarily around mobile platforms, with the technologies mentioned above easily rectifying any IE specific issue. While we wait for the CSS3 specification to be finalised, and although changes are inevitable, it feels like moving forward to version 10 and beyond, IE will give us some of the best support available, bridging the gap in which alternative browsers have gained ground over the years.

The web is moving fast, browsers are being constantly updated to keep up with the changing landscape of web development and this is an exciting time for us all. We are finally getting the tools to create truly engaging interactive experiences right from the browser, and just because it isn’t all there quite yet, don’t be afraid to experiment now because you might be surprised by what you can already achieve.

MattR-MicrosoftMatt Robinson
Interactive Specialist, Mando Group
  • Hi Matt,

    it's mentioned 'Microsoft had asked for' -  is this a showcase app? can we get an open source download to look at? I am would like to play around with the data processing and tpl/async stuff and try and get ajax to play nice with this.

Page 1 of 1 (1 items)
Leave a Comment
  • Please add 8 and 5 and type the answer here:
  • Post