Developer Flotsam

This article presents you with the facts, links and opinions required to arm you with information about Silverlight and what makes it so good.

You are a developer / architect / manager / designer / consultant and you have this great idea and you think Silverlight would rock out the implementation.

So you embark on an crusade of internal evangelism and enlightenment. The problem you face is that every time you mention this new dark magic the senior management / IT guys / Flash fanbois / druids cry *WITCH* – and bury your suggestions under a pile of sly negative remarks. They come out with all sorts of comments, questions, accusations, slander, colorful language… you name it. What you need is some AMMO. Ammo to take in to that next meeting and shoot them down. Get in their head. Preempt questions and remarks. Un-negative their negativity. Make them think you are reading their minds. Make them rue the day they ever cussed Silverlight!

This article will provide that ammo. Oh and I’ll stop with that bizarre prose from the first paragraph

First off the chopping block – Flash

Okay, so Flash is fairly entrenched. As the protagonist it will be your job to tackle the Flash monster first up.

Lets start of with some of the defensive comments you may hear from a “Flash backer”.

Flash has ten years on Silverlight

It sure does… but Silverlight is based on the venerable .NET Framework – itself coming up on ten years old – so the platform maturity of Silverlight is right up there.
Ten years sure has more copies of Flash installed in browsers around the Internet no denying this fact – but below I explain why this is not a problem for Silverlight (in the section “Flash is Known!”).

Our designers really really like Photoshop and Illustrator

So install the Illustrator XAML export plugin. Nobody ever said you had to stop using it. Although, you are only creating flat designs in Illustrator.. maybe you might like to make something that can be used in the real app? Maybe developers shouldn’t be doing animation. Take back the control designers, feel the power… Get in to Blend and actively contribute to the design of the app. Don’t just throw your design over the wall for an integrator to cut up, CSS it, HTML it, JS it for you! Check out the Designer/Developer Workflow stuff below.

Designers don’t like change

Nope, probably not… but the designers I’ve seen persuaded to give it a shot come out the other side absolutely loving Silverlight… and the Expression tools. Also remember that designers probably don’t know/care about all that .NET knowledge you have lurking in your development department either. I’ll come back to designers later.

Flash has more features

Yuppers – it has pixel level shaders, web cam you name it! Hey Silverlight is barely two years old, and its got XAML (awesome binding), .NET, awesome networking stack, LINQ, extension methods, anonymous methods, HTML DOM Bridge plus so much more… I’m saying Silverlight may be lacking some of the “pretty” features of Flash, but it’s core is just so damn good and it’s language features simply blow what Action Script can offer out of the water. .NET Framework baby! Give me C#!

Silverlight also has support for adaptive streaming (see SmoothHD.com for a dose of awesome) and the venerable VC-1 high definition video codec. Microsoft also *builds* codecs, unlike Adobe which hacks and licenses them.

Add all this up and smash in a dose of “Silverlight is only a toddler” -> and you can see where this is headed pretty quickly… Somebody got all growd up!

Flash is Known!

Yes it is – by developers, CIO’s, IT managers, CEO’s (maybe), designers – people in the industry. I performed a highly scientific survey of my middle aged aunties asking them all about Flash and how it came to live on their HDD. “Umm… what?” was the response. Turns out they just were after a particular piece of functionality (probably YouTube) to work, so clicked yes until the bloody questions went away and the video started playing.

My point, people will click anything to see the content they want – and Flash isn’t installed by default in *any major browser*. They’ll install Silverlight to see your site… at 4 megabytes and 20 seconds to install – its totally painless. This was proved by the NBC Olympic coverage. Add to this the pop up they see to install Silverlight is branded heavily with “Microsoft” – now that’s a brand my aunties recognised! Microsoft could pop up a message saying “Click here to blow away all your family photos” and they would click yes. Probably not from Adobe – which only one had heard of mind you.

Silverlight is installed by Windows update – so a lot of people already have it… and you can bet it will be in the next version of Windows.

So – developers, CIO’s, IT managers, CEO’s – I challenge you to survey your aunties and grandmas and other random non technical persons! These people will not install Silverlight problem is *in YOUR head* – not the public’s head.

What about SOE – Standard Operating Environment

Okay, this could be tricky… but it’s amazing how quickly an SOE can be changed when a head kicking, big shot, pragmatic manager thunders down the line asking why he can’t run the new demo app that his .NET team has made for a client! “Give me one good reason why you wont use your automated WSUS server to send out Silverlight?!”. Talk about a scared little obsessive control freak administrator… “Just get it done, Roy”. [It's going to be in Windows 7 anyway.] EDIT (July 09) Silverlight will not be in Windows 7 by default – my bad

.NET apps in the browser with a nice and safe sandbox? Yes please.

Illustrator kicks Expression Design/Blend’s ass

Okay, sure… Illustrator has loads of features over Expression. But the stuff you output from Illustrator is miles away from being usable in a real app! Design and Blend are created with one thing in mind… making *real applications* not *pretty designs that require a week of a developer’s time to mangle in to something workable*. What, you think that you can output a PNG, slap it on to a page and it just work – dude, you know that’s not true. Designer 2.0 please (see below).

They say design has 20% of the features you use in Illustrator 80% of the time.

JavaScript and AJAX

Let me start by saying I totally love JavaScript… and jQuery and all that. I train people on JavaScript etc and it forms a decent part of my job as a consultant at Readify.

JavaScript has reach

Can’t deny that… probably to it’s detriment a little, because of *how* it gets it’s reach. A definite up for JS is that it is almost universally available. The problem is that JavaScript is different between browsers. Sure there are libraries to fix this, like the awesome jQuery – but as a platform it’s “different”… no denying that.

JavaScript is known

Is it? Ask your developer if JS is OO, what prototypal inheritance means and describe what is so good about a closure… maybe ask them what is currying? Even better, ask your “designer that does some JS” these questions. My point here is that in my experience JavaScript may not be as well known as you think.

I’ll tell you something – JavaScript sucks for designers

JavaScript is let down because it is not inherently toolable… You can’t set the timeline bar to 10 sec, drag an image to the other side of the screen and click “play”. You have to write code, CSS and the rest to do this… Sure, I know of (some) designers that can do this – but designers are rarely good developers, and JS is a powerful functional language… see the previous point. I’ll do the code thank you very much!

So what’s Silverlight got then?

Silverlight has so many hidden features and benefits, some technical and some not. If you look at Silverlight like a “it can animate and play videos, it’s just like Flash” then you are sooooooo missing the point. I put it to you that you are completely under-informed sir!

Silverlight has you-beaut designer/developer workflow

You-beaut? It’s Aussie for total awesome.

You have heard of XAML… its this HTML like markup thing right? Something about making tooling easier? Human readable? Yep, yep and yep… but did you know the real reason why XAML is just ridiculously awesome? Designer/Developer Workflow… bam. The Adobe camp dropped the ball on this by releasing designer/developer friendly tools that do not promote workflow… and their attempt to rectify the problem – “Catalyst” is still a year away at the time of writing.

So what’s so good about designer/developer workflow? Well, for bean counters it’s large cost savings. The basic premise of DDW is wireframe and prototype re-use by designers and developers. They sit down and build a wireframe in Blend, which can then be used by both parties to make the final product. Oh, make sure you throw in a sweet naming convention whilst you are in there.

For example, you are building a clock. Designer makes a really simple wireframe of a clock – the round bits, the hands, some fields for date and day etc. A naming convention is created at this same stage e.g. Call this text box txtDate, txtDay, txtXxxx, call this animation sbxxxx etc.

The wireframe is then taken by both the designer and the developer to have their way with. The developer adds in the code to create the behavior of the clock. Populate the day data, fire off animations etc… hopefully they would be using a sweet pattern like Model-View-ViewModel to make this all work nicely in Blend… more on this little gem later.

During this stage, the designer takes the wireframe and pretties it up, turning it in to a masterpiece.

When both parties have completed their work (or at iterations during development) they merge the result. The merge is easy, because the developer hasn’t had to touch much XAML at all! Just dump in the designer’s XAML and because data binding was used, it all just hooks up…

I’m not going to try to smash a full lesson on DDW in here, but I will sure as heck provide some links.

• First read this whitepaper on XAML and DDW by Karsten Januszewski and Jaime Rodriguez. The New Iteration. This is a fantastic paper on all things XAML and workflows… full of cost saving tips.
• This video from PDC demonstrates how to use Blend and Designer Developer workflow to great effect.
• This three part post shows how to build a real application using Designer Developer workflow. Part 2 and Part 3. Get up on it.
• This video from MIX08 in Vegas demonstrates the clock scenario I described above… simply a must watch.

I’d strongly recommend viewing these videos and reading these posts to gain a real understanding of how this process/pattern can really help you cut down development time and smash quality through the roof.

The big bertha point – .NET Framework

Wait a minute. You mean that any ASP.NET/Win Forms/WCF/WPF/blah developer can do Silverlight? Whaaaaaaat? You mean I can just advertise for a C# developer when I need more talent?

Silverlight 2 is built around the Core .NET Framework, a scaled down version of the full .NET Framework. What do I mean by scaled down? Well, it’s missing things that don’t make sense in Silverlight, like ADO.NET, ASP.NET and Windows Forms etc.

What it’s not missing is WCF, ASMX, JS integration, XAML (with binding and all that cool stuff). It’s plenty of awesome .NET features.

Oh, and what about LINQ, extension methods, anonymous methods – all that cool C# and VB.NET stuff! It’s all there. .NET 3.5 is at home in Silverlight 2 – and you are welcome for dinner any time you want.

Visual Studio… just going to let that sink in for a minute. Visual Studio man. That’s how you make Silverlight. Even on the Express edition of Visual Studio. Just wack in the free Silverlight tools and away you go. Seriously, developers love Visual Studio and they will be right at home here. Seamlessly switch between client and server development in the one solution, using the same languages and techniques at both sites… the integration is awesome.

Adding a web service? No problems, Visual Studio automatically discovers and creates the service proxies for you, just like in other .NET projects… Just add the thing and start using it.

TFS, MSBUILD, Unit testing etc… all present and accounted for.

Seriously, when creating Silverlight applications you get to use the best of breed tools… there is absolutely no arguing with that.

What about Expression – how much is it?

If you have a MSDN Subscription (even the base one) then you get Expression Blend… And if you don’t have it then you can purchase it for a few hundred bucks. Or go win a copy at a user group meeting or at ReMIX. A little licensing never hurt anybody, and it’s an awesome product. It’s built with WPF too…

Edit It’s been pointed out to me that Expression Blend only comes with Premium MSDN packs. Expression Studio comes with VSTS + Premium.

Integration with Server Side

Like I stated above, Silverlight works seamlessly with WCF and ASMX. Just click the buttons to consume people.

ADO.NET Data Services are rockin’ out in Silverlight. Check em out…. Oh and check out how you can use LINQ from Silverlight to dynamically retrieve data from the server – here… Sooo awesome.

Something else worth checking out is the new LOB framework for Silverlight is really cool too – business rules created in your OR/M system (LINQ2SQL and Entity Framework) seamlessly are passed to the client, and much much more – Check out the videos here.

Silverlight Performance

Silverlight is faster than Flash at processing animations and compiled execution of commands. See the Bubblemark animation test for a working example of comparative animation speeds.

Dependency Injection

Want design time data or testable code? Then check out Dependency Injection in Silverlight. There are a few libraries to do this, the best of which is Ninject. Check out this post for a great example on how to do this.

Model-View-ViewModel

There is a Silverlight project… then there is a Silverlight project made with M-V-VM… This pattern allows you to maximise the abilities of databinding to create loosly coupled/high cohesion code and design (XAML). Using Dependency Injection with M-V-VM (and the Command Pattern) you can make massive applications with such low complexity it will make you cry. See this post for a great example on how to use M-V-VM and the Command Pattern in Silverlight. Oh, and these patterns can also be used in WPF!

Will it Blend? Designer 2.0!

Blend… the XAML creation powerhouse.

Did you know that Blend actually runs your Silverlight application? This means that designers can adjust the layout/design at RUNTIME. Yep, if you make a clock, it will tick. Text boxes will have live data.

This allows for “nudge nudge nudge” design rather than “build, run, view, close, nudge, repeat” type design. This is a fantastic feature that you should have a really good think about.

You’ll need some design time data, so check out the part on Dependency Injection above!

Take this feature and meld it with Designer Developer workflow and designers can now work on the real apps… the stuff they make is actually used! Designer 2.0 here we come.

Community

The Silverlight community is booming. Silverlight.NET has a fantastic forum that is alive and kicking. You are never alone, post a question here and it is almost guaranteed to be answered, and quickly!

Perform a quick search on the Internet for Silverlight blogs -> you will be astounded.

There are many Silverlight user groups around the globe. We have the Silverlight Designer and Developer Network in Melbourne Australia which I help run. Check out the site for more information.

Common Questions and Concerns

So you’ve got passed the initial sell, and now they are pounding you with questions… well preempt them!

What about Security

You’ve spent all this time on web security and now you are going to go stuff it all up? No way. Silverlight uses the standard browser stack to communicate. So a network call in Silverlight will automatically include cookies and all those goodies to continue authorisation and authentication on the server. You can check the identity of a user in your service just as if you called it from a normal page.

You can log in with ASP.NET Forms Authentication then secure a folder in the web.config that has a web service in it and Silverlight will be able to access the service.

Additionally you can use the ASP.NET AJAX Authentication Service to log in / check user name etc from Silverlight at runtime.

The long and the short of it, treat Silverlight just like any other web page.

See this post for an example of how to integrate Silverlight with ASP.NET Forms Authentication, Custom Membership, WCF and even Windows Live ID (Screencast of same post here).

Do we have to start over?

Absolutely not. Silverlight integrates with JavaScript and the HTML DOM effortlessly. You can reuse your old content in the Silverlight application without making any back end changes (except for inserting the Silverlight application of course). Silverlight can search the HTML page for content, grab out this content and load it in to the Silverlight application, then overlay itself on the content to update the appearance and functionality. This means you can use your existing content management systems/techniques.

Your back end systems do not need to know *anything* about Silverlight.

How does Silverlight integrate with existing pages/functionality?

Silverlight uses a technology called the HTML DOM Bridge. This enables all Silverlight code to be called from JavaScript and all HTML/JS/DOM code to be called from Silverlight. For example, Silverlight could scan the entire page and look for an element with a particular ID, then change the content in that element with some data Silverlight retrieved from a WCF service.

See this post for an effective use of Silverlight and the HTML DOM Bridge to control Silverlight navigation with the browser back and forward buttons.

Do entire pages have to be converted to Silverlight?

Absolutely not. You can slowly update segments of a page to Silverlight… or you can upgrade the entire page at once. It’s completely up to you and your plan. Silverlight can run as an island or take over the entire page.

How could I minimise re-work and leverage existing code?

Firstly, Silverlight uses the Core .NET CLR (Common Language Runtime) and the C# and VB.NET languages. This means that any code you have written for use on the back end could now potentially be used on the client (for example advanced validation code). Silverlight XAML and C# could also be ported almost verbatim over to/from a WPF project for a desktop sister application.

Most common .NET patterns apply to Silverlight, so your developers can bring a host of their existing experience (and code snippets) across to the client.

Resistance to Silverlight

So you see some resistance to Silverlight. You get asked why all the resistance?

Design shop resistance

Design shops may resist Silverlight because they have a heap of cash invested in Adobe. They have all their Photoshop/Illustrator licenses and they have all these ActionScript developers that they have invested cash in… What happens when Silverlight takes off – it’s not like the ActionScript guys can do *anything but FLASH*!! They are married to that one platform.

Design shops usually have so much work piled up they don’t need to take on building Silverlight apps, they can just sit on their piles of work quite happily. And you can keep sending requests for tiny adjustments to the ActionScript code you own but can’t change. They can keep quoting you half a day for 1 hour worth of work.

Or… you can take back the code! Take it all back, take control! Why should you have a design shop in charge of your code?? Why can’t you do the code and they do what they do best – the pretty designs (hopefully in a working XAML format produced from Blend).

Keep in mind that design shops couldn’t give two hoots about your .NET skills, they don’t care that you have this development capacity that you can’t use on the client side.

Internal design department resistance

At some stage you have to make the decision that utilising .NET for client development is worth putting a couple of designers outside their comfort zone whilst they learn a new product / paradigm (DDW). You can guarantee they will come around to the benefits (as you already have). Remind them they don’t have to give up their Adobe favorites. Have a look at WikiPedia on Expression Design – here you’ll see that Design is based on Creature House Expression – a product which got rave reviews back in the day.

IT Guy

Awww, they are just scared of any changes to the SOE… think of progress. I’m sure the arguments in this article are enough to pull some strings to get this happening. Nuff said.

Enjoy!

So, get over to the Silverlight Getting Started page and download all the stuff you need to get up and running. Don’t forget to check out the documentation, labs, whitepapers and examples on the Lean Silverlight page too!

Hopefully you now have all the ammo you need to cut through the red tape and get your Silverlight project off the ground.

Jordan.