1. The New Face of ASP.NET ASP.NET MVC, Razor, and jQuery Ido Flatow | Senior Architect | Sela Group @idoFlatow | http://bit.ly/flatowblog This session is available at: http://bit.ly/devreach-2012-idof

2. The History of Web Development ASP.NET 1.1 (2002-2003) Does the job, but you need to get your hands dirty

3. The History of Web Development ASP.NET 2.0 (2005) Stable platform with many new features

4. The History of Web Development ASP.NET 3.5 (2007-2008) Improved performance, more accessorized

5. The Present of Web Development ASP.NET 4/4.5 (2010-2012) A whole new ball game

6. www.devreach.com About Me Senior architect, Sela Group Co-Author: ASP.NET 4 Programmer’s Reference Co-Author of Microsoft’s official WCF 4 course Microsoft MVP for Connected Systems Development Focus on: ASP.NET, WCF, Window Azure platform, and IIS 7.5 Microsoft certified trainer

7. www.devreach.com ASP.NET MVC is Not… The new version of ASP.NET Web Forms Yet another WCSF (Web Client Software Factory) Going to eliminate JavaScript from your code Able to use ASP.NET web controls An isolated framework Hard to use

8. www.devreach.com What ASP.NET MVC is All About… Apparently, a new Web Project type for ASP.NET Clear separation: Model, View, Controller Using friendly URLs Giving full control over HTML and JavaScript Making testing easier and comprehensive A new framework for building web applications using the power of ASP.NET

9. www.devreach.com The “Page” Lifecycle of MVC Model Controller View Model Controller View

10. Model Controller View Model View Controller 1 1 4 4 2 2 3 3 Browser Request is routed to the controller Controller fetches data from the model Controller formats the data and passes it to the view View renders output (usually HTML) and returns it to the client Request Data Formatted Data Response (HTML, JSON, Image…)

11. My First ASP.NET MVC Application

12. www.devreach.com ASP.NET MVC Main Features Productivity –Strong-typed helpers –UI validation made easy with data annotations –Easy to use templates for display and edit Security –Automatic HTML encoding –Anti-Forgery (CSRF) improvements Performance –Support for AsyncController –Framework tuned for performance Extensibility –Use the view engine you want –Ability to replace almost everything in the pipeline

13. ASP.NET MVC Main Features

14. www.devreach.com Razor? Is This Microsoft or Gillette? ASP.NET MVC uses view engines Use the default ASPX/ASCX Or … use some other view engine –Razor –NHaml –Spark Razor is … –Compact –Easy to learn –Extensible

15. A Picture is Worth a Thousand Words

16. Expression Long expression Raw expression Escaping the @ sign Comments Conditions and HTML inside code Code segments and loops Calling functions (reusable code) A Picture is Worth a Thousand Words Code segments and loops Escaping the @ sign Long expression Expression

17. Back to the Demo…

18. www.devreach.com What is jQuery? It’s Fantastic! 18 Fast and concise JavaScript library Simplifies your code –DOM traversing –Event handling –Animation –Ajax interaction Included in ASP.NET 4 project templates Cross browser (IE/FF/Safari/Opera/Chrome) Extensible through plugins Write less, do more! It just works!

19. jQuery Around the World http://trends.builtwith.com/javascript http://trends.builtwith.com/javascript (September 21 st 2012)

20. www.devreach.com 60 Minutes on jQuery

21. www.devreach.com 60 Seconds on jQuery Selectors – the $ token –Element - $("div") –ID - $("#mainContainer") –Class - $(".content") –CSS3 Selector - $("div > p:odd") Events –$(".link").click(function () {... }); DOM Manipulation –$("table > tbody > tr:even").css("background", "pink"); Effects –$("#btnSubmit").fadeOut("slow").fadeIn("slow"); Ajax –$.load(), $.get(), $.post(), $.ajax() Header Paragraph 1 Paragraph 2

22. Back to the Demo…

23. ASP.NET MVC and ASP.NET Web Forms ASP.NET MVCASP.NET Web Forms A more familiar technology Many server controls that abstract UI and logic Supports a WYSIWYG designer Less use of JavaScript (some of the time) Evil ViewState Better testing automation Enforces separation of concerns No evil ViewState that increase page size Full control over markup VS.

24. www.devreach.com After 10 Years of Web Forms… Better web application architecture Better client side JavaScript libraries Better way to write mixed-code Better way to test our applications It’s simply a better web … We can only guess what the future holds…

25. The Future of Web Development??? Fast, Slick, and Cool

26. www.devreach.com Where to Go? This Session - http://bit.ly/devreach-2012-idof Blogs –http://blogs.msdn.com/b/webdev –http://www.hanselman.com/blog –http://encosia.com Other Sites –http://asp.net/mvc –http://aspnet.uservoice.com/forums/41201-asp-net-mvc –http://www.asp.net/vnext –http://vimeo.com/43659037 (1-hour video on Fiddler) My Info –Email: idof@sela.co.il –Blog: http://bit.ly/flatowblog –Twitter: @idoFlatow