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
[email protected]@fharper
http://webnotwar.cahttp://outofcomfortzone.net