Patterns Are Good For Managers

19
Patterns Are Good For Managers Presented by Michael Cooper, Senior Consultant

Transcript of Patterns Are Good For Managers

Patterns Are Good For ManagersPresented by Michael Cooper, Senior Consultant

Not all of your devs can be like him.

Without a Superman, you need:

• Team Productivity

• On Boarding

• Standardized Code & Patterns

• Code Documentation

• Test Coverage

• Quality

2www.agilethought.com

http://moviepilot.com/posts/2014/07/04/those-batman-v-superman-rumors-faked-by-warner-bros-1673661?lt_source=external,manual

These require a disciplined approach.

3www.agilethought.com

Making Swim Lanes …

Your devs know MVC

.NET MVC, Java Spring, around since 1970s

4www.agilethought.com

MVC encourages SOLID code.

5www.agilethought.com

Models Views Controllers Service Layer

MVC Model classes View templates,Html HelpersMVC Razor code

Controller Service Layer code

Angular Model factory classes

View templatesDirectivesMoustache code

Controllers Services

The pattern allows us to have many people working on the same project.

6www.agilethought.com

Dev A Devs B&C Devs B&C Dev D

And new-to-Angular devs need to only learn one area / pattern … allowing them to be productive within one week.

Models Views Controllers Service Layer

The pattern allows our test patterns to be standardized, giving us high coverage.

7www.agilethought.com

Model Unit Tests

Functional Tests

Controller Unit Tests

Service Unit Tests

Integration Tests

Karma/Jasmine

Protractor, Frisby

Models Views Controllers Service Layer

An eco-system to support the Angular pattern.

• Project template

• Automated test setup

• Live templates (Intellij) that build models, controllers, services and their tests

• Lots of examples

• Proof it works!

• Recently completed project: 83% UI code coverage

8www.agilethought.com

Code Samples – MVC

Angular

9www.agilethought.com

Named Spaced Modules

10www.agilethought.com

Templates, Partial Views

11www.agilethought.com

Controller

12www.agilethought.com

.NET MVC Angular

public class HomeController: Controller{

public ActionResult About(){

ViewBag[“name"] = “Dolly";return View();

}}

[HttpPost]public ActionResult About(form){

// something }

.config(function config( $stateProvider ) {$stateProvider.state( 'about', {

url: '/about',views: {

"main": {controller: HomeAboutController',templateUrl: 'about/about.tpl.html'

}})

.controller(‘HomeAboutController', function HomeAboutController ( $scope ) {

$scope.name = ‘Dolly’;$state.go(‘about’);$scope.respond = function(){ //something } ;

});

HTML Helpers/Directives

13www.agilethought.com

.NET MVC Angular

public static class HtmlHelperExtensions{

public static MvcHtmlString CustomTextBox(thisHtmlHelper htmlHelper, string name, string value){

var builder = new TagBuilder(“input”);builder.MergeAttribute(“type”, “text”);builder.MergeAttribute(“name”, name);builder.MergeAttribute(“value”, value);return MvcHtmlString

.Create(builder.ToString(TagRenderMode.SelfClosing));

}}

.directive(“CustomTextBox”, function(){return {

template: ‘<input type=“text” name={{name}} value={{value}} />’,

restrict: ‘E’,scope: {

name: ‘=‘,value: ‘=‘}

}});

use: @Html.CustomTextBox(“custom_txtbox”,”Custom Helper Method”)

use: <custom-text-box name=“custom_txtbox”value=“Custom Helper Method”/>

Models

14www.agilethought.com

.NET MVC Angular

public class Animal{

public Animal();

public string name {get;set;}

public void Run(speed){// do something

}}

.factory(“Animal”, function(){var Animal= function(){

this.name = ‘’; }Animal.prototype.Run = function(){

// do something}return Animal;

});

use:

var horse = new Animal();horse.name = “George”;horse.Run();

use:

var horse = new Animal();horse.name = ‘George’;horse.Run();

Services Persistence

15www.agilethought.com

.NET MVC Angular

public static class StoreAnimals{

private AnimalStore barn;

public void Save(Animal animal){barn.Animals.add(animal);

}}

.service(“StoreAnimals”, function($http){var save = function(animal){return $http.POST(

AnimalStore,angular.toJSON(animal));

}return:{

save: save}

});

use:var horse = new Animal();horse.name = “George”;StoreAnimals.Save(horse);

use:var horse = new Animal();horse.name = ‘George’;StoreAnimals.save(horse).promise.then(function(){

//next thing});

Dependency Injection

16www.agilethought.com

.NET MVC Angular

public static class StoreAnimals{

var db;public StoreAnimals(db){

this.db = db}

public void Save(Animal animal){db.Save(animal);

}}

angular.module(‘myApp.store’, [‘myApp.database’])

.service(“StoreAnimals”, function(db){var save = function(animal){

return db.Save(animal);}

return:{save: save}

});

Code Documentation

17www.agilethought.com

.NET MVC Angular

public static class StoreAnimals{

var db;

public StoreAnimals(db){this.db = db

}

/// <summary>/// Stores an animal/// </summary>/// <param name=“animal">the one to/// persist</param>/// <returns></returns>

public void Save(Animal animal){db.Save(animal);

}}

angular.module(‘myApp.store’, [‘myApp.database’])

.service(“StoreAnimals”, function(db){/*** @method Save - Stores an animal* @param {Animal} animal – the one to persist*/var save = function(animal){

return db.Save(animal);}

return:{save: save}

});

About Michael

19

Mike Cooper spent much of his career in software sales, development and general management,

with large firms like Reuters and Pitney Bowes, and a series of start-ups. His true love is making

great software, and he has built software for television, finance, construction and government, and

co-founded a number of veteran–owned businesses. He is a consultant at AgileThought,

specializing in AngularJS.

Thank You

@mbcoop

Questions about AngularJS? Email me at [email protected]

linkedin.com/in/michaelcooper