Post on 13-Jan-2015
description
WebMatrix: See What the
Matrix Can Do For You!! Frederic Harper
Developer Evangelist
Microsoft Canada
DevTeach Ottawa
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
Create
Configure
Publish your websites and web applications
What is WebMatrix
1. Web App Gallery & Templates
What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express
1. Web App Gallery & Templates
2. Web Server: IIS Express
3. Standards Support: HTML, CSS, JavaScript
What is WebMatrix
What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express
3. Standards Support: HTML, CSS, JavaScript
4. Scripting Support: ASP.NET & PHP
What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express
3. Standards Support: HTML, CSS, JavaScript
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: HTML, CSS, JavaScript
4. Scripting Support: ASP.NET & PHP
5. DB Manager: SQL Server & MySQL
6. Optimization Tools: SEO & Performance
demo A lap around WebMatrix
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 software developer and I build complex, large scale web sites
with a team of developers
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
demo Create a website from template
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
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
7. Unit Testable
What is Razor
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
}
*@
demo Simple Razor syntax demo
Database
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
demo 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
• …
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
• …
demo Helpers
App Gallery & OSS Apps
OSS Apps
1. Free
2. Popular = large community
3. Gets you close to the solution quickly
4. Easy to configure
Build on the success of Web PI
Web Platform Installer WebMatrix
Download
Install (inc. dependencies)
Customize
SEO Analysis
Publish
demo App Gallery & Wordpress in the box
Conclusion
Next steps
1. Install WebMatrix
Next steps
1. Install WebMatrix
2. Play with it
1. Create a new website with templates or from scratch
2. Edit an existing one
3. 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
3. Deploy an app by using the App Gallery
3. Unleash the power of the Matrix & have fun
Resources
• http://microsoft.com/web/webmatrix
• http://asp.net/webmatrixresource (v1 tutorials)
• http://www.webnotwar.ca/
Q & A
Contact me
Frederic Harper, Developer Evangelist
fredh@microsoft.com
@fharper
http://webnotwar.ca
http://outofcomfortzone.net
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should
not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.