Modern ASP.NET Webskills

75
Modern Web Development WebForms -> MVC -> Angular

description

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!

Transcript of Modern ASP.NET Webskills

Page 1: Modern ASP.NET Webskills

Modern Web DevelopmentWebForms -> MVC -> Angular

Page 2: Modern ASP.NET Webskills

Modern Web DevelopmentWebForms -> MVC -> Angular

Page 3: Modern ASP.NET Webskills
Page 4: Modern ASP.NET Webskills

developingUX.comspeakermix.com/calebjenkins

@calebjenkins#ctcc14

Page 5: Modern ASP.NET Webskills

developingUX.comspeakermix.com/calebjenkins

@calebjenkins#ctcc14

Page 6: Modern ASP.NET Webskills

why

TestableRepeatable

Maintainable Reliable-able

ScalableExtensible

Deliverable

Workable

Page 7: Modern ASP.NET Webskills

Development

Object Orientation

SOLID

Patterns

Secure Coding

Building teams that engineer better software

D e v e l o p m e n t ∙ E n g i n e e r i n g ∙ P r o c e s s

Page 8: Modern ASP.NET Webskills
Page 9: Modern ASP.NET Webskills

write better code

Page 10: Modern ASP.NET Webskills
Page 11: Modern ASP.NET Webskills
Page 12: Modern ASP.NET Webskills

12

what are the 4 big parts of unit tests?

Page 13: Modern ASP.NET Webskills

13

Test Framework Test Runner

Code Tests

Page 14: Modern ASP.NET Webskills

14

Test Framework Test Runner

Code Testsyour applicationwhat you want to test

Page 15: Modern ASP.NET Webskills

15

Test Framework Test Runner

Code Testsyour test code

the code that tests the code that you wrote or are

going to write

Page 16: Modern ASP.NET Webskills

16

Test Framework Test Runner

Code Tests

attributes and assertsthe framework provides

the attributes and asserts so we know what the tests

are doing. Examples: nUnit jUnit

cppUnit

Page 17: Modern ASP.NET Webskills

17

Test Framework Test Runner

Code Tests

runs the testsoften associated with the

test framework; is distinctly separate.

sometime integrated in IDE, CI Server or stand

alone exe

Page 18: Modern ASP.NET Webskills

18

Test Runner

Code

Test

Fra

mew

orkTests

Tests

Tests

Tests

Tests

Page 19: Modern ASP.NET Webskills

19

Test Runners

nUnit Test Runner

Page 20: Modern ASP.NET Webskills

20

Test Runners

nUnit Test RunnerVisual Studio (VS Test)

Page 21: Modern ASP.NET Webskills

21

Test Runners

nUnit Test RunnerVisual Studio (VS Test)

CodeRush / ReSharper

Page 22: Modern ASP.NET Webskills

22

Test Runners

nUnit Test RunnerVisual Studio (VS Test)

CodeRush / ReSharperContinuous Integration (Team City)

Page 23: Modern ASP.NET Webskills

the problem with edges

Page 24: Modern ASP.NET Webskills

UI DataBusiness

Edges areHard to Test

Page 25: Modern ASP.NET Webskills

Testing edges can be like

testing to see if you’re good at cliff jumping

Page 26: Modern ASP.NET Webskills

That’s not me

Page 27: Modern ASP.NET Webskills

..or you’restuff on a rock.

You’re either an expert and it works…

Page 28: Modern ASP.NET Webskills

UI DataBusiness

Edges areHard to Test

Page 29: Modern ASP.NET Webskills

UI

DataData

LogicUI

LogicBusiness

Edges are stillHard to Test

by separating UI/Data edges fromUI/Data logic we’re increasing the testable area

Page 30: Modern ASP.NET Webskills

UI

DataData

LogicUI

LogicBusiness

Edges are stillHard to Test

by separating UI/Data edges fromUI/Data logic we’re increasing the testable area

we’ve also made it easier to implementvarious UI and Data platforms

without affecting the application logic

Page 31: Modern ASP.NET Webskills

UI

DataData

LogicUI

LogicBusiness

Edges are stillHard to Test

by separating UI/Data edges fromUI/Data logic we’re increasing the testable area

we’ve also made it easier to implementvarious UI and Data platforms

without affecting the application logic

MVP, MVC

or MVVM

Patterns

Repository

Pattern

Page 32: Modern ASP.NET Webskills

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)

UI Patterns for

Testability

Keep Views DumbEach Pattern has a

testable part

Page 33: Modern ASP.NET Webskills

View

Controller

Presenter (UI Logic)

Model (Data)

You!Definitions

(IView)

Page 34: Modern ASP.NET Webskills

V

P

MMVP

Request

RendersEvents

Updates

Gets

Updates

Page 35: Modern ASP.NET Webskills

V

C

MMVC

Request

Updates

Reflects

Renders

Page 36: Modern ASP.NET Webskills

V

MM-V-VM

Request

RendersEvents

Updates

Gets/Updates

VM

Page 37: Modern ASP.NET Webskills

P

M (Customer)

With MVP

Request

Renders

the Presenter “knows” about every field.

FirstName

LastNameGender

MobileNumberBirthDay

EmailWebpagePhotoAboutM

(OrderHistory)OrderDetails[ ]

Page 38: Modern ASP.NET Webskills

M (Customer)

In a MVVM

Request

Renders

the Presenter “knows” about the ViewModel

M (OrderHistory)

the View “binds” to the ViewModel

VM

Page 39: Modern ASP.NET Webskills

M (Customer)

ViewModel can…

M (OrderHistory)

composite application models

contain behaviors

simplify application UI with wpf/Silverlight/JavaScript binding

CustomerOrdersViewModel

ICalculateTotals

VM

Page 40: Modern ASP.NET Webskills

40

MVC

UI Patterns for

Testability

MVP

M-V-VM

Keep Views DumbEach Pattern has a testable partDiscuss

Page 41: Modern ASP.NET Webskills

41

MVC

UI Patterns for

Testability

MVP

M-V-VM

Keep Views DumbEach Pattern has a testable partDiscuss

Page 42: Modern ASP.NET Webskills
Page 43: Modern ASP.NET Webskills

angularJS.org

handelbarsJS.comknockoutJS.com

knockoutMVC.com ToDoMVC.com

Page 44: Modern ASP.NET Webskills

V

C

MMVC

Request

Updates

Reflects

Renders

Page 45: Modern ASP.NET Webskills

Resources & Frameworks

BDDhttp://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

Page 46: Modern ASP.NET Webskills
Page 47: Modern ASP.NET Webskills

Handle your dependencies

Page 48: Modern ASP.NET Webskills

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 SilverlightWrox Press 2012

Caleb Jenkins

Page 49: Modern ASP.NET Webskills

?Data Access

Data Logic

Integration Service Proxy

App Domain Domain Validation

UI Logic

UI

How do you test this

with thesedependencies

Page 50: Modern ASP.NET Webskills

Data Access

Data Logic

Integration Service Proxy

App Domain Domain Validation

UI Logic

UI

Page 51: Modern ASP.NET Webskills

Test Runner

Test Code

Integration Service Proxy

App Domain Domain Validation

UI LogicFaked Input

Faked

Dependencies

Dependency Injection + InterfacesFaked dependencies to increase unit isolationLeverage mocking frameworks makes life better

Page 52: Modern ASP.NET Webskills

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

Page 53: Modern ASP.NET Webskills

http://developingUX.com/DI/

Page 54: Modern ASP.NET Webskills

- Real World .NET, C# and SilverlightWrox 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!”

Page 55: Modern ASP.NET Webskills

Mocking in .NETMicrosoft.Fakes

Page 56: Modern ASP.NET Webskills

Bringing DI together

Page 57: Modern ASP.NET Webskills

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

Page 58: Modern ASP.NET Webskills

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

using Rhino.Mocks

Page 59: Modern ASP.NET Webskills

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

using Rhino.MocksExpectations

Page 60: Modern ASP.NET Webskills

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

using Rhino.MocksExpectations

DI

Page 61: Modern ASP.NET Webskills

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

using Rhino.MocksExpectations

DIaction

Page 62: Modern ASP.NET Webskills

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

using Rhino.MocksExpectations

DIaction

asserts

Page 63: Modern ASP.NET Webskills

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

using Rhino.MocksExpectations

DIaction

asserts

Page 64: Modern ASP.NET Webskills

WebForms -> MVP

Page 65: Modern ASP.NET Webskills

WebForms -> MVC (Razor)

/Wall/Default.aspx

/Wall/Default.aspx.cs

/Wall/index.cshtml

Controllers/WallController.cs

Page 66: Modern ASP.NET Webskills

/Wall/Default.aspx.cs /Controllers/WallController.cs

/Masterpage.master/Wall/Default.aspx

/shared/_Layout.cshtml/views/index.cshtml

/Masterpage.master.cs

WebForms -> MVC (Razor)

Page 67: Modern ASP.NET Webskills

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

Page 68: Modern ASP.NET Webskills

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

Page 69: Modern ASP.NET Webskills

MVC -> Angular

AngularJS

/Controllers/WallController.cs jsonResult

http

Page 70: Modern ASP.NET Webskills

https://github.com/webformsmvp/webformsmvp

Page 71: Modern ASP.NET Webskills
Page 72: Modern ASP.NET Webskills
Page 73: Modern ASP.NET Webskills

PROACTION

M E N T O R S

http://www.flickr.com/photos/dieselbug2007/370557683/

Photo Credits

http://www.flickr.com/photos/fudj/122371431/

http://www.flickr.com/photos/yardsale/4524101944/

http://www.flickr.com/photos/38738277@N04/3652658961/

Page 74: Modern ASP.NET Webskills

PROACTION

M E N T O R S

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

Page 75: Modern ASP.NET Webskills

developingUX.comspeakermix.com/calebjenkins@calebjenkins

I t ’ s t ime for quest ions now