Keep track of all the latest news and events on developer tools and technologies you care about
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.