Modern Full Stack Development using .NET


Microservices, Pub/Sub, federated identity, token based authentication, Web API, web hooks, client side data binding + realtime messages


Leblanc Meneses
Robust Haven Inc.
817-226-5740
leblancmeneses
leblanc@
leblancmeneses

Project References

https://github.com/leblancmeneses repositories

https://github.com/kendo-labs/angular-kendo
https://github.com/Particular/NServiceBus
https://github.com/thinktecture/Thinktecture.IdentityServer.v3

Why Now? – Disruption in many areas

  • Cloud levels the playing field (incumbent vs startup)
  • Users expectation bar is higher
  • Product development life cycle is different
  • Community driven engineering standards

Cloud levels the playing field

  • Architecture for Infrastructure is exposed over API(s)
    • Azure: RDS – relational database as a service
    • Azure: Disaster Recovery with traffic manager
  • Architecture for scalable, decoupled products is promoted. ACS, Queues, API(s)
azure

Users expectation bar is higher

  • Usability – expect it to be pretty, avoid feature bloat, api’s for app mashups, community development around product
    • Photoshop cost to maintain rarely used features
    photoshop
  • accessibility from any device
  • consistent
* Maintenance cost for rarely used feature
Features from devs not from users
* bootstrap, cross compilers

Product development life cycle is different

  • Do I build the product? customer validation
  • Do I invest in a feature? “build, measure, learn, repeat”;
    • LinkedIn + GitHub integration scrapped
  • Small distributed teams of full stack developers
    • No need for vertical slicing, work is divided by feature and ownership given to the full stack dev
  • Iterative rapid releases & quick feedback loops

Community driven engineering standards

  • Adobe & Microsoft proprietary RIA looses against HTML standards and JavaScript
  • Apple launch of Swift 2014 – dead on arrival
    • For everyone focused on reach
    • For everyone avoiding vendor lock-in (cross compiler)
  • 1st choice:
    • HTML + CSS + JavaScript – phonegap
  • 2nd choice:
    • Xamarin

Microsoft pivots & aligns with community direction

Modern Development Goals

  • Common characteristics found in successful online companies: Amazon, Facebook, LinkedIn, Sendgrid, Twilio
    • Omni channel (be where the customer is @: desktop, mobile, tablet)
    • Elastic infrastructure (DevOps)
    • Comprehensive use of opensource (Nuget)
    • Compositional endpoints (reuse, SOA, *microservice*)
    • Managed API(s) - Community

Micro Service Architecture – Convention based SOA

micro service architecture

My .NET full stack solution

  • Server Side:
    • T4Scaffolding
    • Web API – REST semantics & benefits, ModelBinding, ValidationAttribute,
    • ASP.NET MVC – DRY: @HTML SPA Templating from *Model* DataAnnotations
  • Client Side:
    • Bootstrap 3.x – mobile first approach, solves presentation (typography, UI controls, layout)
    • AngularJS – simplify complex view logic, behaviors through decorations (directives)
      • **No server side viewmodels**
    • Angular Kendo – Controls bound to server side (Grid, DropDowns, DataViz)
    • SignalR – realtime event re-broadcasted over $rootScope.$broadcast
  • Cross Concerns:
    • NServiceBus – enterprise service bus (webhooks/SignalR)
    • ThinkTecture – Thinktecture.IdentityServer.v3 (Idp) + Authorization Server
  • DevOps:
    • Klondike, TeamCity – nuget server
    • psake, Octopus Deploy + RH build tools ; staging automating deployments
    • Testing – Gherkin – RobustHaven.IntegrationTests on GitHub

Server Side MVC – the old

mvc scaffolding

Disruptor: Single Page Apps

html markup
formform

Bootstrap = CSS/layout/presentation

AngularJS = application logic (thick client) ng-show, ng-hide, ng-switch, ng-if, ng-repeat, ng-include, ng-model

Disruptor: AngularJS

  • Client Side A-Z Framework:
    • routing, animation, event bus, dependency injection, 100% testable
  • Prism + Silverlight simplified
http://www.meetup.com/AngularJS-DFW-Area/events/129445132/

Disruptor: AngularJS – Web Components

restrict ‘E’

Web Component – Busy Indicator – ContentControl

busy indicatorbusy indicator

Web Component

Disruptor: AngularJS – Behavior Extending

restrict ‘A’
  • Behavior – decoration by attribute
    • k-mask=“’(999) 000-0000’”
    • Ng-required, ng-minlength, ng-maxlength, ng-pattern, ng-change

Disruptor: AngularJS Realtime

.NET SPA with Web API 2

  • !!NO VIEW LOGIC!!
    • View templating + ViewEngine
  • MVC Kept
    • ActionFilters
    • ModelBinding
    • ValidationAttribute
    • ValueInjecter - nuget
  • Additional Wins (REST)
    • Convention Based Security
    • Declarative Based Security (AOP)
    • Convention Based Hypermedia Linking
    • Formatters controlled by client
WebApiHandleErrorWithELMAHAttribute
WebApiInValidateModelStateAttributee
WebApiNotImplementedExceptionFilterAttributee

The Robust Haven SPA Way

T4Scaffolding to create DisplayTemplates,EditorTemplates from model, convention based REST endpoint for model, Result is a SPA AngularJS/Bootstrap app. DRY – Don’t Repeat Yourself

Organize Code?

Cross Concerns: NServiceBus

  • Distribution – distributor – only msmq, not with competing consumer pattern
  • Persistence – Sagas - ravendb
  • Security – encryption mutators
  • Transactions – DTC –
    • idempotent handlers – given the same input will produce the same result without side effects.
    • Routing slips without DTC
  • Reliability – queues, retries, second level retries
sagasqueues

Cross Concerns: NServiceBus

  • When things go wrong! You can relax.
nservicebus
Udi Dahan, NServiceBus Docs, Google Group

Cross Concerns: ThinkTecture

SaaS
IdentityServer v3
Dominick Baier – pluralsight,
@leastprivilege
ACS

Cross Concerns: ThinkTecture

Monitoring vs Testing

Monitoring vs Testing

RobustHaven.IntegrationTesting

DevOps

  • DevOps talks later today

Feedback

Leblanc Meneses
Robust Haven Inc.
817-226-5740
@leblancmeneses
leblancmeneses
leblanc@
leblancmeneses