Top 5 Technical Issues Large Sites Have with AngularJS

If you’re building a large website with AngularJS, you have your work cut out for you. A large site is a big enough undertaking already, and AngularJS doesn’t exactly make things any easier. Due to your project’s large size, a number of problematic issues can arise during development that can seem impossible to fix.

Here are the 5 most common AngularJS issues large websites face today (as well as the solutions to fix them):

Code Organization

When building a large-scale AngularJS site, you need to keep your code organized in a logical manner. This will benefit more than just your website; it will help you keep better track of and find important items.

As your code base continues to expand, you’ll add more controllers and services. As you add more files, the directory structure could eventually become bloated to the point of incoherence. You’ll find it difficult to accomplish even the simple task of locating specific objects or file changesets. Additionally, in larger applications there can be a lot of overlap between modules and shared common code.

This is where organization is key. To manage your ever-growing AngularJS application, you need to start by creating a directory for your archetypes and split up your objects into their own files. This should eliminate some of the bulk while grouping up similar files into more accessible chunks.

To make your modules more manageable, you can create a directory for shared common code and divide your modules into submodules. This will streamline the parts of your directory that have overlapping code.

Alternatively, you can write facades for your modules objects, or add utility methods onto your $rootScope so they can be used by child scopes.

All too often we ignore proper organization when building with AngularJS. The key is to catch yourself before you’re in too deep and make an effort to put everything in order.

Loading JavaScript Files

Large AngularJS projects can end up requiring hundreds of JavaScript files. These files are usually loaded one by one, and they can even be dependent on other JavaScript files. Such a drawn-out loading process can have a negative effect on site performance, especially if the files are being loaded upfront in your shell page.

In order to clean up and manage dependencies, it’s recommended that you dynamically load your JavaScript files instead of loading all of them upfront. This will allow the files to load as the user requests them, which is more efficient.

A JavaScript library such as RequireJS can implement dynamic loading functionality. RequireJS splits JavaScript code into separate modules, providing an optimal way to dynamically load your JavaScript files. It also utilizes asynchronous script loading, which can speed up your application even more. And it does all this right from within your browser.

Slow-loading websites have always been bad news for the user experience, but the effort of building a large site and the challenges stemming from that can make that much more frustrating. Dynamic loading of JavaScript files avoids frustration—both for you, and for users.

Debugging Code

It’s inevitable: in any development project you are bound to come across problems that are difficult to debug. Considering the size of the directory structure of a large AngularJS project, you could be in for many late nights, searching for the troublesome culprits. If only there were a way to better visualize your code by sections instead of one big chunk…

AngularJS Batarang is a useful Chrome extension for debugging AngularJS apps. Batarang simplifies the debugging process by allowing you to drill down and select which scopes you want to view. From there, you can see specific properties on various scope elements and their current values.

You’ll also learn valuable information about your site or app by using Batarang’s dependency graph and performance sections.

The dependency graph lets you clearly see which objects depend on others to function. If a critical object is broken, you could be following a long trail of broken pieces that lead back to the offender. From there, it’s just working your way up the list. You’ll need to take a holistic approach, solving the problem at its source, to ensure the health of the whole.

The performance tool allows you to see which functions take the most time to run. From there, you can tool around and fix the worst of them. Once you do, you should have a faster, smoother-running site.

Note: If you don’t organize your code as we suggested in the first section above, you’ll spend more time debugging than you need to. Get your code in order first, so you can focus on fixing site-breaking issues as they come up.

Integrating Third-party Libraries

Third-party libraries are a natural part of building large-scale AngularJS applications. One of the major issues with integrating third-party libraries with AngularJS are changes in the DOM or values returned through AJAX calls. Angular won’t see or acknowledge these changes unless you manually start a $digest loop. Further complicating the issue, not all third-party libraries are compatible with AngularJS out of the box.

The key to integrating a third-party library with AngularJS is through the use of the following functions:

• $scope.apply()
  
• $scope.$evalAsync
  
• $q.when()
  
• $timeout

These functions allow AngularJS to react to changes from a third-party library accordingly.

Lazy Loading

Lazy loading is vital to ensuring optimal loading times on any website, however, it’s especially important for large AngularJS sites. As your code base grows, and more JavaScript files are needed to properly load a page, lazy loading helps efficiently load a site by holding off initializing an object until it’s needed. Unfortunately, there is no official support for Lazy Loading for AngularJS out of the box.

Luckily, there are several open source projects that add lazy loading to AngularJS. We’ve found ocLazyLoad to be the best open source solution so far due to its simplicity. Where other open source solutions require major changes to the way your app is structured, or result in undefined behavior, ocLazyLoad loads third-party modules without hassle. Together with RequireJS (which we recommended getting above), you can achieve efficient loading for your large site.

Alternatively, if Lazy Loading is not an option for you, minification can improve page speed performance. However, please note that the minification process can easily break your site. You’ll need dependency injection, achieved with strict-di, which allows you to change dependencies.

Moving Forward With AngularJS

AngularJS is described as “Superheroic JavaScript MVW Framework.” But when you consider the common problem AngularJS has when applied to a large project, it might not seem very “heroic.”

Building your large AngularJS project has its challenges, but it’s not as impossible as it seems. Don’t forget—even the most common AngularJS issues can be fixed:

• Organize your code
  
• Create a directory for your archetypes
  
• Split objects into files
  
• Create a directory for shared common code
  
• Divide modules into submodules
  
• Load JavaScript files dynamically
  
• Debug code with AngularJS Batarang
  
• Integrate third-party libraries with the right functions
  
• Use lazy loading or minification to optimize load times

If you keep in mind the five biggest problems AngularJS has with large sites, you’ll know how to deal with the issues as they come up and come out on top.

^{* Adapted lead image:  Public Domain, pixabay.com via getstencil.com}