Over a million developers have joined DZone.

Are Frontends Getting Smarter?

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies


Traditional web development wisdom holds that a firm separation should be maintained between the frontend display code and backend server code. However, this often increases the costs needed to deploy and maintain a web application. As usage of the application increases, the server side processing quickly becomes a bottleneck with each request taking up additional limited resources. There are multiple standard solutions to this, but typically they involve an increase in server hardware – along with associated costs.


Breaking the Mold

AngularJS has revolutionized the way that data is presented through its declarative interface, but it has the power to absorb so much more. Angular is typically used from the perspective of a Model View ModelView (MVVM) pattern, focusing entirely on presentation. However, with the flexibility of Angular’s custom directives – and JavaScript in general – many developers are working to implement a Model View Controller architecture (MVC) entirely on the frontend, making the frontend smarter.

Making the frontend more intelligent has a number of benefits. Aside from allowing for functionality changes to be made without bringing down the entire application it reduces the load on the server, bringing down the total cost of ownership. Proper implementation on the client side can make the backend completely interchangeable, requiring only a basic REST-ful API to access the underlying data store. Furthermore, having the entire frontend in JavaScript allows developers to specialize in the language, gaining far more experience and technical competence than they would in a multi-language system.


Handling Application Flow

Controlling the flow of your application – implementing the Controller portion of MVC – is far more straightforward in Angular than it might seem. AngularJS already has routing built-in via the ngRoute module, which can be coupled with the built-in template capability to create dynamic pages that adjust their flow based upon the application’s execution. Making use of JavaScript we can create a controller function that accepts an application scope, handling underlying models and business logic in the correct AngularJS data context. Once the basic pattern is present, then the application can be divided up using object-oriented JavaScript techniques, encapsulating models into distinct objects and building out controllers to properly handle data interaction in your web application.


Data Management

Once the basic pattern for a MVC framework has been established, managing the data effectively is the next priority. The goal is to create a data management backend in your model classes that allows for data manipulation at the lowest possible level. The focus is on implementing an Object-Relational Model (ORM) that operates over a REST-ful API. If your application can be reduced to communicating only basic data manipulation over a web API, then the server side becomes a lot thinner. What would require costly server processing in a traditional web application becomes a simple transformation call, populating the backend data store with parameters sent directly over from the client side. Where other web apps spend a lot of bandwidth sending data objects back and forth over the server connection, an AngularJS application with a frontend ORM can get by with more lightweight requests, saving on networking costs and reducing server load.


Conclusion

While AngularJS has been receiving a lot of press around the new approach it brings to frontend data presentation, the flexibility of the framework allows web developers to truly stretch the abilities of frontend processing. Where the traditional frontend is focused only on user interface and basic validation, a smarter frontend – through the use of AngularJS – can reduce overall costs for web application maintenance and give your tech organization more freedom of choice when it comes to selecting a backend provider. Instead of being tied to a specific architecture, your entire application can be tied only to a REST-ful API, allowing you to adjust your backend provider to best meet your application’s needs.

Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.

Topics:

Published at DZone with permission of Itay Herskovits, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}