Refactoring Legacy Web Apps Using AngularJS
Having a web presence or delivering a web application is a big deal for your business. It marks a major accomplishment. However, once that deployment milestone has been reached, that web application must now be maintained and updated. This can present a major challenge depending upon how the application was developed. And this issue only gets increasingly challenging as the web application gets older.
With that being said, there are many approaches that can be taken to update an existing web application. But the problem is that since there are so many choices available, it can be daunting to decide which framework, technique, or pattern to use.
Doesn’t affect existing code, unless you want it to
Existing code can be used to control it
Saves development time
Provides a reliable path forward
Helps clean up spaghetti code
MV* application approach
Ability to structure Single Page Applications (SPA)
And finally, not so much a feature as a characteristic of the framework, is the ability to incrementally implement the framework. AngularJS is designed in a way that allows for bits and pieces of functionality to be utilized without having to invest wholesale in every feature and facet of the framework, to get a lot of value out of it. So, let’s dive into some of AngularJS’s features that can be integrated into an existing application quickly and without being too invasive.
Controllers with Databinding
One of the quickest ways to utilize AngularJS is to implement a controller. A controller is the link between the user and the system. Through the controller, data; in the form of model objects; and methods are exposed to the user via a $scope object. This $scope object is then made available to a view, which can be a simple HTML page. Another feature that AngularJS has that complements the controller is two-way databinding. Databinding in AngularJS is accomplished by a mechanism that ties together model objects on the $scope between the view, that the user interacts with, and the controller, which interacts with the system. As a result, developers do not have to do any excessive work to ensure that the model data is in sync between the user and system. Databinding ensures that the model objects are the single point of truth without complicated techniques to enforce this rule.
Without a doubt, the controller performs an important role in AngularJS. However, there are some actions that the controller should not perform. Some of these actions include manipulating the DOM and performing business logic tasks. For the latter action, AngularJS already has a feature well suited for accomplishing this deed.
AngularJS was created with the idea of separation of concerns at the forefront of its design. This is demonstrated by another cornerstone feature of the framework, which are Services. AngularJS Services are methods which perform view-independent operations. Business-logic code which can be consumed by multiple areas of a web application can be organized and located within services for easy consumption. Services are also well suited for interacting with other systems and services. Through an AngularJS Service interacting with internal systems, 3rd party web APIs, databases, or even files can be represented through a consistent interface. This would allow controllers to access data and perform actions without having to know the intimate details of either. And to assist in the handling of requests to the Services are AngularJS Promises. Promises handle the asynchronous return of data. What does this mean? This means that when a request is made to an AngularJS Service the User Interface will not become unresponsive. And once a response is received, the model objects in the controller are updated, and through data binding, the UI is then subsequently updated. This gives a smooth desktop-like feel to web applications. And speaking of UIs, AngularJS also has some great features in that arena.
In terms of UI, I mentioned that the controller should not perform DOM manipulations. But there might be a situation where more than just simple viewing and updates are required.
When interacting with the DOM in AngularJS, directives are used. AngularJS directives are extended HTML syntax, attributes, and elements. Databinding is actually the result of utilizing directives which tie AngularJS to the HTML. AngularJS has many built in directives, but when those directive do not meet your needs, you can also create custom directives. Directives provide a means of creating reusable components which bind model object values to DOM properties. And by being tied to the DOM, directives also can react on DOM events to update model objects. This makes directives a powerful and encapsulated means of developing UI components that can be utilized consistently through a web application. And in mentioning Directives, I round out my short list of just a few of AngularJS’s many useful features.