With Live Mesh Ray Ozzie and Microsoft is trying to tackle one of the growing challenges for end users to day: keeping their devices in sync and connected. Today Microsoft announced Live Mesh. One of the key things to keep in mind is that Live Mesh is much more than a sync tool, it’s a platform to build software+services applications, built on open web standards such as REST, ATOM, RSS, JSON and more. Currently Mesh is only available on Windows XP and Vista, but they’re working on a Mac client as well. Since this is all Web 2.0 goodness I guess it won’t take long before we see a Linux client as well.

Mesh is too big to cover with one blog post, and there are already lots of great posts out there. But I will highlight one of the details I find very interesting: Live Mash enables you to wrap existing web applications and take them offline. The “Mesh Operation Environment” contains a tiny HTTP server that enables offline functionality. Microsoft is taking an approach that is more similar to Mozilla Prism and Google Gears than to Adobe Air.  I still find this really awesome, as this might be the final piece to deliver some truly awesome RIAs built in Silverilght, with offline support!

"…the web-to-desktop functionality of Mesh is essentially a wrapper for the actual web app. The same HTML and JavaScript, etc. runs in a desktop window in offline mode, data is stored locally, and synced later. The difference is that Microsoft is ting offline access into the Mesh service, so developers don't just get the technology to take their apps offline, but also access to the synchronization and cloud storage services to move their data back and forth… - Read Write Web"

Some of the more interesting posts on Live Mesh can be found at:

• ZDNet: Ten things to know about Microsoft’s Live Mesh
• ZDNet: Live Mesh Screenshots
• Read Write Web: Live Mesh: First Look at Microsoft's New Platform
• Robert Scoble: Ray Ozzie delivers with Live Mesh
• Mesh MSDN blog: Several good videos
  

At least we now know what one of the main topics at PDC2008 in October will be! Oh, and I like the logo!

Update: Added some more links and pictures.
Update: The offline host is called "Web Companion", shown in the developer tour video

Jeff Atwood over at Coding Horror wrote a blog post about JavaScript being "The Lingua Franca of the Web". More and more developers are building fairly large object models and frameworks in JavaScript. Microsoft's own Ajax library is one example of this. The Dojo Toolkit is another. It looks like no matter where you turn, weather it's to Ajax web sites, Silverlight applications or Sidebar gadgets you're stuck with JavaScript as your programming language. It was about time Microsoft did something about the poor tool support for writing JavaScript in Visual Studio Orcas 2008.

The way Microsoft have solved the IntelliSense problem is really elegant. In order to do good IntelliSense you need a formal way to comment your code. You have to tell the IDE which parameters your functions expects and what they'll return back. The way you annotate your JavaScript to get IntelliSense in Visual Studio 2008 is by using Microsoft's all ready familiar XML commenting syntax (with a few twists). The next problem is that JavaScript is a scripting language (hence its name), so the IDE can't compile the code to do reflection. It has to interpret it dynamically. The problem is to figure out which other scripts will be loaded into scope by the time the script you're working is executed. When developing web apps you might have some inline JavaScript and other pieces in external JavaScript files. The way you hint to the IDE which scripts are loaded into scope is with a special "reference" comment. You tell Visual Studio which scripts you have "referenced" in your application. A simple example of this is included below. If you want a thorough introduction to the new JavaScript Doc commenting syntax in Visual Studio check out the post by Bertrand Le Roy from the ASP.NET team or this post by Scott Guthrie.

System.Gadget = function()
{
    /// <summary>Defines methods, events, and properties that are used to specify gadget configuration options in the Windows Sidebar environment.</summary>
    /// <field name="background" type="String">Used in a gadget to set the background image using a file path or to get the file name of the current background image.</field>
    /// <field name="docked" type="Boolean">Called from within a gadget to determine if the gadget making the script call is docked.</field>
    /// <field name="name" type="String">Used from within a gadget as a means to determine the gadget name as specified in the gadget manifest file.</field>
    /// <field name="opacity" type="Number" integer="true">Called from within a gadget to specify the percentage of opacity as an integer.</field>
    /// <field name="path" type="String">Called from within a gadget to display the file path for the gadget.</field>
    /// <field name="platformVersion" type="String">Called from within a gadget to retrieve the version of the gadget platform that the gadget is running on.</field>
    /// <field name="settingsUI" type="String">Called from within a gadget to specify the settings to display to the user and activate the user interface so that the user can bring up the Settings dialog box.</field>
    /// <field name="version" type="String">Called from within a gadget to retrieve the version of the Microsoft Windows operating system that the gadget platform is running on.</field>
    /// <field name="visible" type="Boolean">The gadget's visibility status.</field>
    this.background = "";
    this.docked = false;
    this.name = "";
    this.opacity = 0;
    this.path = "";
    this.platformVersion = "";
    this.settingsUI = "";
    this.version = "";
    this.visible = false;    
}

The next piece of the JavaScript IntelliSense puzzle is to figure out how to represent the object model in a clean way in the IntelliSense popup window. JavaScript don't have any built in structures for interfaces, events, properties, name spaces, classes and methods; things we take for granted in the .NET framework and other object oriented programming languages. How ever JavaScript do support many object oriented programming concepts, and in the later years this have been exploited to the full extend by developers to build fairly complex object models. Ray Djajadinata wrote an excellent article for the May 2007 issue of MSDN Magazine on how to "Create Advanced Web Applications With Object-Oriented Techniques". In his article he discuss how to use object-oriented techniques to build more manageable and better scripts for your web applications.

After reading the article I figured I'd give the new JavaScript functionality in Visual Studio 2008 a go and build my own object model in JavaScript. VS did a good job ad aiding me in my JavaScript development, but my JavaScript object model didn't turn out as nice as the Microsoft Ajax Library. I couldn't figure out how to arrange classes into name spaces, how to implement an interface and so fourth. But since Microsoft have open sourced the client side of their ASP.NET Ajax framework all I had to do was to take a quick peek at the source code to figure out how they where doing their magic. Turns out the Ajax team have built something they call the "Type class", which is a typing and reflection system for JavaScript extending the object-oriented programming functionality. Using the Type class you can add typing information about your JavaScript, and do things such as registering classes, namespaces, implement interfaces and use inheritance. Visual Studio 2008 understands this typing system, so that when it executes/interprets your script to provide you with IntelliSense it has the information needed to provide you with a familiar developer experience, with the same icons for namespaces, classes, methods, interfaces and so fourth.

After playing with the new JavaScript features in VS 2008 and seeing how easy it was to hand code JavaScript against the Ajax client libraries another large JavaScript API came to mind. The Vista Sidebar Object Model. I've previously blogged about development of Vista Sidebar Gadgets, and how to do some advanced stuff like .NET interoperability, so I'll skip the fundamentals. As part of the Sidebar Microsoft ships a Sidebar Object Model you can program against. This object model contains 25+ classes with a bunch of properties, methods and collections. Using the Sidebar Object Model you can do things like open file, get battery information, monitor network availability and so fourth. At the moment there is no tool support facilitating you when using the object model. You're pretty much stuck with the MSDN documentation. You'll find the structure and naming of the Sidebar Object Model quite familiar as a .NET developer, but you still have to check the reference to see which properties and methods each object supports. Microsoft haven't announced anything about better tool support for Sidebar Gadget development so I figured I might as well take matters into my own hands.

Using the Microsoft Ajax client framework and the "typing system" provided by it I've stubbed out all the namespaces, classes, methods, collections and properties of the Sidebar Object Model. I've created a 700+ lines long JavaScript files containing nothing but an well commented (copy and paste from MSDN) object framework. So when you want IntelliSense for your Sidebar Gadget all you have to do is "add a reference" to the Sidebar.IntelliSense.js script file using the special commenting syntax described above. By including this reference comment Visual Studio 2008 will bring the Sidebar Object Model into scope when you're inside the editor. But if you don't include the Sidebar.IntelliSense.js file in a script tag in the gadget HTML file it won't affect your gadget at runtime. When you're ready to deploy your gadget you simply delete the IntelliSense script file from your gadget folder (it doesn't provide any runtime functionality anyway).

NB: The current state of the IntelliSense script is a proof of concept/prototype/sharing of an idea, and not a well tested replication of the Sidebar Object Model. If you use it and get runtime errors in your gadgets it probably means I've miss mapped some class or properties. If that's the case, just update the script your self, or drop me a comment on this post. If the gadget community picks up on this I might team up with fellow Regional Director Jeremy Boyd from New Zealand who have create a Visual Studio project template to kick-start your Sidebar Gadget development.

One of the major criticisms of internet applications have been the lack of offline support. If you build your enterprise application as a web application, there is no way your salesman can use it in offline mode on the plane. Looks like Google is about to change this with Google Gears, a browser plug-in that exposes JavaScript APIs to add offline storage to web applications. Google Gears uses Sqlite3 as it backend store, so now you can create tables and perform SQL calls from JavaScript inside the browser.

var recentPhrases = ['', '', ''];

// We re-throw Gears exceptions to make them play nice with certain tools.
// This will be unnecessary in a future version of Gears.
try 
{
    // Get the 3 most recent entries. Delete any others.
    var rs = db.execute('select * from Demo order by Timestamp desc');
    var index = 0;
    while (rs.isValidRow()) 
    {
        if (index < 3) 
        {
            recentPhrases[index] = rs.field(0);
        } 
        else 
        {
            db.execute('delete from Demo where Timestamp=?', [rs.field(1)]);
        }
        ++index;
        rs.next();
    }
    rs.close();
} 
catch (e) 
{
    throw new Error(e.message);
}

Another component of Google Gears is a light weight process pool that let's you do multi threading inside your web application.

I just installed the plug-in and run the samples. Nothing to flashy about the samples on Google's site, but they work as expected. They even have a sample downloading all the JS, HTML and CSS of a page, letting you run the entire thing in offline mode. Nifty!

These are some interesting times for rich internet applications. Imagine the applications you could build combining Google Gears with Microsoft Silverlight. Cross platform, cross browser, rich, disconnected web applications. My only concern might be that we're getting more and more dependent on third party plug-ins to get the full web experience. It's no longer all about the W3C standards. But I guess it's been like this for quite some time now. Browsing the web with out a flash player isn't a pleasant experience…

Today Microsoft announced another piece of amazing technology. After an impressive MIX event, you'd think that Microsoft had shared all their Web 2.0 ideas. Oh boy was I wrong. Popfly is a new product that enables end users to visually create mashups, web pages and gadgets. It's built in Silverlight, and the UI looks amazing. You create a new Popfly mashup by dragging and dropping "blocks" onto a design surface, setting a few properties on the blocks and connecting them together. A block is an encapsulated piece of code wrapping some kind of online service, or some presentation logic.

The concept is similar to Yahoo Pipes, but Microsoft have pushed it even further. I've previously blogged about Yahoo pipes, and my impression is that it's fairly good at combining data, but it's presentation layer is really limited. You basically get some kind of XML output, but you need to build a sleek presentation layer your self. In Popfly you have several really good looking UI components you can connect to your Web 2.0 data sources. Much of the UI pices is Silverlight, but you can also customize the UI yourself by editing the HTML output. Oh, did I mention Popfly got an HTML/JavaScript editor, written in Silverlight, with intellisense? Amazing!

Another key component of Popfly is the community aspect. You can create, store, share and distribute your Popfly mashups easily, in the same way we're used to in the Live Gallery. Once you've found a mashup you like you can choose to embed it onto your page, or even download it as a Sidebar Gadget!

At the moment the Popfly is in a really closed Alpha. I've requested an invitation, and is trying to pull a few RD strings to get access. I can't wait to get a chance to play with this myself. Oh, btw, turns out Andy Sterland is working as a program manager on Popfly. I got a chance to meet Andy in the Imagine Cup world finals last summer. He was part of the UK team in India.

While waiting for Popfly access, you MUST check out this amazing 15min video tutorial covering all major aspects of Popfly.

Some Popfly links:

• Official site
• Article in TechCrunch
• Channel9 video with the team
• Johhn Montgomery's list of Popfly links