Refactoring Angular Applications

Chapter 1. Refactoring AngularJS

You committed to Angular. You went all in and after a year of hard work under tight deadlines you’ve delivered an enterprise application indispensible to your company. Now a new version of Angular is available, React is soaring in popularity, and you’re asking yourself, did we make the right technology choice with Angular? You are not alone.

The features that made Angular a good choice in 2013 still apply today and include:

• Dependency injection

• Clear separation of concerns

• Ease of separating business logic from design templates

These are the reasons you picked Angular, but inexperience with a new framework combined with pressure to deliver on deadlines leads to a code base that’s difficult to understand, costly to support, and even depressing to maintain.

The work you’ve done has not been wasted. The product you’ve deployed represents the sum of thousands of decisions and compromises between the developers, product owners, and users. Although the latest and greatest framework may tempt you into throwing away your existing work, I encourage you to value the work you’ve already accomplished. Think of what you’ve built as the diamond in the rough. Refactoring your code will bring out its potential to shine by making it easier to read, maintain, and build onto with new features.

Why Refactoring?

In this book we will cover the following topics:

• What practices can we use to get value from refactoring?

• How reorganizing our code can be a huge win

• Angular-specific refactorings:

  • Improving the design of our views

  • How to make the most of directives, services, and filters

  • Effective patterns for expressing application logic

Refactoring

Refactoring is the process of changing a software system in such a way that it does not alter the external behavior of the code yet improves its internal structure.

Martin Fowler

The foremost title on refactoring is Martin Fowler’s Refactoring: Improving the Design of Existing Code (Addison-Wesley). Refactoring contains a long list of refactorings that range from tweaking code to make it more readable, to large refactorings that change class definitions. Although Refactoring illustrates its principles with Java and object-oriented concepts, there is plenty of general wisdom that carries over to JavaScript.

In Refactoring, Fowler emphasizes small, incremental changes over sweeping design changes. A refactor can be as small as choosing more descriptive names for variables and functions, or more complex, like streamlining the design of a system to remove low-value abstractions that only make the code harder to read.

Regardless of the size of the refactoring, the process itself is about making incremental changes that improve the quality of the code without changing its observable behavior.

Your code has a lot of potential value, but the design and implementation might need to be reorganized to realize that value.

Refactoring is about making changes to your code that make the code easier to understand and reason about without changing its perceived behavior. For our purposes, refactoring will concern all sorts of changes from the small (e.g., choosing meaningful names) up to larger units of refactoring that will involve creating new modules from your existing code.

Before we start refactoring Angular applications, we’ll answer today’s burning question: should we upgrade our application to the newer version of Angular? Then we’ll discuss unit testing, a critical skill for all developers, but one especially useful when refactoring. Then at last we’ll cover refactoring Angular, starting at higher-level concerns like best practices and project organization, before diving deeply into Angular-specific refactorings.

Note

The Angular team has decided to change all references of the 1.x library to AngularJS and all future versions as Angular, so we will follow these guidelines when comparing differences between the two versions. If an Angular reference applies to another library or resource, we will leave them as such.

What is a component?

What is the collective word to describe the features of Angular, including services, directives, filters, and so forth? In the Angular documentation, these are referred to as components. Now that AngularJS has added component(), it can now be confusing what the term component means. For our purposes, when we refer to the AngularJS enhancement directives, we will call it component() (with parentheses). All other uses of component will refer to the methods Angular exposes for building reusable features.