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!

1. Modern Web Development
WebForms -> MVC -> Angular

2. Modern Web Development
WebForms -> MVC -> Angular

4. developingUX.com
speakermix.com/calebjenkins
@calebjenkins
#ctcc14

5. developingUX.com
speakermix.com/calebjenkins
@calebjenkins
#ctcc14

6. why
Testable
Repeatable
Maintainable Reliable-able
Scalable
Extensible
Deliverable
Workable

7. Development
Object Orientation
SOLID
Patterns
Secure Coding
Engineering
Automated Tests
Source Control
Automated Builds
Process
Agile, Lean, XP
Team Dynamics
Continuous Learning

9. write better code

12. 12
what are the 4 big parts of unit tests?

13. Test Framework Test Runner
Code Tests
13

14. Test Framework Test Runner
Code Tests
14
your application
what you want to test

15. Test Framework Test Runner
Code Tests
15
your test code
the code that tests the
code that you wrote or are
going to write

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

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

18. Test Runner
18
Code
TestFramework
Tests
Tests
Tests
Tests
Tests

19. Test Runners
19
nUnit Test Runner

20. Test Runners
20
nUnit Test Runner
Visual Studio (VS Test)

21. Test Runners
21
nUnit Test Runner
Visual Studio (VS Test)
CodeRush / ReSharper

22. Test Runners
22
nUnit Test Runner
Visual Studio (VS Test)
CodeRush / ReSharper
Continuous Integration (Team City)

23. the problem with edges

24. UI DataBusiness
Edges are
Hard to Test

25. Testing edges
can be like
testing to see
if you’re good
at cliff jumping

26. That’s not me

27. ..or you’re
stuff on a rock.
You’re either an
expert and it works…

28. UI DataBusiness
Edges are
Hard to Test

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

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

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

32. 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)

33. Definitions

35. Reflects

37. With MVP
the Presenter “knows” about every field.
MobileNumber
BirthDay

38. In a MVVM
the Presenter “knows” about the
ViewModel
the View “binds” to the ViewModel

39. ViewModel can…
composite application models
contain behaviors
simplify application UI with
wpf/Silverlight/JavaScript binding

40. 40
MVC
MVP
M-V-VM

41. 41
MVC
MVP
M-V-VM

43. angularJS.org
handelbarsJS.com
knockoutJS.com
knockoutMVC.com ToDoMVC.com

44. Reflects

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

47. Handle your
dependencies

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

49. Data Access
Data Logic
Integration Service Proxy
App Domain Domain Validation
UI Logic
UI
How do you test this
with these
dependencies

50. Data Access
Data Logic
Integration Service Proxy
App Domain Domain Validation
UI Logic
UI

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

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

53. http://developingUX.com/DI/

54. - 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!”

55. Mocking in .NET
Microsoft.Fakes

56. Bringing DI together

57. 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();

58. 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();

59. 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();

60. 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();

61. 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();

62. 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();

63. 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();

64. WebForms -> MVP

65. WebForms -> MVC (Razor)
/Wall/Default.aspx
/Wall/Default.aspx.cs
/Wall/index.cshtml
Controllers/WallController.cs

66. /Wall/Default.aspx.cs /Controllers/WallController.cs
/Masterpage.master
/Wall/Default.aspx
/shared/_Layout.cshtml
/views/index.cshtml
/Masterpage.master.cs
WebForms -> MVC (Razor)

67. /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)

68. /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)

69. MVC -> Angular
AngularJS
/Controllers/WallController.cs

70. https://github.com/webformsmvp/webformsmvp

73. 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/

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

75. developingUX.com
speakermix.com/calebjenkins
@calebjenkins