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.
I would like to propose using AngularJS as a means for upgrading existing web apps. AngularJS is a JavaScript MV* framework developed by Google, with a wealth of features and a large development community. Some of the benefits of using AngularJS include:
- 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)
- Testable
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 a 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 the 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.
Services
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.
Directives
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.
Outie
Harnessing the power of AngularJS can be a less involving process than some people might realize. By utilizing pieces of AngularJS’s functionality, an older application can greatly benefit from a modern JavaScript framework without having to “redo” everything about an existing web app. By using controllers, services, and directives, a large portion of web application functionality is covered. However, there still remains a very important question…What’s next?
There are many ways to get started working with AngularJS. First, check the documentation on the official AngularJS website. There is a wealth of information available, including descriptions of the framework, examples, and even a full tutorial. The AngularJS website is a great next step because it will go into greater detail on the features I mentioned and so much more. Second, actually work with the framework. There are several online JavaScript sandboxes that support AngularJS, such as CodePen and Plunker. And finally, why not take the plunge and start using AngularJS in your application today. By only adding a few files and modifying a few lines of code, you can quickly see for yourself how AngularJS can benefit your existing application. And by doing so, I hope you too, will be learning to love your web app again and even more.
