Tuesday, September 16, 2014

Web Components

I must have come across mention of “web Components” one of the times I reviewed the emerging standards of HTML5 – but put them to one side against the day when they became concrete enough to be worth following up. For them to become established we needed browser support for some specific items, namely; HTML Imports, Shadow DOM, Templates and the ability to define and consume web components. I think I looked away for too long but fortunately ran into a Google IO presentation on Polymer http://www.polymer-project.org/resources/video.html

It looked to me, when watching the video, as if web components addressed a few issues that came up while we were building a very large web application as part of our SBRI “Proof of Concept” project earlier this year. So what were some of the things we found “good” and some things we found “bad” when building a very large web application?

Certainly we have to list JavaScript modules under the good heading. This approach to developing JavaScript allowed us to write a lot of code with explicit name spaces and without having to worry about variable scope leaking. We ended up with a lot of modules dedicated to a particular set of functionality and happily “chatting” between themselves to ensure there was a consistent view of application state. You can find a clear introduction to the code pattern here http://toddmotto.com/mastering-the-module-pattern/ if it is unfamiliar.

As a great deal of the JavaScript was involved in DOM manipulation we saw jQuery as a foundation technology and used custom jQuery UI Widgets to enhance the UI and provide re-usable code that addressed repeated functionality within the web page. As an example, we have a fancy custom widget that consumes html tables and turns them into sortable, searchable, scrollable data grids with the support code encapsulated in just the same way as our JavaScript modules but capable of supporting multiple instances. This was a good start but did not go very far in reducing the overall volume of html that had to be written and de-bugged. Editing thousands of lines of HTML can be quite a burden – it is easy to get lost – so one thing that was bad was that it is difficult to break html pages down into modules and particularly difficult to re-use blocks of html when similar layout and functionality is required in multiple places within a web page. Some sort of “templating” could be just the thing here if you could just “import” a reference to a given template.

CSS3 was a surprise late entry on the “bad” list. Don’t get me wrong, CSS is brilliant and allows us to style and add functionality to a web page in an ordered and predictable way. However there are times when you just wish you could turn it off for a given section on a page. You have some html elements that are being styled incorrectly at a particular point as “rules” cascade. Unpicking or backtracking the cascade and then adding to the CSS to override particular styling for specific elements (or groups of elements) can be time consuming and adds to the volume of traffic that needs to be downloaded to render the page in the browser. Wouldn’t it be nice to be able to just define some specific CSS rules that apply to a given web page section with no interference from any cascaded or global settings? What you need of course is a “Shadow DOM” – a place where CSS rules can only penetrate from “outside” when you explicitly define that behaviour.

The Polymer project https://www.polymer-project.org/ from Google introduces some excellent core web components that you can build upon to create new components of your own. They lend themselves to responsive design techniques http://en.wikipedia.org/wiki/Responsive_web_design and provide the foundation for re-usable web page chunks (that can, indeed should, include CSS and JavaScript) ready to be applied with local overrides as required. Components can be nested and combined to create a highly functional UI with the code modularised and organised in a way that is particularly attractive to developers and (I strongly suspect) designers.


This is not a technical blog (although this post strays into technique) so I won’t get into the detail of getting web components up and running but I can say that it is very simple and you can ignore things like bower, python web servers and node.js (not that node is not a great tool in its own right) and get things quickly working with a vanilla web server (even IIS Express).

Thursday, September 11, 2014

Microsoft Toys

Microsoft sent me a new toy today – it arrived via Fedex from the USA in a carefully packed cardboard box. The box contained four individual packages.

One contains a 16GB Micro SD card (that reputedly has a Windows image of some sort on it) and a 5V 10ma LED.

A second contains a cat5 Ethernet cable.

The third a nicely boxed USB to Ethernet adapter from Network Adapters.

And the fourth (the main component), an Intel Galileo dev board and power supply.

All this for free, to just see what I might make with it all – and presumably to demonstrate Microsoft’s new interest in the “Internet Of Things” (IOT) – which is going to be the “next big thing” possibly. I have some reservations – just how many smart light-bulbs that require a phone or tablet to turn on and off can anyone use? However, I can see the opportunities that might accrue from a wide array of active sensors/actuators working together to a collective end and acknowledge that software will need to be developed to build practical applications and sensible APIs. Plus I have a data collection concept in mind that might very well suit.

As we are having a bit of a break from the SBRI project while our erstwhile NHS partners make up their mind if they want to hitch themselves (and Welsh Government money) to our rising star for a second phase – the timing is near perfect.

So, off to the Microsoft Developer’s Program web site for instructions on how to get started at https://dev.windows.com/en-us/featured/Windows-Developer-Program-for-IoT .

  1. Install Visual Studio 2013 – already got that so “check”.
  2. Download WindowsDeveloperProgramforIOT.msi with a nice clickable link – and things started to go wrong. A Google search sorted out the need for a couple of undocumented rounds of “logging in” to stuff and accepting EULA’s left right and centre and then I got to a place where it was indeed possible to download the file and install the relevant VS extension kit.
  3. Check that a Telnet client is installed on the dev machine – I am a PUTTY fan myself (see http://www.putty.org/) as it can do rather more out of the box – even though there is no actual box


You can read about the Galileo board here http://arduino.cc/en/ArduinoCertified/IntelGalileo but in short - “It’s a board based on Intel® architecture designed to be hardware and software pin-compatible with Arduino shields designed for the Uno R3.”

The Galileo can be programmed using the standard Arduino tools and a dialect of C or (as in this case I suppose) it can run a Windows OS and be programmed using Visual C++

This could be interesting, as I can run some mini dev projects on a (now classic) Arduino R3, a Netduino (writing C# code currently in VS 2012) and the Galileo board using C++ and VS 2013. Plus I suppose I should consider the Raspberry Pi I (last used to emulate an iBeacon before I got some sample dedicated units) – running – what? – Python? Desk space is what I am going to need.

Wish me luck.