Large-scale web application projects comprise of several modules. With continuous improvements and advancements in the development of various JavaScript frameworks, developers use JavaScript frequently in an application's presentation or frontend layer, and server-side operations are only performed when required. For example, when saving or reading the data from server or doing some other database or backend operations, an HTTP request is made to the server that returns the plain JSON object and updates the DOM elements. With these developments in place, most of the application frontend code resides on the client side. However, when JavaScript was first developed, it was targeted to be used for doing some basic operations, such as updating the DOM elements or showing confirm dialogs and other relative operations. The JavaScript code mostly exists on the page itself within the <script> scripting tag. However, large-scale applications consist of many lines of code and need proper attention when designing and architecting the frontend. In this chapter, we will discuss a few concepts and best practices that help to make the application frontend more scalable and maintainable.
Large-scale applications consist of many JavaScript files and proper structuring of these files brings greater visibility. JavaScript frameworks such as AngularJS, EmberJS, and others already provide proper structuring and guidelines to define controllers, factories, and other objects, as well as provide best practices of using them. These frameworks are very popular and already adhere to the problem of higher scalability and maintainability. However, there are certain scenarios where we want to strictly rely on plain JavaScript files and may develop our own custom framework to remedy particular requirements. To acknowledge these, there are certain best industry-wide practices being used, which make our JavaScript-based frontend more maintainable and scalable.
When working on large scale applications, we need to think ahead of what the scope of the application is all about. We need to think how easily our application can be extended and how quickly the incorporation of other modules or functionality can be achieved. If any module fails, would it affect the behavior of the application or crash other modules? For example, if we are using any third-party JavaScript library that modify some of their method's signatures. In this case, if any third-party library is used frequently everywhere in our application, we have to modify the method at each point, and it may be a cumbersome process to not only change, but also test. On the other hand, if some Facade or wrapper has been implemented, it would only require us to change at one place instead of updating it everywhere. Therefore, designing an application architecture or framework is a thoughtful process, but it makes the application more robust and healthy.