WebMatrix: See What the Matrix Can Do For You

Frédéric HarperDeveloper Evangelist @ Microsoft Canada@fharper | outofcomfortzone.net

Agenda

• What is WebMatrix?• Who is WebMatrix for?• Razor syntax• Database access• Helpers• App Gallery & OSS Apps

My goals

My goals

My goals

1. Show you how it’s easy to use WebMatrix

to create awesome websites or Web

applications

WebMatrix

What is WebMatrix

It’s a free tool that makes it easy to

CreateConfigurePublish

your websites and web applications

What is WebMatrix

What is WebMatrix

1. Web App Gallery & Templates

What is WebMatrix

1. Web App Gallery & Templates

2. Web Server: IIS Express

What is WebMatrix

1. Web App Gallery & Templates

2. Web Server: IIS Express

3. Standards Support: HTML5, CSS3, JavaScript/jQuery

What is WebMatrix

1. Web App Gallery & Templates

2. Web Server: IIS Express

3. Standards Support: HTML5, CSS3, JavaScript/jQuery

4. Scripting Support: ASP.NET & PHP

What is WebMatrix

1. Web App Gallery & Templates

2. Web Server: IIS Express

3. Standards Support: HTML5, CSS3, JavaScript/jQuery

4. Scripting Support: ASP.NET & PHP

5. DB Manager: SQL Server & MySQL

What is WebMatrix

1. Web App Gallery & Templates

2. Web Server: IIS Express

3. Standards Support: HTML5, CSS3, JavaScript/jQuery

4. Scripting Support: ASP.NET & PHP

5. DB Manager: SQL Server & MySQL

6. Optimization Tools: SEO & Performance

Who is WebMatrix for?

I <3 Web Apps. I just need a tool that makes them easier to

configure, customize and publish

I want to build web sites myself with an

easy to learn tool and framework

I’m a professional and I build complex, large

scale web sites with a team of developers

WebMatrix WebMatrix Visual Studio

Two ways to build

Two ways to build

Option A:From Scratch

Two ways to build

Option A:From Scratch

Option B:From Web App

A lap around WebMatrix

Razor

What is Razor

What is Razor

1. A new view engine

What is Razor

1. A new view engine

2. Compact, Expressive, and Fluid

What is Razor

1. A new view engine

2. Compact, Expressive, and Fluid

3. Easy to Learn

What is Razor

1. A new view engine

2. Compact, Expressive, and Fluid

3. Easy to Learn

4. Is not a new language

What is Razor

1. A new view engine

2. Compact, Expressive, and Fluid

3. Easy to Learn

4. Is not a new language

5. Works with any Text Editor

What is Razor

1. A new view engine

2. Compact, Expressive, and Fluid

3. Easy to Learn

4. Is not a new language

5. Works with any Text Editor

6. Has great Intellisense & Unit Testable

Introducing Razor<ul> <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> <% } %></ul>

Web Forms (6 transitions):

PHP(2 transitions & an echo):

Razor (2 transitions):

<ul> <?php for ($i = 0; $i < 10; $i++) { echo("<li>$i</li>"); } ?></ul>

<ul> @for (int i = 0; i < 10; i++) { <li>@i</li> }</ul>

Code to markup easily@{ var name = “John Doe”; <div> Your name: @name </div>}

Option 1:HTML Block

Option 2:Text Block

Option 3:Single line of output in markup

@{ var name = “John Doe”; <text> Your name: @name </text>}

@{ var name = “John Doe”; @: Your name: @name}

Commenting@* <div> Hello World </div>*@

Option 1:Markup

Option 2:Code

Option 3:Both

@{ //var name = "John Doe”; //@name}

@* @{ //var name = "John Doe"; //@name }*@

Database

Database

• SQL Compact Edition• File-based, so it’s portable. Runs without a

server.• Easy to design, easy to code against

Database

• SQL Compact Edition• File-based, so it’s portable. Runs without a

server.• Easy to design, easy to code against

Designing

Database

• SQL Compact Edition• File-based, so it’s portable. Runs without a

server.• Easy to design, easy to code against

Designing

@{ var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); }

Coding

Database access

Helpers

What are Helpers?Helpers make it easy to quickly add commonly used functionality into your websites

and many more…

Two categories

HTML Helpers• Facebook• Twitter• …

Make is faster and easier to render commonly used

markup to the page.

Make is faster and easier to call complex

APIs from your website.

API Helpers• PayPal• Windows Azure Storage• …

Helpers

App Gallery & OSS Apps

OSS Apps

1. Free2. Popular = large community3. Gets you close to the solution quickly4. Easy to configure

Build on the success of Web PI

Web Platform Installer WebMatrix

Download

Install (inc. dependencies)

Customize

SEO Analysis

Publish

App Gallery

Conclusion

Next steps

Next steps

1. Install WebMatrix

Next steps

1. Install WebMatrix

2. Play with it

Next steps

1. Install WebMatrix

2. Play with it

1. Create a new website with templates or from scratch

Next steps

1. Install WebMatrix

2. Play with it

1. Create a new website with templates or from scratch

2. Edit an existing one or deploy an app by using the App

Gallery

Next steps

1. Install WebMatrix

2. Play with it

1. Create a new website with templates or from scratch

2. Edit an existing one or deploy an app by using the App

Gallery

3. Unleash the power of the Matrix & have fun

Resources

• http://microsoft.com/web/webmatrix

• http://www.microsoft.com/web/webmatrix/

betafeatures.aspx

• http://www.asp.net/web-pages/overview/exploring-

webmatrix

Questions

Frederic Harper, Developer Evangelist

fredh@microsoft.com@fharper

http://webnotwar.cahttp://outofcomfortzone.net