Maintainable Rich Web Applications with AngularJS – Part 1

Compared to Thin Web Applications, Rich Web Applications imply a higher grade of client-side functionality and complexity as opposed to the server-side. The user interface of a typical Thin Client architecture is server-generated (per page), while rich clients are complete applications running in a web browser. This allows for user interfaces that are more user-friendly, more performant and offline-enabled. Such characteristics, offline capability in particular, are especially important for mobile applications.

HTML5 has established itself as an alternative to solutions like Flash, Java Applets and Silverlight. Compared to proprietary products it offers an open and platform-independent technology standard. Here, HTML and CSS describe the static structure as well as the design of the user interface, while the client-side dynamics is implemented using new HTML5-APIs and JavaScript.

The development of Rich Web Clients using HTML and JavaScript is complicated by maintainability problems though, as the combination of HTML and JavaScript alone offers no possibility to modularize and test the client in a clean fashion. AngularJS considers itself to be an HTML extension dealing with this problem in order to enable the development of maintainable JavaScript-/HTML based Rich Web Applications.

This blog post series introduces the JavaScript framework AngularJS. This first post explains the essential concepts of AngularJS, like the application of the Model View Controller pattern, the extension of HTML by so-called directives as well as the routing concept. In the second post, we will show the integration of unit and end-to-end tests as well as embedding those into a Maven build process.
Continue reading