Angular JS Adds Another Tool to the Developer’s Tool Belt

Yesterday’s tools need to update for tomorrow’s challenges. After all, you wouldn’t heat a modern home using only a flint and steel -- builders have adapted, adjusted, and improved the tools they’ve used over the years. It’s no different for web developers, who need to adapt, adjust, and improve their toolset to meet the changing needs of our clients.

Most developers in the web industry wear a tool belt consisting of many languages, from which they can draw just the right tool to build the right experience for their customers. For most projects, you’ll see developers use a combination of tools like HTML, JavaScript, PHP, and MySQL to get the job done.

While that’s a fine set of tools, which allows you to complete about 90 per cent of the requested requirements -- and most sites are built using these tools alone --  those tools are becoming restrictive in today's technology ecosystem. Each page can feel slow, due to the fact that it has to load from the server every time. Sites that do a lot of computations can feel slow, because the server has to process everyone's requests -- and the page feels “dead” once it’s loaded.

The AngularJS project is designed to overcome the feeling of "sluggishness" that comes from static pages. It's developed in TypeScript which is essentially JavaScript with half-a-bottle of Tabasco sauce. It uses the Model-View-Controller (MVC) model, which allows developers to easily mix and match parts of the site, and it offloads most of the workload from the server onto the client.

AngularJS is categorized as just a front-end framework; but I'd like to argue that it’s both front-end and mid-end. While the MVC model provides a structure on how to handle data on just the front end, Angular expands upon that model by also using services to connect the client to the server.

Angular provides many benefits over traditional websites, but it only allows developers to build what the user sees. Angular doesn't provide a back-end structure. But all that is required is a very rudimentary API - the rest of the computation is done on the client's end.

An example is running into a scenario where you need to gather an element with two relations where one of which is a `1..*` relation. This results in two SQL queries (in relational databases) -- one to get the root element and the other to get the elements related to the root. From there, you would need to combine all of them resulting in a time complexity of `O(n^2)`. Each level increasing the complexity by `n`, resulting in `O(n^m)` where `m` is the number of levels.

This computation can be a lot of work and will take a lot of processing power to complete without implementing techniques to reduce the time complexity. However, the workload can be offloaded to the client by having the web browser request what elements it needs. As well, the developer can program the site in Angular to request the root node and the leaf nodes at different times -- allowing other requests to be fulfilled by the server.

Developers also need to concern themselves with the scalability of the server. Although Angular provides a method of reducing the workload on the server, handling massive amounts of data can still become an issue. One common technique to mitigate this is data abstraction. It’s a technique that is implemented in some of the largest open-source content management systems, including Moodle, Wordpress, and Drupal.

The nice thing about Angular is that because each part of the system is so divided, it allows developers to “Frankenstein” various tools and scripts in easily where needed. Drupal provides database abstracting that can handle any number or type of fields, it provides e-commerce plugins, and its open source allowing you to write code to further extend it. Why reinvent the wheel for the server, when Drupal provides everything you could ever need? Why limit yourself to a static front-end? Why limit yourself to having to write a database abstraction layer from scratch? Why not combine the dynamic front-end from Angular with the robust back-end from Drupal?

At Digital Echidna, we have a number of developers experienced in developing web applications in AngularJS and Angular 2+. We’d love to hear from you and help solve your challenges -- and we’re confident that we’ve got the right tools for the job.