1. WebMatrix: See
What the Matrix
Can Do For You
Frédéric Harper
Developer Evangelist @ Microsoft Canada
@fharper | outofcomfortzone.net

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

3. My goals

4. My goals

5. My goals
1. Show you how it’s easy to use WebMatrix to
create awesome websites or Web applications

6. WebMatrix

7. What is WebMatrix
It’s a free tool that makes it easy to
Create
Configure
Publish
your websites and web applications

8. What is WebMatrix

9. What is WebMatrix
1. Web App Gallery & Templates

10. What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express

11. What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express
3. Standards Support: HTML5, CSS3, JavaScript/jQuery

12. 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

13. 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

14. 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

15. Who is WebMatrix for?
I <3 Web Apps. I want to build web I’m a professional and I
I just need a tool that sites myself with an build complex, large
makes them easier to easy to learn tool scale web sites with a
configure, customize and framework team of developers
and publish

16. Two ways to build

17. Two ways to build
Option A:
From Scratch

18. Two ways to build
Option A: Option B:
From Scratch From Web App

19. A lap around WebMatrix

20. Razor

21. What is Razor

22. What is Razor
1. A new view engine

23. What is Razor
1. A new view engine
2. Compact, Expressive, and Fluid

24. What is Razor
1. A new view engine
2. Compact, Expressive, and Fluid
3. Easy to Learn

25. What is Razor
1. A new view engine
2. Compact, Expressive, and Fluid
3. Easy to Learn
4. Is not a new language

26. 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

27. 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

28. Introducing Razor
<ul>
<% for (int i = 0; i < 10; i++) { %>
Web Forms
<li><% =i %></li>
(6 transitions): <% } %>
</ul>
<ul>
<?php
PHP for ($i = 0; $i < 10; $i++) {
(2 transitions & an echo): echo("<li>$i</li>");
}
?>
</ul>
<ul>
@for (int i = 0; i < 10; i++) {
Razor
<li>@i</li>
(2 transitions): }
</ul>

29. Code to markup easily
@{
Option 1:
var name = “John Doe”;
HTML Block <div>
Your name: @name
</div>
}
@{
Option 2: var name = “John Doe”;
Text Block <text>
Your name: @name
</text>
}
@{
Option 3:
var name = “John Doe”;
Single line of output in markup @: Your name: @name
}

30. Commenting
@*
Option 1: <div>
Markup Hello World
</div>
*@
@{
Option 2: //var name = "John Doe”;
Code //@name
}
@*
@{
Option 3: //var name = "John Doe";
Both //@name
}
*@

31. Database

32. Database
• SQL Compact Edition
• File-based, so it’s portable. Runs without a server.
• Easy to design, easy to code against

33. Database
• SQL Compact Edition
• File-based, so it’s portable. Runs without a server.
• Easy to design, easy to code against
Designing

34. Database
• SQL Compact Edition
• File-based, so it’s portable. Runs without a server.
• Easy to design, easy to code against
Designing
Coding
@{
var db = Database.Open("ArtGallery");
var product = db.Query("SELECT * FROM PRODUCTS);
}

35. Database access

36. Helpers

37. What are Helpers?
Helpers make it easy to quickly add
commonly used functionality into your
websites
and many more…

38. Two categories
HTML Helpers Make is faster and easier to
render commonly used
• Facebook markup to the page.
• Twitter
• …
Make is faster and easier
API Helpers to call complex APIs from
• PayPal your website.
• Windows Azure Storage
• …

39. Helpers

40. App Gallery & OSS Apps

41. OSS Apps
1. Free
2. Popular = large community
3. Gets you close to the solution quickly
4. Easy to configure

42. Build on the success of Web PI
Web Platform Installer WebMatrix
Download  

Install (inc. dependencies) 
Customize 
SEO Analysis 
Publish 

43. App Gallery

44. Conclusion

45. Next steps

46. Next steps
1. Install WebMatrix

47. Next steps
1. Install WebMatrix
2. Play with it

48. Next steps
1. Install WebMatrix
2. Play with it
1. Create a new website with templates or from scratch

49. 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

50. 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

51. Resources
• http://microsoft.com/web/webmatrix
• http://www.microsoft.com/web/webmatrix/betafeatures.aspx
• http://www.asp.net/web-pages/overview/exploring-webmatrix

52. Questions
Frederic Harper, Developer Evangelist
fredh@microsoft.com
@fharper
http://webnotwar.ca
http://outofcomfortzone.net