patterns are good for managers
Post on 27-Jul-2015
452 Views
Preview:
TRANSCRIPT
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
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
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}
});
Visit our library of free webinar videos!
Previous Webinars:
• Azure + Visual Studio Online: How to build, test, deploy and monitor seamlessly
• 6 Steps To Achieving Predictable Release Management With Visual Studio 2013
• How To Create High Value Development Teams
• 5 TFS Features That Will Dramatically Improve Your Team's Performance
18
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 Michael.Cooper@agilethought.com
linkedin.com/in/michaelcooper
top related