Remarks by Scott Guthrie, Corporate Vice President, .NET Developer Platform about the benefits of Web Expression 3.0, Silverlight 3, and other new Microsoft offerings for Web designers and developers.
Las Vegas, Nevada
March 18, 2009
ANNOUNCER: Ladies and gentlemen, please welcome Scott Guthrie. (Music, applause.)
SCOTT GUTHRIE: Welcome to MIX. Bill just talked about why user-centered design is so important and the tremendous value it can bring.
I’m here to focus on the how and talk about the tools and technologies that we’re going to be releasing over the next 12 months that can help you realize that vision.
I’m going to be talking about three key categories today: Standard-based Web, media, and REA. You know, our goal is with .NET to provide kind of a unified platform that allows you to target all three of these categories, be able to re-use your skills, re-use code, re-use assets across all of them, and be able to use a common set of design and development tools when doing so.
Let’s start off by talking about standards-based Web. Now, tomorrow Dean Hachamovitch is going to be talking about the great work that’s being done with IE8. Today, I’m going to focus on the tools and Web server technologies that enable you to build great Web applications.
Our Web platform is designed so that each of the individual pieces can be used independently. It’s designed so that each of the pieces work great together and its’ also designed so that you can integrate other open-source technologies like PHP and MySQL as part of it as well. And ultimately, our goal with Windows is to make it hopefully the best platform to host and manage your Web applications any way you want it.
Let’s start off a little bit by talking about some of the work we’re doing with front-end design, and specifically with the product that we’re releasing called Expression Web 3.0. Now, Expression Web is a tool focused on building standards-based Web sites that really focuses hard on providing a great experience for HTML and CSS-based authoring.
The product supports both ASP.NET and PHP applications and the new version adds additional support for things like secure FTP deployment, better CSS diagnostic support, as well as a new feature we’re pretty excited about that helps you solve kind of one of the common problems we all face as Web developers and designers, which is how do you build a CSS site and an HTML site that looks great across all browsers, both new as well as old.
This new feature called Super Preview is something we’re pretty excited about that really helps with that. And I’d like to invite Eric Saltwell on stage to give us a quick peek at it and show us how it works.
ERIC SALTWELL: Great. Thanks, Scott. So today I’m actually going to demo something really annoying, and that is checking if a Web page that I’ve built works and looks correct in a broad range of browsers. And then when I find problems, I’m going to show kind of isolating the elements on the page that are causing those problems so that I can go fix them. But I’m going to do that using a new feature in Expression Web called Super Preview. So we believe that this tool makes this process much easier and that’s what I’m going to show now, so let’s get started.
Here you can see the comp that I have that I’ve received from my designer that specifies how the page should look. And over here, we have Expression Web with the Web page that I’ve built that’s based on that comp. Up here at the top you can see the markup, and down here at the bottom you see Super Preview.
Now, right now, Super Preview is showing me exactly how my page looks in Firefox. And it gets that by talking to the local copy of this browser. And we find that putting that rendering right into the editor really saves on kind of alt-tabbing between the editor and the browser as you’re developing your page. But Super Preview can do much more than that. And in order to show that, I’m going to bring Super Preview up into a full-screen experience.
And here you can see I have access to more than just Firefox. On my left at the bottom, you see what we call our baseline browser. This is the browser that I used while I was developing my page. And over here are a number of other views that I can compare that with. And I’m going to do that by switching into side-by-side mode where on the left I now see Firefox, and on the right I actually see the comp that I showed earlier. And putting them both into one place allows me to easily check does my page look like the original design.
But maybe an even easier way to check is to use something we call overlay mode. Now, here we’ve onion-skinning the two views on top of each other. So we make the comp semi-transparent and we put it on top of Firefox. And this allows you to quickly see any differences in the page.
Well, there aren’t any differences, as you can see here, and that’s because I actually worked really hard to try to make my baseline browser look pixel-perfect.
So let’s check some other browsers. Here you see IE8, and again, it’s talking to my local instance of Internet Explorer that I have on the box, and this too you can see looks really pixel perfect.
So let’s switch to go check another browser. In this case, I’m going to check Safari. Now, unlike the other browsers that you’ve seen, this is not talking to my local instance of Safari on Windows. This is a rendering of Safari on the Mac. And what we do here is that in addition to talking to local browsers, Super Preview can talk to our cloud service, which allows us to provide renderings for browsers, even if you don’t have that browser installed on your box.
Now, you can see some difference here, but actually this difference is just caused by the fact that the fonts on the Mac are different than the fonts on the PC and the layout actually looks spot on. So I’m going to move over to our last browser which is IE6. Now here you can see some real problems. And if I flick back and forth, you can kind of highlight those problems.
What I’m going to do is I’m actually going to isolate some of those problems so I can go fix them. And to do that, I go back into side-by-side mode. Now notice when I hover my mouse over the page, we highlight the location of the problem element under the mouse and we highlight that same location in the other browser. And if you look over at IE on the right, you can clearly see that this element is misaligned. And actually all of these NET elements are misaligned.
So now I’m going to move over and show that in addition to hovering, you can also select. And when you do, a few things happen. First, we highlight – emphasize the location of the element with what we call a ‘shaded punchout’ mode. And in addition, we show not just where the element should be, but also where it actually is in the other browser.
We combine that with data like the ID of the element, the type of element, any classes that are applied, and we now have enough information to fix that bug, which I’m going to actually do right now. So I’m going to drag out a guide showing where the element should be, then I’m going to pop back into just showing IE6. I’m actually going to fix the bug, and when I do, it updates and you can now see in the guide that the element is popped to the right location.
So that is Super Preview. If you’d like to learn more, you can come to Expression Web’s breakout session called No Platform Left Behind. Thanks a lot, Scott.
SCOTT GUTHRIE: Thanks, Eric. (Applause.)
One of the cool things about Eric’s demo that you might have picked up is the fact that you can now actually test IE6, IE7, and IE8 on a single machine, so you no longer need to have a VM or another box in order to actually compare differences between them.
In addition to shipping Super Preview integrated within Expression Web, we’re also going to be making available a stand-alone version of Super Preview for free that will allow you to test on a single box IE6, IE7, and IE8 markup differences, and we’re making that available today and you can download the free beta immediately. (Applause.)
Let’s now shift our focus and talk a little bit about server-side Web development. Over the last year, we’ve been working on creating a new option for ASP.NET. This doesn’t replace Web forms, but it’s another option that we’ve heard a lot of people ask for which provides a way for building Web-based UI inside .NET applications, and it’s called the ASP.NET Model View Controller, or MVC framework.
It’s been pretty popular over the last year. We’ve heard a lot of buzz and excitement. Some of the big advantages it provides is full control over your HTML markup, SEO-friendly URL routing so you can construct any type of URL you want very easily within your application, and it facilitates what’s called a test-driven development work flow, which allows you to easily integrate unit testing within your methodology.
I’m pleased to announce today that the final release of ASP.NET MVC 1.0 is shipping now and is available for download for free on top of .NET 3.5 and VSC 2008. (Applause.)
And like all the technologies we’re going to be talking about in the keynote, there’s lots of sessions here at the event where you can learn more.
We’re also this week going to be talking a lot more about the next release of .NET and the next release of Visual Studio, what we call ASP.NET 4.0, and Visual Studio 2010.
Now ASP.NET 4.0 includes a bunch of new improvements and capabilities. In the Web forms world, we’re providing much more control over things like view states, much more control over the HTML markup rendering that occurs within your apps, you can control things like client-side ID as well as some of the usage of CSS for markup. Improvements in data binding. We’re improving also – we’re adding the ability for you to do clean URL routing within your Web-forms-based application as well. There’s a session here this week where you can learn all about that.
We’re also in this time frame shipping an update to ASP.NET MVC, adding even more features and capabilities to that framework option as well. We’re also making significant improvements to our Ajax stack. Last year, we announced support for J query and are incorporating that as part of our Ajax family of libraries that we support.
We’re also then in ASP.NET Ajax 4.0, adding support for things like client-side templates, client-side data binding, as well as libraries that allow you to more easily integrate and call RES-based Web services that are exposed on your server.
We’re also then adding a new distributed caching engine called Velocity, which allows you to more efficiently cache data in your middle tier and do it across a Web farm. Again, you can learn more about it at sessions this week. We’re also then in this time frame releasing an update of Visual Studio we call Visual Studio 2010, which is a fairly major update.
It includes a lot of focus on what we call code-focused features, things that make – you know, when you’re writing code, whether it’s VB or C# or whether you’re writing HTML and Ajax better. So lots of editor improvements, a lot of productivity improvements centered around the editor.
We’re also then adding SharePoint authoring support so you can create, open, and edit SharePoint sites directly within Visual Studio and get a full debugging and development experience against that.
We’re also then adding a lot of improvements for Web around publishing and deployment. This is obviously something that once you build the app, how do you actually get it deployed and how do you handle differences between things like staging tests and production servers?
Well, now with .NET 4.0 and VS 2010, you now have the ability where you can create, for example, separate Web.config files depending on what lifetime stage your application’s within. (Applause.)
We’re also including automated publishing support so that you can in one quick way go ahead and publish your Web application either inside the IDE or from a command line to either a remote server or to a remote cluster of servers. That includes not just copying your code and content, but also includes database deployment support so you can actually both deploy your database as well as update your schema and your database data all integrated as part of that publishing step.
And so lots of power, lots of capabilities. This is sort of a small list, there’s sessions here this week where you can learn more.
Last year, we shipped IS7, which was a major update of our Web server product, and we shipped it as part of the Windows Server 2008 release. One of the core things that we did as part of the IS7 design was to provide a very rich extensibility layer that allows anyone to plug in new functionality to core Web servers. As anyone can plug in, we’re actually shipping and have continued to ship a bunch of extensions, what we call ‘out of band’ as Web downloads that extend the built-in functionality of IS7 further, providing things like URL routing. This week, we’re providing more than eight extension updates that you can add that provide things like Web deployment tools that integrate with Visual Studio. Things like an IS database manager, so in a remote hosting environment, you can now manage your database, edit your database as well as change of schema all through the IS admin tool.
A new FTP server that adds features like secure FTP, Web DAB capabilities, as well as an application request routing engine that gives you a forward proxy. All these extensions are available for free, all of them integrate within our admin tool, and there are sessions, again, this week that you can learn more about them.
So one common theme you’ll hear is there’s a lot of technology we’re shipping in the Web server space. One of the things we often hear from people – OK, great, how do I figure out where all the different downloads are, how do I get them installed, and how can I quickly stay up to date?
One of the things that we’re shipping and enhancing is this thing we call the Microsoft Web Platform Installer. And this week, today, we’re actually shipping version 2.0 of it that adds a whole bunch of new capabilities.
Web Platform Installer provides a single download that you can go ahead and install on your system and it basically provides a unified list of all of the different pieces that we ship as part of our Web platform stack, and gives you a single check box way that you can choose to include or un-include any of those components within the application.
Click update, it’ll download all those different pieces, install them on your system, all in a unified way so you don’t have to manually do each one, and it provides a great way you can stay up to date and easily provision either a development box or a deployment server faster than ever before. This is available for free and can be downloaded from Microsoft.com/web today and we’ll be showing a demo of it shortly.
In addition to the Web Platform Installer, we’re also this week launching what we call the Microsoft Web App Gallery. And this is basically about providing our community with a place to find free Web applications that you can download and use on your servers. This includes .NET applications as well as PHP applications. Combined with the Web Platform Installer, you basically have a single tool now that allows you to install any of the server components, install any of these applications, provision your system, provision it with applications in minutes and here to show it in action, I’d like to invite Bill Staples on stage to give us a quick demo of it.
BILL STAPLES: (Applause.) Thanks, Scott. Great to be here today at MIX and show off the Web Platform Installer, or Web PI as we like to call it.
The tool is very simple. It’s a 1 mb download, but it can save you literally hours of time and a lot of headaches. I’ve launched it here, and you’ll notice the first thing it does is it connects up to Microsoft.com and it consumes an RSS feed that we publish, includes information about all the latest Web technologies.
And it inspects my machine and presents me with lists of new capabilities that are available and I haven’t checked out yet. So, for example, the ASP.NET MVC release that Scott just introduced, I can quickly read about it here and go ahead and check to install. I don’t have to worry about whether I go to Codeplex to get it or Microsoft download center or MSDN or ASP.NET, all of the technologies are here in the same tool, easy as click and install and they’re ready to go.
You notice on the platform tab we’ve organized all these technologies into four main areas: Web server, framework and runtime, database and developer tools. And for any of these, I can go ahead and click to customize exactly the set of technologies I want to install on my machine.
And these include both all the built-in operating system technologies that ship with Windows 7 and IS7, as well as the new IS extensions that Scott just talked about that are available for download. I don’t have to worry again about where I’m getting them, I can just go ahead and check the ones I want and click install to get it.
Now, one of the most exciting new features we’re introducing today is the ability to install applications as well inside the tools. And we’re working with some of the most popular applications on the Web today, including blogengine.net, .NET Nuke, Word Press. I can go ahead and read more about them and click to install just as easy as if it was part of the platform.
I actually want to show off installing an application. Let me do it actually in the context of the application gallery. So I’m going to go ahead and exit the tools and pull up the galleries.
This is – I’ve got a local copy of it here, we’ll start it up. This is available today on Microsoft.com/web/gallery. And you can think of it as basically an app store for the Web server, except all the apps in here are free and available to install directly from the communities that build and support them.
And you can notice I can drill into an application like .NET Nuke, we can read about it, we can read reviews and ratings that other community members have submitted, I can also provide my own review. And most importantly, I can go ahead and click install and we’ve integrated with the browser to launch Web Platform Installer directly from the browser to IE, Firefox, Chrome. And we go right into Web Platform Installer and directly into the application’s install page.
From here, I can just click install and Web PI does all the work to analyze the dependencies necessary to support this application. So, for example, if I don’t have the Web server installed, it’ll automatically install the Web server. If I don’t have a database installed, it’ll install a database.
With PHP applications, we’re excited to announce for those that require PHP, we’ll automatically download and install PHP from the PHP.NET community site. (Applause.)
I’ll go ahead and click “accept” here, it’ll download the package real quick, and now I’m presented an opportunity to choose where I want to install the application. I can choose the default site or create a new site if I want.
The next screen here provides a set of application parameters that I can configure, and these are entirely defined by the application developer himself. For example, I can choose my database, I can use an existing or create a new one right here within the tools. I can give it to my username and password here, or also create a user to run the application as. Specify my local database and go ahead and click continue.
Now, Web PI does all the work to extract the application, set the permissions, create the database, create the user, create the site, create the application pool in less time than I can explain it, and I can go ahead and launch the application right there.
And that’s the Web PI and application gallery. I should mention anyone in the community can submit applications to the gallery. We have a basic set of criteria which once you get published on the application gallery, your application’s instantly available for discovery across millions of people that use Microsoft.com, automatically available in Web Platform Installer. We’re also working with control panel vendors like C-Panel and .NET Panel which are announcing today their intention to support the application gallery in those control panel environments as well.
So it’s a great way to discover applications, it’s also a great way to have your application discovered. Thanks very much, try out Web PI today and have a great time at MIX. (Applause.)
SCOTT GUTHRIE: Thank you. As Bill mentioned, one of the great things is everyone here can now build applications and submit them to the gallery. You host the application on your server and the gallery simply points to it. You can be part of that integrated experience, and regardless of whether you’re provisioning a SQL database, a MySQL database or using .NET or PHP, you can provide all of the dependencies and integrate as part of that for free.
Couple other products we’re launching this week, one of which is our Commerce Server 2009 release. This provides an integrated, end-to-end, enterprise-grade commerce solution, and we’re very happy and excited to kind of announce the new version this week. There’s a number of great sessions here that you can attend to learn more.
We’re also making a huge investment in building technology that allows you to host applications in the cloud. And at PDC in the fall, we announced our new Azure services platform that provides a way for .NET developers to be able to build applications that not just run locally, but can also be uploaded and take advantage of Microsoft data centers around the world.
We’ve heard a lot of great feedback from customers, a lot of excitement, also a lot of request in terms of additional features and we’re pleased to announce a number of them that are shipping this week.
One is inclusion of fast EGI support within Azure, which allows you, for example, now to host not just .NET applications, but also PHP applications. We’re also enabling what we call .NET full trust support. Which means that you can now run not just ASP.NET applications that are running in medium trust, but also ASP.Net applications that require full trust and additional capabilities on the machine.
We’re also as part of our database roadmap now providing and exposing raw ADO.NET support within the Azure cloud, which means that you now have a relational API and a relational support so that you can use whatever data access layer you want, whether it’s linked through entities, linked to SQL, in hibernate, data sets, or any other data access technology that you’d like to be able to actually work against raw SQL tables for procedures, et cetera.
And this, again, provides the support so that you can build a .NET application, run it on your local server, run it in the cloud, and in most cases, not have to change any code between them.
We’re also then announcing a number of new .NET services that will be exposed through Azure that you can programmatically take advantage of within your application in order to get cloud-based deployments as well as resiliency.
Currently, Azure is still in preview mode. We’re on track for a commercial release later this year, and again, we’ll have a number of great sessions here that you can attend to learn more.
Last thing I want to talk about is less of a technology and more of a program. It’s a program that we launched last year that we call the Microsoft BizSpark program. This is a program designed for startups. And the goal behind it is to enable startups to get up and running quickly and be successful using the Microsoft stack.
BizSpark provides anyone in the program access to Microsoft software. This does not require – it would basically give you licenses for free. You can use any number of different products that you like in order to build your business over the first three years. The goal being that you can focus on getting your business model up and running, you can lower you initial startup costs, and then hopefully you can be successful.
The program also includes additional marketing and business development opportunity information so that you can integrate as part of our ecosystem. There’s also now a number of great hosters including Go Daddy, Rack Space, Go Grid, and Tier One that you can now build your application using the BizSpark program, and then host those licenses as part of their data centers.
And best of all, it’s free. So if you’re a qualifying startup, you can learn more this week, apply, and get started immediately.
I thought just to round out the Web session, I’d actually invite two people on stage who started a startup that probably a lot of people in this audience might be familiar with called Stack Overflow a couple of months ago to talk about kind of their success with the program and what it’s provided. So I’d like to invite Jeff Atwood and Joel Spolsky to talk a little bit more about their experiences. (Applause, cheers.)
PARTICIPANT: Thanks. Thank you. Thanks for coming. How many of you have used Stack Overflow before? Anybody? Raise your hand. Keep them up, one, two, three, four, five – OK, let’s go with six.
When you’re a programmer – most of us here are programmers – when you’re a programmer and you have a problem, you have an API that’s not working like you expected that it’s going to work, you just don’t know how to do something, or you get an error message that you don’t recognize, what do you do? You usually go to a search engine, right, and you type it in. And frankly, what you get back is a lot of crap.
You have to wade through these discussions on forums, you have a lot of wrong answers, a lot of right answers, you pretty much just have to try everything to see if it’s going to work. And you find a lot of old, out-of-date answers. And it’s kind of hard to tell what’s current and what’s not.
Well, we thought that programmers could do better and so we stole a whole bunch of really cool ideas from other Web sites to build Stack Overflow.
For an example, when you ask a question on Stack Overflow, other people get to vote on it. We stole that from Digg and the social networking sites. The answers there have votes, and that way what happens is that the great answers tend to kind of float to the top, and the stupid answers tend to sort of fall to the bottom on the third page where nobody sees them.
It’s also a wiki, the whole thing is a wiki and there’s edit buttons everywhere. So if you can make a question better or if you can make an answer better, you just hit the edit button. And that way, over time, the questions on Stack Overflow tend to get better and better and better rather than kind of rusting and getting worse and degrading.
Every question on Stack Overflow is basically like a super-narrow topical Wikipedia entry for some tiny, obscure bit of programming trivia. People sometimes ask if Stack Overflow is built in Ruby on Rails, and we take this as a great compliment because what it means is that people see Stack Overflow as a modern, Web 2.0 Web site.
And then the next question that people have is: Well, if .NET is so great, if it’s so wonderful, where are the really cool .NET startups? And what I say to these people is, well, let’s stop asking where these startups are and let’s start building them. We know that .NET is a great development environment. So we can produce great things with it, and we actually built Stack Overflow end to end in .NET 3.5 and ASP.NET MVC.
We were able to do is very rapidly because we weren’t spending time learning the latest development environment du jour, whatever is hot, whatever is cool, but we were able to use the tools that we knew and loved already such as Visual Studio.
The performance was outstanding. We have a tremendous volume of traffic on two Web servers without even being close to capacity.
We also view search engine optimization as something we start with out of the box because when you come to this Web site, the interface you’re going to use is the search engine. You’re not going to go to some Web site and say, “I have a programming question.” You’re going to type your programming question into a search engine and actually end up on a Stack Overflow page.
So to this end, we actually optimize Stack Overflow so that everything is findable out of the box. We wanted to build a really native Web site. And by that, I mean it looks like all the other Web sites that we know and love and use on a daily basis. So if there was a standard way to do something on the Web, we tried to adopt that standard rather than coming up with our own.
And sometimes that means a little bit of evangelism such as with Open ID where we feel like there’s an identity problem on the Web where you have thousands of logins and you can never remember them. So we actually require Open ID, we’re trying to sort of encourage people to adopt that.
MVC lets us use clean, finable URLs. URLs are the basic unit of work on the Web. So if you don’t get your URLs correctly on your Web site, you’re kind of doing it all wrong. You’ve kind of started on the wrong foot. So ASP.NET routing gives us total control over exactly how our URLs look at the character level. They’re clean, they’re simple, and they make sense.
To us, performance is a feature. Everything that we do, we looked at how can we do this as fast as possible? How can we serve up this page to the user as immediately as we can? And .NET is known for its speed. So this was an easy thing to stay on top of and we just continually revisited it over time. We had a huge performance advantage here.
Now, Stack Overflow isn’t about us showing you what an awesome Web site we’ve built, it’s about you showing the world what a great programmer you are. And your peers, when they see that you know your stuff, they will actually up-vote you, and that’s reflected in your reputation score that you can see on the screen here.
You can also earn badges based on stuff that you’ve done on the site that’s notable, which is just like Xbox 360 achievements.
When you’re a new startup, when you’re a bootstrap startup, every penny counts when you don’t have a lot of money. And that’s probably why you see so many startups using Linux, Apache, and MySQL to build their first version.
Now that Microsoft has BizSpark, which we use, the question about licenses really becomes a non-issue. It’s easy to get started. You get these pre-production licenses of Windows Server, Visual Studio, and SQL Server for three years. And at the end of it, that’s exactly what a startup needs. At the end of three years, you’ve either realized that the cost of these licenses is kind of a rounding error, or you’re out of business. But either way, that’s just a perfect product.
We didn’t build Stack Overflow because we wanted to make a bajillion-dollar business. We did it because it’s a neat hack. And I use the term “hack” in the sense of very little work for a lot of benefit. We realized that it would take us about two servers and two programmers to build something great that a lot of people could use. Here are some pictures of our two servers and there are some of our programmers. We also saved money by starting the programmers really young. (Laughter.)
Stack Overflow is a community for all kinds of programmers. It’s not just a .NET ghetto site. We built it in the non-partisan spirit of the great old programmer magazines. If you remember Dr. Dobbs in Byte Magazine, they never focused on one single technology, one programming language, they always assumed that the good programmers are interested in learning about everything and are interested in hearing about all kinds of technologies. And that’s really the way we designed Stack Overflow, to be a community for people who love programming and who want to learn from each other. So if that sounds like you, join us on StackOverflow.com. Thank you very much.
PARTICIPANT: Thank you. (Applause.)
SCOTT GUTHRIE: Cool, thanks, guys.
Let’s change gears now and talk about Silverlight. (Applause.)
So, we launched Silverlight 18 months ago. We shipped the second release six months ago. Today, we’re going to talk about Silverlight 3.
In that short period of time we’ve had more than 350 million installations of Silverlight around the world.
We now believe there are over 300,000 designers and developers around the world using Visual Studio and Expression targeting it.
We have more than 200-plus partners in 30 countries that are contributing to the overall Silverlight ecosystem and building products that integrate as part of it.
At Microsoft now we have more than 200 Web sites and applications that are built using it.
Today, we’re releasing the new WorldWide Telescope version of Silverlight that allows you to browse the stars on any platform using Silverlight. We’re also today releasing a new Virtual Earth SDK that allows you to build mapping applications really easily and integrate with Silverlight. (Applause.)
And there are now tens of thousands of sites around the world with big name brands powered with Silverlight and building great experiences with it.
Just a few of them to highlight: NBC with the Olympics, AOL, Career Builder, Intuit, BSkyB, ITV, CBS, including March Madness this week, Yahoo! Japan, 10 Cent QQ in China, and many, many more. And it’s just great to see the tremendous experiences that have been created as a result.
One company in particular that I’d like to highlight that’s had kind of amazing success with Silverlight over the last year is Netflix. A lot of people here probably either subscribe to Netflix, and I’m sure almost everyone is familiar with them.
What I’d like to do is actually invite Kevin McEntee, who works for Netflix, onstage to talk a little bit about their experiences with it and some of the success they’ve had. So, Kevin. (Applause.)
KEVIN MCENTEE: Thank you, Scott.
Hey, great, thanks. It’s great to be here at MIX. Thank you, Scott, for introducing me.
So, Netflix is the world’s largest online movie rental service. We have 10 million customers in the United States. We have 100,000 movies available on DVD. But more importantly why I’m here at MIX today, we have 12,000 movies and TV shows available online, all through content protected streaming. And we’re streaming those today to Microsoft Silverlight.
So, about one year ago, we started looking at Silverlight as a means of getting the Netflix streaming service onto the Apple Macintosh. That’s really the only thing we were looking at it for. And the experience we were giving our users a year ago, when they hit us with a Macintosh, was that they would get this screen and we’d just show them a whole bunch of text that basically said you can’t use an Apple Macintosh to stream movies from Netflix.
And then similarly with Firefox you also couldn’t use Firefox to stream Netflix movies, and we showed them the same error message to 10 percent of our users.
So, roughly 20 percent of our users that wanted to stream Netflix movies couldn’t do it because we weren’t on Apple Macintosh, and we weren’t on Firefox.
And so for Netflix the great thing about Silverlight is that the cross-platform story is real. With Silverlight we have a single code base, we have one player, without any browser or platform specific code, and it’s just one code base to reach all these platforms, reach all the users that want to use Netflix for streaming.
So, I’m going to move onto the next topic. So, this is sort of my favorite topic or maybe my least favorite topic, and that’s really that installers installing software for our customers is really just evil. This is the experience we were giving users with our old player. These were users who had the right version of IE, the right versions of Windows, they have everything they need to stream movies to Netflix, and we present them with this installer experience, and 12 percent of our users would get this experience and then just walk away. Even though they were paying for the service, they just wouldn’t do it, they wouldn’t do the install, because they’ve had so many bad experiences with installers in the past.
And then another eighht percent of our users would click the install experience, they’d get into the install experience, and then they would quit or fail somehow during the install experience.
So, the 12 percent that wouldn’t do it, the eight percent that failed, that’s 20 percent of our users who also would not or could not stream movies because they just could not or would not go through and install our experience.
So, I’m happy to say that Netflix now with Silverlight is just free from the terrible burden of trying to create good installer experiences for our customers, and it allows us to focus on the core business at Netflix of helping our customers find and watch great movies.
One thing I’ll also point out is in the past a lot of our installer complexity came from the content protection solution that we were using. And one of the great things about Silverlight is that Microsoft has put the content protection into Silverlight, and so for one install experience our users are getting the Silverlight and the content protection.
So, I talked a little bit about Netflix’s core business of helping customers find and watch great movies online, and so why is Silverlight uniquely suited to help us bring that core business or bring those great experiences to our users? And the reason is that Silverlight is a great platform for developing great video players.
These pictures here on the screen right now, you know, on the left side, with the Web site we wanted the user to be able to push the blue play button, have a very short buffering experience, which was the red screen you see here, and then quickly get into a great movie watching experience where you see this guy out here in the snowy field. This is incidentally the movie Transsiberian, a great movie available from Netflix.com –streaming of course.
And we want to serve up all these movies just using a generic HTTP Web server infrastructure.
So, what happens when we actually start playing a video, we start out playing the video at our lowest available bit rate, but the more bits that we can bring the users, the better the video quality experience that they are going to have. And so progressively we step forward from our lowest bit rate up to the highest bit rate that’s available for that customer based on their network stream, their network speed, so more bits or better video.
So, what happens when we are too aggressive in stepping up that video bit rate, and what happens is we get into an adaptive streaming experience we call the “rebuffer” where basically we were too aggressive and now the user, the video playback stops, and the user gets into a rebuffer experience, and we have to sit there and wait for the video to buffer up again. So, this is something that we really want to avoid.
So, the reason that Silverlight is really helpful for us in this is that Silverlight, because it’s delivered from our Web site without any install experience, we can change this video player and experiment with this player, and, in fact, we change this player every two weeks. Every two weeks, we’re trying something new, we’re trying new algorithms for the adaptive streaming. Because they’re delivered from our Web site with no additional install experience, the user is just benefitting from these transparent changes, and it’s getting better and better.
In fact, we launched this video player around November, and since November we’ve been able to take that rebuffer rate where playback is interrupted, and we’ve cut that rebuffer rate in half by constantly experimenting and pushing the Silverlight player every two weeks.
So, if you contrast that with our old video player, our old video player required an installer experience every time we wanted to fix a bug or make a change. So, what happened was we were afraid to touch it because we knew 20 percent of our users wouldn’t do the install. So, for those 20 percent of our users they’re now happily getting these improvements every time.
The old player, we only revved it about once a year, and this player we’re revving it every two weeks. So, that’s really a great thing about Silverlight.
Another great thing about Silverlight for doing video players is that the APIs, the media stream source API gives us access at the right level of the media pipeline to be able to do this adaptive streaming and step up those bit rates, and it’s just wonderful to be developing this player in a modern programming language like C#.
So, Silverlight for us, you know, we started out looking at it as a Mac player option, and then we realized the power of it, we could move it onto using it for Firefox and also for our IE-based players, but we also realized because the Silverlight, because we can rev the Silverlight player every two weeks, we’re developing our adaptive streaming algorithms and our best practices for streaming video, and then we’re taking those best practices and algorithms, and we’re porting those over to our device-based players like the Microsoft Xbox you see here on the screen. Because the device-based players like Microsoft Xbox we can change once or twice a year. So, again they’re not suited to that iterative development cycle where we’re discovering the best practices around streaming video on the Web. So, we innovate in Silverlight, and then we deploy those changes over to our device-based players like the Microsoft Xbox.
So, what’s Netflix looking forward to with Silverlight 3? So, with Silverlight 3 we’re looking forward to continued innovations from Microsoft. Perhaps the most important for our service is the GPU support for scaling and stretching video. We think that’s going to address the wider range of processors and price points for running video playback for our customers.
What’s nice to point out here is that while Netflix engineers are innovating every two weeks and making the player better and better, the team at Microsoft is working to make Silverlight better and better, and our customers are going to win from both of those teams’ efforts.
So, really to get close to wrapping up here, Netflix is very happy with Silverlight. It started out as a Mac project, and it grew to cover all of our computer-based players, and then it grew again to really be a strong influence on the work that we’re doing for our device-based players.
Now at the end here I’m going to ask Jeremy to come out, and we’re going to actually show the Netflix player and show a little bit of the adaptive streaming through one of our debugging screens.
So, Jeremy, go ahead and show that. Click the play button. This is the same movie I showed the still from, Transssiberian. So, we click play, quick buffering experience. Now we’re into the movie.
Now Jeremy is going to bring up our debugging screen. As you can see here, it’s kind of hard to show, but we are playing a 500k stream, but we’re buffering at 1500k. So, as soon as we exhaust the 500k stream we already buffered, we’re going to step the video up to 1500 kilobits per second. So, we just stepped up to 1000 kilobits per second.
Could you go full stream, Jeremy, and we’ve stepped up now to 1500 kilobits per second.
This is the experience that we’re giving our users. It’s just such a big improvement over our last player that we’re just really happy.
I think now I’m going to head backstage and maybe watch the rest of this movie. Thank you. (Applause.)
SCOTT GUTHRIE: So, I mentioned we’re going to discuss Silverlight 3 today. Let’s get started and talk about some of the new media scenarios, and some of the great capabilities it enables.
So, with Silverlight 3 we’re enabling hardware-based graphic acceleration. (Cheers, applause.) This works on both Windows and the Mac, and enables you to deliver true HD quality media throughout the Web.
We’re also adding new codec support, so that in addition to the standards-based DC1 that we’ve always supported, we’re also adding support built-in for H264, AEC audio, as well as MPEG4 containers.
We’re adding new raw bit stream APIs, and what this means is now you can write in either C# or VB your own codecs, and plug them into Silverlight. So, if you have other media formats that you want, either audio or video that you want to be able to consume, you can now easily build those, add them to your app, and be able to use them without requiring any modifications by us.
We’re also adding in new improved logging support for media analytics, so that as you watch the video you can now monetize it through ads or be able to track in terms of what’s being watched, when the people are pausing, and be able to build superior experiences with that as well.
Today, we’re also excited to announce a new product called the IIS Media Services product that we’re going to be making available for free as a Web download on top of IIS. You can use that same Web platform installer that Bill demoed earlier to be able to go ahead and one click install and enable your Web server with IIS Media Services.
Our goal with IIS Media Services is basically to enable you to deliver the highest quality video experience on the Web that’s possible, and to do so at the lowest TCO and lowest operation cost in terms of bandwidth.
With the Olympics last summer, we kind of pioneered the concept of smooth streaming, and you saw a great demo here with Netflix in terms of kind of the power of adaptive streaming in terms of providing better experiences for people watching video.
Adaptive streaming kind of enables Silverlight to automatically cycle between bit rates in a very smooth approach, depending on the network capability that’s currently in place, as well as the CPU capability of the client. And if the network goes down or you start compiling something in Visual Studio, we can automatically cycle down the bit rate so that you get a single, smooth experience and it’s not buffering or jittery for the end user.
With IIS Smooth Streaming you can now encode video, upload it onto a Web server, and deliver that experience. No additional products required, and it’s as easy as FTP-ing up files onto a Web server.
We’re also today shipping support with IIS Media Services in a beta form for what we call Live Smooth Streaming. What this means is in addition now to prerecorded content, you can now actually take hardware encoders or software encoders that are capturing live content, for example an event like this or a sporting event, and be able to broadcast that using Smooth Streaming on the Web as well, and be able to do it at huge megabit rates in terms of bit rates.
We’re also enabling edge caching so that you can push the video out as far as possible on the network, and be able to cache them across CPNs at the edge, and Akamai has actually already started offering Smooth Streaming products and services that you can take advantage of today that use this new capability.
We also then are adding Web play lists, bit rate throttling, advanced logging, and a whole bunch of other great features.
But I thought rather than simply talk about it, let’s actually see a demo of it in action and show what we can do.
So, what I’m looking at here is a machine that has the Microsoft Expression Encoder 2 installed. So, this is actually the shipping version of Expression Encoder.
What I’m going to do is I’m going to import a video, the Big Buck Bunny video. What’s great is I can actually import any type of content. It could be AVI, it could be H264, it could be VC1, it could be MPEG3. What you’re seeing here is simply the encoding experience. If I wanted to, I could scrub it and provide different updates.
What I’m going to do here is fairly simple. I’m just going to change the encode profile to be adaptive streams and to target the IIS Smooth Streaming profile.
If I wanted to, I could expand this and I could choose what bit rates I want to be able to encode this HD video at. So, I could say I want a 3 megabit version, a 2 megabit version, 1 megabit version, and say a 600k version. And then when I’m ready, I go to the output. I can target and point at a remote IIS Web server or just a local directory, push the encode button, and it would basically encode this video in the Smooth Streaming format, and copy it up to my Web server.
Let’s then launch a browser and run it.
So, what you’re seeing here is that video that’s been encoded using Smooth Streaming. This is using one of the player skins that you can download that actually will show you, in addition to playing the video and providing kind of basic play controls, also basically gives you information about the different bit rates the video is currently playing at. So, you can see right now because I’m on a good network I’m getting about 2.4 megabits per second in terms of the streaming bit rate.
If I seek into it, you’ll notice two things. One is the instantaneous seek, even though this is HD. The other thing you’ll notice is a trick that we did, which is we basically dropped the bit rate down so that we could instantaneously start playing video, and then basically cycle it back up based on the network. That’s partly what gives you that instantaneous seek behavior without any pause or any buffering. Again that’s all built into the player; you can take advantage of it.
You can also then with this test different bit rates. So, let’s say we cycle our pipe down to only be a megabit, and then seek somewhere here to refresh the cache, and you’ll notice we cycle back up, and notice it paused at the 866 kilobit version, and that’s because it realized there’s not enough network capacity to go back up to the higher version, we’ll keep it this rate so we keep a steady stream for the end user and a great user experience.
Throughout it you can see we’re getting between 24 and 30 frames per second, and delivering of a great user experience as a result.
Again, what’s great, you can download Expression Encoder, you can take any of your existing media formats today, run encode, copy them to a free Web server, and you can now deliver this experience on the Web as well.
This works for both H264 as well as VC1 content as well, and so you can have the final output be in whatever format you want with Silverlight 3.
Now, what’s cool, as I mentioned, is not only can we do this for prerecorded content, we can also now do this with live content as well. So, what you’re seeing here is actually some content that’s being fed into the Web server using a hardware encoder built by Inlet, and it’s basically live content. So, this could be any HD camera, it could be a channel on TV.
And as you can see, I’m able to do it at 3 megabits in terms of streaming quality. I could do the same cycle down experience.
What’s nice about this is not only can I actually get the bit rate adjustments automatically, I can also now pause live video. So, you can get kind of TiVo-like experiences when watching live video on the Web. I can resume it and catch up, if I want to take a break. I also can get instant replay. I can also seek back earlier in the show. Notice again I get kind of instantaneous jump, and then if I want to catch up to see where the live thing is, just click the Live button and now I’m back to the live encode that’s happening. All that is built into the Web server.
In addition to showing this thing live, it also has the ability to automatically archive the video that’s being displayed, so that once this particular sporting match is over, I can just publish an archived version of the video that people can go ahead and click and get the standard Smooth Streaming experience with.
So, again all this is possible today using free software, use the Web platform installer, one check, your Web server is deployed, copy these bits up there, and you’re good to go. (Cheers, applause.)
So, I showed some sporting content, and last summer NBC hosted – so I thought I’d actually switch gears here and talk about last summer NBC hosted what was the world’s largest sporting event ever held on the Web, which is obviously the Olympics. It was a huge success, and they used Silverlight in order to provide that experience.
So, I’m really happy to be able to invite Perkins Miller from NBC onstage to talk a little bit about the experience. (Applause.)
PERKINS MILLER: Thank you, Scott.
Hello, everybody! I was here about one year ago at this time, in fact, as we were preparing for the 2008 Beijing Olympics. How many people here watched some of the 2008 Beijing Olympics, those phenomenal athletes? (Applause.) I mean, it was just incredible. I mean, it was the single largest viewed audience that we had on television in history. It was also the single largest digital event in history. And we did that in partnership with Scott’s team here, with the Silverlight group.
It was phenomenal. We did more than 50 million unique visitors, more than 1.3 billion page views. We streamed more than 70 million clips in the 17-day period of time. We served up 10 million hours of video.
And critically we served up 5,000 individual clips for consumers each and every day of the second week of the Olympics.
And what that really showed us is that the long tail really works. People in their desk, in their houses wanted to go watch rowing, wanted to go watch beach volleyball, wanted to watch all these sports at their time, at their leisure, and we enabled them to do it. It was an absolutely phenomenal partnership.
It really worked out well for us on the commercial side supporting all our interests. We were able to show for people who went to NBCOlympics.com and watched video and consumed content there, when they went back to watching their television, they watched twice as much television. Think about that, twice as much television for people who went and used a digital platform. It really brought to life the fact that we need to deliver as a media company a full 360-degree experience to our customers.
In addition, the people who watched video online during the time, if they were in the office or at their house, those folks who went and used the enhanced experience – you’re seeing some of the examples here on the screen – these people who watched the enhanced experience like picture-in-picture, being able to watch four live feeds simultaneously, they watched three times as much video as those people who just chose to watch a single stream or a less enhanced experience.
What that told us is if we deliver a higher-quality experience, if we deliver something that’s going to engage the audience, they will watch more. They will be more engaged by our product, and they will ultimately serve as a better audience to our product. So, it was really a tremendous experience.
Now, who knows, how many people can tell me where the next Olympics are? Anybody? OK, I didn’t hear anything. Oh, come on, Vancouver, 2010. It’s the winter Olympics. It was kind of a trick question; there are summer and winter games. So, the next Olympics are in Vancouver, Canada. They’re roughly a year from now.
And I’m here to announce for the first time a renewal of our partnership with Silverlight. They will be providing the enhanced online video coverage for NBC’s coverage of the 2010 Olympics in Vancouver, Canada. (Cheers, applause.)
And I am truly honored to be out here today because Scott’s team has just done a phenomenal job coming up with what we think is going to be the ultimate product for a video event online. We’re going to be streaming the Olympics fully in HD. This is going to be an adaptive, Smooth Streaming event, full 720p.
So, when you walk out of your house in the morning, and you go to your office, and you’ve left your beautiful 52-inch HD television at home, and you sit down at your desk and you want to grab some video from the Olympics that day, it’s going to mirror that experience. We’re going to be able to deliver you that continuous, high quality experience that you expect now as a consumer.
In addition, we’re going to be able to bring you the DVR experience that you expect. So, just as Scott was illustrating earlier, you’ll be able to pause the live stream, you’ll be able to rewind the live stream, you’ll even be able to go slow motion. So, for those of you who have been following the World Cup skiing this winter, there’s a woman by the name of Lindsey Vonn who absolutely lit the world on fire. She won the World Cup overall. She is skiing phenomenally well. And if you want to see her fly off a 150-foot jump in the Vancouver Olympics – 50 meters for those from Canada – you’ll be able to watch here in slow-mo online land those jumps and go through to the finish line.
We’ll also be able to deliver to you full metadata overlays. What this means is that we’ll be able to take the live results, the athlete biographies, the country information, all the information that gives you the kind of context for when the Olympics is, and deliver it to you as part of the enhanced Olympics experience. So, if you don’t know who Lindsey Vonn is, you’ll be able to find out who she is.
In addition, we’ve found that when you’re watching the Olympics, and when you’re trying to be engaged in this event, it’s all-consuming. People want to know what’s happening, when it’s happening, and they want to consume the content where they are, whenever they are. This means that live video alerts are going to be critical. And for these games we’ll deliver you not only live video alerts, we’ll be able to give you real time feeds of those alerts. So, if you signed up to get the most popular clip of that moment, we’ll deliver that to you. And again it will come through, depending on your platform, as a full HD experience.
Finally, because we need to commercialize this, for those of you that know the sports business, we do need to find ways to bring our partners to the table. We have the ability this time to do live ad insertion with our live streams. This functionality is going to be critical to give you as a consumer a fairly seamless experience, still be able to enjoy the live event, but allow our commercial partners access in order to find a way to associate with this great event that we’ll be putting on together.
So, I can’t tell you how excited I am. I’m thrilled to be here, I’m thrilled to be working with Scott’s team. We have 331 days to go to the 2010 Olympics in Vancouver, and I hope you all watch, and thanks very much. (Applause.)
SCOTT GUTHRIE: So, we’ve talked a lot about media. Let’s now switch gears and talk about RIA or Rich Internet Applications.
Silverlight 3 significantly ups the ante in terms of what you can do with graphics on the Web.
Now, as I mentioned earlier, we’re supporting hardware-based GPU acceleration and hardware compositing. This works not just for video but also for any graphics or any controls that you go ahead and use within your application as well.
We’re adding perspective 3D support, so you can take any control, any video, any image, and be able now to apply a 3D transform on top of it, and be able to adjust its behavior.
We’re providing bitmap and pixel APIs, so you can now write raw pixels on the screen. We’ll support both read and write support for that in the final release.
We’re adding pixel shader effects, so that you can now take shaders, custom shaders that you write, or built-in ones like blur and drop shadow that we provide, and again apply them to any control, any video, any image, anything within the application.
We’re also then making a number of deep zoom improvements, including integrating hardware acceleration, which now allows you to handle large, large collections of images, and be able to provide kind of a silky smooth experience as an end result.
Now, there’s a tremendous amount of power and capabilities that you can do with this. One of the things I always say to people though is please use these powers for good, not evil. It’s very powerful. But I thought, since this is the first time you’re seeing it, why don’t I just violate that rule and show you some really gratuitous stuff you can do with it. (Laughter.) So, apologies in advance.
So, what I have here is this simple app called the Effects App. This is similar to an app that I actually showed last year using WPF. Now it works with Silverlight. So, we can load an image on here, and you’ll see some of the capabilities that we have in terms of the perspective 3D support that’s been added. And so I’m just adjusting this thing in real time.
I can not just show an image, I could also go ahead and play this on a video. So, this is an HD video that’s being played; as you can see, a very smooth experience.
If I wanted to, I could add shader effects. So, you can see I can now ripple in real time this HD video as I’m applying the transforms to it. I could magnify. So, if we really want to see that guy looks like, we can. And if I wanted to, I could even emboss it for – I’m not sure why, but it’s a cool look. (Laughter.)
What’s nice about this is it works not just for video and images, you can use this for any control. Again this is nice and gratuitous, but, hey, I could type in Guthrie. If you really want to see what it looks like, we can zoom in there, and notice even things like input work throughout the shaders and the control lifecycle. I can even do things, let’s say I can obviously click to cause this guy to move, double-click to rotate it here. Again it’s kind of gratuitous but kind of fun, but hopefully shows off some of the power that you can now do. Again you can use all these capabilities in terms of performance, graphics controls, input, all integrated within an application, running on a browser, running on any platform.
We’re also then with Silverlight 3 adding a bunch of new application development capabilities. One of the common problems that you face today when building RIA solutions with either Silverlight or Flash or AJAX solutions as well is how do you integrate with SCO, how do you integrate the concept of things like deep linking and navigation, so forward and back buttons work inside the browser, and how can you monetize your application accordingly through search engine traffic.
With Silverlight 3 we’re adding a new navigation and a page framework that enables you to do this. It provides a common approach and a common set of project templates that you can use in order to build an application that integrates with back and forward, allows you to copy/paste a URL, send it to a friend, and jump immediately to that spot within the application, and be able to provide an SCO experience that works not just with our search engine, but works with Google, Yahoo!, Live, and any other search engine out there as well.
And hopefully what this enables you to do now is build truly differentiated user experiences, truly differentiated media experiences, and be able to monetize it through search engine traffic like you would static content today.
We’re also then with Silverlight 3 providing much improved text quality support. We’re including ClearType support also on Windows and Mac to make font legibility much better.
We’re adding multi-touch support. So, if you have a multi-touch capable machine, you can now take advantage of both single touch as well as multiple finger input on the screen, and be able to provide again a differentiated experience.
We’ll have more than 100 controls available. Some of these are built into the box or in the SDK. Some of them are being made available through our new Silverlight control toolkit, which includes things like charting controls, more layout controls, and a whole bunch of other great features, and includes that source. There’s also then a rich ecosystem of controls that have been built up with commercial control vendors that really allow you to have tremendous productivity when building these types of solutions.
Silverlight 3 is also adding support for things we call library caching. What this means is you can now reference a control library or you can reference any assembly within your application, and rather than have to include it within your application, it can be a separate download. Once it’s downloaded, it can be cached on your system, so the next time you run your app or the next app that happens to use that same assembly doesn’t have to redownload it again. That allows us to start distributing more and more libraries. (Applause.) That will start to allow us to distribute more and more libraries that you can use, but still have very fast, very responsive application startup time.
There’s lots more features about application development. I’ll talk about some of them later, things like merge resource dictionary, style inheritance, a whole bunch more.
But I thought actually rather than just sort of blabbering on about features, let’s actually see a pretty cool app that shows off a number of them together.
So, I’d like to invite David Anthony from Bondi and Scott Stanfield from Vertigo to show off a cool app they’ve built with it. (Applause.)
DAVID ANTHONY: Hi. I’m David Anthony from Bondi Digital Publishing, and we’re the guys who help magazines make money off of their previous issues, their back issue and their archives. We’ve done work with a bunch of iconic magazines like Rolling Stones, Playboy. We did a big 500,000 page archive with The New Yorker. These are offline products, and we’d always hoped to bring them online one day. We just never really felt that we had a user experience that was going to captivate people and bring them into the magazine in a way that we were doing offline.
Then we saw Deep Zoom working inside Silverlight, and it was an aha moment for us, because we saw a path to make our experience the way that we wanted it finally.
That led us to these super developers over at Vertigo who helped us to implement this. We’re going to show an example of this, and we’re also going to talk a little bit about what we’re launching. In the meanwhile, Scott?
SCOTT STANFIELD: So, this is our competition. This is a magazine that has zero boot time and random access. We don’t propose to ever beat this, this is great, but we are trying to take it one step further.
So, one of the things that we’ve done with Bondi is they’ve been working with Rolling Stones, and we have here a selection of 40 issues, and I’m going to show you what we envision our reading experience to be like.
So, I’m going to take one of these covers and just simply click on it to open it up.
Now, what you’re seeing now is just as if I just took the staples out of this and just laid it up on the screen, so we can at a glance see the contents of the entire issue. And then we can choose an article to drill in on, so for instance, the cover story, the Women in Rock. So, I can bring that up by clicking on it, and then just simply grabbing and turning the page, just click and drag.
Now, I’m going to find an article that I want to see. This issue here, this article about Sleeter Kinney and Black Sabbath; good combination. I can click on the text and zoom in, and you can see it’s very readable. So, we’ve taken this massive amount of content and made it so it’s now exposed and available to where people can read it and browse.
Now, this is a pretty big issue. There’s a lot of pages here. I’m going to go to the end. If you get seasick, you might want to close your eyes for a second. So, we’ve now zipped to the very end of the issue, and this is 172 pages.
Now, I don’t know about you guys, but when I got Rolling Stone, the first thing I did was always flip to the back cover to see where the top artists are for that day. And, of course, being in Vegas, I’m very happy to see that Elvis Presley is still the king.
But being this is a Microsoft piece of software, it seems like we can’t go anywhere without Nirvana in Seattle. So, let me pay them an homage by doing something else.
So, granted, we’ve got browsing, we’ve got reading; what’s the next step? We have search. So, if I type in a search term, Seattle, and we can see the results from this issue, this issue right here. But I’m going to scroll down instead and click on this article, The World Against Five. Now we’ve just jumped from a 2002 issue of Rolling Stone to October 1993. This is an issue, an article by Cameron Crowe, one of the associate editors of Rolling Stone. He also wrote Fast Times at Ridgemont High. This is a great issue about Pearl Jam, one of the classic Seattle bands.
One of the things we’ve added – I don’t know if you can see it – there’s little tiny yellow squares in the screen to indicate where the text is highlighted. Now, the problem is with designers we don’t have a lot of room on the screen. So, this search panel is kind of in the way. So, I’m going to use one of the features that Scott was talking about, perspective transform, hit the tab key and slide it out of the way. Now I can zoom in. (Applause.)
So, these little yellow highlights weren’t there in the original magazine, I can assure you of that, but we’re able to augment this because we have the context, we have the metadata for the text itself. So, this is a very powerful feature. And for fun we can invert it and make it pop out a bit more for this article.
So, this little window is still active. Now it’s not terribly usable, but I can pop it out. Let’s click on another search term. Now we’re jumping to a March 1994 issue. Let’s get rid of search and let’s zoom in on this article. This is about a Seattle radio station, 90.3. So, with a simple search term I’ve been able to jump back and forth between content like this, but at any given time you can use these bread crumbs or the bookmarks at the top to find out where you are and what the context is. This happens to be – if I go to the front page – an issue about Beavis and Butthead.
But what I found really interesting is not only can we search for individual terms and words, we know where the articles are. And not only do we know where the articles are, we know where the ads are. So, you can imagine – and we’re still thinking about it – what the business model will be around this, but the fact that you can go and browse old Gap ads and see Steve McQueen, or the fact that you can get to the Rolling Stone table of contents and jump directly to one of the classics in hip-hop A Tribe Called Quest, all this data is here. It’s no longer locked away rotting in your basement or your attic. We’ve now taken all this dead paper and put it on the Web in such a way that we feel like it really enhances the experience.
And not only that, you can share this content with your friends. If you’re a Tribe Called Quest fan, you can just copy this link and then send it to somebody and paste it, and it will come right back up. So, we have deep linking and bookmarking using the search engine optimization features in Silverlight 3. (Applause.)
Let’s see if we can get this guy to work now. I’m going to launch IE by touching it. So, this is the touch-smart using Windows 7, and we took one of those bookmarks earlier and linked it right here to my first programming experience. This is in 10th grade in high school in Vacaville, California. And this was the computer I used, somewhere in here. I think it’s in the Chevy Chase issue.
So, we have this augment to where we can double-click and double-tap. And if I zoom in, this is processing power. (Applause.)
And notice we’ve got the familiar pinch to zoom metaphor, and I can tap to go back out to the covers.
This is great, this is the Web, this is a Web application. You guys will have fun with this content, but David is going to tell us a bit more about what we’re launching and when.
DAVID ANTHONY: Yeah. So, in the summer we’re launching covertocover.com, which will be every single issue of Rolling Stone. You guys are seeing a sneak peak of that today. As well as every issue of Playboy will be available to search, browse, and purchase back issues. (Applause.)
But what I’m really, really excited to announce, and you’re the first people to hear this, is that this evening we are launching a new Web site. And it’s not just a new Web site, it’s a new concept and it’s the culmination of five years of work to bring this experience to the Web. My partner, Murat Aktar and Vertigo, have helped us incredibly, but PlayboyArchive.com is launching this evening with 54 free issues that you can browse in exactly the same way that you just saw.
SCOTT STANFIELD: Don’t bother hitting it now. (Laughter.) I don’t want to bring the wireless down. It’s offline right now.
DAVID ANTHONY: Yeah. So, thanks very much, and I hope you enjoy the site. (Applause.)
SCOTT GUTHRIE: So, we just saw an amazing user experience, and one of the challenges though, as Bill talked about this in his keynote, is how do we take a vision or an idea for an experience like this and actually turn it into reality. When we start a project, it usually begins with some raw idea that isn’t fully formed, we create specs to try to crisp it up, we try to create comps to try to get a general sense of the experience, and then we start working on it.
And the challenge is, of course, this part, which is how do you iterate, how do you kind of stay agile, how do you actually build this and make it a reality.
One of the things that we’re doing with Silverlight 3 and Blend 3 is really we think delivering a great solution that enables it, and enables you to have a result that isn’t just a set of compromises but something that you can really iterate throughout the way, you can really get feedback, and hopefully at the end of the day build a superior product.
So, with that, I’d like to introduce Expression Blend 3. Blend 3 supports a bunch of new features and capabilities, one of which is called Sketch Flow, which takes some of the ideas that Bill talked about as part of the vision, and hopefully makes them a reality, and allows you to start an application, prototype it very quickly, and be able to take that throughout the overall application lifecycle experience.
We’re also then with Blend 3 adding new support so that you can import and work with a content created in Photoshop and Illustrator, creating it on Windows or on a Mac, and be able to integrate that as well as part of that lifecycle experience. (Applause.)
For designers we’re adding things like behaviors and live data, which will allow you throughout the process to not have to write code and to actually get a site up and running, and be able to actually get behavior and be able to try things out without having to require a developer to write code or without having to switch into Visual Studio to do so.
For teams that do have development shops we also are adding source code control support as part of Blend 3. (Applause.) We’re also providing XAML, C# and VB Intellisense support for coding, so you can also stay inside Blend and edit there as well. (Applause.)
So, since I don’t want to steal any more thunder, I’m going to invite Jon Harris onstage to actually give us the first public preview of Blend 3 and see what we can do with it. (Applause.)
JON HARRIS: Thanks, Scott.
So, we’re going to start off by looking at a finished application that we’ll actually be building in a few minutes’ time. So, this is something we’re actually building from Microsoft games at the moment.
As I navigate around the UI here, you can see we immediately get some visual and audio feedback around what’s happening with the application. I can use my mouse wheel to spin the UI around here. And when I click on one of the products, we go into a more detailed view, and have that really nice transition from one state of the application to the other.
Obviously now I’m in the detail mode. We can click on images here for additional information or maybe get some help on actually choosing some additional hardware to hopefully make me a little better game player than I am at the moment.
As we go back, again we get the great transition from one state to the other. But as Bill mentioned earlier, how do we go from the ideas that are in your head to something like this? Well, in Blend 3 you’ll be using Sketch Flow. And what Sketch Flow is, it allows me to build the flow of an application right here within Blend.
So, imagine that I was building maybe a logon system for an application. I’d have a logon screen. Then maybe I would have a screen to actually check your credentials. So, we just come in here and name that like so. Obviously I’d need a screen to send you to if your logon fails. So, we’ll just change that to fail. And then I should probably give you another attempt to log in if your logon fails. So, we’ll just link those two screens together. And immediately Sketch Flow shows me that there’s a two-way links between these two screens. And the fourth screen we’ll add is just where we’ll send you if your logon is successful.
I can also do nice things like this, highlight different screens in different colors. So, I can use this to highlight different types of screens, which we’re doing in this case, or maybe different parts of the application.
So, what we have at this stage is a series of screens that are just literally showing the flow of the application. You could almost think of these are empty whiteboards just waiting to have more detail added to them.
So, of course, we don’t want to add too much detail too early, and Sketch Flow really helps me in that area by providing a set of wiggly controls. So, what exactly is a wiggly control? Well, let’s have a look here. I’m just going to draw out a text field, and it’s pretty self explanatory. It’s a control that has a wiggly style. So, it’s great, I love the wiggly style. And as we come in here and look at some of the buttons, again we can see that they’re wiggly.
Now, what’s great about this is immediately you can see that this looks like a prototype. No client is going to look at this and think that this is going to go into production or be launched within a few days.
But what you might not have realized is each one of these controls is actually a real control. So, from the moment we start using these controls, these are actually real Silverlight 3 controls, and I can just turn that straight back to the standard look and feel. So, it’s phenomenally powerful.
What this means for you is you have access to the full power of Blend 3 when you’re building your prototypes, so they can be as real or you can keep them as conceptual as a particular project or client demands.
So, what we’ll do now is we’ve seen how you can build a very simple flow diagram there. Across here this is the prototype and flow diagram of that application we built at the start. So, you can see here we’ve got a start screen, and we’ve got three different options we’re going to present to the client. And at this stage, like most prototypes, our prototype is just made up of some informal sketches.
So, I’m just going to finish off the final option here, and I’m actually just going to come up to my project window and find the final sketch that my designer created for me, and we’re pretty much ready to go.
Now, the great thing about Sketch Flow prototypes is that this is a real project. From the moment we started working this is a real Silverlight 3 project. So, I can actually look at this and show this to the client at any time. So, in fact, let’s do that right now.
I’m going to switch over to my client machine. Here it comes. My client happens to be running a Mac. And we’re going to view this prototype in exactly the same way they would view it, inside the Sketch Flow player. Now, the Sketch Flow player actually comes as part of the prototype, and it’s freely distributable. That means that your clients do not need to download or install Blend to actually look at or review your prototypes.
So, obviously at this stage we’re just using rough sketches, so there is no user interface we need to click on and navigate the application. So, I’m going to use the Sketch Flow navigation over here to look at the different options. Close that down.
So, this is option one that we are going to look at. This is the one we created a few moments ago inside of Blend.
And here’s option two. And another important aspect – and this is something that Bill was talking about earlier about prototyping – is being able to show the transition from one state of the application to another.
So, on this screen, for example, it would be great to see what this tab interface looks like open and closed, and obviously that’s exactly what I can do with Sketch Flow, and we can show these transitions.
Now, the really nice thing about this is I haven’t had to spend any time building a real user interface to do this. This is just an animation. Now, an animation is often the fastest, cheapest, and most effective way to convey this type of interactivity to a client.
The third option is actually the one that the client went for, and again we really needed to try and demonstrate to the client how this circular control would actually work, and we were able to convey this again through animation here.
And then we finished off by showing them what the detail view would look like.
So, that’s one side of prototyping, but what about getting feedback? Getting feedback from a client on a prototype is incredibly important, and we can do that with the Sketch Flow player.
So, right down here I have my feedback window here I can type in my comments. So, we’ll just say, “can we change” or we’d say that if I could spell “change” – but we can just type in our comments down here, and then I can actually grab a pen and draw it directly onto the prototype. So, can we change this logo and move it over to that side, and can we change that logo and move it down to there? And on each screen I can go through and annotate and make my changes. And the really nice thing is that once I’ve finished, I can save that feedback and send it back to the Blend user. The Blend user can then load that feedback into Blend and see it in context on the design surface where the design is. So, it creates a really nice workflow between the client and the Blend user.
So, creating these prototypes is absolutely fantastic. Let’s go back into Blend. There’s another fantastic time-saving feature as well, and clients tend to like having documents about their projects. So, Sketch Flow provides me an export to Word option that actually builds project documentation for me. So, this is a document that Sketch Flow would create, a table of contents – (Cheers, applause.) I know how much you guys like building these documents. (Laughter.) So, we’ve got headers, subheadings, we’ve got a list of all the individual screens here, we’ve got an image of the application flow, and it even creates screenshots of all the individual screens. That literally will save you hours of work building out these documents. (Applause.)
Back here within Blend we should try and make our prototype a little bit more interactive, and to do that we’re going to go back to our second option we showed to the client. And if we come up to my states panel here, we can see the original transitions that we showed a few moments ago.
What we’re going to do is we’re actually going to turn on and actually allow the client to click directly on the UI of the prototype to actually make it feel more real.
So, I’m just going to select that element and come down here, and just say when I click on that I want you to play back the close transition. Then we’ll do exactly the same for open as well, select that UI element, come down to activate state, and then say play the open transition.
Then the final thing I want to do here is allow the client to navigate directly from this screen to the details screen. So, again I’m just going to right-click on this and say navigate to a different screen, and we’ll go to the details screen.
So, we’ll just test this, and what we’ve actually done here is we’ve used another new feature in Blend 3 called Behaviors. And what Behaviors allow you to do is add interactivity to objects that are in your project without writing code.
Now, obviously they were very simple Behaviors that we just used, but you can also create incredibly complex Behaviors like drag and drop, for instance, and they can be applied without writing any code.
So, back in the Sketch Flow player here’s my option two. I’m actually going to turn off the Sketch Flow navigation because I don’t need it anymore, and I can now navigate by clicking directly on the UI here. So, immediately this feels much more real to the client.
When we click on the details page, you can see this has been completely made up of the wiggly styles, so we can go through and we can try all of the different styles and again we can decide if this is the right layout without expending too much energy on this. I’ve even used one of those Behaviors to use on the back button here and take us back into the main application.
Let’s just drop out of Sketch Flow. So, Sketch Flow is fantastic. It’s allowed us to build that prototype, show it to the client, and get some feedback. The good news is the client has signed off on this third option here. So, we now need to turn this into the final application.
So, when we started designing Blend 3, we asked people what they’d like to see in the product, and one of the top requests was to have better integration with the design tools you use today. So, of course, we listened, and now in Blend 3 we have direct import of Illustrator and Photoshop files.
So, my visual designer has been creating the production graphics in Photoshop. Let’s import his graphics and see what they look like.
So, what we’ll see here is a really nice preview of what the graphic will look like when we import it, and over on this side we’ve got a list of all the different layers that are in that Photoshop file. So, we’ve got text layers, bitmap layers, vector layers. We can come down here and we can turn layers on or off. Notice when we do that, the preview actually updates live in the window here. And I can merge layers as well that are imported at this time.
So, I’m going to hit okay because that looks pretty good.
The other great thing about this Photoshop importer is the files remain editable when they’re inside of Blend, and I’ll show you that in a moment.
So, here comes the file. It looks like a pretty complex file to start off with, but it’s not. This is actually a master page, a detail page, and some additional background graphics. So, we’re looking at the detail page at the moment. So, let’s just go through and turn off that layer like so, and now we’re just looking at the background graphics. And you can see that actually that gradient there doesn’t look quite right. So, we’re just going to come straight in here and select that and we can change that directly on the design surface by using the new gradient controls here. And also change the color as well. That sort of fits in with the blue theme of the application a bit better.
So, the next thing we need to do is build the master page, which is the circular control, and to do that we’re going to use design time sample data. Sample data can either be created directly inside of Blend or we can import that from external sources. So, I’m just going to import that data like so. And even though we’ve just imported this, I can still edit that data directly within Blend if I need to make changes, and also alter the number of records and things like that.
To add this to my application, I’m just going to drag and drop it, and Blend creates a list box for me. I’m just going to tell that to auto-size it to fill the area.
Now, you may notice that this doesn’t look quite as good as the circular control we had a little bit earlier. It needs a little bit more work. So, my visual designer has created some styles for me. So, I can come in here to my resources, and I’ve got three styles. The first one is going to change the look of the list box and change the font style. It looks a little bit better already.
The next style is going to turn this into a circular control. So, I’m literally just applying styles to this. This data remains live and editable the whole time, and so does the data template as well.
I’ve always been able to do this in Blend, but it’s such a great feature I’m going to show it now. Down here is where we have the list box, and I can actually come in here and select items and delete them, and the design updates live when we’re doing that. And I can even play around a little bit with the layout as well, so we can maybe change the margin a little bit and change sort of the height and those sorts of things.
It doesn’t look quite right. So, luckily, my visual designers provided me with a final style, and I can just drag and drop that on, and everything just pops back into place, and you can see that it automatically applied the right colors to the heading, so blue for software, red for hardware, and it was very quick and easy to do that.
So, we’ve done the background graphics, we’ve done the master page. That just leaves us with the details page. So, let’s just turn that back on. I’m going to come over to my data window again, and just switch to details mode by just clicking that. Then we can start to drag and drop these images and start to update this static graphic. What we’re actually doing here is we’re creating a data binding between the data and the graphics. Let’s just do the logo as well.
What about the text? So, let’s just see what happens when we do the text. Exactly the same font, color, formatting gets kept. All of the attributes the designer sets within Photoshop stays even though this is now data driven.
So, we’ll just update the pricing and we’ll update the title as well. I’ll drag it to the text field. There we go.
The final graphic we need to update is this one in the middle, and I can now just drive straight down and look at all of the objects directly under my mouse, very easily update that object, even though it’s right down the object tree.
So, if this was the release version of Blend, I’d now be done. But since this is the preview version, there’s one additional manual step I actually need to make, and that’s hooking the master page up to the detail page.
So, I’ll just quickly do that, it won’t take a moment. I’ll just select my content layer, come down here to my data context, and just literally bind these two things together. So, we’re just going to grab my list box and say, hey, when the selected item changes, update the details page.
So, we’re done. Now let’s test this and see what happens.
So, in 15 minutes just think about what we’ve done. We’ve created the flow of an application, we’ve presented a prototype to our client that was just based around sketches, we’ve made those sketches interactive, we’ve created a document that we’re able to give to our client, we were able to get feedback and act on that feedback directly within Blend. And to be honest, we’ve hardly scratched the surface of what’s in Blend 3, as you’ll find out when you go to some of the sessions later on this week.
So, these are the three options we presented earlier. Here’s the final production screen. Five minutes ago, this was a flat, static Photoshop graphic. And now when I roll around on the UI, it’s an animated, live, data-bound, rich Internet experience. (Applause.) It’s really cool.
Sketch Flow Expression Blend 3, from concept to completion. Great, thanks, Scott. (Applause.)
SCOTT GUTHRIE: As you saw in Jon’s demo, one of the things we’re doing is enabling designers now using Macs to be able to create assets that we can then import within Blend, and use to build great Silverlight applications.
We’re also happy today to announce that Soyatech is delivering Eclipse support, not just on Windows but also on the Mac, so that developers can now use Eclipse on the Mac in order to develop Silverlight applications as well. (Applause.)
So, we’ve talked a lot about user experience, we talked a lot about kind of what you can do graphically and from a design perspective. Silverlight 3 also now includes a bunch of great support for data applications as well.
We have a lot of data binding improvements, things like element to element binding between controls. We have validation error templates and much richer validation support as part of your UI. On the networking layer we now have improvements to server data push, so that your server can push notification of a data change from the server to the client without you having to explicitly pull. We add support for things like binary XML so that you can compress network payloads between the client and server.
And then we’re also with Silverlight, in the Silverlight 3 timeframe introducing support for what we call multitier data. What this means is we’re providing a programming model that you can use so that you can actually expose data on the server. When it comes down to the client and you retrieve it, when you update it, we’ll actually keep track of all the changes you’re making on the client, and then you can very easily hit save and basically push those changes back to the server. And we provide a programming model that handles all the networking for you, enables for caching that data on the client, as well as enables validation support to be created so that the validations occur both on the server side for valid input, as well as maintain it on the client side and can integrate with Silverlight client control features.
To sort of show some of that off, I thought let’s write a little bit of code, and show what you can do in action.
So, what I’m going to build here is a very simple supplier management app using Silverlight, and it’s going to have basically two tabs, one for customers so I can display customer data, and then I want the ability so I can click on a customer, drill into the customer, and see its order details.
As you can see, I’m basically using some of the new navigation support in Silverlight, getting unique URLs, and have a prebuilt theme already created.
Now, this project, this application I’m opening right now in VS. I actually started just in the interest of time and added a few things to it. But it basically has both a server component, which is built using ASP.NET, as well as a client component that’s built with Silverlight, all inside the same project.
My server application, I’m starting with a data model. I’m building it here with link to entities. You could just as easily build it with link to SQL, Nhibernate, or any other POCO-based solution. And basically all I’ve done is defined a customer as well as an order object that I can then use to query my data on the server.
Now, the other thing I have then here is a service called the Customer Domain Service. And this is basically taking advantage of some of that new multitier data support that I mentioned a minute ago. And what I’m doing here is creating this class and exposing data to my client using standard .NET methods. So, I have a get.customers method, a get.customer.orders method, and then I basically created an insert, update and delete crud method, and that’s just working against my link to entities data model to talk to my database.
What’s nice about creating this class is that once I add it into my server project, my client-side Silverlight project will automatically get a proxy class that I can use in order to query and call these methods, and can actually keep track of all the changes for any of the data retrieved, and easily push those data changes back to the server.
So, let’s actually see this in action.
So, I’m going to implement that customer’s page, and to do that I’m just going to drop a list box inside my XAML file, and I have a style resource applied to it to make the list box look a little bit better.
I’m then going to go to the code-behind file, and you can see here I’m using that customer service context object that’s the proxy object for those methods that I wrote on the server. What I can do is I can very easily say let’s programmatically set the item source property on that list box to be equal to the context customer’s property. And then I can say on the context object go ahead and load those customers for me from the server, and when I run this application – oh, I’m going to get a build error, which is very exciting. Probably because I had the browser already open. Now when I run the application and my heart comes back – (laughter) – I can see a list of customers on the page that’s been data-bound against that list box. Again this is data being returned from the server.
When I go ahead and click on any of these customers, you can see I can drill into the details about that customer, so going into a details form that’s already in the project. You can see right now I have what’s called a data form. It’s the new control in Silverlight 3 that we’ve introduced to show an individual data. I then have a data grid. Notice in Silverlight 3 we now have hierarchal data inside our data grid so you can actually do grouping.
And when I click on a particular item, you’ll notice I basically data bound the charting control so that, for example, if I change my selection, it’s going to show me the order history of this particular customer all data bound.
Implementing this was pretty easy. All I needed to do was create my details page like so, then you can see the data form, the chart control, data grid, and I have a save button here at the bottom. And the code to implement this was basically four lines of code in my code behind. Again, I’m working against that proxy object.
Now the nice thing about the proxy object, though, is not only does it let me retrieve data, it also allows me to save the data back to the server. And all the data that I retrieved will get changed tracking. I can see what’s dirty in terms of those customer and those order objects. And if I want to push those changes back, all I need to do is call a context doc, submit changes, and we’ll calculate what are all the differences, push back to the server, call back to my customer domain service, and call the appropriate insert update delete message for me. I can then apply whatever custom validation rules I want, and push them inside the database.
And now when I run this application, I can click on Anubis here, I can click into the details, and I can see charting data here. If I want to change this to be MIX Demo, I can do that. Notice when I tab away this little star shows up in the data forms, it’s just marking that there are dirty changes that need to be saved. I can take advantage of validation. Here are some of the built-in validation templates within Silverlight. Notice that there’s something red, and that’s because the phone number needs to be in a specific format. I can declaratively apply validation logic on my customer object or my order object. It will run both on the server and because we have now .NET on the client, it can apply those same validation rules on the client side as well. And when I fix this, tab away – oops, I still have an error. When I fix that, hit save, it apply those changes, the dirty bit is gone, click the back button, notice it’s been updated with MIX Demo.
So simple example of some of the types of data applications you can build. A lot more sessions here later that you can learn more about, but hopefully gives you a flavor of the type of productivity you can get now when building these types of solutions with Silverlight 3. (Applause.)
So this ability to create rich graphics opens up a huge world of opportunity. SAP wanted their customers to be able to build rich controls, and be able to build rich experiences within the industry leading SAP NetWeaver product line, and as a result SAP today is announcing support to basically enrich their UI as part of their Web Dynamo UI Pro product, and adding Silverlight support in a future release. So we’re very excited to see that support being enabled.
So far we’ve talked about Silverlight experiences running inside the browser. We’ll switch gears now and talk about Silverlight running outside the browser. Silverlight 3 now includes built-in support which enables you to take a Silverlight application and run it outside the browser on both Windows and on the Mac. (Applause.) This enables a bunch of great scenarios, ranging from out of the browser media experiences, companion applications that go along with your Web site, as well as sort of lightweight data snacking applications if you want to aggregate lots of data from various places.
Because Silverlight is a compatible subset of the full WPF that’s available as part of the .NET Framework, what’s great is these applications will work completely across browser, and just require Silverlight without any additional download, can also – you can take that same code, the same assets, the same technology, and build even further enhanced Windows applications that take advantage of the full .NET Framework. So we think there’s a lot of powerful capabilities it provides.
With Silverlight 3 one of the things that we focus on with the out of browser experience is to have kind of as consumer friendly an experience as possible. In some ways a lot of people won’t realize they’re running a Silverlight 3 out of the browser application, probably because we try to get out of the way and label you as developers to very easily have your customers just do it. We don’t have any ugly security prompts, we don’t have any do you really want to install this kind of dialogs, and one of the reasons is because the out of the browser Silverlight applications run in a sandbox mode. And so consumers can trust them, we don’t have to scare the consumers in terms of what the experience is going to be like, and end up building great experiences.
It has built-in auto-update support, so once you build an application, once a customer actually deploys it, if you need to change the application, you can simply copy an update onto your Web server, and Silverlight 3 will automatically detect the next time that application is run that an update has occurred, automatically bring it down without the user having to update, or install, or run any type of patch, will be able to use your application the next time they launch it.
We include offline aware support as part of Silverlight 3, so that you can detect whether or not the network is plugged in or whether it’s disconnected, and we’ve basically exposed it both as a property you can check, we also then expose an event that will raise any time the network status changes, and this allows you to build sort of network aware applications. You can take advantage of the local caching support that we have within Silverlight so that you can download data, cache it, and reuse it offline.
And we also basically integrate with the underlying operating system. You saw lots of features like hardware acceleration, multi-touch, and more, and basically you can take advantage of these with Silverlight and be able to light up with features on a particular operating system you’re running on.
So rather than me just babbling on, let’s actually see a really cool application of this in use, which is KEXP, and I would like to invite Tom Mara and Aaron Starky onstage in order to introduce it. (Applause.)
TOM MARA: Remember when you could actually back in the day fall in love with a radio station? KEXP is a radio station that we hope you will fall in love with. KEXP is a music station, eclectic, noncommercial radio station in Seattle, Washington, and our job is simply to figure out how to get music into your life. And the way that we do that is, like in the past, the way radio used to be, is you, god forbid, give the authority to select the music to the DJ. That enables a stronger connection between the DJ and the listener.
Now we started out, back in 1972, as a 10-watt station, and through the years grew incrementally. But when we went on the Web, things just took off. All of a sudden, we moved from a 10-watt radio station to one that was getting requests from Iceland. So as 2001, 2 percent, maybe 3 percent of our contributors lived outside of Seattle, now it’s 1 out of 3. Our economic model is simply based on the extent to which we can engender loyalty among our listeners to the point where they’re willing to contribute to us, that love that needs to be engendered. And so this connection with Microsoft and Silverlight is enabling us to get further down the road to strengthen not only the connection between the listener and the radio station, but that connection between the listener and his or her fellow listener.
Now, Aaron Starky is our manager of online services at KEXP, really the center of the universe for all things online for KEXP. He’s going to show you some of the things that we’ve been working on.
AARON STARKY: Thanks, Tom. Thanks, everyone.
So this is KEXP.org today, it’s a pretty straightforward music Web site. We have playlists. We have links to our live stream, we have podcasts, basic editorial content. What we don’t have is a consolidated out of browser experience. And that’s one of the things I’m going to show you today.
So as you can see, the first thing that it does is, it prompts me and asks me, do you want to create a desktop shortcut. Great. And this is the KEXP Silverlight player. I’m going to close the browser so you can see that we’re actually operating outside of the browser. But with all the benefits of living within the browser’s security sandbox, which is really key for us.
So, as Tom mentioned, there’s a triangle of things that are important for us. There are the artists. There’s the curatorial connection between the artist, the DJ, and our community. And one of the things that we haven’t been able to do in the past that we’re going to be able to do now is connect all three of those in one place. So, as you can see, we’ve got the live stream going on, artist meta data, the album art. We also have Cheryl, our DJ, who is letting us know that this is a Black Flag cover, which I didn’t know, and I love it.
So I’m able to come in here and interactively connect with the DJ, the station, the media, the artist, and the other users of that community. So it’s coming together all in one place.
One of the other things that’s important for us as an online radio station is what happens when you’re not online. It’s very hard to stream to you when you don’t have Internet connectivity. So what I’m going to do is show you what happens when we lose our Internet connectivity. Say I’m having breakfast, I’ve been listening to KEXP all morning, but I have to get on the bus, and go across the bridge and get to work. So let’s turn this off.
Automatically Silverlight was able to tell me that I’m offline, and within the API I could react to that, and guide the user to KEXP content that isn’t available through streaming, but that’s actually already been downloaded into isolated storage. So thank you for telling me, and here’s a video that I like. I’m a big fan of the Walkmen. Let’s check that out. So it’s playing right there, and I’m on the bus and I’m still connected to KEXP, so we’re able to maintain this connection to the station, to the artist, and to our listeners regardless of our connected state.
Since I’m a big fan of the Walkmen I’m going to favorite this, because I want Tom to know that I think this is pretty cool and I was listening to it on the bus. And even though I’m disconnected it’s actually taking car of that problem for me, and it’s going to update it with the cloud later on. As you can see, it’s put a little heart there that says that I favorited it. So let’s pause this, let’s reconnect.
So I’ve reconnected, and as you can tell the players responded appropriately, it’s connected me back to the live stream. It’s put me back in the state where I can see the comments that’s happened while I was gone. Another thing that’s important to us, which we’re really going to really value, is the ability in Windows 7 to pin an application, in this case an out-of-browser application done in Silverlight, to the taskbar. So let’s pin this program to the task bar.
So you can imagine every day I come to work, there are two first-class citizens here, there’s IE and now there’s KEXP. So every morning I can open it up, it’s right there. We stay connected, we stay right in front of our users with this feature, which because of all of the options that people have to listen to streaming content, media, all over the place, this is really valuable to us, because without our listeners we wouldn’t really exist.
So I’ve gotten to work, Tom has just gotten to work and he’s over on his Macintosh. And he says, I think I’ll listen to KEXP. As you notice, it’s the same player, which is great for us, because we’re a small organization, and our development resources are limited. So the ability to write these controls in such a way that we can use them in multiple platforms, we can actually run these in the browser, as well as out of the browser, is really important to us.
So, because Tom knows that I have great musical taste, and he just got to work, he’s going to check and see what I’ve been doing. And he can tell, hey, look, Aaron favorited the Walkmen. I’m going to check it out. It’s already been downloaded, he’s able to watch the content.
So aside from just having the on-air stream, on-demand videos, podcasts, et cetera, we also do a number of live remotes. So what I’d like to show you is right now we’re streaming from South By Southwest. Now we may or may not have a band actually playing when I click on this button. Artists lead complicated lives, and sometimes they’re not on schedule. So let’s see. No, no live band, but it’s a cool graphic.
So what this application does for us is it allows us to operate outside of the browser, so we can offer a really holistic experience of our content, the ability to pin it to the taskbar, so we can stay right in front of our users, and really like we’ve been talking about, the social networking piece, the people that listen to music, the people that want to communicate with each other, that want to communicate with the station, that want to communicate with the artist, we’re able to do this now in one place, and that’s just fundamental to or mission.
Thank you very much. (Applause.)
SCOTT GUTHRIE: So as you saw now you can build out-of-the-browser experiences with Silverlight. One of the things you might not have even noticed at the very beginning when Aaron was using Windows, and clicked to add the favorite, and add the link to the start menu, that was actually installing the application. That was the end user experience when someone does not have anything except for Silverlight and their particular browser on their machine. As you saw, very consumer friendly.
Once the app is downloaded it will automatically update. So any time they decide to push out a change on the KEXP Web site, the application the next time end users run it will automatically pick up those changes and apply it. And we think really this sort of hopefully enables just a tremendous amount of opportunity.
So we’ve talked a lot throughout the keynote about a lot of features. Silverlight 3 literally introduces thousands of new APIs, hundreds of new features, a new codex like HT64, AAC, new capabilities like out of the browser support, graphics, hardware acceleration, more, and more, and more, a lot of great stuff. One of the things when we sort of put together the plan as a team that we sort of said was like, one of the things people really like about Silverlight is the fact that you can download Silverlight 2, it’s less than a 5-meg download, it takes less than 8 seconds to install. We’ve got to make sure that we don’t spoil that experience by adding all these capabilities, because that download size is a core part of the experience.
So throughout the process we’ve had a fairly rigorous – some people have likened it to the Spanish Inquisition, but a fairly rigorous process for making sure that the code that gets checked in is as small, is as fast, and as tight as possible. And basically reviewed every check in, let’s get it down in size, and we also then went back and looked at all our old features with Silverlight 2 and said, okay, how can we still make things faster, still have 100 percent compatibility, but what are ways that we can trim and just sort of compress this thing down as small as possible.
And what that’s allowed us to do is add all these great features without incurring a big download size. The irony is, we apparently did such a good job that after doing this on all the new features, and then also doing this on all the existing features, someone a couple of weeks ago actually said, you know what, we’re actually smaller than Silverlight 2. (Laughter and applause.)
So all the features you saw today, including the out of the browser support, is part of that 4.4 megabyte download, takes less than 8 seconds to install on a system. You can now build applications that run on any platform, and use any browser, and be able to build these types of experiences.
So what’s the timeframe for when we’re going to ship Silverlight 3? Today is the first time we’re talking about it. As you saw, we think it’s going to be a great release. We planned a single beta for the particular technologies, and then we’ll basically ship the final release later this year. That beta is now available for download starting today. (Applause.)
This includes Silverlight 3, this includes Expression Blend, a preview of Expression Blend 3, this includes Silverlight 3 tool support for Visual Studio 2008. This includes the IIS media services server component that enables the streaming both live and on-demand that we saw a little bit earlier. Again, anyone from the public can go to our Web site, download these products today, and you can start building experiences like you saw up here on stage.
My team and I are really excited to be able to talk to you more about this this week. We know in a difficult economy we really appreciate you taking the time our from your schedules in order to be able to come and attend. And so just in closing I’d like to say, we’re looking forward to seeing what you build with it.
So thanks very much. I hope you enjoy MIX. Talk to you later. (Cheers and applause.)
VOG: Ladies and gentlemen, the breakout sessions will begin promptly at 11:45. Thank you and enjoy your afternoon.