Cool and Elegant ASP.NET Web Forms with HTML 5 for the Modern Web
Modern ASP.NET Webskills
-
Upload
caleb-jenkins -
Category
Software
-
view
233 -
download
0
description
Transcript of Modern ASP.NET Webskills
Modern Web DevelopmentWebForms -> MVC -> Angular
Modern Web DevelopmentWebForms -> MVC -> Angular
developingUX.comspeakermix.com/calebjenkins
@calebjenkins#ctcc14
developingUX.comspeakermix.com/calebjenkins
@calebjenkins#ctcc14
why
TestableRepeatable
Maintainable Reliable-able
ScalableExtensible
Deliverable
Workable
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
write better code
12
what are the 4 big parts of unit tests?
13
Test Framework Test Runner
Code Tests
14
Test Framework Test Runner
Code Testsyour applicationwhat you want to test
15
Test Framework Test Runner
Code Testsyour test code
the code that tests the code that you wrote or are
going to write
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
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
18
Test Runner
Code
Test
Fra
mew
orkTests
Tests
Tests
Tests
Tests
19
Test Runners
nUnit Test Runner
20
Test Runners
nUnit Test RunnerVisual Studio (VS Test)
21
Test Runners
nUnit Test RunnerVisual Studio (VS Test)
CodeRush / ReSharper
22
Test Runners
nUnit Test RunnerVisual Studio (VS Test)
CodeRush / ReSharperContinuous Integration (Team City)
the problem with edges
UI DataBusiness
Edges areHard to Test
Testing edges can be like
testing to see if you’re good at cliff jumping
That’s not me
..or you’restuff on a rock.
You’re either an expert and it works…
UI DataBusiness
Edges areHard to Test
UI
DataData
LogicUI
LogicBusiness
Edges are stillHard to Test
by separating UI/Data edges fromUI/Data logic we’re increasing the testable area
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
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
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
View
Controller
Presenter (UI Logic)
Model (Data)
You!Definitions
(IView)
V
P
MMVP
Request
RendersEvents
Updates
Gets
Updates
V
C
MMVC
Request
Updates
Reflects
Renders
V
MM-V-VM
Request
RendersEvents
Updates
Gets/Updates
VM
P
M (Customer)
With MVP
Request
Renders
the Presenter “knows” about every field.
FirstName
LastNameGender
MobileNumberBirthDay
EmailWebpagePhotoAboutM
(OrderHistory)OrderDetails[ ]
M (Customer)
In a MVVM
Request
Renders
the Presenter “knows” about the ViewModel
M (OrderHistory)
the View “binds” to the ViewModel
VM
M (Customer)
ViewModel can…
M (OrderHistory)
composite application models
contain behaviors
simplify application UI with wpf/Silverlight/JavaScript binding
CustomerOrdersViewModel
ICalculateTotals
VM
40
MVC
UI Patterns for
Testability
MVP
M-V-VM
Keep Views DumbEach Pattern has a testable partDiscuss
41
MVC
UI Patterns for
Testability
MVP
M-V-VM
Keep Views DumbEach Pattern has a testable partDiscuss
angularJS.org
handelbarsJS.comknockoutJS.com
knockoutMVC.com ToDoMVC.com
V
C
MMVC
Request
Updates
Reflects
Renders
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
Handle your dependencies
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
?Data Access
Data Logic
Integration Service Proxy
App Domain Domain Validation
UI Logic
UI
How do you test this
with thesedependencies
Data Access
Data Logic
Integration Service Proxy
App Domain Domain Validation
UI Logic
UI
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
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
http://developingUX.com/DI/
- 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!”
Mocking in .NETMicrosoft.Fakes
Bringing DI together
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();
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
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
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
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
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
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
WebForms -> MVP
WebForms -> MVC (Razor)
/Wall/Default.aspx
/Wall/Default.aspx.cs
/Wall/index.cshtml
Controllers/WallController.cs
/Wall/Default.aspx.cs /Controllers/WallController.cs
/Masterpage.master/Wall/Default.aspx
/shared/_Layout.cshtml/views/index.cshtml
/Masterpage.master.cs
WebForms -> MVC (Razor)
/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)
/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)
MVC -> Angular
AngularJS
/Controllers/WallController.cs jsonResult
http
https://github.com/webformsmvp/webformsmvp
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/
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
developingUX.comspeakermix.com/calebjenkins@calebjenkins
I t ’ s t ime for quest ions now