Modern ASP.NET Webskills

669 views

Published on

Presented at the 2014 Cow Town Code Camp in Ft. Worth, TX - http://CowTownCodeCamp.com - Blog Post: http://developingux.com/2014/07/23/modern-web-development/

The world is moving towards ASP.NET MVC.. but what about your legacy WebForms development. What are the things you can do today to make your WebForms more testable, reliable and even increase the SEO and usability of your WebForms.

This talk will walk through applying the Model View Presenter pattern to your ASP.NET WebForm applications and introduce you to some additional enhancements that Microsoft has made to WebForms recently to make your site and life that much better!

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
669
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Build out slide.. Before you click through: take a minute to have student “read” test and talk out what it’s doing.
  • Build out slide.. Before you click through: take a minute to have student “read” test and talk out what it’s doing.
  • Build out slide.. Before you click through: take a minute to have student “read” test and talk out what it’s doing.
  • Build out slide.. Before you click through: take a minute to have student “read” test and talk out what it’s doing.
  • Build out slide.. Before you click through: take a minute to have student “read” test and talk out what it’s doing.
  • Build out slide.. Before you click through: take a minute to have student “read” test and talk out what it’s doing.
  • Build out slide.. Before you click through: take a minute to have student “read” test and talk out what it’s doing.
  • Modern ASP.NET Webskills

    1. 1. Modern Web Development WebForms -> MVC -> Angular
    2. 2. Modern Web Development WebForms -> MVC -> Angular
    3. 3. developingUX.com speakermix.com/calebjenkins @calebjenkins #ctcc14
    4. 4. developingUX.com speakermix.com/calebjenkins @calebjenkins #ctcc14
    5. 5. why Testable Repeatable Maintainable Reliable-able Scalable Extensible Deliverable Workable
    6. 6. Development Object Orientation SOLID Patterns Secure Coding Engineering Automated Tests Source Control Automated Builds Process Agile, Lean, XP Team Dynamics Continuous Learning
    7. 7. write better code
    8. 8. 12 what are the 4 big parts of unit tests?
    9. 9. Test Framework Test Runner Code Tests 13
    10. 10. Test Framework Test Runner Code Tests 14 your application what you want to test
    11. 11. Test Framework Test Runner Code Tests 15 your test code the code that tests the code that you wrote or are going to write
    12. 12. Test Framework Test Runner Code Tests 16 attributes and asserts the framework provides the attributes and asserts so we know what the tests are doing. Examples: nUnit jUnit cppUnit
    13. 13. Test Framework Test Runner Code Tests 17 runs the tests often associated with the test framework; is distinctly separate. sometime integrated in IDE, CI Server or stand alone exe
    14. 14. Test Runner 18 Code TestFramework Tests Tests Tests Tests Tests
    15. 15. Test Runners 19 nUnit Test Runner
    16. 16. Test Runners 20 nUnit Test Runner Visual Studio (VS Test)
    17. 17. Test Runners 21 nUnit Test Runner Visual Studio (VS Test) CodeRush / ReSharper
    18. 18. Test Runners 22 nUnit Test Runner Visual Studio (VS Test) CodeRush / ReSharper Continuous Integration (Team City)
    19. 19. the problem with edges
    20. 20. UI DataBusiness Edges are Hard to Test
    21. 21. Testing edges can be like testing to see if you’re good at cliff jumping
    22. 22. That’s not me
    23. 23. ..or you’re stuff on a rock. You’re either an expert and it works…
    24. 24. UI DataBusiness Edges are Hard to Test
    25. 25. UI Data Data Logic UI Logic Business Edges are still Hard to Test by separating UI/Data edges from UI/Data logic we’re increasing the testable area
    26. 26. UI Data Data Logic UI Logic Business Edges are still Hard to Test by separating UI/Data edges from UI/Data logic we’re increasing the testable area we’ve also made it easier to implement various UI and Data platforms without affecting the application logic
    27. 27. UI Data Data Logic UI Logic Business Edges are still Hard to Test by separating UI/Data edges from UI/Data logic we’re increasing the testable area we’ve also made it easier to implement various UI and Data platforms without affecting the application logic
    28. 28. 32 Model View Controller (MVC) •All input is routed to a controller •Example Web Scenarios •ASP.NET MVC Framework Model View Presenter (MVP) • View initiates Presenter • UI Logic is contained in Presenter • Example WinApp & ASP.NET Webform apps Model View ViewModel (MVVM) • ViewModel is a view specific model • VM is can mash up application models • UI logic contained in ViewModel • Example Rich Data binding Scenarios (WPF / Silverlight)
    29. 29. Definitions
    30. 30. Reflects
    31. 31. With MVP the Presenter “knows” about every field. MobileNumber BirthDay
    32. 32. In a MVVM the Presenter “knows” about the ViewModel the View “binds” to the ViewModel
    33. 33. ViewModel can… composite application models contain behaviors simplify application UI with wpf/Silverlight/JavaScript binding
    34. 34. 40 MVC MVP M-V-VM
    35. 35. 41 MVC MVP M-V-VM
    36. 36. angularJS.org handelbarsJS.com knockoutJS.com knockoutMVC.com ToDoMVC.com
    37. 37. Reflects
    38. 38. Resources & Frameworks BDD http://neelnarayan.blogspot.com/2010/07/bdd-is-more-than-tdd-done-right.html more than TDD done right http://dannorth.net/introducing-bdd/ introducing BDD http://lucisferre.net/2011/02/05/behavior-driven-test-driven-domain-driven-design/ behavior driven, test driven, domain driven nBehave, nSpec, SpecFlow, StoryQ, mSpec, StorEvil
    39. 39. Handle your dependencies
    40. 40. Dependencies “The single greatest thing that you can do to make your code more testable and healthy is to start taking a Dependency Injection approach to writing software” - Real World .NET, C# and Silverlight Wrox Press 2012 Caleb Jenkins
    41. 41. Data Access Data Logic Integration Service Proxy App Domain Domain Validation UI Logic UI How do you test this with these dependencies
    42. 42. Data Access Data Logic Integration Service Proxy App Domain Domain Validation UI Logic UI
    43. 43. Test Runner Test Code Integration Service Proxy App Domain Domain Validation UI Logic Dependency Injection + Interfaces Faked dependencies to increase unit isolation Leverage mocking frameworks makes life better
    44. 44. Note: Dependency Injection will turn you in to a complete coding Ninja, however the full scope of DI with any of the many DI frameworks is beyond the scope of this talk
    45. 45. http://developingUX.com/DI/
    46. 46. - Real World .NET, C# and Silverlight Wrox Press 2012 Caleb Jenkins Mocking Framework “A mocking framework allows you to create fake classes on the fly in- line with your test code. That is a bit of a simplification, mocking frameworks use a combination of emits, reflection and generics to create run-time instance implementations of .NET Interfaces – whew, that’s a mouthful - it’s a whole lot easier to say that they create fake classes on the fly!”
    47. 47. Mocking in .NET Microsoft.Fakes
    48. 48. Bringing DI together
    49. 49. IData mockData = MockRepository.GenerateMock<IData>(); mockData.Expect(x => x.getAll<account>()) .Return(sampleAccounts).Repeat.Once(); IAccountServices accountService = new AcmeAccountService(mockData); var act = accountService.GetAccount(known_account_id); mockData.VerifyAllExpectations();
    50. 50. IData mockData = MockRepository.GenerateMock<IData>(); mockData.Expect(x => x.getAll<account>()) .Return(sampleAccounts).Repeat.Once(); IAccountServices accountService = new AcmeAccountService(mockData); var act = accountService.GetAccount(known_account_id); mockData.VerifyAllExpectations();
    51. 51. IData mockData = MockRepository.GenerateMock<IData>(); mockData.Expect(x => x.getAll<account>()) .Return(sampleAccounts).Repeat.Once(); IAccountServices accountService = new AcmeAccountService(mockData); var act = accountService.GetAccount(known_account_id); mockData.VerifyAllExpectations();
    52. 52. IData mockData = MockRepository.GenerateMock<IData>(); mockData.Expect(x => x.getAll<account>()) .Return(sampleAccounts).Repeat.Once(); IAccountServices accountService = new AcmeAccountService(mockData); var act = accountService.GetAccount(known_account_id); mockData.VerifyAllExpectations();
    53. 53. IData mockData = MockRepository.GenerateMock<IData>(); mockData.Expect(x => x.getAll<account>()) .Return(sampleAccounts).Repeat.Once(); IAccountServices accountService = new AcmeAccountService(mockData); var act = accountService.GetAccount(known_account_id); mockData.VerifyAllExpectations();
    54. 54. IData mockData = MockRepository.GenerateMock<IData>(); mockData.Expect(x => x.getAll<account>()) .Return(sampleAccounts).Repeat.Once(); IAccountServices accountService = new AcmeAccountService(mockData); var act = accountService.GetAccount(known_account_id); mockData.VerifyAllExpectations();
    55. 55. IData mockData = MockRepository.GenerateMock<IData>(); mockData.Expect(x => x.getAll<account>()) .Return(sampleAccounts).Repeat.Once(); IAccountServices accountService = new AcmeAccountService(mockData); var act = accountService.GetAccount(known_account_id); mockData.VerifyAllExpectations();
    56. 56. WebForms -> MVP
    57. 57. WebForms -> MVC (Razor) /Wall/Default.aspx /Wall/Default.aspx.cs /Wall/index.cshtml Controllers/WallController.cs
    58. 58. /Wall/Default.aspx.cs /Controllers/WallController.cs /Masterpage.master /Wall/Default.aspx /shared/_Layout.cshtml /views/index.cshtml /Masterpage.master.cs WebForms -> MVC (Razor)
    59. 59. /Wall/Default.aspx.cs /Controllers/WallController.cs /Masterpage.master /Wall/Default.aspx /shared/_Layout.cshtml /views/index.cshtml /Masterpage.master.cs /Controllers/BaseController.cs WebForms -> MVC (Razor)
    60. 60. /Masterpage.master <asp:ContentPlaceHolder ID="MainCol" runat="server"> </asp:ContentPlaceHolder> <asp:ContentPlaceHolder ID=“LeftCol" runat="server"> </asp:ContentPlaceHolder> /Wall/Default.aspx <asp:Content ID="Content2" ContentPlaceHolderID=“MainCol" runat="server">… <asp:Content ID="Content3" ContentPlaceHolderID="LeftCol" runat="server">…. /views/shared/_Layout.cshtml @RenderBody() @RenderSection("LeftCol", false) /views/Wall/index.cshtml @section LeftCol { } WebForms -> MVC (Razor)
    61. 61. MVC -> Angular AngularJS /Controllers/WallController.cs
    62. 62. https://github.com/webformsmvp/webformsmvp
    63. 63. http://www.flickr.com/photos/dieselbug2007/370557683/ http://www.flickr.com/photos/fudj/122371431/ http://www.flickr.com/photos/yardsale/4524101944/ http://www.flickr.com/photos/38738277@N04/3652658961/
    64. 64. http://www.flickr.com/photos/utslibrary/6776175796/ http://www.flickr.com/photos/48725518@N03/4478990651/ Copyright © Merriswheel – Used without permission http://www.flickr.com/photos/mworrell/266913194/ https://www.flickr.com/photos/ddebold/5900039667
    65. 65. developingUX.com speakermix.com/calebjenkins @calebjenkins

    ×