Migrating Legacy Web Applications to AngularJS

MIGRATING LEGACY WEB APPLICATIONS TO ANGULARJS

WHAT IS A LEGACY APPLICATION?

WHY IS THIS A PROBLEM?

HOW DO THINGS GET SO BAD?

$(document).ready(function() {$('.hide').click(function() {

$('.target').hide();});$('.show').click(function() {

$('.target').show();});

});

$(document).ready(function() {$('.hide').click(function() {

$('.target').hide();$('.target').slideUp(250);

});$('.show').click(function() {

$('.target').show();$('.target').slideDown(250);

});});

$(document).ready(function() {$('.hide').click(function(e) {

e.preventDefault();$('.target').hide();$('.target').addClass(‘hidden’);$('.target').slideUp(250);

});$('.show').click(function(e) {

e.preventDefault();$('.target').show();$('.target').removeClass(‘hidden’);$('.target').slideDown(250);

});});


e.preventDefault();if(!$('.target').hasClass('hidden')) {

$('.target').hide();$('.target').addClass(‘hidden’);$('.target').slideUp(250);

}});$('.show').click(function(e) {

e.preventDefault();if($('.target').hasClass('hidden')) {

$('.target').show();$('.target').removeClass(‘hidden’);$('.target').slideDown(250);

}});

});



if($('.user').hasClass('manager') || $('.user').hasClass('supervisor')) {$('.target').hide();$('.target').addClass(‘hidden’);$('.target').slideUp(250);

} else if ($('.user').hasClass('client') || $('.user').hasClass('customer')) {$('.target').hide();$('.target').addClass(‘hidden’);$('.target').slideUp(500);

} else {$('.target').hide();$('.target').addClass(‘hidden’);$('.target').slideUp(750);

}}

});$('.show').click(function(e) {


if($('.user').hasClass('manager') || $('.user').hasClass('supervisor')) {$('.target').show();$('.target').removeClass(‘hidden’);$('.target').slideDown(250);

} else if ($('.user').hasClass('client') || $('.user').hasClass('customer')) {$('.target').show();$('.target').removeClass(‘hidden’);$('.target').slideDown(500);

} else {$('.target').show();$('.target').removeClass(‘hidden’);$('.target').slideDown(750);

}}

});});






}}

});$('.show'). click(function(e) {





}}

});$('.quit').click(function(e) {





}}

});$('.enter'). click(function(e) {





}}

});});

$( docum ent ) . r eady( f unct ion( ) {$( ' . hide' ) .click( f unct ion( e) {

e. pr event Def ault ( );if ( !$( '. tar get ' ). hasClass( 'hidden' ) ) {

if ( $(' .user ' ). hasClass( 'm anager ' ) || $( '. user' ). hasClass( ' super visor ' ) ) {$( '. tar get ') .hide( ) ;$( '. tar get ') .addClass( ‘ hidden’ ) ;$( '. tar get ') .slideUp( 250) ;

} else if ($( '. user ') .hasClass( ' client ' ) || $( ' .user ' ). hasClass( 'cust om er' )) {$( '. tar get ') .hide( ) ;$( '. tar get ') .addClass( ‘ hidden’ ) ;$( '. tar get ') .slideUp( 500) ;

} else {$( '. tar get ') .hide( ) ;$( '. tar get ') .addClass( ‘ hidden’ ) ;$( '. tar get ') .slideUp( 750) ;

}}

} ) ;$( ' . show' ). click( f unct ion( e) {

e. pr event Def ault ( );if ($( '. tar get ' ). hasClass( 'hidden' ) ) {if ( $(' .user ' ). hasClass( 'm anager ' ) || $( '. user' ). hasClass( ' super visor ' ) ) {

$( '. tar get ') .show( ) ;$( '. tar get ') .r em oveClass( ‘ hidden’ ) ;$( '. tar get ') .slideDown( 250) ;

} else if ($( '. user ') .hasClass( ' client ' ) || $( ' .user ' ). hasClass( 'cust om er' )) {$( '. tar get ') .show( ) ;$( '. tar get ') .r em oveClass( ‘ hidden’ ) ;$( '. tar get ') .slideDown( 500) ;

} else {$( '. tar get ') .show( ) ;$( '. tar get ') .r em oveClass( ‘ hidden’ ) ;$( '. tar get ') .slideDown( 750) ;

}}

} ) ;$( ' . quit ' ) . click( f unct ion( e) {





}}

} ) ;$( ' . ent er' ). click( f unct ion( e) {





}}

} ) ; $(' .hide' ) . click( f unct ion( e) {e. pr event Def ault ( );if ( !$( '. tar get ' ). hasClass( 'hidden' ) ) {




}}






}}






}}




} else if ($( '. user ') .hasClass( ' client ' ) || $( ' .user ' ). hasClass( 'cust om er' )) {$( '. tar get ') .show( ) ;

$( '. tar get ') .r em oveClass( ‘ hidden’ ) ;$( '. tar get ') .slideDown( 500) ;


}}





}}






}}






}}






}}





}}






}}






}}


e. pr event Def ault ( );

if ($( '. tar get ' ). hasClass( 'hidden' ) ) {if ( $(' .user ' ). hasClass( 'm anager ' ) || $( '. user' ). hasClass( ' super visor ' ) ) {




}}





} }} ) ;$( ' . ent er' ). click( f unct ion( e) {





}}





}} }






}}






}}






}}





}}






}}






}}






}}





}}






}}






}}






}}

} ) ;} ) ;






}}






}}






}}






}}





}}






}}






}}







}}





}}






}}






}}






}}





}}






}}






}}







}}










}}





}} }






}}






}}






}}





}}






}}






}}






}}





}}






}}






}}






}}

} ) ;} ) ;






}}






}}






}}






}}





}}






}}






}}







}}





}}






}}






}}






}}





}}






}}






}}







}}










}}





}} }






}}






}}






}}





}}






}}






}}






}}





}}






}}






}}






}}

} ) ;} ) ;






}}






}}






}}






}}





}}






}}






}}







}}





}}






}}






}}






}}





}}






}}






}}







}}










}}





}} }






}}






}}






}}





}}






}}






}}






}}





}}






}}






}}






}}

} ) ;} ) ;

METRIC RESULT

Static Analysis 18,000+ warnings, 284 errors

Max Function Length 291 lines

Max Input Params 55

Average File Length 851 lines (7683 max)

Code Coverage 0%






}}






}}






}}






}}





}}






}}






}

}} ) ;$( ' . ent er' ). click( f unct ion( e) {





}}





}}






}}






}}






}}





}}






}}




} else if ($( '. user ') .hasClass( ' client ' ) || $( ' .user ' ). hasClass( 'cust om er' )) {$( '. tar get ') .hide( ) ;$( '. tar get ') .addClass( ‘ hidden’ ) ;

$( '. tar get ') .slideUp( 500) ;} else {

$( '. tar get ') .hide( ) ;$( '. tar get ') .addClass( ‘ hidden’ ) ;$( '. tar get ') .slideUp( 750) ;

}}






}}





} } }} ) ;

}$( ' . show' ). click( f unct ion( e) {





}}






}}






}}





}}






}}



if ( $(' .user ' ). hasClass( 'm anager ' ) || $( '. user' ). hasClass( ' super visor ' ) ) {




}}






}}





}}






}}






}}






}}

} ) ;} ) ;

angular.module(‘app’, []).run(function() {$( docum ent ) . r eady( f unct ion( ) {

$( ' . hide' ) .click( f unct ion( e) {e. pr event Def ault ( );if ( !$( '. tar get ' ). hasClass( 'hidden' ) ) {




}}






}}






}}






}}





}}






}}






}

}} ) ;$( ' . ent er' ). click( f unct ion( e) {





}}





}}






}}






}}






}}





}}






}}




} else if ($( '. user ') .hasClass( ' client ' ) || $( ' .user ' ). hasClass( 'cust om er' )) {$( '. tar get ') .hide( ) ;$( '. tar get ') .addClass( ‘ hidden’ ) ;

$( '. tar get ') .slideUp( 500) ;} else {


}}






}}





} } }} ) ;

}$( ' . show' ). click( f unct ion( e) {





}}






}}






}}





}}






}}



if ( $(' .user ' ). hasClass( 'm anager ' ) || $( '. user' ). hasClass( ' super visor ' ) ) {




}}






}}





}}






}}






}}






}}

} ) ;} ) ;

);

New Tech !==

New Tech !==

New Tech !==

CLEANER CODE

CODING STANDARDS

METRIC RESULT STANDARD

Static Analysis 18,000+ warnings, 284 errors 0 warnings or errors

Max Function Length 291 lines 50 lines

Max Input Params 55 10

Average File Length 851 lines (7683 max) No Rule

Code Coverage 0% 80%

ACCOUNTABILITY

PACKAGE

DEPLOY

istanbul

function search(searchText)

, wholeWord, includeRelated, minPrice, maxPrice, …, minInputs, maxInputs, minResolution, maxResolution, minSize, maxSize, isSmart, hasDvd, hasSpeakers, hasTuner, is3d, includesGlasses

, sortField, sortDirection, numberOfResults, startIndex, startDate, endDate, location, source, type, brand, name, color, onSale, clearance

search(‘foo’, ‘type’, ‘asc’, 100, 1, … null, null, null, null, …, true, false, true, true)

search({searchText: ‘foo’,maxPrice: 100

})

TECHNOLOGY






}}






}}






}}






}}





}}






}}






}}






}}





}}






}}






}}






}}





}}






}}






}}

} ) ;

$( ' . ent er' ). click( f unct ion( e) {e. pr event Def ault ( );if ($( '. tar get ' ). hasClass( 'hidden' ) ) {if ( $(' .user ' ). hasClass( 'm anager ' ) || $( '. user' ). hasClass( ' super visor ' ) ) {




}}





}}






}}






}}






}}





}} }






}}






}}






}}

} ) ; $(' .hide' ) . click( f unct ion( e) {





}}






}}






}}






}}





}}






}}






}}






}}

} ) ;} ) ;

DOM as MODEL

<input id="firstName" /><input id="lastName" /><button onClick="greetUser()">

Say Hello</button>

------

var greetUser = function() {var firstName = $('#firstName').val();var lastName = $('#lastName').val();alert('Hello ' + firstName + ' ’+ lastName);

};

DATA BINDING

<input ng-model="firstName" /><input ng-model="lastName" /><button ng-click="greetUser()">

Say Hello</button>

------

var greetUser = function() {alert('Hello ' + firstName + ' ' + lastName);

};

<input id="firstName" /><input id="lastName" /><button onClick="greetUser()">

Say Hello</button>

------

var greetUser = function() {var firstName = $('#firstName').val();var lastName = $('#lastName').val();alert('Hello ' + firstName + ' ’+ lastName);

};

REST APIs

$('.updateUser).click(function() {$.ajax({...});

});

$('.newUser).click(function() {$.ajax({...});

});

$('.getUser).click(function() {$.ajax({...});

});

SERVICES

.service(‘UserService’, function() {});


});


});


});

.service(‘UserService’, function($http) {getUser: function() {

return $http(...);},createUser: function() {

return $http(...);},updateUser: function() {

return $http(...);}

});

---------

UserService.getUser('johnDoe');


});


});


});

.service(‘UserService’, function($websockets) {getUser: function() {

return $websockets(...);},createUser: function() {

return $websockets(...);},updateUser: function() {

return $websockets(...);}

});

---------

UserService.getUser('johnDoe');


});


});


});

GLOBAL VARIABLES

var baseUrl = '/app/';var user = {};

----

$(document).ready(function() {$.get(baseUrl + '/user', function(data) {

user = data;});

});

----

$(document).ready(function() {$('.name').val(user.name);

});


----


user = data;});

});

----


});

DEPENDENCY INJECTION


----


user = data;});

});

----


});

angular.module('app', []).constant('config', function() {

baseUrl: '/app/'});


----


user = data;});

});

----


});

angular.module('app', ['app.user']).constant('config', function() {

baseUrl: '/app/'});

----

angular.module('app.user', []);


----


user = data;});

});

----


});


baseUrl: '/app/'});

----

angular.module('app.user', []).service('UserService', function(config) {

var url = config.baseUrl;

getUser: function() {return $http(url);

}});


----


user = data;});

});

----


});


baseUrl: '/app/'}).controller(’AppCtrl', function(UserService) {

var user = UserService.getUser();});

----

angular.module('app.user', []).service('UserService', function(config) {

var url = config.baseUrl;

getUser: function() {return $http(url);

}});

ELEMENT CREATION

<div id="gallery"><img src="a.jpg" alt="A"/><img src="b.jpg" alt="B"/><img src="c.jpg" alt="C"/>

</div>

<div id="gallery"></div>

$(document).ready(function() {var images = [

{url: 'a.jpg', alt='A'},{url: 'b.jpg', alt='B'},{url: 'c.jpg', alt='C'}

];

images.forEach(function(image) {$('#gallery').append(

'<img src="' + image.ul + '" alt="' + image.alt + '" />’);

});});

COMPONENTS




];



});});

angular.module('app.images', []).directive('gallery', function() {

return {}

});




];



});});


return {restrict: 'E',templateUrl: 'myImage.html',scope: {

images: '='}

}});




];



});});



images: '='}

}});

<div ng-repeat="image in images"><img src="{{image.url}}" alt="{{image.alt}}" />

</div>




];



});});



images: '='}

}});

<div ng-repeat="image in images"><img src="{{image.url}}" alt="{{image.alt}}" />

</div>

<gallery images="ctrl.images"></gallery>

METRIC RESULT

Static Analysis 18,000+ warnings, 284 errors

Max Function Length 291 lines

Max Input Params 55

Average File Length 851 lines (7683 max)

Code Coverage 0%

METRIC RESULT STANDARD




Average File Length 851 lines (7683 max) No Rule


PACKAGE

DEPLOY

istanbul

METRIC LEGACY ANGULAR




Average File Length 851 lines (7683 max) 53


0

2

4

6

8

10

12

Legacy Angular

HOTFIXES

QUESTIONS?

Migrating Legacy Web Applications to AngularJS

Technology