After releasing WebMatrix 2 RC this week, I’m excited to head out to NYC for WordCamp 2012. While I get ready to present tomorrow, I figured I would share some of the amazing work the WebMatrix team has done to create a great experience for WordPress developers. For a more complete overview of the WebMatrix 2 RC, check out Vishal Joshi’s blog post.

If you want to skip all of this and just download the bits, here you go:

Welcome to WebMatrix

WebMatrix gives you a couple of ways to get started with your application. Anything we do is going to be focused on building web applications, with as few steps as possible. WebMatrix supports opening remote sites, opening local sites, creating new sites with PHP, or creating an application by starting with the Application Gallery.

The Application Gallery

We work with the community to maintain a list of open source applications that just work with WebMatrix on the Windows platform. This includes installing the application locally, and deploying to Windows Server or Windows Azure:

Install PHP and MySQL Automatically

When you pick the application you want to install, WebMatrix knows what dependencies need to be installed on your machine. This means you don’t need to set up a web server, install and configure MySQL, mess around with the MySQL command line - none of that. It all just happens auto-magically.

The Dashboard

After installing WordPress and all of it’s dependencies, WebMatrix provides you with a dashboard that’s been customized for WordPress. We open up an extensibility model that makes it easier for open source communities to plug into WebMatrix, and we’ve been working with several groups to make sure we provide this kind of experience:

Protected Files

When you move into the files work space, you’ll notice a lock file next to many of the files in the root. We worked with the WordPress community to define a list of files that are protected in WordPress. These are files that power the core of WordPress, and probably shouldn’t be changed:

We won’t stop you from editing the file, but hopefully this prevents people from making mistakes:

HTML5 & CSS3 Tools

The HTML editor in WebMatrix has code completion, validation, and formatting for HTML5. The editor is really, really good. The CSS editor includes code completion, validation, and formatting for CSS3, including the latest and greatest CSS3 modules. We also include support for CSS preprocessors like LESS and Sass.

I think my favorite part about the CSS editor is the way it makes dealing with color easier. If you start off a color property, WebMatrix will look at the current CSS file, and provide a palette built from the other colors used throughout your site. This prevents you from having 17 shades of the mostly same color blue:

If you want to add a new color, we also have a full color picker. This thing is awesome - my favorite part is the eye dropper that lets you choose colors in other applications.

PHP Code Completion

When you’re ready to start diving into PHP, we include a fancy new PHP editor. It provides code completion with documentation from php.net, and a lot of other little niceties that make writing PHP easier:

WordPress Code Completion

So you’ve written some PHP, but now you want to start using the built-in functions available in WordPress. We worked with the WordPress community to come up with a list of supported functions, along with documentation on how they work. Any open source application in the gallery can provide this kind of experience:

MySQL Database Editor

If you need to make changes directly to the database, WebMatrix has a full featured MySQL editor built right into the product. You can create tables, manage keys, or add data right through the UI. No command line needed.

Remote Editing

If you need to make edits to a live running site, we can do that to. Just enter your connection information (FTP or Web Deploy), and you can start editing your files without dealing with a FTP client:

After you make your changes, just save the file to automatically upload it to your server:

Easy Publishing

When you’re ready to publish your application, you have the choice of using FTP or Web Deploy. If you use Web Deploy, we can even publish your database automatically along with the files in your WordPress site. When you make subsequent publish calls, only the changed files are published:

More Information

If you would like some more information to help you get started, check out some of these links:

• WebMatrix on Microsoft.com
• WebMatrix on Twitter
• WebMatrix on GitHub
• WebMatrix on UserVoice
• WebMatrix and Open Source Applications
• Vishal Joshi’s blog post

Happy Coding!

After months of hard work by the WebMatrix team, it’s exciting to introduce the release candidate of WebMatrix 2. WebMatrix 2 includes tons of new features, but today I want to give an overview of the work we’ve done to enable building applications with Node.js.

If you want to skip all of this and just get a download link (it’s free!), here you go.

How far we have come

Less than a year ago, I was working at Carnegie Mellon University, trying to use Node.js with ASP.NET for real time components of our online learning environment. Running Linux inside of our customers’ data centers was a non-starter, and running a production system in cygwin was even less ideal. Developing node on Windows wasn’t exactly easy either - if you managed to get node running, getting NPM to work was near impossible. Using node in an environment favorable to Windows was more than an up hill battle.

In the last 12 months since I’ve joined Microsoft, we’ve seen various partnerships between Joyent and Microsoft, resulting in new releases of node and npm to support Windows, and a commitment to Node on Windows Azure. We’ve worked together to build a better experience for developers, IT administrators, and ultimately, the users who use our systems.

One of the results of that work is a vastly improved experience for building applications with Node.js on Windows Azure. Glenn Block on the SDK team has done a fabulous write up on the ways Microsoft is making Azure a great place for Node.js developers. As our favorite VP Scott Guthrie says on his blog, meet the new Windows Azure.

Enter WebMatrix 2

Today, getting started with node.js is a relatively simple task. You install node, npm (which is now bundled with the node installers), and get started with your favorite text editor. There are infinite possibilities, and limitless configurations for managing projects, compiling CoffeeScript & LESS, configuring your production settings, and deploying your apps. WebMatrix 2 sets out to provide another way to build node.js apps: everything you need to build great apps is one place.

WebMatrix 2 is first and foremost designed for building web applications. From the start screen, you can create applications using pre-built templates, or install common open source applications from the Web Gallery. The current set of templates support creating applications with Node.js, PHP, and (of course) ASP.NET Web Pages. Out of the box, WebMatrix 2 includes three templates for Node.js:

• Empty Node.js Site
• Express Site
• Express Starter Site

The empty site provides a very basic example of using an http server - the same sample that’s available on nodejs.org. The Express Site is a basic application generated using the scaffolding tool in the Node.js framework express. The Node Starter Site is where things start to get interesting. This boilerplate is hosted on GitHub, and shows how to implement sites that include parent/child layouts with jade, LESS css, logins with Twitter and Facebook, mobile layouts, and captcha. When you create a new application using any of these templates, WebMatrix 2 is going to ensure node, npm, and IISNode are installed on your system. If not, it will automatically install any missing dependencies. This feature is also particularly useful if you are building PHP/MySQL applications on Windows.

The end result of the Node Starter Site is a fully functional application that includes Express, Jade, LESS, chat with socket.io, logins with EveryAuth, and mobile support with jQuery Mobile:

IntelliSense for Node.js

One of the goals of WebMatrix 2 is reduce the barrier of entry for developers getting started with Node.js. One of the ways to do that is to provide IntelliSense for the core modules on which all applications are built. The documentation we use is actually built from the docs on the node.js docs site.

In addition to providing IntelliSense for core Node.js modules, WebMatrix 2 also provides code completion for your own JavaScript code, and third party modules installed through NPM. There are infinite ways to build your application, and the NPM gallery recently surpassed 10,000 entries. As developers start building more complex applications, it can be difficult (or even intimidating) to get started. WebMatrix 2 is making it easier to deal with open source packages:

Support for Jade & EJS

To build a truly useful tool for building Node.js web applications, we decided to provide first class editors for Jade and EJS. WebMatrix 2 provides syntax highlighting, HTML validation, code outlining, and auto-completion for Jade and EJS.

If you’re into the whole angle bracket thing, the experience in EJS even better, since it’s based off of our advanced HTML editor:

The best {LESS} editor on the planet

So I’ll admit it - I’m a bit of a CSS pre-processor geek. I don’t write CSS because I love it, but because I need to get stuff done, and I want to write as little of it as possible. Tools like LESS and Sass provide missing features for programmers in CSS like variables, mixins, nesting, and built in common functions.

The LESS editor in WebMatrix not only provides syntax highlighting, but also provides LESS specific validation, IntelliSense for variables and mixins, and LESS specific formatting. Most node developers are going to process their LESS on the server using the npm module, but if you want to compile LESS locally, you can use the Orange Bits compiler to compile your CSS at design time.

CoffeeScript Editor

In the same way LESS and Sass make it easier to write CSS, CoffeeScript simplifies the way you write JavaScript. WebMatrix 2 provides syntax highlighting, code outlining, and completion that simplifies the editing experience. If you want to use CoffeeScript without compiling it on the server, you can use the Orange Bits compiler to compile your CoffeeScript into JavaScript at design time.

Mobile Emulators

Designing applications for mobile can’t be an afterthought. WebMatrix 2 is trying to make this easier in a couple of ways. First - the visual templates (in this case the Node Starter Template) is designed taking advantage of responsive layouts in the main StyleSheet:

• styles.less

This is great if you don’t need to change the content of your site, but is lacking for more complex scenarios. To get around that, the node starter template uses a piece of connect middleware to detect if the user is coming from a mobile device, and sends them to a mobile layout based on jQuery Mobile (more on this in another post). For individual views, there is a convention based system that allows you to create {viewName}_mobile.jade views which are only loaded on mobile devices.

It gets even better. What if you need to see what your site will look like in various browsers and mobile devices? WebMatrix 2 provides an extensibility model that allows you to add mobile and desktop browsers to the run menu:

Today, we offer a Windows Phone emulator, and iPhone / iPad simulators. In the future we’re looking for people to build support for other emulators coughs android coughs, and even build bridges to online browser testing applications:

Extensions & Open Source

A code editing tool is only as valuable as the developers that commit to the platform. We want to achieve success with everyone, and grow together. As part of that goal, we’ve opened up an extensibility model that allows developers to build custom extensions and share them with other developers. The extension gallery is available online (more on this to come) at http://extensions.webmatrix.com. We’re planning to move a bunch of these extensions into GitHub, and the NodePowerTools extension is the first one to go open source:

• Node Power Tools
• OrangeBits Compiler

In the coming months you’ll start to see more extensions from Microsoft, and more open source.

Everyone worked together

I want to make sure I thank everyone who helped make this release happen, including the WebMatrix team, Glenn Block, Claudio Caldato, our Node Advisory board, Isaac Schlueter, and everyone at Joyent. For more information, please visit:

• WebMatrix on Microsoft.com
• WebMatrix on Twitter
• WebMatrix on GitHub
• WebMatrix on UserVoice
• WebMatrix and Node on Microsoft.com
• Windows Azure just got a lot friendlier to node.js developers
• Vishal Joshi’s blog post

Enjoy

Building asynchronous real time apps with bidirectional communication has traditionally been a very difficult thing to do. HTTP was originally designed to speak in terms of requests and responses, long before concepts of rich media, social integration, and real time communication were considered staples of modern web development. Over the years, various solutions have been hacked together to solve this problem. You can use plugins like flash or silverlight to make a true socket connection on your behalf - but not all clients support plugins. You can use long polling to manage multiple connections via HTTP - but this can be tricky to implement, and can eat up system resources. The Web Socket standard promises to give web developers a first class socket connection, but browser support is spotty and inconsistent.

Various tools across multiple stacks have been release to solve this problem, but in this post I would like to talk about the first real asynchronous client/server package for ASP.NET: SignalR. SignalR allows .NET developers to change the way we think about client/server messaging: instead of worrying about implementation details of web sockets, we can focus on the way communication flows across the various components of our applications.

This sounds familiar: socket.io with node.js

Over the last year or so, node.js has burst onto the scene as a popular stack for building highly asynchronous applications. The event driven model of JavaScript, paired with a community of inventive developers, led to a platform well suited for these needs. The package socket.io provides what I have found to be the missing piece in the comet puzzle: a front and back end framework that just makes sockets over the web work. No more building flash applications to attempt opening connections over various ports. No more poorly implemented long polling solutions. Most importantly, socket.io made web sockets just plain easy to use:

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect("http://localhost");
  socket.on("news", function (data) {
    console.log(data);
    socket.emit("my other event", { my: "data" });
  });
</script>

Node.js and socket.io paved the way for a series of new tools and frameworks across multiple stacks that enable developers to have a first class client/server messaging experience. Node.js and socket.io are wonderful tools - but let’s get back to focusing on SignalR.

Two ways to build apps with SignalR

There are two ways you can go about setting up the server for SignalR. If you want a low level experience, you can add a ‘PersistentConnection’ class along with a custom route. This will give you basic messaging capabilities, suitable for many apps. Straight from the SignalR github, here is an example:

using SignalR;

public class MyConnection : PersistentConnection {
    protected override Task OnReceivedAsync(string clientId, string data) {
        // Broadcast data to all clients
        return Connection.Broadcast(data);
    }
}

This works well if you’re dealing with simple messaging - the other model SignalR supports is the ‘hub’ model. This is where things start to get interesting. Using hubs, you can invoke client side functions from the server, and server side functions from the client. Here’s another example from the documentation:

Here is the server:

public class Chat : Hub {
    public void Send(string message) {
        // Call the addMessage method on all clients
        Clients.addMessage(message);
    }
}

And the client:

<script type="text/javascript">
  $(function () {
   // Proxy created on the fly
   var chat = $.connection.chat;

   // Declare a function on the chat hub so the server can invoke it
   chat.addMessage = function(message) {
     $('#messages').append('<li>'   message   '</li>');
   };

   $("#broadcast").click(function () {
     // Call the chat method on the server
     chat.send($('#msg').val())
       .fail(function(e) { alert(e); }) // Supports jQuery deferred
   });

   // Start the connection
   $.connection.hub.start();
  });
</script>

<input type="text" id="msg" />
<input type="button" id="broadcast" />

<ul id="messages"></ul>

I chose the high level API, because well… it’s just cool. For a wonderful break down of the differences between these two methods, check out Scott Hanselman’s post on the topic.

Lets build something

One of the common examples of using these frameworks is a chat room: it has all of the touch points that are otherwise difficult to implement. How do we know when someone joins the room? What about sending a message? What if I want to send a message to multiple people? This is a perfect example of how client/server messaging over the web can make our lives easier. The SignalR folks have a live sample of this application running on their demo site. With the chat idea done, I decided to combine two tools into one project: a user map. I want to maintain a map that uses a pushpin for every user on the page. As users come, a new pushpin will be added in their location in real time. As they leave, the pushpin will be removed. Before we dive into the code, check out the demo at http://signalrmap.apphb.com/. If no one is in the room, you can slightly randomize your position by using the “random flag” at http://signalrmap.apphb.com/?random=true. This will allow you to use multiple browser windows and watch the system add location push pins.

Building the client

The client of SignalRMap includes a Bing map, and some JavaScript to interact with the back end. I used ASP.NET MVC 3 for this example, but this will work just fine with a web form. To start, we need to include a few script files:

<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.signalR.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/signalr/hubs")"></script>

The first thing we are including here is the Bing Maps JavaScript SDK - this will do all of the heavy lifting for our maps. The SignalR client is dependent upon JavaScript, so we need to include it along with our SignalR reference. Finally, we include the ‘hubs’ functionality into our application, linking our client and server side methods.

After including our scripts, connecting to a hub is crazy awesome easy:

// create the connection to our hub
var mapHub = $.connection.mapHub;

// define some javascript methods the server side hub can invoke

// add a new client to the map
mapHub.addClient = function (client) {
 addClient(client);
 centerMap();
 var pins = getPushPins();
 $("#userCount").html(pins.length)
};

// start the hub
$.connection.hub.start(function () {
 // after the hub has started, get the current location from the browser
 navigator.geolocation.getCurrentPosition(function (position) {

  // create the map element on the page
  mappit(position);

  // notify the server a new user has joined the party
  var coords = isRandom ? createRandomPosition(position) : position.coords;
  var message = { 'user': '', 'location': { latitude: coords.latitude, longitude: coords.longitude} };
  mapHub.join(message);
 });
});

There are a few things going on here. First, we reference our connection to the hub created on the server (note: the connection has not been established yet). Notice the mapHub.addClient method - this method will be exposed in a way such that it can be invoked from the server. scratches head - this is a neat concept. After defining methods which can be invoked from the server, we start the connection to the hub. Once the connection is established, we get the browser’s current location, and send that location back to the server. That’s about it. Remember how simple it was to use socket.io? Here we have the same experience. There’s a little more client script here to handle managing the map component. For the full client source for the application, check out my github.

Server side code

As mentioned above, I chose to take the ‘hubs’ route for my application. One of the nice things about using a hub is that it doesn’t require any custom routing - just create a class that extends ‘Hub’, and you’re set. In this example, I’m storing a persistent list of the clients connected to the application (obviously, this method will only work with a single web server). As users show up at the site, they send their current position to the server. The new MapClient is broadcasted to all of the connected clients, and the new client is given the master list of clients:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SignalR.Hubs;

namespace SignalRMap
{
 public class MapHub : Hub, IDisconnect
 {
  private static readonly Dictionary<string, MapClient> _clients = new Dictionary<string, MapClient>();

  public void Join(MapClient message)
  {
   _clients.Add(this.Context.ClientId, message);
   Clients.addClient(message);
   this.Caller.addClients(_clients.ToArray());
  }

  public void Disconnect()
  {
   MapClient client = _clients[Context.ClientId];
   _clients.Remove(Context.ClientId);
   Clients.removeClient(client);
  }

  /// <summary>
  /// model class for the join message. I tried to use dynamic here, but it didn't work.
  /// </summary>
  public class MapClient
  {
   public string clientId { get; set; }
   public Location location { get; set; }

   public class Location
   {
    public float latitude { get; set; }
    public float longitude { get; set; }
   }
  }
 }
}

And that’s it! SignalR figured out what types of communication my browser supports, managed the tunnel, and just made the connection work. Enjoy!

• View the demo
• Download the source code
• SignalR on GitHub
• Bing Maps SDK

I wrote a blog post for the MSDN AppFabric Blog!

Using MSBuild to deploy your AppFabric Application

Frink! is a mobile client for the web site Reddit. It is designed specifically to be used with tablets, taking advantage of gestures in a unique user interface. Right now the app is available in the BlackBerry App World:

Frink: Blackberry app world

After the code has a little time to settle, I plan on releasing the app to the Android Market as well. The entire project is open source, and available on my GitHub.

For more information, here are a bunch of links that talk about the project:

• Frink! on the web: http://frinkapp.com
• Frink! on Reddit: http://www.reddit.com/r/frinkapp
• Frink! on Twitter: http://twitter.com/frinkapp
• Frink! on GitHub: https://github.com/JustinBeckwith/frink
• Frink! at BlackBerry App World: Frink!