Living in the Tech Avalanche Generation

On several occasions just recently, I have heard the idea being promoted that Silverlight is being taken up largely for it’s video application and that is where it’s purpose lies. I really can’t understand why this miscomprehension (IMO) still exists. Certainly the Obama Inauguration and the Olympics were quoted as references (again) but they are surely exceptions and in no way reflective of what’s happening in the small to medium enterprise.

My experience of late is suggests to me that SME .Net shops, where existing skills can be leveraged to build line of business smart‘ish client applications in the browser, is becoming an appealing possibility and is in fact indicative of my own personal story of late. I have long been living in the world of developing for the desktop and so the inevitable move into WPF is just that bit more compelling when you bundle Silverlight into the bargain. But I must say that I hope to hear less of the idea that Silverlight is simply for Video applications. Just check out the Silverlight forums and blogs that are proliferating. I think it’s becoming clear that there is significant momentum behind Silverlight and for it’s place in the line of business application and if you don’t look around in the SME space then you might not really know.

Ok I’m just going to come out and say it - I don’t want to know two UI frameworks equally as well or perhaps I should say one ‘less well’ than the other. It’s a fact of life that a great deal of we .NET developers  (the majority I would think) work for an SME and also that the great majority of work we do is not public facing web sites. These SME’s form a significant portion of Microsoft’s Market and the main two UI frameworks used by this customer segment, have up until recent times been developing their application using Windows Forms or ASP.Net. More recently, Microsoft have invested heavily in UI frameworks grounded in the XAML which offers perhaps the first real opportunity we have seen for a unification of a single set of skills to be employed both across the web and desktop. Historically of course we have witnessed the relative failure of the Java Applet and the ActiveX control but we shouldn’t let those failures deter us from exploring success with WPF and Silverlight.

I have to say that as a Rich Client kind of guy, I have always been at odds with ASP.Net to a degree. Web Forms was a revelation of sorts when it was introduced and it continues to be a very useful and highly productive framework for web development in the SME IT environments. In pursuit of improving the quality of software the web toolkit exists in a vast nebula of expanding stars which surround ASP.Net Web Forms. Today as Web Developers it’s becoming incumbent on us to have strong skills in CSS, JavaScript, Ajax, JSON, JQuery, DHTML, MVC and the list goes on and on and on and on and…….and this is complicated by the lack of consolidation caused by browser discontinuity - don’t get me started on that.  The huge mesh of variation in skill requirement with these technologies is something that never really played well with me and one that I have resisted by and large. I do still from time to time get to develop in ASP.Net, however I still resist these outlying technologies and one might argue that within the context of my business domain that’s perfectly valid (if not required) as a choice.

What I want to be able to do is focus squarely on XAML based UI skills and  leverage  this with  equal impact on the desktop or the web (or to be precise over HTTP and in the browser) and not feel boxed into my limited abilities with the standard web box of tricks that I named above. Now it’s true that I don’t do a great deal of work on the public facing web however that is not synonymous  with my never having to need to build highly scalable applications that exist behind the firewall and even support large user bases outside of that same firewall. If I can affect a streamlining of my team by leveraging XAML via WPF and Silverlight and work richly on the web and desktop and avoid the toolkit soup that comes with browser development, then I will be a happy man - a very happy man.

Certainly these days there is diminishing resistance to the idea of Silverlight becoming more prevalent as an alternative to the prevailing approaches and some of the noise in the blogsphere and opinion in the podcast domain is warming to idea. I would just love to get to the point where my UI technology choice can be more consistent and at best be uniform.

Is it really about a set of choices that we all face as developers along the way and trying to make sense of the choices today is getting harder by the minute. The title of this blog itself is in reverence to this very issue. What issue? What kind of developer am I? First of all I hope I am a good Developer (try and define that one). Am I a jack of all trades, Web junky, Smart Client or Middleware / Messaging guy?

Now if your like me and technology just interests you because (like Everest) it’s there, then being confronted with this question can present many difficulties in finding an answer. Many developers feel overwhelmed in choosing which ‘hot’ new technology stack to learn as a future investment for their careers prospects. If your slant is more on the alt.net side of things, then more of  your time is probably going into concerns around patterns, practices and architecture (a good thing), therefore choosing technology tends to become only a facet of the decision making process along the way, although this is in my view at the extreme end of the alt.net axis of decision making. It’s more than possible to be a good software development citizen and keep well abreast of the technology curve at at the same time.

Some people find this whole topic anathema, therefore to the nay sayer’s let me say this: most Developers (not of the polyglot variety) have to choose .NET, Java or perhaps Ruby etc and that is a choice in itself and even that choice has commercial implications to the developer who makes it. For example, when I was 3 years into my career I was a VB 5 & 6 developer surrounded by Cold Fusion guys and it was clear to me that market demand for either of those technologies was dwindling and not part of the future landscape being painted by Microsoft or Sun. Java was already gaining a great deal of traction in the Enterprise where J2EE was beginning to make inroads; .NET was the new kid on the block but was always going to have the behemoth’s full support The question I was faced with at the time seemed simple on the face of it - which boat do I jump on .NET or JAVA? At the end of the day the choice I made was .NET and was based on the following:

• .NET was still in BETA and I would be at the forefront in the experience stakes where early adopters and are associated positively with being on board for a great length of time and hence have lots of experience (mercenary perhaps but practical nonetheless).
• Could I bank on Microsoft being successful with adoption of its new development platform? This seemed like a no-brainer and certainly held true.
• I would always be competing with developers of three or so years more experience in the JAVA space (again a no brainer).
  • Their didn’t seem to be enough pro’s in choosing the Java platform alone to sway me from not considering this a major point.

let’s face it, we developers do not make decisions like this about our careers lightly and nor should we. I’m sure there are some people that will view all this as terribly pragmatic and even a little mercenary - sorry but no one should live in a vacuum or with their heads in the sand.

Billy Hollis recently remarked on DNR that web (specifically ASP.NET) developers had lived in the comfort of being aligned to the hot ‘in demand’ technology over the past few years and he also contends that those guys will have to catch up to the rich UI guys in the not too distant future. I think Billy imagines that the desktop UI developers are likely to feel more at home with WPF and Silverlight and will therefore pick it up more readily to develop the early wave of applications and perhaps in so doing become the new boys riding the hot tech wave so to speak. To date this is speculation at best but there may be some merit in the supposition although given the architecture of Silverlight itself I imagine that we will see a lot of people integrating Silverlight into their existing ASP.Net assets to begin with and it will probably take a bit more time before we see the canonical Outlook styled applications running in Silverlight and in the public domain. The reason I think this will take a bit of time is not not because people will misjudge or misinterpret the usefulness of Silverlight in Corporate Data applications but rather it will take some time for the knowledge base to foster and grow. There are already some very good examples of what’s possible however.

For me? Well I have been only somewhat aligned to ASP.Net; don’t get me wrong I have developed my share of corporate intranet applications (behind the firewall stuff) and a small amount of public facing stuff, but the desktop is where I invested a lot of my time and thus where a great deal of my client side programming skill exists. Based on all of this you might guess that my UI investment of the future will be on XAML, which greatly expands my options in working with the browser with Silverlight. Some early adopters have talked up Silverlight as a nice thing to add to your ASP.Net toolkit and seemed intent on stressing that it’s not a replacement choice consideration when it comes to Line of Business applications. Billy doesn’t seem to agree and I for one hope he’s vision is more realistic, I really don’t see why some people are talking down the prospect of building Silverlight browser based business applications that once would have lived on the desktop. Perhaps the time is really upon us, when we can begin to build really rich STATEFUL applications in the browser and take more advantage of distributed processing (give that IIS box a rest).

I need a project to help grow my skills.

I was going to use Use Case Estimation (a subject I have blogged about in the past) as side project to allow my WFP and XAML skills really start to develop and take root, however it has become clear to me that choosing Silverlight as the UI technology for this application will allow me to make it available as a hosted solution and learning a subset of WPF certainly should represent a shallower learning curve (somewhat anyway). So what I propose is that I will provide status updates on this project along the way and we shall start with update # 1.0 here.

Status Update # 1.0

My focus at this stage of the learning exercise is squarely around getting super comfortable with layout in XAML and in particular Silverlight. The goal is to be as comfortable with laying out XAML applications as I have been in the past with Windows Forms and HTML. There are currently plenty of options with choosing layout features and they include: Grid, StackPanel, Canvas, ScrollViewer and the Border.

Point Case Estimation spreadsheets are available on the Internet and the expression of the activity itself is well suited to a spreadsheet. With this in mind the first iteration of trying to define what the most expressive UI would look like began with a Silverlight Grid rendering something not too dissimilar to a spreadsheet.

This all seemed a little bit too clunky, drab and not really in the spirit of the expressive styling that Silverlight was designed to provide. I began to play with the idea of a single page application with some Tab Pages rather than attempting any page navigation per se. My colleague Mark helped in providing some clarity in how I was going to make the awkward grid representation of the estimation factors work in the UI, he suggested a custom ListBox where each element is a combination of all four fields in each row of the spreadsheet. In the beginning I tried out a combination of two static regions that somewhat resembled web parts and the Tab Pages for the rest of the application windows.

Current UI

The XAML for this UI layout is as follows and utilises the Grid control along with some custom controls in the upper static area of the interface. The custom user controls are designed with their content nested in Border controls and Grids. Using * sizing, the Grids are well suited to laying out table like structures that grow and shrink in the browser window with the kind of fluency that users have grown accustomed to.

<UserControl
    xmlns:basics=”clr-namespace:System.Windows.Controls;
        assembly=System.Windows.Controls”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:views=”clr-namespace:Org.Techavalanche.PointCaseEstimator.Views”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable=”d”
    x:Class=”Org.Techavalanche.PointCaseEstimator.CaseInPoint”
    d:DesignWidth=”640″ d:DesignHeight=”480″ HorizontalAlignment=”Stretch”
         VerticalAlignment=”Stretch” Width=”Auto” Height=”Auto” >
    <Grid x:Name=”LayoutRoot” ShowGridLines=”False” Width=”Auto”
                Height=”Auto” HorizontalAlignment=”Stretch”
                VerticalAlignment=”Stretch” Margin=”2,2,2,2″>
        <Grid.RowDefinitions>
            <RowDefinition Height=”300*” />
            <RowDefinition Height=”300*” />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=”250*” />
            <ColumnDefinition Width=”300*” />
        </Grid.ColumnDefinitions>
        <views:ProjectDetailsView Grid.Row=”0″ Grid.Column=”0″
                  Width=”Auto” Height=”Auto”
            HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch”
                  Margin=”2,2,1,2″ />
        <views:CalculatorView Grid.Row=”0″ Grid.Column=”1″ Width=”Auto”
                  Height=”Auto”
            HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch”
                  Margin=”1,2,2,2″/>
        <basics:TabControl x:Name=”tabControl1″ Grid.Row=”1″
            Grid.ColumnSpan=”2″>
            <basics:TabItem HorizontalAlignment=”Left”
                VerticalAlignment=”Top”
                Header=”Environmental and Technical Factors”>
                <views:FactorList HorizontalAlignment=”Left” Width=”Auto” />
            </basics:TabItem>
            <basics:TabItem HorizontalAlignment=”Left”
                VerticalAlignment=”Top” Header=”User Stories”>
            </basics:TabItem>
            <basics:TabItem HorizontalAlignment=”Left”
                VerticalAlignment=”Top” Header=”Actors”>
            </basics:TabItem>
            <basics:TabItem HorizontalAlignment=”Left”
                VerticalAlignment=”Top” Header=”Resource Planning”>
            </basics:TabItem>
        </basics:TabControl>
    </Grid>
</UserControl>

Update # 2.0 [17th November 2008]

The User interface is adapting gradually whenever I have the time after hours, however I am really quite happy with it’s progression. The technical and environmental factor ListBox’s on the second tab in the lower portion of the UI have taken more shape and now incorporate a modal dialog for master-detail styled editing (using Data Binding). The modal dialog is created by using using opacity and visibility settings of the two user controls in question (the Main UI user control and the dialog). This was achieved by creating a dialog window (user control) that would stretch across the entire browser window and set its border’s opacity to allow the main UI window to remain somewhat visible underneath. The details of the selected ListBox items would be displayed in contained user control which would be centred in the foreground widow. Scott Gu demonstrated this technique in his Silverlight Digg application series of posts. Here’s the XAML for this example.

<UserControl
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable=”d”
    xmlns:views=”clr-namespace:Org.Techavalanche.PointCaseEstimator.Views”
    x:Class=”Org.Techavalanche.PointCaseEstimator.Views.FactorEditorWindow”
    d:DesignWidth=”640″ d:DesignHeight=”480″>
    <Grid HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch”>
        <!– The opaque stretched border –>
        <Border HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch”
            Opacity=”0.34″ Background=”#FF8A8A8A” CornerRadius=”7,7,7,7″ />
            <Border CornerRadius=”20″ Background=”#FF5C7590″ Width=”460″
                Height=”300″ BorderThickness=”2,2,2,2″ BorderBrush=”#FF556678″>
                <Image Name=”btnClose” Width=”30″ Height=”30″
                    VerticalAlignment=”Bottom” HorizontalAlignment=”Right”
                    Margin=”20,8,23,4″
                    Source=”../Images/Symbol-Delete_not_active.png”
                    Stretch=”UniformToFill”>
                </Image>
            </Border>
            <!– This is the Detail Control –>
            <views:FactorEditRow Name=”EditRow” Width=”460″ Height=”300″/>
    </Grid>
</UserControl>

The second Tab started to take a bit shape and recently I a toolbar was added along the bottom of the window for quick access to the tab indexes changing. Here are some images of a very recent (17th November) yet earlier iteration of the UI with and without the modal dialog.

Apparently some developers still show a preference to working in design mode in VS.Net, I prefer to layout and prepare my UI in Expression Blend and have to say that I am becoming more comfortable with the tool each day and feel confident it will become as much second nature to me as using VS.Net itself. I know some people have stated that they really don’t like Blend and find it too cumbersome to use, my main wish at this point is for the inclusion of intellisense which would speed things up somewhat, other than that I find myself becoming quit familiar with this new design tool. I will know that I have become a reasonable user of Blend when I can knock out a UI layout with the same level of comfort that I had when using the Windows or Web forms designers.

At this stage of Silverlight learning curve, I am pretty happy with the UI however I would like to inject more of a corporate feel into it and I would certainly welcome some more out of the box layout friendly controls (WPF supports docking for example) and the recent release of the Silverlight toolkit will certainly be a useful addition. We should anticipate in time as more new controls become available and third parties like Telerik and Infragistics start come to market then the options will start to expand quickly. One nice Corporate looking UI I spotted recently via Martin Grayson’s blog was the Patient Journey Demonstrator and the Blacklight project which contains a Drag Drop Panel which I plan to check out immediately.

I have made this Use Case Point estimator project available online so those who wish to follow it’s evolution may do so when I post an update here on my blog. Currently the application exhibits zero usable functionality and exists entirely as an exercise in page layout, it will however over time become adorned with the business logic and data access code to make it a functioning piece of software.

Update 24th November

The latest UI has changed again and now all user controls are encapsulated in a Tab Control. The project url can be found here.