Silverlight Research Summary

So, I made it through Step 2: Read of my Learning Process 2.0 for Silverlight. Here is the product of that process.

Prologue: There is a really cool demo of Silverlight capabilities here.

What is Silverlight?

Remember “Write Once, Run Anywhere?” This lofty goal has been promised before <cough Java cough>. It’s still a desirable thing, to be sure: just ask any developer that still has to code webpages to look decent on IE6.

A new generation of technologies is beginning to deliver on the multi-platform promise of old. Silverlight is Microsoft’s entry into that fray. The Silverlight runtime is a subset of the .NET Base Class Library, runs on PC and Mac, and runs in all the major browsers including IE, Firefox, Safari, Opera, Chrome, and more.

Silverlight was born as “WPF/E”, which stands for Windows Presentation Foundation/Everywhere. WPF and Silverlight are both Microsoft’s latest User Interface technology offerings. Both are based on eXtensible Application Markup Language, aka XAML. The difference between WPF and Silverlight is in delivery: WPF is a desktop technology. Silverlight is a Rich Internet Application framework for delivery of rich user interfaces via the web.

No discussion of Silverlight is complete without mentioning Flash. Yes, Silverlight competes with Flash. Directly.

  1. Both Flash and Silverlight run in a sandboxed environment on the client.
  2. Both offer vector graphics and media (audio/video) capability.
  3. As of Silverlight 3.0, both support an out-of-browser running mode (Adobe AIR allows Flash/Flex programs to run locally outside a browser.)
    1. The primary difference between them is that Flash uses Actionscript, and Silverlight is based on .NET, which means Silverlight applications may be developed in any .NET-compliant language. These include VB.NET, C#, and with the Dynamic Languages support in Silverlight, IronPython and IronRuby.

      Browser Integration

      A Silverlight application may be embedded into a webpage using the Silverlight ActiveX control and the <object> notation, or by using javascript. A javascript bridge (HTML Bridge) between Silverlight applications and the hosting page allows javascript to call into the Silverlight app, and managed Silverlight code to call out to javascript functions declared in the hosting page.

      XAML

      XAML stands for eXtensible Application Markup Language. It is an XML-based language for describing visual elements of a User Interface.

      Think back to the days of VB6: the UI was all tangled up in the code. Then came .NET, and for some time the UI was all tangled up in auto-generated “designer” code. Now comes WPF, Silverlight, and XAML. Using XAML, the UI definition is completely separated from the programming logic. XAML pages declaratively describe an object graph. Parsing a Silverlight XAML page results in the instantiation of that graph and the rendering of the user interface it describes.

      Dynamic Language Support

      Dynamic Languages in Silverlight allow IronPython and IronRuby programs to manipulate and interact with the user interface in the same way as C# or VB.NET. This opens up Silverlight to Python and Ruby developers. The DLR Console Sample demonstrates another capability: interacting with a running Silverlight application in real time using code.

      Layout System

      The Silverlight layout system determines how visible elements of an application are positioned relative to the application host and each other. Several layout controls are included with Silverlight, including Canvas, Grid, and StackPanel, to name a few.

      Controls are laid out by the engine using inherited Measure and Arrange methods that cooperate to determine how much visible area a control wants, and how much it gets as a result of the overall layout of all visible elements.

      Controls

      Silverlight 2.0 introduced a library of ready-made controls, such as TextBlock, TextBox, ComboBox, etc. MSDN has a handy directory of controls.

      Silverlight controls are “look-less” in that the code that defines their behavior contains absolutely nothing about how they appear visually. The visual appearance of controls, including custom controls, is defined entirely in XAML. The .NET class that implements the control is referred to as a “control contract.”

      Just as with .NET Winforms and ASP.NET controls, WPF/Silverlight controls can be customized or created from scratch. Customization of controls in Silverlight is quite different, however. Winforms and ASP.NET controls can be subclassed and then customized. Silverlight control customization involves replacing the ControlTemplate of a control. This allows a developer to completely replace the visual behavior of an existing control.

      Common content may be shared across controls using a DataTemplate. This supports adding a common icon to a custom “submit” button, for example.

      Networking

      Communicating with the cloud in Silverlight presents several security challenges. Silverlight applications cannot freely communicate with just any service over any port; there are restrictions to prevent security threats such as malware, viruses, and spyware. Depending on configuration, communication is either handled for the Silverlight application by the browser, or the Silverlight client itself handles HTTP/HTTPS communications. The latter configuration is useful for RESTful communications or when the developer wants to handle cookies manually.

      The standard class for network communcation is WebClient. WebClient has asynchronous methods for writing and reading to a network stream. The HttpWebRequest and HttpWebResponse classes contain methods for more granular communications, including the ability to manipulate HTTP headers. Silverlight also supports Sockets for low-level TCP communications.

      The security model Silverlight uses allows minimally-restricted communication between the hosting domain and a Silverlight application. If a Silverlight app wants resources (i.e. files, read/write to a service) from another domain, however, a cross-domain policy file must be present on that domain. Flash/Flex/AIR applications use a similar security model, and Silverlight can read Flash cross-domain policy files. The policy file is an XML-formatted file that indicates what services and resources are accessible, and to whom.

      Data

      This was a source of confusion for me when I first started with Silveright. It’s important to remember that Silverlight apps run in the browser. This makes them more like Winforms apps than ASP.NET apps. Silverlight apps get their data over the wire just like any other desktop application. What does a Winforms app do when it needs data from the cloud? It uses a webservice.

      Silverlight apps can get their data over the wire via RESTful or SOAP-based services like WCF. Microsoft provides some help for data access in the form of ADO.NET Data Services (formerly Astoria) and .NET RIA Services.

      Here I am going to punt and guide you to the best authority I’ve seen on the difference between these options: Shawn Wildermuth.

      Media and Animation

      Silverlight’s Animation system is centered on the Storyboard control and the Animation controls. “From-To” animations including DoubleAnimation, PointAnimation, and ColorAnimation are used to animate double, point, and color-type properties of a control. These animations have keyframe-based companions (DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyframes, you get the idea) that use keyframing to perform the animation. Keyframing is a technique by which frames are interpolated between key points that are set in an animation.

      Bonus: DependencyObject and DependencyProperty

      DependencyObjects and DependencyProperties were not in the mind map, but they are important enough that they probably should have been, so I’ll go into them briefly here.

      Silverlight controls need lots of dependencies on each other for things like animation and layout. This requires more than the common model of using private fields to back public properties. DependencyProperties are like super-properties. When the values of a DependencyProperty are getted (is that a word?) or setted (again?) the internal implementation of DependencyObject (DependencyProperties’ base class) allows other things to happen, like notifying an ObservableCollection that a member has been updated (this is databinding), or animating a property of a control from outside the scope of that control.


Deconstructing My Learning Process

Lately I’ve been doing some self-examination of my learning process.  With Microsoft releasing so much new technology, including .NET 3.5, Silverlight, Azure, and soon .NET 4 (just to name a few) in rapid succession, there is a TON of new stuff to learn.  The learning process is fun for me.  I really enjoy picking apart a new technology, figuring out what it can do that no one has done yet.

I tend to follow the same loosely defined process when I’m picking up something new:

  1. Decide I want to change the world with some technology (often the flavor of the day: Azure, LINQ , Silverlight, etc.)
  2. Do a blizzard of Google searching
  3. Save a bunch of links (Delicious, private wiki, etc)
  4. Add all of that domain’s guru’s blogs to Google Reader (ScottGu, Wildermuth, etc)
  5. Add the StackOverflow RSS for that subject to Google Reader (I currently watch Silverlight and Entity Framework-tagged questions, it’s very cool!)
  6. Read a bunch of “how-to” walkthroughs
  7. Download code samples that demonstrate the bits and bobs I want to learn
  8. Go to town with VS.NET

I suspect this is a common process for many people.  It has occurred to me that being more aware of this process might help me to improve it.  I’m currently in the process of a deep dive into Silverlight.  Silverlight is such a humongous subject unto itself that I find myself spending too much time spinning my wheels.  Therefore, in the interest of improving my learning process and making it more efficient, I’ve decided to deconstruct it here for all to see!

Strengths and Weaknesses

Here is what I like about my process:

  • Gathers lots of reference material
  • Identifies authoritative sources for information
  • Follows others work in the domain (StackOverflow, Blogs, Code Samples)

Here is where I think my process can be improved:

  • Disorderly
  • Too task-focused
  • Wastes too much time on narrow subdomains

My Current Process

I’ll use my Silverlight research to demonstrate my current modus operandi.  I’m really jazzed about Silverlight, so I’d like to learn as much as I can.  I want breadth and depth.  I started with #2 of Dave’s Way to Learn Stuff, so I went to Google:

The first link is the official Silverlight Get Started page.    It’s a good start.  I see all the tools I’ll need to get rolling.  I also see:

  • Tim Heuer’s “hello world!”  Silverlight screencast
  • ScottGu’s series on Silverlight
  • Lynda.com training videos

I looked at some of these videos and articles, but not all, and not in any particular order.  My current process is not that orderly.  I tend to start off with an idea of what I want to accomplish, then set out to achieve it by targeting the specific elements I need to “Make It Work.”  This is one of the major flaws in my process.  I get so excited about creating something that I absorb the information I need in a disorganized, scattershot fashion.  In my impatience, I go down a single rabbit-hole without building the larger picture around me first.  The return on my time investment yields, at best, a narrow task-oriented understanding.

Dave’s Learning Process 2.0

Step 1: Mind Maps

What to do?  I need to be patient enough to build a comprehensive, 10,000 foot-level understanding of the domain before I dig deeper. If you’re like me, you want the big picture…


Click to enlarge

I ran across the idea of Mind Maps some time ago, but only recently realized their potential.  I’m a visual kinda guy.  You can stand a talking head in front of me for hours and I’ll absorb maybe 30% of what he/she says.  Sit me in front of a cool Discovery program with lots of pretty graphics, and I’m a sponge- I’ll memorize 80% of the stuff.  Mind maps are an excellent way to create a visual representation of a subject.  They help synthesize domain information into a comprehensive mental model.

The mind map above took me less than twenty minutes to build.  I stole borrowed the structure right out of the MSDN Silverlight Roadmap.  It’s not complete, but it doesn’t have to be.  It covers the major aspects of Silverlight, so I have my 10,000-foot overview.  When I learn something new about Silverlight, I’ll know where to plant it in my mental garden.

Creating your own mind map of a subject is a great first step to learning it.  If breadth and depth is what you want, you can round-robin each major trunk, “drilling downward” into the subject, rather than inadvertently falling down one rabbit-hole to the exclusion of all other subdomains.  Using a mind map, you’re in better control over your research process.  If you’re only interested in one sliver of a domain, such as Silverlight Media and Animation, that’s fine, but I still believe the mind map is useful.   It helps you understand how subdomains relate to each other.  Notice in my Silverlight Mind Map how DataGrid straddles Data and Controls.  If you want to understand DataGrids, you’ll have to learn at least a little about how Silverlight handles Data.

Read, Follow, Create, Invent

Now that my mind map is created, I can build the foundation. My past research process has been driven by impatience- I want to get something done NOW! This has lead to a false economy of time investment. From now on, I will take the time to ingest the basics first. Ironically, I think this will save me time in the long run. I will spend less time looking things up and cross-referencing if I read up on the essentials first. I can also rely on the mind map to let me know how far I’ve gone and how far I have left to go. This will keep me from feeling that the foundational learning is an endless, pointless process… the feeling that has historically kept me from taking the time in the first place!


Step 1: Read

Let’s go back to the MSDN Silverlight Roadmap. I pulled eight major trunks out of the Roadmap and added it to my mind map. Each of those trunks has a dedicated top-level page on MSDN. This just isn’t a lot of reading. Once I’ve read each of these, I can make notations on my mind map, calling out areas where I want to dive deeper. I won’t spend more than say, fifteen minutes on each trunk before I move on to the next one.

Step 2: Follow

Now it’s time to do a little trying out by following simple examples. I’ll build a test project, and add a page for each of the major trunks. Here I will try out little bits and pieces of each subdomain. Nothing fancy, nothing complex, nothing integrated. Just tiny little examples of each subject. Look for the most basic how-to code samples for each subdomain and just copy and paste.

Step 3: Create

This is the stage where some creativity comes into play. As a few “what-if” questions about the examples you’ve built, and start to experiment with tweaks and modifications. Form and test some theories about the way the features work by themselves and together. Try combining features from related subdomains in a limited way until you have a feel for how they interoperate.

Step 4: Invent

Now we’re ready to build a real application. Using elements from several different subdomains, build something simple but useful. My first full Silverlight app will be… tada! a Sticky Note application. Stop the presses.

Lab Coat Time

Let me be clear: this is not wisdom from on high. It’s not the new bestselling productivity book. It’s an experiment- my experiment. I have a good feeling about it because it feels… weird, heavy somehow. I know that has to be a good thing because anything better than my current way of doing things will be outside my comfort zone. Therefore, a little discomfort is probably a good sign!

So, my next step will be to start with Read. I will dive into the MSDN Roadmap and go from there. I will dutifully report my progress, so watch this space for updates and code samples as I forge ahead! If this works as well as I hope it does, expect to see more open studying for lots of other goodies. Stay tuned!

DS


Follow

Get every new post delivered to your Inbox.