Back to blog home page

Should You Develop Large Web Apps in Angular?

Posted by on Mar 05, 2015

AngularJS is an excellent choice for smaller data-driven web apps, as well as applications whose architecture can be represented by a single page with a large number of sub-templates. However, these types of applications are not the only options for web application architectures. Below we’ll take a look at how AngularJS reacts in larger ecosystems, and answer a crucial question – can we build a large web application with AngularJS?

Can we?

Simply put, yes! AngularJS, though commonly known for smaller applications, it can be molded and made to function well in a large web application. AngularJS can handle a lot of the tasks commonly implemented by heavier weight web frameworks like Rails and Django. Its MVC architecture, coupled with routing capability and dynamic views based upon templates to represent data elements, can replicate pretty much anything you can do in any of these dedicated frameworks. Through the use of two-way data binding to manage data updates, you can emulate a lot of the functionality that would require an AJAX round trip in a larger, dedicated web framework.

Should we?

Oftentimes, just because you can do something doesn’t mean that you should. Luckily, with AngularJS, this is not the case! AngularJS brings a lot of benefits to developing large applications. On top of the core functionality offered by AngularJS, you also get the benefit of working with your data in a manner that more closely matches the ideas represented by your application’s data architecture. This can make some of the more tricky parts of large applications easier to understand, creating common-sense interactions between data elements that are treated as distinct elements instead of a conglomeration of concepts. The two-way data binding, in addition, reduces the need to communicate frequently with a server. This ultimately means that what you may sacrifice in client-side execution time you ultimately make up for with a more compact and lower-cost communication scheme. Finally, the flexibility of having AngularJS implement your application’s logic entirely on the client side allows you to treat the back end of your application as an interchangeable product. This can greatly reduce total cost of ownership, and allow your application to pivot quickly to different back-end providers as business needs change.

Tips and Pitfalls

While AngularJS can – and should – be used to build large web applications, it is not without its faults. Below are some pitfalls to be aware of, and some tips that can greatly improve your development experience:

  • Tip: Organize and name your files – AngularJS unfortunately doesn’t give you any help on the file management side of web application development. You will want to adopt standards for naming and locating files in your application before beginning development, and work to ensure that those standards are maintained during the lifetime of the project.
  • Pitfall: Lazy-loading of code – AngularJS unfortunately doesn’t provide the ability to lazy-load your code. Without implementing a mechanism to load components when they are needed, you’ll be stuck loading everything at once – something that can be particularly detrimental to performance on large web applications.
  • Tip: Focus on your model architecture – With AngularJS driving display based upon data elements, it is vital that you spend the effort up-front to get your application’s model structure as solid as possible. Consider this a design-level task – once you begin writing any significant amount of Angular code against your model structure, making changes to that structure can become painful.
  • Pitfall: The scope life cycle – When developing large web applications in AngularJS, it is crucial that you are aware of a scope’s life cycle. With the various watch expressions that will be set up in a given scope, it is crucial that these are targeted to the current portion of the application being displayed. AngularJS may scan active watch expressions multiple times a second, meaning that performance degrades with the number of active expressions in the execution environment. Make use of lazy loading and ensure that your watch expressions are as succinct as possible to minimize concerns from this.

Conclusion

AngularJS is a powerful framework with a wide range of applicability that includes everything from simple data-driven applications to large web applications. By using Angular to model your data and user interface, it is possible to obtain a much more coherent and compact representation of your functionality than you might see using a more heavyweight application environment like Rails or Django. However, you need to be highly aware of the areas in which AngularJS can prove problematic. With some proper up-front planning, and awareness of application state as you development, you can mitigate many of the potential pitfalls and make effective use of AngularJS in any size of web application.

Build your Angular app and connect it to any database with Backand today. – Get started now.