Angular 2: How and why to migrate

3707

angular-code-migration-programming

In our last post, we discussed about how Angular JS 2 promises smart and easy development of interactive and scalable web applications.

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
  • Controllers
  • Directives
  • Filters
  • 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

If you have been working with Javascript for a while, you are familiar with the reoccurring problem when trying to do object oriented programming with class and inheritance: the code becomes painful and tedious.

Here enters typescript. TypeScript, an open-source programming language serving as a typed superset of JavaScript that compiles to plain JavaScript, runs on any browser. Employing strict typing practices solved the problem of understanding large code, enabling us to determine which data structure is passed from one function to another, and to identify the parameters accepted and the data returned by a function. With these benefits we add code completion, resulting in more efficient developers spending less time with code familiarizing and not having to remember all aspects. With Typescript code completion, there was no longer need to go to function and find what it accepts and what it returns, or to lesser comments to describe what a function does. Efficient developers lead to better speed and code organization, keeping the code DRY (like mobile marketers, us developers are allowed a few acronyms now and again).

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

Redux, a predictable state container for Javascript, is a lifesaver when it comes to managing the application state. By state, we not only mean the data that comes from API, but also the state of user interface; what campaign is currently opened, which tab the user is currently on, etc.

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 –

 

Final notes

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.

 

NO COMMENTS

LEAVE A REPLY