Here we would like to present our views about the need to migrate to this new version; how it simplifies our development, and the solutions we used for some common architectures and configurations problems faced by modern web developers.
Angular 2 had been a buzz word since it was announced two years ago in March 2014, becoming very popular among the web community owing to multiple breakthrough features that solved many of the challenges of that time.
Where it all began: some features of Angular 1
- Data binding
- Form validations
- Reusable components
Learn more at https://angularjs.org/
Like many, at BidMotion we too had developed our MarTech software with Angular 1. It was great to be developing with Angular and the software was well perceived by our users
The need to migrate to Angular 2 – Scale
But as soon as our application grew in number of sections and features, it was quickly realized that –
- It became difficult to understand and remember all the parts of application. Often the code was duplicated due to lack of knowledge of existing code.
- We saw issues with performance in sections where we had large forms and data binding with dynamically changing data.
- The download size and browser load time (bootstrap) of the application increased
- Need for a way to lazy load the code, to not download the entire application but rather to download only the sections with the user wants to see
- Need for better code organization for better productivity; things to help developers to understand code and quickly remember the code structures
At BidMotion we began by creating a complete new version of our web application with Angular 2 about 9 months ago when Angular was still in beta 13. It was at this time that we began to feel the new Angular has enough stability, knowing the final version would be out in a few months.
As early adopters, we have been able to identify many pain points of the original version that are easily resolved in applying Angular 2. Here we will take 6 major issues application developers face using the original Angular, and review tools and practices employed during our migration to Angular 2 that were able to combat the pitfalls.
Common Angular 1 problems encountered, and their Angular 2 solutions
Problem 1 – Poor code organization, slow speed of understanding and duplicate code
Solution – Strict typing and autocompletion with Typescript
We also recommend WebStorm IDE, another tool assisting coders, which is perfectly equipped for client-side and server-side development with both Typescript and Angular.
Problem 2 – Where to store the data in order to know at all times when data has changed and ensure data and views are consistently up to date? Whether data is to be stored all in one object or distributed in various sections?
Solution – Ngrx Data stores with Redux pattern
The BidMotion platform includes many events that would change the state, necessitating the cumbersome task of identifying precisely which event caused what effect. Redux serves to define this cause-effect relationship of events changing the state. By properly exploiting Redux, the state is rendered predictable after every event, which allows developers to manage the complexities of interactive user interface in a simple way.
Redux is rendered even more efficient when implemented with Ngrx. RxJS serves as a state management tool for Angular applications, inspired by Redux. It can be used to store collections, state flags, configurations, and random objects.
Here we make subscriptions to particular state; when state changes, we get new value of state. By using selector functions we can filter out the exact data we want in any given state.
An example of subscription with Selector function –
Problem 3 – Setting up development environment and managing various configurations for development and production builds
Solution – Setup project with Angular CLI
Angular CLI, while still a work in progress, is a setup and build tool, developed by the Angular team itself. It takes away all the hassles we had in setting up the right configurations of developing and building web applications. It also gives a very opinionated configuration for building an Angular project as considered standard by the community. To explore further, check out the Scotch.io tutorial here.
Problem 4 – User role management: How to allow some user roles to access some sections and restrict others? How to manage templates with different views for different roles? How to manage role-specific operations?
Solution – Role management with ACL service
Access Control List or ACL is a list of permissions attached to an object, or file. An ACL specifies which users are granted access to objects, as well as what operations are allowed on given objects. In a web application, the objects are the sections or features that one user can access. Applying ACL enabled us to manage both the issue of role-specific file access and operations.
We recommend using a service that we have open sourced as npm package(angular2-acl) for Angular 2.
First, we define and set the abilities specific to each user role
Secondly, we attach the role when one user logs in
We can then use this attached roles service as components or guards to verify permissions of a given user.
Guards – we can control who can visit the routes –
Ans then we can define the routes like this
Components – Inside one section, we can decide which data the logged-in role can see.
Templates – we can write dynamic html for different roles
Problem 5 – How do we organise logical entities (components, directives, pipes, services) that are related to one section? How to have cleaner, more modular code, that has separation of concern, is easy to package and open source?
Solution – Creating modules with NgModules
Angular Modules help organize an application into cohesive blocks of functionality.
An Angular Module is a class adorned with the @NgModule decorator function. It identifies the module’s own components, directives and pipes, making some of them public so external components can use them. It may add service providers to the application dependency injectors. And there are many more options covered here.
A sample ngModule –
Problem 6 – How to optimise the load and bootstrap time of the application as it grows in features and size
Solution – Code splitting and Lazy loading
In the beginning, we often end up loading all the components of an application each time a new page or view request is initiated. This means slower download times, as the page size is quite large. After downloading, the downloaded code then must be compiled,also increasing overall download times. To combat this lag, we divide our application in small NgModules representing one feature page or section of our application.
By splitting the code into snippets, we are able to load only what user really initially sees, rather than reloading all components each time. When users click on a link to another section, we then load that section module with a built-in Angular feature called lazy loading. Similar to a Twitter feed, only presenting initial data requested and loading further information as the user scrolls.
Sample router configuration with lazy loading –
We hope this article explains the benefits of upgrading to new Angular version and helps anyone looking to upgrade to quickly get started with right architectural tools that are backbone of any modern web applications. As we progress further in our development, and of course run into further bugs, we will be sharing our hacks and solutions.