Roadblock sign among piles of jumbled Javascript code.

Years ago, it was commonly thought that most web processing should happen on the back-end, or server-side. With the rise of JavaScript, however, that older way of doing things has been replaced with fast, user-friendly web processing that can happen in the browser. JavaScript is now the de facto language for front-end design and the foundation for numerous front-end frameworks like AngularJS.

Because of this shift from server-side to client-side scripting, the line between front-end web developer and UI/UX designer has blurred, and the professional needs to be familiar with both fields in order to remain competitive. Whether you’re a designer who finds the coding aspect of your roles to be difficult, or a developer looking to expand your web development skills, here are five common mistakes to avoid in one of the most popular front-end frameworks, AngularJS.

1. Decoupling and Scope in MVC Design

AngularJS is based on the model, view, controller (MVC) design pattern. MVC is a common standard for several languages and frameworks across the web. The model contains the data, the view is the front-end design that the user sees, and the controller contains the logic. The model passes between the view and the controller. These three components should be decoupled, meaning that one should not directly depend on the other.

The Angular “scope” object is similar to the model. It’s defined in the documentation as the “glue between the controller and the view.” Your controller performs all the logic on the scope and passes it to the view, which then displays the results to the user. The scope object is shared between the model and the view, so there is no need to use it within your script tags.

One common mistake is to incorporate the scope directly into a view, which violates the decoupling rule. For instance, AngularJS developers use the following in a view:

<script>
$scope.onButtonClick = function() {
// event handler logic here
}
</script>

This places scope logic within the view, and it can generate messy code that doesn’t follow standards. Remember: keep any logic out of the view.

2. Too Many Watchers

AngularJS uses a concept called “watchers.” Watchers are used to keep track of changes to a component. When you set a watcher, the AngularJS engine will constantly check the current state of the object. If you have one or two of these, performance won’t be an issue. However, when you start adding hundreds (or even thousands) of watchers, you run the risk of slowing an app’s performance in the browser.

Generally, the AngularJS community sets 2,000 watchers as the global maximum limitation. Some developers write code that will count the number of watchers, allowing them to run it in the console, then reduce and optimize them in your application.

3. Not Compartmentalizing Properly

A developer who moves from a linear style language such as PHP to an MVC-style framework might have issues getting used to the new compartmentalization standards. When you work with MVC, the general rule is that you have a controller for a view. The controller is your logic layer, and it’s important that within this layer you create small compartments for each section of your application.

A common mistake is to put too much logic into one controller. If you need to break up your logic for your application to make sense, don’t take shortcuts. Instead, create smaller organized units for your logic layer.

For instance, suppose you’re building a customer page that displays order history. Even though orders are related to customers, they are logically an entirely separate compartment. The order logic should be separated from the customer logic instead of mashing the two components together in one controller.

Code organization is one of the most difficult yet important parts of MVC design. It might not seem important initially, but when your application grows and you have several developers working on a project, it’s much easier to perform unit tests, find bugs and create additions. Organized code also makes an app more scalable, which is important when the organization grows.

4. Falling Back into jQuery

AngularJS and jQuery are both built on JavaScript, but they’re used for much different purposes. AngularJS is a framework used to build applications from the ground up. jQuery on the other hand is a library that streamlines the front-end view, but you likely wouldn’t build complete applications with it. They overlap in that they both work with the DOM—the front-end view of your application—but whereas AngularJS handles the logic behind the view, jQuery works directly with the DOM.

Many developers make the mistake of falling back on jQuery within Angular applications. It’s OK to use jQuery for some DOM manipulations, but avoid using jQuery when Angular can be used to avoid memory issues. Web developers might find this difficult to get used to, but most application manipulation and view changes can be done in Angular. The basic rule of thumb is to use jQuery only when you don’t have a quick Angular solution. For instance, it’s probably better to use jQuery for custom sliders and access to unique CSS styles.

5. Forgetting to Test

It’s easy for developers to run an application on their local machine and automatically assume it works on all other operating systems or devices without testing it first. Forgetting to test an application is a common mistake new developers make because they don’t understand that different environments can introduce bugs. Since AngularJS (and its programming language, JavaScript) run on the client side, the local computer, the operating system, browser, and the versions of each are important factors. Browsers with add-ons and extensions can also cause problems with your applications.

You don’t need to have a computer with every operating system and browser to test properly, but you should test using standard AngularJS tools. Karma and Protractor are two of the most popular tools. Karma tests source code files as you change them, and Protractor is used for unit testing.

Conclusion

AngularJS is a great front-end tool. It’s one of the leading frameworks on the internet for building dynamic single page applications (SPAs) and is scalable and backed by Google, which means there’s plenty of support and user communities to help you get started.

Just like any language, getting used to syntax and the basic requirements are the most difficult parts of getting started. Avoid these common AngularJS mistakes and you’ll be on your way to coding an app that runs efficiently.