A Look Into: WebMatrix for Front-End Development

There are plenty of web development applications for Windows system, such as Notepad++, Netbeans, Eclipse, Komodo, Aptana etc. These applications are working fine, and many of my developer friends are using them.

But, if you want to have one that is integrated very well with Windows system at its core, then you need to check out WebMatrix.

WebMatrix is a free, and lightweight web development tools that is developed by Microsoft. It was first introduced in 2010, and designed to simplify the experience in developing web with popular languages like HTML5, CSS3, JavaScript (including jQuery), PHP and ASP.NET.

So, let’s see what WebMatrix has to offer.

Installation

Around 2009, Microsoft centralized their web application lines using Web Platform Installer. It is more or less like an App Store or Google Play where you can install Microsoft applications that are designated for Web Development, including the one we are discussing, WebMatrix.

Once you hit Install, WebMatrix will automatically fetch its dependencies including .NET framework, IIS, and MsSQL.

In addition, you might also need to install MySQL for working with PHP application that relies on it, like WordPress. To do so, select the Products tab, and you can find MySQL listed under Databases.

Features

Microsoft includes lots of features in WebMatrix, and here are some of its features – particularly for front-end development.

Web Standard

WebMatrix embraces web standards. By default, it creates a new document with basic HTML5 markup. Optionally, it also allows you to create a new HTML document using the HTML5 Boilerplate from the Template Gallery.

Writing CSS3 syntax is easier. As we are writing the styles, WebMatrix shows auto-complete suggestions for standard CSS3 as well as specific vendor properties. It even shows a description of what the property is used for.

WebMatrix also supports auto-completion for the other languages: PHP, ASP, and JavaScript (including the jQuery and jQUery Mobile)

Open Source Web Applications

Building a web application from scratch is hard, thus many developers prefer extending Open Source web applications. In this case, WebMatrix provides some popular open source projects, like WordPress, Joomla, Drupal, and integrates the installation process, so that we can run the project faster in fewer clicks.

You can head over to the Application Gallery to see all the list of Open Source web applications that are supported by WebMatrix.

Furthermore, WebMatrix also includes auto code-completion for these web applications. Given the example of WordPress, it shows list of WordPress functions as we are typing.

CSS-Preprocessors Support

CSS Pre-processors allow developers to write more dynamic and maintainable style rules compared to plain CSS, and we have covered about them several times in our previous posts.

If you are avid users of CSS Pre-processors, WebMatrix gets you covered. You can create a new stylesheet document for Sass, SCSS, or LESS along with the syntax highlighting, and auto code-completion.

Device Simulators

If you are developing for mobile, then you probably need to install iPhone/iPad Simulator – by default, the Windows Phone Simulator should have been pre-installed. These mobile simulators come as an extension, which you can find in the Extension Gallery.

CSS Pre-processor Compiler

Lastly, if you are writing CSS Pre-processor, this is a required extension to install, OrangeBits Compiler. It will compile your syntax into plain CSS.

Final Thought

In addition to those we have just discussed, WebMatrix has many more features to offer. So, if you are willing to dig into it further, here are some good references.

• Walkthrough the WebMatrix Features – Microsoft
• Introduction to WebMatrix, a new, free tool for Website Development MSDN
• Introduction WebMatrix for ASP.NET – ASP.NET

In the next post on WebMatrix, we will be developing WordPress, from installation, customization, and deployment. So, stay tuned.