Angular and SPA: Ingredients in a Recipe for Success—for Experienced Chefs - WebINTENSIVE Software
17656
single,single-blog,postid-17656,ajax_fade,page_not_loaded,,,qode-child-theme-ver-1.0.0,qode-theme-ver-6.5,wpb-js-composer js-comp-ver-4.4.3,vc_responsive

Blog

chef_render_2

Jun 17, 2017 Angular and SPA: Ingredients in a Recipe for Success—for Experienced Chefs

Serving up rich Web applications that perform in fractions of a second, even when supporting millions of users around the world, became a bit easier few years ago. That’s due to an exciting new approach to Web engineering called SPA (defined below). Facebook, Gmail, and Twitter all use SPA-inspired system designs. At the same time, potent new frameworks for front-end engineering—like Angular (and React and Vue)—gained attention because they are well suited for rapidly creating SPAs. Using this approach and tools such as these is a sophisticated recipe for success, no question. But achieving success requires something more.

In one of her Barefoot Contessa cookbooks, Ina Garten muses over the fact that one can follow a recipe exactly—and the dish will not come out tasting quite as “bright” and delicious as it could. What’s needed—what’s essential—is the practical knowledge and expertise to make adjustments based on a host of context-specific variables: how hot the particular oven runs, the time from finishing to serving—and many others.

Much the same can be said about creating Web applications. One needs to go well beyond following a formula to achieve a Web application that is attractive and remains secure and highly responsive even at scale.

What Are Single Page Application Architecture and Angular, Exactly?

Traditionally, Web applications were developed with a “monolithic” architecture: the server would compute everything directly and then prepare the full HTML presentation to send to your browser in one go. For most applications, especially for sophisticated ones, WebINTENSIVE recommends a very different approach from the traditional model of rendering an application on the server before serving it to the client—the method used by Gmail and Twitter among others.

SPA. With traditional server-side application development, the interfaces’ data is prepared on the server and then presented to the browser. A faster, more modern approach is a “client-side” approach where much of the presentation logic and its computation is performed in the browser.  As part of this approach a software architect can take a “single page application” (SPA) approach. That is: the Web application loads a single webpage that dynamically updates as users interact with the application.

An SPA can provide a far more satisfying user experience, often letting your interfaces display information almost instantly.

Angular. One framework for JavaScript that is useful in creating SPAs in Angular. (We will write about React and Vue in future posts.) Angular is maintained by Google. Walgreens, Intel, and ABC News, among other firms, have used it to build their websites. Coupling its use thoughtfully with a variety of other libraries and frameworks, the WebINTENSIVE team has found great success in creating systems that work smoothly with a wide variety of browsers and operating systems. (See our post, “Making the most of Angular.”) In skilled hands, Angular supports building and testing responsive sites, supports creating reusable templates of SPA pages, and streamlines the creation of REST-based Web services.

With a framework as sophisticated as Angular, it is easy for software engineers who are new to it to make mistakes. To put it succinctly: You can place anyone in a kitchen full of Viking or Wolf appliances—but that will not make them Danny Meyer.

Expertise: The Secret Ingredient

With Angular, the most common mistake programmers make is not identifying “components” effectively within their application. “They tend to either create components that are too large, diluting the reusability benefit of building components; or ones that are too small and do not serve a meaningful purpose and have a low ROI,” says Arun Saini, VP Technology at WebINTENSIVE. “Making the components truly reusable requires carefully separating the template from its theme, parametrizing input data to allow their use in several other applications, and providing the ability to customize component output as per need, and if these aren’t done carefully, building a SPA can be more expensive, in cost and time, than it should be,” he explains.

Another common mistake—made especially by engineers used to working with JQuery—is manipulating the DOM directly from virtually anywhere within the Angular code. “This makes unit testing difficult and unreliable,” Saini warns.

Another consideration, counterintuitively, is to know when not to use Angular. It is a good tool—it is also complex and one of an array of inter-compatible technologies.

Also, Angular has some shortcomings, especially in handling relationships among large amounts of data.

“We take certain architectural steps to address this and have created a custom, proprietary software library to help us optimize the use of Angular in a number of ways, especially when building complex Web applications,” Arun says.  (Watch for more on this in an upcoming post.)

Of course, skilled engineering remains essential for front-end and back-end functionality alike—crafting elegant systems with minimal lines of code remains key.

This results in building more secure systems, and systems that are blazing fast when supporting rich sets of user features—even at scale.

Want to Know More?

For an informal chat with one of WebINTENSIVE’s Web application chefs, contact us.