Angular Material

Material Design from Google is a revolutionary design language that allows designers and developers to express thoughts through context, color, and motion. The Angular team has created an officially supported project to deliver high-quality and accessible components built with Angular that match the Material Design specification. This means that we have a set of components that come with all of the power of Angular, plus all of the aesthetic appeal that comes from Material Design. Integrating these components into our application is quite easy, and yet the return on investment is disproportionately high. Because these components are created within the Angular team, we can use them confidently, knowing that they are going to reliably perform as our applications scale.

The Angular Material component library currently includes 35 feature-rich components to create sophisticated and elegant applications that are performant, reliable, and accessible. This enables developers to rapidly build application UIs. The components provide UIs for application layout, navigation, buttons, indicators, form controls, pop-ups, modals, and tabular data.

Angular Material is built upon the Angular Component Development Kit (CDK) that was created as a result of identifying common interaction patterns when building a component UI library. The Angular Material team realized that much of the core of the Angular Material library was solving challenging problems when building a UI library such as accessibility, bidirectionality, overlays, drag-and-drop, and more. The CDK is a blank slate on which organizations can create their own UI component library that does not adhere to the Material design, but rather are customized for your organization’s user-interface guidelines, branding, and look-and-feel.

PrimeNG

Another viable and impressive addition to the component library category is PrimeNG by PrimeTek Informatics. PrimeTek has been developing visual components for years, and its Angular addition is surprisingly awesome. PrimeNG is completely free and open source and ships with an impressive number of components directly out of the box. It also has some premium templates that you can buy for a reasonable price if you want to jump-start your project and get something that looks great right out of the gate.

NgRx

It is argued that complexity is the single greatest contributing factor to the challenges around application development. To further clarify, complexity can be broken down to state management, flow control, and the code volume we generate to facilitate the previous two items.

Recently, the Redux pattern was introduced to the web development world as a solution for addressing all three of these factors head-on. The Redux pattern is inspired by three core principles: the store is the single source of truth, state is read-only, and changes to the state of the application are performed with pure functions. Let’s break down each of these core principles to understand the goals and implementation details of the Redux pattern.

First, the store is the single source of truth. The store is often a single object that is stored in memory and is available throughout the application. The store consists of each slice of state that is logically organized. State that is related is often kept in proximity, and state duplication is avoided through normalization to ensure that each aspect of the state of an application is reliably located in a single property of the store object. The store serves as a single source of truth for every engineer on a project. This eliminates personal preferences and opinions among the team and enforces a single pattern and architecture for saving and retrieving the state of the application.

Second, the state of an application is read-only. Because the state is read-only, it is considered to be immutable. This leads to several advantages. First, the state of an application is easier to reason about because the state cannot be modified at will throughout an application. Immutability leads to simpler applications that are easier to debug. When an error occurs in production, it can be mission critical for an enterprise to release a patch as quickly as possible. With immutability, it is often easier for engineers to locate and identify issues in complex enterprise applications. Immutability also leads to an increase in the performance of Angular applications by short-circuiting the change-detection cycles. This is enabled in Angular applications by setting the change-detection configuration for a component and, subsequently, all of its child components. This leads to massive performance gains by reducing the work required for detecting changes in the application. A simple reference check is all that is necessary to determine whether the state of an application has changed.

Finally, the state of an application is mutated only through the use of pure functions. When the state of an application is indeed to be updated or mutated, we perform the state mutation in a pure function to ensure that there are no side effects. A pure function is a function for which the output is always the same, given the same input. This leads to a deterministic behavior of the state of an application. Pure functions do not perform any side effects such as referencing global variables. This core principle leads to applications that are more maintainable and less prone to bugs.

The open source NgRx project is highly inspired by the Redux pattern, with a few exceptions. First and foremost, NgRx takes advantage of the safety provided by a strongly typed language. As such, NgRx provides code contracts via interfaces, uses decorators to wire up side effects, and avoids common typos or mistakes when implementing the Redux pattern. NgRx, along with Angular, is built around observables for performing asynchronous actions and events.

NgRx strongly embraces the approach of using observables, leading to an increase in functional reactive programming in Angular applications. Functional reactive programming is a paradigm in which engineers employ reactive programming principles for asynchronous actions, events, and values. The web, and modern applications, are inherently asynchronous. Outside the concept of progressive web applications, Angular applications rely on fetching data and resources from remote resources via HTTP. And HTTP is always asynchronous. Further, user events and navigation can also be thought of as asynchronous. Using observables in Angular provides a powerful set of tools for developers to use when working in the scope of asynchronous code.

NgRx also provides a module for coding to the side effects of the mutation of state in our Angular applications. For example, suppose that when a user has modified their first name or perhaps other values associated with the user, our business logic dictates that we notify the user of the change via an email. This could be particularly important for applications in large organizations and enterprises. This is considered a side effect of the action of modifying the user’s first name. The NgRx effects module provides for a pattern to implement these side effects in a class using a TypeScript decorator. Effects also provide redirection via dispatching additional actions to be performed in the application as the result of another action. This can enable engineers to reduce a complex series of state mutations and side effects into a stream of actions dispatched within the Redux pattern.

NgRx also enables Angular applications to perform state mutations as a result of navigational and routing changes. The state of an application often is closely related to the current state of the application’s route. The NgRx router module enables developers to tie NgRx state modification and side effects to the specified route of an application.

Although NgRx does not provide a built-in solution for rehydrating the state of an application when a user reengages with an application, there are open source solutions to equip developers with the functionality. This is a common approach for building mobile and desktop applications with Angular and NgRx. If a user restarts a device or closes the mobile or desktop application, the state of an application is lost because the state is stored in memory. Using a variety of techniques, the state can be saved on the mobile or desktop device. Upon starting the application, the state can be rehydrating into the NgRx state object from persistent storage. Now the user can resume using the application where they left off.

NgRx is a robust solution inspired by Redux that provides state management through redirection. Even though many enterprise applications can greatly benefit from the use of NgRx, it should be noted that not all enterprise applications should pay the code cost of implementing Redux. Using the Redux pattern implemented by NgRx in Angular requires additional code that must be maintained and tested. This comes at a cost, both when developing additional features and when maintaining a feature during the life of an application. As such, the decision to use NgRx in an enterprise application should be evaluated by the engineering and architectural teams in the organization. You should use NgRx in enterprise Angular applications only when necessary.

Nest

Although we have focused on the incredible benefits provided to enterprises that choose to employ the Angular platform in their organizations, we cannot skip over solutions that are closely related to Angular, providing an even greater benefit to organizations and teams that embrace Angular.

Nest is a Node.js framework for building robust and scalable server-side solutions. Built on many of the design decisions of Angular, the Nest framework provides Angular developers with a low-slope learning curve for building server-side solutions. As already mentioned, Angular applications rely on fetching resources and data from remote servers. There are many, many options with which we can build server-side solutions for enterprise applications. Many of these options are open source, such as Python or PHP, and many are built and supported by large organizations such as Oracle and Microsoft. Many, it not all, of these languages and frameworks can provide server-side solutions for enterprises that are robust and scalable. However, only one of these solutions closely implements Angular’s fundamental architecture: Nest.

The enterprise benefits of choosing Nest instead of alternative server-side solutions include the ability to use one language, TypeScript, for building mobile, desktop, and web frontend applications along with the necessary server-side applications and microservices. Like Angular, Nest strongly utilizes the features provided by TypeScript and ES6 including classes, interfaces, decorators, and constructor assignment. Nest is also a “batteries included” framework, providing solutions for caching, serialization, authentication, persistence, HTTP, GraphQL, WebSockets, and building microservices with a variety of transport options. Finally, Nest also ships with a feature-rich CLI for code generation.

Angular developers will immediately feel right at home with learning Nest and building server-side applications built on top of Node.js. Nest uses similar approaches to building applications such as controllers that are similar to Angular components, life cycle methods, pipes, guards, services, HTTP interceptors, and dependency injection. Further, the syntax for building controllers, services, pipes, and guards is very similar to Angular.

Nest builds on the success of other prominent Node.js and JavaScript frameworks such as Express and Axios. Under the hood, Nest is an Express application running in the context of Node.js. In fact, you can even use Express middleware in a Nest application. Nest also implements the widely used Axios library for performing HTTP requests. Although this varies slightly from Angular’s HttpClient class, it is a simple API with which many JavaScript developers might already be comfortable. Nest often abstracts away the implementation details of middleware, such as authentication and HTTP requests.

Firebase

Firebase can augment an Angular application by providing a suite of services and solutions, including authentication, storage, data persistence, hosting, serverless functions, analytics, testing, and more. Firebase is a cloud service that is provided by Google and integrates seamlessly with Angular. Although enterprises often have existing infrastructure, information technology services, and even existing contracts with cloud providers, Firebase can provide value to enterprises by using their solutions and platform for rapidly deploying apps. One possible scenario for using Firebase with a large organization that has existing cloud services is to create a product prototype with less friction internally.

Web, mobile, and desktop applications often rely on authentication to secure private data and to associate data with a specific user. There are several services that seek to provide authentication out of the box, are well equipped, and provide a robust set of features. Similarly, Firebase provides a low-code solution for adding authentication to applications that also integrates with several social/cloud sign-in methods such as Google, Facebook, Twitter, GitHub, Microsoft, and Yahoo. Of course, Firebase also provides a method for users to create a new account using either their email address or phone number. Firebase also provides passwordless authentication via email links that reduce sign-up and sign-in friction for your application.

Firebase provides a global content delivery network (CDN) for storing application assets as well as hosting your application. The Firebase CDN is built on top of the Google Cloud Platform (GCP) infrastructure, which is built for scale. Going from prototype to production is effortless, and growing to exabyte storage requirements will not require teams of information technology professionals. Even though using the GCP is an advantage of using Firebase, it could also be considered a disadvantage for organizations that have existing contracts with other cloud providers such as Amazon Web Services and Microsoft Azure.

Serverless functions with Firebase enable enterprises to forget writing server-side code and deploying servers and containers that must scale both up and down. Firebase functions integrate closely with the Firebase ecosystem. For example, scaling and resizing an image after it is uploaded to a storage bucket is easy, and almost trivial in nature. Some tasks are just too big for a mobile device to handle because of their CPU and memory limitations, not to mention their slower connectivity. Using Firebase functions, you can offload tasks to powerful servers running in the Google cloud to perform CPU-intensive calculations. Finally, Firebase functions make it easy to push notifications to mobile application users via Firebase Cloud Messaging.

The AngularFire project is the official Firebase library for Angular applications and is developed and supported by Google. AngularFire integrates seamlessly with an Angular project, using observables for asynchronous actions and events, providing real-time binding of data in your application with data in Firebase’s Cloud Firestore database, making it easy to authenticate users, store data offline, and more. Installing and configuring AngularFire in an Angular application is quick and easy, further enabling enterprises to rapidly prototype and build web, mobile, and desktop applications.

ag-Grid

ag-Grid (Figure 4-1) touts itself as “The Best JavaScript Grid in the World.” This is because ag-Grid has focused on three main priorities when building a feature-rich data grid for the browser: quality, performance, and features.

Figure 4-1. ag-Grid is a powerful solution for enterprise applications that need to present structured and tabular data.

ag-Grid is engineered unlike most other data-grid solutions that are available for JavaScript and browsers. The focus of ag-Grid’s engineers was not on building a grid whose responsibility was to extend the functionality of the DOM. Rather, ag-Grid is engineered at the core to solve the complexity of building a data grid that provides all of the features that enterprises need in a reliable manner.

Performance is at the core of the solution that ag-Grid built. ag-Grid is capable of managing very large datasets in a highly performant manner. Scrolling through thousands of data points displayed in a grid is smooth and responsive, much as a user might expect from a robust spreadsheet application.

The features that ag-Grid provides for its free version and its enterprise version are outstanding and numerous. Enterprises will discover that ag-Grid meets, and often exceeds, their acceptability criteria for choosing a data-grid solution for their applications. This is a benefit to organizations in which multiple teams all have different feature-set requirements for displaying and manipulating tabular data. Choosing a single solution across the organization enables engineers to work on multiple projects or transition between teams as necessary without learning multiple tools and APIs.

ag-Grid is widely used in enterprises around the world, especially large financial firms and hedge funds for which the need to create large databases that employees can analyze is critical to the success of the organization. One of ag-Grid’s clients had a requirement to create a large database of data for regulatory reporting. Creating the database was time intensive, and although meeting the requirements of a regulator agency, provided no value to the firm. By using ag-Grid, the client was able to empower a team to slice, dice, filter, pivot, and manipulate the data directly in its browser. This provided the organization with business intelligence and value that it was unable to tap into previously.

ag-Grid is tightly integrated into the Angular framework. Although its solution is framework agnostic, the team at ag-Grid is investing in Angular and the community. Some grid solutions simply apply a framework wrapper around their base JavaScript solution. Even though the wrapper can abstract away implementation details and improve the velocity of teams using the grid, ag-Grid took this a step further by allowing the customization of the grid via Angular directives and components. Implementing ag-Grid into an Angular project is seamless and enables engineers to build solutions that meet business requirements by using their knowledge of the Angular framework.

Finally, ag-Grid is devoted to the Angular community, sponsoring popular blogs, open source projects, and conferences around the globe. ag-Grid works closely with customers and community members to ensure that they are indeed the best JavaScript grid in the world.

Ionic

Ionic is an open source software development kit for building hybrid mobile and web applications that are intended to be deployed to the App Store (for iOS) or Google Play (for Android), or as a progressive web application. Ionic has worked closely with Angular for many years, and Angular is the predominant framework used to develop applications with Ionic, but it can also be used with either React or Vue frameworks. One of the primary benefits of using Ionic for deploying mobile applications is that the underlying languages and technologies used by Ionic are the same as the web (HTML, CSS, and JavaScript) because your application executes in the context of a web browser.

Historically, Ionic has relied on the Apache Cordova project for a large ecosystem of plug-ins that enable Ionic applications to communicate and use hardware features such as geo positioning, the camera, contacts, files, the clipboard, payments, near-field communication, and more. Many of the plug-ins are also operating system dependent, such as Apple Pay, 3D Touch, Touch ID, and Android Fingerprint Auth services.

Recently, Ionic announced a new open source project called Capacitor that provides a set of APIs that are as close as possible to standardized web APIs for accessing native device features. These APIs will provide a single interface for applications running in the context of a device or the web. Capacitor plug-ins are mostly backward compatible with Cordova plug-ins, and you can use existing Cordova plug-ins within Capacitor. As of this writing, Capacitor is still in beta. Enterprises can expect continued innovation with Capacitor to enable engineers to build hybrid applications that can be installed on iOS and Android devices as well as desktops by using Electron.

Ionic provides many prebuilt components that Angular applications can use to provide a consistent UX across platforms. These components are similar to other component libraries that are available to Angular applications such as Angular Material or PrimeNG and provide functionality such as buttons, dialogs, pop-ups, user input, and more. Ionic’s components follow the style guides for each respective platform, so your application looks good whether it’s on an iOS or Android device.

The Ionic community edition is free and available for enterprises to use, including the core framework and the native plug-ins that use Cordova. Ionic also provides long-term support, version migration assistance, and priority fixes as part of its paid Ionic Enterprise Edition. The Ionic Enterprise Edition also includes additional solutions that you can purchase for authentication, mobile payments, offline data, notifications, and more.

NativeScript

NativeScript is an open source framework for building hybrid applications that are intended to be deployed to both the App Store (for iOS) or Google Play (for Android). Enterprises that are using Angular and are seeking to build hybrid mobile applications for both iOS and Android should consider NativeScript for its ease of use, rich toolset, and performance.

NativeScript provides an excellent UI library for use with Angular for application layout, styling, and user interactions. Similar to Ionic, NativeScript has a long list of user-interface widgets that you can use to compose enterprise mobile applications that are easy to use. NativeScript also provides APIs for animations and user gestures that are common in mobile applications.

NativeScript has a rich toolset that enables teams that have existing knowledge of Angular to quickly create hybrid mobile applications. The NativeScript CLI enables developers to easily create, build, and deploy applications. NativeScript also provides a VS Code extension for developers to easily debug their applications. Finally, NativeScript also provides the Sidekick application that is a graphical user interface for creating, customizing, and deploying applications to either a physical device or to be published in the App Store or Google Play.

Developing hybrid mobile applications using Angular with NativeScript enables enterprises to create mobile applications that are highly performant. Unlike Ionic, NativeScript does not execute the application within the context of a web browser. Rather, NativeScript components communicate with native APIs or NativeScript plug-ins by using a runtime that employs Google’s V8 engine on Android or WebKit on iOS. This allows JavaScript code to execute Objective-C on iOS or Java on Android and, likewise, native Objective-C or Java APIs to invoke JavaScript code written for NativeScript. One advantage that this provides enterprises is performance. Because NativeScript uses the underlying language and technologies of a particular device, the application often can perform similar to that of an application written purely in Objective-C or Swift on iOS, or Java on Android.

Beyond the support of the NativeScript community, enterprises can purchase support and professional-level services from Progress, the company behind NativeScript.

Summary

Although Angular is indeed a fully featured framework with all of the tooling necessary to build robust applications, the ecosystem around Angular also serves to provide enterprise-ready solutions and products that enable organizations to rapidly build and deploy applications at scale.