Tutorial: WebMatrix - By Shahrad Rezaei MSP

WebMatrix

A few weeks ago, Microsoft released Beta 3 of WebMatrix. Now if you’ve been sleeping in or playing video games, (I know I have J) you might not know what it is. In that case, you’re in luck! This is what today’s post is about.

Microsoft WebMatrix is a new IDE which allows for easy and fast web development. It has an easy to use user interface which resembles that of the Office suite thanks to the ribbon on top, which allows users to quickly find the tools they want and focus on their code. It also uses the new Razor view model (basically, Razor is a different syntax for coding in ASP.NET), which simplifies the coding process and allows you to do what you want quickly, and without the ugly code. However, WebMatrix allows you to code in various formats, such as HTML, ASP.NET, ASP, Razor (the CSHTML format) and many others, so you’re not necessarily forced to use Razor if you don’t want to (although it’s really worth it, if you ask me.)

Also, another thing I really appreciate love is the user interface. The WebMatrix team clearly went above and beyond to deliver a nice, polished (and dare I say sexy) interface that people will enjoy working in. And I think that this also adds to the value of the product as a whole, and people who felt intimidated by Visual Studio or NetBeans or any other complex IDE will find themselves right at home when using WebMatrix (I know some people who would rather code in Notepad than in an IDE because they find it too complex.)

Feature-wise, WebMatrix provides all the basic tools for code-writing, such as compiling (on multiple web browsers), auto publishing and some other nifty tools such as reports and databases. However, for those who want the extra firepower, there is a conveniently placed button which allows you to write your code in Visual Studio, and take advantage of Intellisense and other advanced tools to make your tasks easier and faster. (No, there isn’t any Intellisense in WebMatrix, but it will be there in the next full release, so don’t despair.) If you’re trying to learn how to code and get around in an IDE, you can start by WebMatrix, and when you feel comfortable enough, you can easily switch to Visual Studio!

However, if you don’t want to start from scratch, or if you are just looking for examples, there are a few pre-installed templates that you can use in order to get you started on your project. You can even create a web application based on an existing open source application by choosing it from the Web Gallery, so, for example, if you want a WordPress application, all you need to do is select it in the gallery, fill out the wizard and ta-da! You’ve just got yourself a WordPress website. Now, all that is left to do is to find some money to host it.

Finally, the last thing I would like to discuss is the new Razor syntax. This new syntax allows you to code in ASP.NET in a simpler and more organized way. I’ve personally never coded in HTML, ASP or ASP.NET before, so I won’t even try to give a comparison, but I must say that I found the Razor syntax to be really easy to learn and understand. It’s kind of a mix of C# and HTML together, and it works very well. The compiler detects whether your code is HTML or C# using the ‘@’ character, and with that, you can easily mix your code together in a clean and organized way. I wrote a little Hello World page (well, it’s actually a Hello Me. I wanted to use a variable and I really had no other ideas. Sorry.)

The Code

The Page

@{ var name = "Shahrad"; }

<p>Hello, my name is @name</p>

Another nifty thing I want to point out before I end this post is the various helpers that are available with this. Helpers are objects that you can use to quickly make some stuff for your webpage. They range from tables and charts to image and video management all the way to user authentication and website security. And, they are very easy to use too!

So, as you can see, WebMatrix is really a simple and intuitive tool built around a language that shares the same ideology. Personally, I think that those of you who are looking for something a bit more advanced than Notepad, but still doesn’t feel ready for a big IDE, WebMatrix is a great place to start! Especially if you’ve just started programming, WebMatrix will provide you the tools you need to build your websites in the simplest way possible, without all the hassle and buttons of more complex IDEs. And when you feel ready, you can very easily transition to Visual Studio, where you’ll have access to all the more advanced tools you need to help you add that little extra to your website. To download go to dreamspark!

If you’re curious about this, here are some resources you should check out:

· WebMatrix Download Page
This is where you go to get the tools. You also have an explanation of what WebMatrix is and what it can do for you, as well as links to some tutorials.

· The WebMatrix page on the ASP.NET website
Here, you’ll find a bunch of tools to help you get on your feet and fast. The tutorials will walk you through the workings of the Razor syntax and the helpers as well as the IDE itself. You can also ask questions on the forums if you need help too.

· Scott Guthrie’s blog
Scott Guthrie is the Corporate Vice President of the Microsoft Developer Division. He ran the team that developed WebMatrix and he has some very interesting posts about the IDE and Razor that are worth a look.

· Andrew Nurse’s blog
Andrew Nurse is a software engineer who worked on the Razor parser. If you want a really, in-depth view of how everything works, that’s where to go. Or, if you prefer it in video form, Charles Torre interviews him in one of the episodes of “Going Deep” on Channel 9.