This series of blog posts which I have converted from Youtube videos. I personally have really enjoyed these videos so in order to textually document them, these are essentially some screenshots and rough notes organised.
This particular post is based on the Jeff Cross & Victor Savkin AngularMix 2017 talk. It can be found on the link https://www.youtube.com/watch?v=4i2pOzcz3Zo
NX is a toolkit for Enterprise Angular Applications. This toolkit is an open source extension developed by NRWL. It has been designed to provide assistance in the creation of Enterprise-Level Angular Applications with the known organizational and design methodologies used in projects.
1. Productivity:
It is challenging to maintain and organize the workflow in a large project as there are many different teams working on different modules of the project. NX provides default setup options for faster development. It also provides library support to provide an easier implementation for complex tasks, also reducing the time spent on creating frequently used functionalities. State Management and testing are provided to save time wasted on teams’ decision for convention and testing. Provides easier upgradation options from AngularJS using hybrid mode.
2. Consistency:
It is difficult to maintain code consistency for Enterprise-Level Applications. NX has been developed with the abilities to identify the uniqueness of the application and provide solutions accordingly and using Angular CLI’s starting convention features will focus on the unique part of the Angular App. Angular CLI provides patterns and naming convention practice within the application folder. This gives NX the power for more efficient analysis and advanced code generation. This allows better options for team coordination as well as better organization of the Application and State Management.
3. Safety:
Certain issues doing coding may not be detected but can cause race conditions, performance lags, and fatal errors. NX provides support for error detection during the Application development process to avoid any exceptions, especially in an Enterprise-Level Application.
Design Principles:
NX provides has been built on a certain set of rules laid out by the creators of NX, which are its design principles or values. These set of rules are made to keep keeping in mind the ease of Angular Developers in making Enterprise Angular Applications. To avoid race conditions and other errors, the design principles have been made concise and really simple to understand.
Why Enterprise Applications:
Enterprise Applications are a large complex application made up smaller components, routes and shared libraries. There are also libraries that control the UI or the data.
The shared components can be broken down into discrete features like a UI library with its own public API or data libraries. The applications also consist of discrete modules that can operate independently as functional applications. Different teams are assigned different modules and thus the complete application depends on the coordination among the teams.
Enterprise Expectations:
There are certain standards associated with Enterprise-Level Applications. These standards have created some expectations with these applications. These expectations are:
1. Quality:
· The speed of an application is an important parameter of performance to keep the users engaged. It may also be the factor which causes other users to prefer an application. Speed is also a critical factor in certain application especially if it’s a real-time application, thus it should be fast and also feel fast.
· It is important that the application work to perform the task it is meant to do thus satisfying the client’s needs. There shouldn’t be bugs and unhandled errors, especially in enterprise applications. There should be graceful degradation if the application runs into some sort of error condition that is unavoidable.
· Even with multiple teams working on different modules of the application, it should feel cohesive with a unified user experience. The team should properly coordinate the method and tools to maintain consistency throughout the application.
· Good accessibility is very important for Enterprise Applications as it is essential for attraction more users. The application should be accessible and easy to learn with proper support provided for languages in case of international users.
2. Developer Velocity:
Another expectation regarding enterprise applications is that the developers focus only on the problems related to the domain and spend their time solving these problems. There-fore the tools used for developing the application should be efficient in order to save time from trivial configurations and settings.
Applications can be developed using the following steps:
1. The first step includes the creation of a new app using Angular CLI or web pack config.
2. The routes can be added to the application.
3. The data can be included in the application.
4. The admin part of the application is included and share dependencies are identified and separated.
5. The application is then shipped for launch.
NX Workspace:
This App development process is ad hoc and doesn’t identify the uniqueness in the application and use for benefiting in business. The non-unique part includes the modular approach that is taken during application development which makes developer workflow organization challenging and that is one of the problems that NX is dealing with through NX workspace.
NX workspace is a mono-repo method for developing Angular applications which provides a singular repository for Angular apps. Mono-repo methodology for application development is a popular approach that has been adopted by Google, Facebook, Twitter etc.
Why NX Workspace:
· Provides Unified Versioning or Version Control ability.
· Promotes code sharing and reuse.
· Makes dependency management easier as every library has one version in the repo.
· It simplifies refactoring by providing refactoring capabilities across the application.
· Provides a consistence development experience.
NX workspace has been built over the Angular CLI and thus supports extension dependent on it.
NX Workspace Creation:
NX workspace can be created by passing a custom nrwl collection to ng command as shown below:
Ng new helpdesk –collection=@nrwl/schematics
A files directory is opened which is similar to Angular CLI project with two additional folders ‘apps’, for applications, and ‘libs’ to store libraries. Workspace provides optimized bundles of components for the application to be shipped to the user by creating a similar application that is configured with Angular CLI in the following piece of code.
ng generate app client
The library provides the basic functionalities which are grouped together in the application. It can be created using the following piece of code.
ng generate lib clientui –ngmodule
NgRx for State Management:
State Management is an important problem in Enterprise Applications. NgRx is a library that can be leveraged to provide State Management. For code consistency and convenience, Nx can help use NgRx by providing conventions that work well for teams involved in the modular development. NgRx setup can be created for previous ticketing system example in the following way:
ng generate ngrx app \ --onlyEmptyRoot \ --module=apps/client/src/app/app.module.ts ng generate lib ticket –ngmodule ng generate ngrx \ --module=libs/ticket/src/ticket.module.ts
The above commands create root configuration, sets up dev tools, loads module values and create all important files that will be needed.
Upgrading the Backend:
If the backend of an Application is developed in Angular, then it should be brought into the workspace and incrementally upgraded in hybrid upgrade mode using the following commands.
ng generate app admin ng generate upgrade-shell supportLegacy \ --name=support-legacy \ --module=apps/admin/src/app/app.module.ts
NX workspace automatically generates modules after execution of the above commands.
Linters:
Linters are used run common code validation techniques to identify mistakes in the code as well as bad programming practices that may be a cause of an error condition or may lead to problematic conditions in the code. They are used for code analyzation after all the Application configuration is made in the NX workspace. The ts lint works on the same rules as the ng lint through the Angular CLI which runs the normal as well as CI rules.
Converting to NX workspace:
Another important feature for developers to make Enterprise Application development more simple is to move the existing project to the NX workspace. This can be done using the following code:
ng generate workspace mycurrentapp \ --collection=@nrwl/schematics
The ‘mycurrentapp’ can be replaced with the name of the app being brought into the workspace.
Future Endeavors:
· The NX is looking towards having more advanced analysis to be able to recognize uniqueness more efficiently. This can be done through static analysis or other analyzation techniques.
· It is working towards having deeper IDE support by providing schematics and other supports inside the IDE.
· It is also aimed to utilize the capabilities of NgRx more effectively by creating better default capabilities for faster development.
· Better testing capabilities is also a future goal for NX.
