Category Archives: Uncategorized

Modern Desktop – prototyping Jerry’s Windows 9 vision


image

I recently came across a design from one Jerry Jappinen for modernizing the “desktop” ..

I thought it would be fun to take his designs to the next level and prototype it as a WinRT-XAML-C#-SharpDx APP.

Also the goal with this post is to share my thought process on how I would go about architecting such a design.

 

The Design

 

Jerry came up with some nice ideas for the “modern” windows desktop ..

image

 

image

image

 

And Jerry’s “hopes and dreams” for Windows 9 …

image

 

** I personally want to call out to Jerry to thank him for sharing. Its contributions like his that makes coding up today’s prototype worth while … :)

 

 

My Initial Breakdown of the Design

 

The main elements of the designs that I can make out are …

 

image

 

 

image

 

image 

 

The finished Prototype (still images)

 

Jumping ahead so that you can see what the end prototype looks like.

(there is a video of it running at the end of the post, these still images are not reflective of the prototype as all the animations are not visible)

 

image

 

image

 

image

 

Technologies I will use

 

 

 

Project layout

 

Generally for quick prototyping I like to have a simple folder structure for my assets/content/code .. The idea is to rapidly prototype ideas!

 

image

 

  • Assets – images, videos, general visual content
  • Controls – reusable UI components.
  • Converters – Convert data into something that the UI can use
  • Messages – MVVMLight Event Aggregator message definitions
  • Models – General data objects that is reusable and often basic types
  • Services – generic services reusable across the view models
  • ViewModel – the implementation logic behind views, generally has the “brains” of how a UI behaves and sometimes looks.
  • Views – contains the UI of the app, majority of UI is bound to VM’s and rarely do we use code behind

 

Background

 

I always tend to start with getting the background up and running for all my projects, and the main reason is i like to be visually immersed in my app from day one. I tend to do F5 (run my app) quite a lot during the course of the day so having a stimulating background makes it so much easier to keep my creative juices flowing :)

 

The goal with the background will eventually be to render it via Direct2D and incorporate rich effects and animations. For now it will only be an image and possibly rotating between a couple of them.

 

image

 

This background control renders in the MainPage.xaml and is z-ordered at the very bottom of the visual tree underneath all the other visual elements

 

image

 

 

User

 

The user details of the app consists of a View and View-Model . List most of the UI in the rest of the prototype i use MVVMLight to wire up the two.

 

image

 

image

And as you can see the important bits of the UI is filled in via binding, even thou its a prototype i find it faster to knock out the V’s and VM’s

image

 

And with most of my ViewModels i always have “sample” data that is visible at design time and runtime!

 

image

And as you can see BLEND has the sample data at design time that makes styling so much easier

image

 

The rest of the components share a similar architecture, V-VM , sample data, all important bits are bound! I won’t go into too much details for the future controls, i will however highlight interesting things!

 

Taskbar

 

The important things to know about taskbar are ..

 

1. Taskbar is split up into 3 different sections (tasks, status, time) and each is layed out and flows nicely so in the future when we have different device sizes and orientations these areas can nicely flow

image

 

2. The basic unit is a TILE … These Tiles are reused all over the place and this tile is as lean as possible

image

 

3. Where possible I try to use VECTOR assets rather than bitmaps. ALL the icons in my prototype are PATHs that i took from MetroStudio and bound via the VM’s to the Views!

 

image

One of the major reasons i like using vectors is when the user ZOOM’s into my UI they retain high fidelity …

 

4 .When tiles animate in I try to use “Transitions” over custom storyboards or custom code ..

image

 

 

 

Windows

 

A window consists of a Chrome and the Content. Ill cover the content below in the “App” section..

image

As each “Tile” in the taskbar is clicked a Window is created and placed in a “Windows” collection and rendered via binding to the View. Its important to know that its ALL about binding ViewModel’s to Views as much as humanly possible

image

 

 

 

Windowed Apps (eg. YouTube)

 

Now an APP that loads within a Window’s “CONTENT” area is very interesting … The approach I’ve taken is that the XAML for the APP is defined as PURE XAML with NO CODE BEHIND.

And more importantly this APP’s XAML is “dynamically” loaded in when needed.

In the case of the YouTube app, the only APP i’ve wired up to prove my point, is a pure XAML only UI…

image

This XAML is dynamically loaded into the VisualTree ONLY when needed, i.e. when the YouTube app tile is clicked.

image

 

The XAML has a binding to a ViewModel that currently is embedded within the prototype app, BUT ideally these VM’s will be separated into there own dlls and hopefully in the future possibly injected/MEFed in .. Cross fingers we are allowed to do this in the future!

image

 

The XAML View binds to the VM …

image

 

My goal is to have many different XAMLs that the USER can choose from for each APP. In the case of this demo YouTube app, a user in the future may choose from several different XAML skins , each of them bound to the same VM (YoutubeViewModel)..

 

Performance & Tuning

 

At every step of the way, as i created each control and F5d to see the running progress of my prototype, I made sure to continually check the taskmanager and do relevant memory watching.. I’ve learnt to proactively trace my app upfront rather than at the very end :)

I’m currently at 32mb footprint, quite happy with that ..

 

image

 

Other Info

 

  • All messaging between the View Model’s/Controls/Views/Services is done via Event Aggregator …
  • View-VM binding as much as possible , near zero code behind. Note i have no issue around codebehind, i just wanted to push as much logic into my VM’s so i can easily change views when i wanted to!
  • The SharpDx rich background will come in the next blog post
  • The SpinKit styles for loading animations are awesome… :)
  • Total time to prototype this was about 12hrs
  • The demo works targeting x86/64, ARM!

 

 

Video of the prototype

 

Here’s a quick 3min video of the running prototype on my Surface RT (1st generation). Because great care was taken to target ANY CPU i could easily target ARM :)

The second part of the video shows me running it natively on my laptop (Intel CPU).

 

 

 

Demo Code

 

You’ll need VS2013 to run the demo code ..

 

image

 

 

Conclusion

 

This first blog post was purely to get the architecture and the major XAML pieces done .. Next step is to do the SharpDx background ..

I have to admit that the tooling story has greatly improved since last i used it, windows 8.0 version of tooling. It was a pleasure to use Blend and VS2013, i had zero blend crashes :)

Even after all these years, WPF, Silverlight, Jupiter … i still honestly believe XAML is the best UI technology out there! :)

How far will Microsoft go with HTML ?!


image

Let’s face it people, if you can deliver your product in HTML without compromising on UI/UX then … you should !!!

HTML is the ultimate cross platform technology, and that’s the sad truth.

I still do believe that Silverlight has a large part to play both on the web and on the desktop BUT I admit HTML5 is starting to look good for delivering simple Line of Business applications.

What I wanted to do today is discuss something interesting that I’ve been watching unfold, and that is the story of Microsoft Data Explorer.

The reason I am watching this project very closely is that it could be a sign of the future direction of Microsoft products. Bare in mind thou it is only a beta/labs project.

What’s I find interesting in this product is this

  1. it is a web application hosted on azure as a service
  2. it has a desktop, offline and connected, implementation of the application
  3. Both 1 & 2 look almost identical in functionality
  4. They appear to be aimed at a Metro style app world, that is they look like prime candidates for a future “metro style app”
  5. They are what I would categorize as “Line of Business” apps
  6. They are part of the SQL Azure family
  7. The UI technology behind the app is HTML based
  8. Considerable size Microsoft project that I would consider as embodying Microsoft’s future vision for apps.

All of these things interest me because this app could be a window into the mind of Microsoft and it’s architects. An idea of how they plan to build the next decade style LOB apps that cross desktop & metro, cloud and offline, and possibly across devices.

So let’s see how the desktop client of this product works Smile

The install can be found here, it’s early beta BUT public. I encourage you to go forth and install it and see for yourselves how all this hangs together.

It installs in the “Program Files” folder

00008

It has an entry point known as “ClientApp”

image

 

Now this is where it gets very interesting … This is a quick analysis of the architecture of this desktop app..

 

00007

It’s a Win32 app that runs

  1. ServiceHosts
  2. HttpListeners
  3. Forms that host WebBrowsers
  4. Forms that are also Javascript interceptors/windows

Basically it is a desktop app that is a local webserver serving up webcontent..

Now that is an interesting approach, imagine taking your HTML Metro Apps and having that exact codebase running on the desktop within these local webclients ..

What’s more is this local WebClient is a ASP.NET host .. yes it hosts asp.net content Smile

This is a rendered screen and the parts that make up the screen..

00006

The root folder that the app is installed at is what is loaded into the “client website”

00001

It consists of css , js & views (which are just ASP.NET content)

 

00003

 

00004

 

00005

And the “BIN” folder contains the executable’s and the binaries that make the desktop client run ..

00002

Will this architecture work in the big wide world with firewalls and port rules on local systems?!

But the idea of taking your metro style app , html ones, and having them run as is on the desktop using a similar architecture is a pretty awesome idea no ?!

I know of other Microsoft products that are going HTML and are more than likely going to follow a similar architecture.

Anyway I thought I’d share this with you, I actually like the approach BUT I have to admit the performance of this desktop app is very slow, I haven’t analysed the reasons for this as I would have expected it to be much faster running as a local web hosted application .. but go figure …

Bottom line is I like what I see … interesting times ahead in the HTML world Smile

… now back to my forever favourite technology Silverlight !!!!

Metro style app designs that are starting to excite me!


image

I’m really starting to like what I’m seeing in metro designs that are leaking. They’re starting to really show me what level of re-imagining Microsoft and partners/developers are making for their apps. More importantly it’s showing me the level of risk people are taking with Metro.

It’s very risky designing your apps for a metro/muti-sensor first world. Exciting times us developers/designers live in.

And I honestly am starting to see possibilities of metro style apps in the business/enterprise world. As long as these apps compliment desktop apps or can exist side-by-side in the desktop that is. I really hope MS shows us the “desktop” story!

Most of these pictures aren’t of a sufficient quality to be able to zoom into, and are generally sourced from 2 sites

1. ithome.com

2. win8china.com

 

20111218_192233_856_u

20111218_191917_996_u

20111218_192130_778_u

20111218_192005_59_u

 

20120107_155210_381_u

20120107_155537_84_u

20120107_155335_84_u

20120107_155429_584_u

20111204_214026_878_u

20111217_131722_996_u

20111217_132342_449_u

I ❤ C# 2


image

This post follows on from my previous post “I ❤ C#” which discusses interesting recent MS jobs that mention a lot of Managed stack work at very low system levels.

It was pointed out to me that  the “Technical Strategy Incubation Team” has been in existence , that we know of, as early as April 2011 – post reference. Possibly even earlier …

What we know of that incubation team is that it consists of some Midori folks (Mary Jo Foley – Microsoft’s Midori: Who’s on the all-star roster? )

What we can’t directly link but definitely sounds related is that this team probably has A LOT to do with Redhawk including the bit’s we’ve found in Windows 8 (SLR100.dll / WCL*.dll) .. – (Mary Jo Foley – Microsoft codename ‘Redhawk’ lives… in Windows 8 )

What’s interesting with these latest job posts is the scope of the work the incubation team is now doing. Seems like the groundwork and foundation is now in place to build amazing managed features. Things like “structured storage” or “cloud solutions” are being mentioned as areas being built on top of this new radically re thought OS stack.

What’s also interesting is the explicit mention of radical rethinking of UI/UX frameworks and the associated graphics stack/pipeline by this team. Seems like a lot has happened under the covers that hopefully will be in the Windows 8 beta dropping in 2012 Q1 (JAN-MAR).

What’s also interesting is I have been closely following Windows 8 Server as well as System Center 2012 . I did a series of tweets that covered an MS Distinguished Engineer & Lead Architect “Jeffrey Snover ” discussing Windows Server 8 – Storage Solution (I recommend you watch the video)

image

image

image

image

image

image

image

image

Apparently the storage services are .NET services running in Windows Server 8, they have a wealth of cmdlets for automating them via WMIv2/PowerShell). I wonder if this at all has anything to do with the “Incubation Team” and their work with cloud storage, as well as the new strength of C#. – job reference structured storage subsystem

This Incubation Team has a lot of juicy managed work, I’ll keep my eyes out for news/jobs relating to them for a long time Winking smile

I ❤ C#


image

Seems like Microsoft are forming a very interesting team called “Technical Strategy & Incubation”. Their goals are pretty all encompassing AND definitely interesting if your into UI/UX & Managed coding!

Check out these snippets from recent job posts

“help build a next generation UI/Graphics platform. This incubation team is chartered with pursuing strategic opportunities which are difficult to address incrementally with existing systems, such as UI responsiveness and security, rich applications that span devices, new web-centric programming models, and effective use of GPUs and many core ” – job quote 1 

“development of a safe concurrent programming model. A programming model is a core component of a system, 99% of which is written in type- and memory-safe C#. A core principle we add to managed code is that 1st class, statically enforced concurrency-safety must become a peer of type- and memory-safety ”  – job quote 3

“requires innovation at each layer of the software stack: programming model abstractions, scheduling (kernel and user-mode/runtime), message passing and asynchrony more generally, shared-memory, data and task parallelism, distributed parallelism, heterogeneity (including vectorization and GPGPU), interaction with processor architecture, feedback directed optimizations, and even language design and compiler implementation” – job quote 3 

“Come build the structured storage subsystem for a next-generation cloud computing platform ” – job quote 4

“You will write code in a language like C# that has the performance characteristics of C++. ” – job quote 5

“We are looking for great software developers interested in compilers and programming languages to join our team. Our goal is to build the best performing, highest-quality ahead-of-time native-code compilers in the world for C++ and C#. On the C++ side, we are building a world-class optimizing compiler for C++. On the C# side, we are building an advanced optimizing compiler that translates MSIL to native code. We have a unified compiler infrastructure that compiles C++ and C# to native code, so improvements for either language benefit the other language also” – job quote 6

so what is this incubation team

“a small hand-picked team of developers passionate about building real systems that extend the current thinking in Operating Systems and Platform technology. The Technical Strategy and Incubation team has the unique aspect of being outside of existing product groups, allowing us to pursue experimental ideas and solutions that may be impractical for existing products due to legacy demands and business commitments. This is a high visibility position with impact in the incubation, in the company, and in the overall market ” – job quote 1

“tackling the most exciting problems in our industry . Our work combines recent advances in storage with those in operating systems, programming languages, networks, and security. We’re rethinking computing from the ground up, and incubating ideas with the potential to transform our industry. ” – job quote 4

“Cloud computing is in its infancy, and Microsoft’s Technical Strategy and Incubation group is tackling the next decade’s most exciting problems. From distributed storage to advanced compilers, we’re rethinking computing from the ground up and incubating ideas with the potential to transform our industry. ” – job quote 5

“We work independently of Microsoft’s product groups, pursuing strategic opportunities that may be initially impractical for existing products due to legacy demands and business commitments. We run like a well-funded startup within Microsoft” – job quote 4 , job quote 5

“Our goal is to build the best performing, highest-quality ahead-of-time native-code compilers in the world for C++ and C# … we are pushing the state-of-the-art in compilers and using modern programming languages for systems programming” – job quote 6

and who qualifies for this team

“candidate must have a high tolerance for uncertainty and changes in direction. Comfort with low-level systems development and expert proficiency in a C-like language are required. Additional desirable, but not mandatory, skills include familiarity with GPU programming and rendering techniques, numerical algorithms and geometry, asynchronous programming models, data parallelism, concurrency, data synchronization, data-driven UI frameworks, and real-time collaboration” – job quote 1

“We are seeking an individual with experience in several of the following areas: scalable rendering engines, glitch-free media pipelines, 2D vector graphics and typography, and rich UI frameworks.” – job quote 2

“spend a significant percentage of his or her time writing code” – job quote 3

“You will have a passion for compilers, program analysis, and/or programming languages, love to make code run fast, and write high-quality code. The group is a world-class group of engineers in compilers” – job quote 6

“skills include: familiarity with C# and managed runtimes” – job quote 1 , job quote 2, job quote 3, job quote 4, job quote 5, job quote 6

 

a C-like language

C# is a C-like language right Winking smile

 

If the vision of this incubation team becomes reality then there are some damn exciting times ahead for managed programmers !!!!

Incidentally there are dozens of jobs posted for the “incubation team” … sounds like it’s a high priority !!  ❤❤❤

Big thanks to the person that sent me the link to the jobs … you know who you are!! Winking smile

Here’s my Twitter library to get you quickly building WinRT Xaml.Net apps (TwitterWinRT)


image

There’s not many libraries out there that helps you get started writing Win8 .NET XAML metro apps for twitter so I decided to take my FlickrWinRT library and turn that into a Twitter library (called TwitterWinRT).

It’s very simple and only has 4 twitter api’s wired up BUT it uses Async/Await pattern for all calls and does the OAuth stuff.

It also uses JSON serialization/deserialization instead of xml which is what I used in the FlickrWinRT library.

Also I haven’t been able to get any good sample code on how to use WebAuthenticationBroker, that’s the only thing missing here. I really wanted to use that class BUT am unable to work out how to do it, any help or .net sample code would be much appreciated Smile . For now it uses the traditional approach to OAuth.

Video demo

TwitterWinRT library for building Win8 .Net metro style apps

 

Picture explanation of what it does

 

1. Run the demo metro style app

image

2. Request Token (click ‘Request authorization’)

image

3. Take the provided ‘Token’ and use it to authorize the app for use by your account.

image

4. Once app is authenticated for use we make 2 simple calls to

a) retrieve user information

b) retrieve home timeline

image

 

Here is the sample code

 

Make sure to set the “TwitterMetroTest” as the startup project

image

Also make sure to fill in you API app key and secret key

image

 

 

Go forth and start making really cool .NET Metro style apps!!!!

Just Beautiful … going from (HttpWebRequest / HttpWebResponse / Actions / IAsyncResult / AsyncCallback) to (HttpClient / Task / Async / Await)


image

So I’m doing some coding for a library that I hope to release soon that will give you all the important plumbing for making Twitter calls for WinRT apps. It leverages ideas from the Flickr library I recently updated for WinRT a couple of posts ago.

This time however I planned to re-write the plumbing to use more native WinRT concepts like the Async/Await pattern.

The networking libraries that we’ve all become accustomed to are the HttpWebRequest / HttpWebResponse which uses IAsyncResult/AsyncCallback and Actions, however these aren’t wired up to take advantage of the async/await pattern.

The equivalent of these networking libraries that does have the async/await pattern built in is the HttpClient.

So I rewrote some key low level methods to use this new class and leverage the new async/await pattern… It was a beautiful experience, the pattern and the class definitely have become a favorite of mine !!

(click picture to see the larger more visible code bits)

image