Integrating AngularJS into a Legacy Application

Experience: that most brutal of teachers. But you learn, my God do you learn.

                                      ~ C. S. Lewis

Rosina Bignall

Blog: http://rosinabignall.com

Twitter: @rosinabignall

 

 

JoindIn: https://joind.in/13521

 

Slides: http://goo.gl/H7Cklr

 

 

Assistance Dog Zaakir

http://tamarr.org

Overview

  • What is a legacy application?
  • Our Application
  • User Feedback
  • Problem... Solution...AngularJS
  • User Feedback on the solution
  • How we did it
  • What we did right
  • What we did wrong
  • Planning your integration

What is a Legacy Application?

Legacy Application

A legacy system is an old method, technology, computer system, or application program,"of, relating to, or being a previous or outdated computer system."

Often a pejorative term, referencing a system as "legacy" often implies that the system is out of date or in need of replacement.

                                                                ~ Wikipedia

Legacy Application

  • Primarily round trip

  • Uses little to no Ajax

  • Little front-end interaction

Story Time

Our Application

User Feedback

  • Wanted more interaction like other modern apps they were used to using
  • Did not like how difficult it was to edit information
  • Would like to be able to edit everything on one page
  • Did not like having to go to different pages to edit additional data for the current record
  • A lot of inconsistency in how you edit things

Problem

Solution?

Jquery?

JavaScript Framework

Solution...AngularJS

Benefits

  • Rich User Experience
  • Separation of Concerns
  • UI code Declarative
  • Application code Imperative
  • Testable!

Rich User Experience

Rich User Experience

Rich User Experience

Rich User Experience

Rich User Experience

Rich User Experience

Rich User Experience

Separation of Concerns

UI Code Declarative

UI Code Declarative

<mydirective> 
...
</mydirective>


<input type="text" ng-model="mymodelvariable">
</input>

<ng-include src="mytemplate.html"
</ng-include>

Application Code Imperative

Application Code Imperative

angular.module('equipment',['equipmentServices', 
    'equipmentDirectives', 
    'equipment.controllers','ngResource' ]);

Equipment.Controllers.controller(
    'EquipmentCtrl',
    ['$scope', 'Equipment', 'Available', '$filter',
        function EquipmentCtrl($scope, Equipment, 
            Available, $filter) {
            
            $scope.equipment = Equipment;

            $scope.startLoading = function() {
                $scope.loading = true;
            }
            ...
        }
    ]
);

Testable

User Feedback

They want more

Different Views on Same Page

Able to View and Edit More on One Page

More User Feedback

  • Like having things auto-populate when possible
  • It keeps all the information together
  • Edit multiple complex fields on one page before hitting save
<head>
...

<script type="text/javascript" 
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>

<script type="text/javascript" src="/js/default/equipment.js"></script>
<script type="text/javascript" src="/js/default/equipment-services.js"></script>

...
</head>

...

<div ng-app="equipment">
   <div ng-controller="EquipmentCtrl">
    ...
   </div>
</div>
angular.module('equipment',['equipmentServices', 
    'equipmentDirectives', 'ngResource' ]);

function EquipmentCtrl($scope, Equipment, Available) {
 
...

}
Equipment.Controllers = angular.module(
    'equipment.controllers', []
);

angular.module('equipment',['equipmentServices', 
    'equipmentDirectives', 
    'equipment.controllers','ngResource' ]);

Equipment.Controllers.controller(
    'EquipmentCtrl',
    ['$scope', 'Equipment', 'Available', '$filter',
        function EquipmentCtrl($scope, Equipment, 
            Available, $filter) {
            ...
        }
    ]
);

What we did right

Incremental Development

Used lots of Services

What we did wrong

HOW we implemented small apps

We didn't vet our approach

Use more Directives

Didn't include more team members

Planning your Integration

They will want more

Do Less

Model Application

App = App || {};

App.LabApp = angular.module('LabApp', []);
App.EquipmentApp = angular.module('EquipmentApp', []);
...

angular.module('MainApp',
    [
        'LabApp',
        'EquipmentApp',
        ...
    ]
);

Model Application

App.LabApp.controller('LabController', 
    [
        '$scope',
        function($scope) {
            ...
        }
    ]
);

App.LabApp.service('LabService', [
    function() {
        ...
    }
]);

App.LabApp.directive('LabDirective', 
    function() {
        ...
    }
);

Model Application

<body ng-app="MainApp">
...
</body>
<body ng-app="MainApp>
   <div ng-controller="LabController">
   ...
   </div>
</body>

Model Application

<body ng-app="MainApp>
   <div ng-controller="EquipmentController">
   ...
   </div>
</body>

Model Application

<body ng-app="MainApp>
    <div ng-controller="LabController">
        ...
    </div>    

    <div ng-controller="EquipmentController">
       ...
    </div>
</body>

Test Everything

Use a simple approach

Use your team's strengths

Key Take Aways

  • Do less along the way
  • Simple approach scales better than a complex one
  • Choose the right way
  • Consider your team's strengths
  • Vet approach by building the most complicated part first

Rosina Bignall

Blog: http://rosinabignall.com

Twitter: @rosinabignall

 

 

JoindIn: https://joind.in/13521

 

Slides: http://goo.gl/H7Cklr

 

 

Assistance Dog Zaakir

http://tamarr.org

Integrating AngularJS into a Legacy Application

By Rosina Bignall

Integrating AngularJS into a Legacy Application

A talk for International PHP Conference 2015

  • 673
Loading comments...

More from Rosina Bignall