Scott Hanselman

WebMatrix 2 - Front End Web Developers take note (ASP.NET, PHP, node.js and more)

September 19, 2012 Comment on this post [32] Posted in ASP.NET | ASP.NET MVC | Mobile | Open Source | WebMatrix
Sponsored By

Did you notice the release of WebMatrix 2? WebMatrix is a free, lightweight web development tool introduced in 2010. It's focus is on simplifying the web development experience for ASP.NET and PHP, and more recently node. Rob Conery actually turned me onto WebMatrix and we use it for the This Developer's Life Podcast website. I recommend it for students, designers, and web pros that either don't need or don't want the whole Visual Studio experience. It's also a nice companion to Sublime Text 2. There's even Git extensions, LESS, easy deployment and more for the front end developer.

If you want to download WebMatrix 2 and get started, it's free. It will use the Web Platform installer to install and you can use it along site VS if you want, or all by itself on any machine. It's actually a great companion for sites like Codecademy. Watch Vishal and Brady give a brief overview of the new features in WebMatrix 2 on Channel 9.

HTML, JavaScript, & CSS

The new Web Matrix 2 HTML editor adds useful stuff like code outlining, tag completion, formatting, syntax validation, and IntelliSense for HTML5.

WebMatrix has intellisense

The JavaScript editor has a better auto-formatting experience, and IntelliSense:

Intellisense in JavaScript

The new CSS editor in WebMatrix shares a lot with the new features included in the Visual Studio 2012 CSS editor. There's the color pickers, IntelliSense for the latest CSS3 modules, and better language support:

New CSS Color Picker

Here's the new hotness that I'm digging. For those who want to go beyond basic CSS, you can get preprocessors like LESS and Sass. Folks have been asking for better preprocessor support, and WebMatrix 2 includes support for LESS and Sass. The LESS editor supports the same great CSS features, along with IntelliSense for custom variables and mix-ins:

LESS

Like I said, there's lots of stuff built in. It's kind of a playground for features that will move their way between VS and WebMatrix.

File New Item

 

Related Videos: To learn more about the new CSS editors in WebMatrix 2, check out these short videos:

Razor with ASP.NET Web Pages 2

As I mentioned, Rob and I use ASP.NET Web Pages on This Developers Life. It's kind of like PHP in that you can mix code and HTML in one file except the syntax is Razor and the language is C#. The combination of WebMatrix and ASP.NET Web Pages is an easy way to get started with web development. Make a file, start writing HTML then add some code. Later you can graduate (if you want) to ASP.NET MVC. In addition to improving the web editors, WebMatrix 2 adds IntelliSense for Razor, C#, and Visual Basic:

Intellisense in Razor

WebMatrix 2 and ASP.NET Web Pages 2 include many built in helpers that make it easy to do common things like send email, post a tweet, or resize an image. If the built in packages and helpers in Web Pages 2 aren't enough for what you want, WebMatrix now also supports installing libraries and helpers directly from NuGet!

WebMatrix pulls from NuGet

Video: Justin and Vishal build an image sharing site with ASP.NET Web Pages and Windows Azure Web Sites.

Web Development with PHP

For applications that use PHP, there is a brand new PHP editor that features IntelliSense, code collapsing, and PHP 5.4 support. There's docs showing up inline there as well.

PHP Editor has intellisense

Video: Thao and Brady show the new PHP features in WebMatrix 2.

Web Development with Node.js

I have mentioned Azure before on the site and now that it supports Git deployment as well as node.js I've been paying more attention to it. One of the goals of WebMatrix 2 and Windows Azure is to make it easier to develop and host open source applications on the Windows platform. December brought support for node.js to Windows Azure. While Azure is making it easier to host node.js applications in cloud, WebMatrix 2 is aiming to improve the development experience. Out of the box are multiple project templates, IntelliSense, and support for several new languages. There's even an Express.js template.

Node.js in WebMatrix

Along with IntelliSense for the core modules built into node.js, WebMatrix also provides IntelliSense for third party modules installed via the Node Package Manager (NPM). This makes using things like the Windows Azure npm package much simpler:

Azure in node

Node.js uses a variety of rendering engines for writing views. I am told there are more planned and today WebMatrix 2 includes support for both Jade and EJS. I like Jade, myself.

Jade in WebMatrix

I'm not sure where you fall in the Great CoffeeScript debate, but some developers like to write their applications using CoffeeScript. WebMatrix supports that also.CoffeeScript in WebMatrix

Video: Justin and Vishal show new Node.js features in WebMatrix 2.

Streamlined Database Tools

The database tools in WebMatrix work with SQL Server, SQL Compact Edition, and MySQL as well.:

MySQL in WebMatrix. Scandalous.

When you're ready to publish your application, WebMatrix 2 will include your Database along with the list of changed files:

Publishing a database

Video: Learn more about managing databases in WebMatrix 2.

Mobile Web Development

You can integrate an iPhone or iPad simulator into Visual Studio, as I've blogged before. WebMatrix 2 adds an extensible model for adding new browsers, and also includes support for simulating Windows Phone 7 as well as the iPhone and iPad via a partnership with Electric Plum. Full disclosure: I love the Electric Plum guys. So nice.

iPad and iPhone

The templates included in WebMatrix 2 look nice on mobile devices out of the box since they use a combination of responsive design and jQuery Mobile.

iPhone

iPad

For those working with jQuery Mobile, there's included IntelliSense for custom data-* attributes.

jQuery Mobile

Videos: For more examples of using the mobile capabilities in WebMatrix 2, check out these videos:

The Application Gallery

There's a metric pile of Open Source projects in the Application Gallery so you can get WordPRess or Umbraco or whatever running just by File | New. Takes just a minute or two. ASP.NET and PHP apps all live together.

Web Gallery

After you install your application, there is now a customizable dashboard, designed specifically for your app type. That means that WebMatrix knows you're using WordPress and will show you stuff that WordPress folks care about.

The team has worked with the community to provide a customizable experience for many of the applications in the gallery. The dashboard provides a series of links and resources that make it easier to learn more about your app.

WordPress

For many of the applications in the gallery, there are a core set of files that should not be changed. WebMatrix will even warn users of these files.

Don't touch that file!

While customizing an application, WebMatrix 2 also includes application-specific IntelliSense. This is useful when you're just getting started working with a new application:

clip_image025

Windows Azure & Remote Editing

You can also create and deploy apps directly from the Windows Azure portal. So, rather than starting from an app on your machine, you can create it in Azure, get it running then...

clip_image027

...you've got remote site editing. After creating an application in the cloud, you can directly open a remote view into your site. This is great for making edits on the go. I'd personally use Git or source control, but I do have to admit I have a few sites that are just up there as brochures and aren't formally deployed. This feature is nice for those sites.

Remote Editing

For users using Windows Azure, the management portal allows users to install WebMatrix and open their site by clicking on a button in the command bar. This will download the site and install any required dependencies. This means once you've made your site in Azure, you can open it in WebMatrix, it will install, figure out your app (if it's in the gallery) and open it.

WebMatrix from Azure

When you've finished making your changes, the same publish command will only push the files that have changed back to your host.

WordPress editing

Video: Watch Faith customize a WordPress site and deploy it to Windows Azure.

Extension Gallery

If you're interested in extending WebMatrix 2, there is a new SDK that allows anyone to add new features or functionality. Many of the things in this post (including the mobile emulators!) are actually extensions that ship with WebMatrix 2.

Extensions

When you're ready to start building, check out the extension gallery. It has a list of extensions currently available, along with documentation on how to make your own extension.

Video: Watch Walter show you how to build a basic extension and publish it to the WebMatrix 2 extension gallery.

Wrapping it up

This release of WebMatrix 2 supports making apps ASP.NET, PHP, and node.js. You can download WebMatrix free. Let the team know if you have any feedback. Thanks Justin for helping me with some details and screenshots on this post!

Related Links


Sponsor: Thanks to DevExpress for sponsoring this week's feed. Multi-channel experiences made easy: Discover DXTREME. Delight your users with apps designed expressly for their device. DXTREME, multi-channel tools build stunning apps across devices & optimize for the best of each platform, from Win8 to the iPhone. And, the powerful HTML5, CSS and JavaScript tools in DXTREME also build interactive web apps.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
September 19, 2012 5:31
Really like how lightweight WebMatrix is! Almost good enough to use over visual studio. Unfortunately C# IntelliSense is missing right? Is there debugging?
September 19, 2012 5:53
Really nice Scott! I like how easy it is to publish sites and edit them quickly.

Do you know if Ruby and RoR will be supported at some point?
September 19, 2012 6:04
Wow, a shorter list might have been what VS and WebMatrix doesn't have in common
September 19, 2012 6:07
Awesome! What about CoffeeScript support? Because then I think you'll have all of the various hotness out there.
September 19, 2012 6:54
Webmatrix 2 has been my favorite IDE on windows for Node.js development. Extremely light weight with JS intellisense and view styling. Love it.
September 19, 2012 7:28
@Mike - there is C# IntelliSense. It works in razor and C# files. And no, no debugging ... yet ... :)

@Bart - we don't have plans right now, but we pay a lot of attention to UserVoice (I think we got 9/10 top requests in this release). This one already has votes:


https://webmatrix.uservoice.com/forums/128313-webmatrix-suggestions/suggestions/3151201-ruby-on-rails


@Jarret - We do syntax highlighting for CoffeeScript, and even do some automatic compilation with this extension:


http://extensions.webmatrix.com/packages/OrangeBits
September 19, 2012 10:14
Whoa!
That's like a swiss knife which can be used to do anything and everything :D
September 19, 2012 10:40
I've been playing around with WebMatrix2 for a while now... node works nicely in it... I've also been using node for some postbuild scripts, and some one off utilities writing in VS.. VS2012 does a decent job as well. It will be interesting to see how this pans out... suggestion if you want to use MS-SQL in node, use the tedious module which is less cumbersome than the MS preview module/driver.

Overall, there's a lot to like in WebMatrix...
September 19, 2012 11:07
Has to be said, it's a pretty stunning piece of kit!
September 19, 2012 12:20
It's just what the doctor ordered. You know what's best about it? In a team you can have people use the same software for multiple project types.

That makes switching to, and learning, a new type of project (let's say going from WordPress/PHP to developing ASP.NET/Razor website) seamless as far as your IDE is concerned. You can care about the intricacies of the new platform later.

However, the editor is not very polished (it makes a LOT of assumptions about code and how to format it, try adding a missing quote, you will ALWAYS end up with an extra quote), and the explorer sidebar is typical NIH (behaves subtly different than regular explorer or VS Solution Explorer).
September 19, 2012 12:23
Hmm, why can't I customize what I want to install? E.g. I only want to use MySQL, so I probably don't need the 16 SQL Server items?
September 19, 2012 14:26
Amit: this is a swiss chainsaw:)
September 19, 2012 17:29
WebMateix planning for the future support python? May integrate http://pytools.codeplex.com/ ? Tnx.
September 19, 2012 19:04
Very nice. Can the WebMatrix team loan out the user interface team and their icons to the Visual Studio UI team please?
September 19, 2012 20:04
And does Visual Studio Ultimate have all those options? I guess not? How? We need to have multiple IDEs because a 15k dollar one can't do what a free does?
September 19, 2012 21:33
I've been playing with it since the first beta and I must say they knocked it out of the park between the last beta and the final release. I use it for most things right now when I write web stuff. (Even for a class that requires the use of Dreamweaver when I can get away with it....)

September 19, 2012 21:40
Interesting stuff. Gives lots of new options to try...

I liked WebMatrix 1, this looks even better. I need all the help I can get to make my front end development worthy of my back end stuff.
September 20, 2012 21:19
What, no CFML support?
September 21, 2012 1:25
I slowly started using Webmatrix for all Orchard CMS development, just because it was easy and fast.

Also, this post is epic.
September 21, 2012 12:41
SASS intellisense please? And .scss files (sassy files) even don't have coloring...
bip
September 21, 2012 21:35
@bip - We're rolling out basic syntax highlighting of *.scss in our next release. With the full IntelliSense/formatting/validation thing, we decided to try to do a really good job with LESS first, as it seemed like it was the most popular preprocessor in the community. As we get more feedback on other engines (scss, sass, stylus, etc) we're totally open to doing that work. We pay a lot of attention to UserVoice if you'd like to suggest any of this :)

https://webmatrix.uservoice.com
September 26, 2012 12:30
Wow, love the lightness. I don't know why this reminds me of FrontPage for some reason. Remember that folks?
September 28, 2012 16:55
Thank you for the detailed information Scott. Webmatrix is quite comprehensive. Already bookmarked to try out when I get to work.

October 02, 2012 9:43
Hi,

Any chance we can use the .less IntelliSense in vs 2012?
October 02, 2012 14:01
Daniel - Have you checked out Web Essentials?
October 03, 2012 11:50
It's good to see WebMaxtrix is improving.

If you want a tool which is a combination of a"text editor + Firebug-like UI + Live preview",check LIVEditor, it'll be in beta soon.
November 02, 2012 13:27
What would it take to add RoR support? I'd enjoy contributing some hours.
December 13, 2012 17:05
It will be interesting to see how this pans out... suggestion if you want to use MS-SQL in node, use the tedious module which is less cumbersome than the MS preview module/driver.
January 31, 2013 12:36
I use Codelobster PHP Edition for web development
February 02, 2013 1:48
Stas - And you work for CodeLobster, you should mention. ;)
February 04, 2013 17:47
Thanks a lot, Scott ...
Your detailed explanations make the decision easier, to work with WebMatrix 2 in the future. I 'd been working with Dreamweaver CS4 , but my harddisk said 'bye' a month ago, and coding with notepad++ is a bad substitude.
Keep' on, best regards
Michael
July 04, 2013 13:07
I'm curious to find out what blog system you're utilizing? I'm experiencing some small security issues with my latest website and I would like to find something more safe. Do you have any recommendations?

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.