Blog Tag: Angular JS Development

Prologue

AngularJS was a decent framework when you wanted to get an MVP live in no time although enforcing a robust architecture or securing great performance, AngularJS was never the first choice. The announcement of Angular as backward incompatible, complete rewrite of AngularJS killed the prospects of the framework and ruined the ecosystem around it. We realized AngularJS doesn’t deserve our time, efforts and money anymore; React was looking promising though.

Migrations: An Untold Story

Migrations are tricky whether it is moving from one home to another, one web browser to another or one development technology to another. Ideally, migrations should not happen but in our pursuit to move forward, we tend to abandon things that are not moving fast enough. Your home will start showing signs in 25 years and your car in five years. Internet Explorer went fine for more than two decades and is still in maintenance mode. Maintenance mode is a code in software world to indicate migration. It’s when you receive a notice from your landlord to empty the apartment in 60 days. You got to find yourself a new home sooner or later. We were in the same situation with an AngularJS application. The client had made his mind halfway towards migration. A little push and he was ready to React!

React for the Unreactive

React, Ember and Angular were the three options when we made our mind to make the migration. Angular was still in beta and not ready for production and, of course, “Fool me once, shame on you. Fool me twice, shame on me.”

Ember is a fine framework for most of the people. Ember touches spots where data-bindings, caching layers between various components and program flow gets a little sloppy. We did not want that to happen again. The whole concept where the entire UI is a clear tree and data flows top down from an immutable data store was a dream come true for us. I mean who doesn’t want their web applications to have this predictable architecture.

Developing applications in React is like setting up water pipeline in an apartment building. The water flows downwards from overhead tank down to the apartments below. Ask a plumber to develop a system of pipelines where water can move either ways. He won’t show up the next day—I am not a magician. Now you know why developers have embraced angularjs to react migration with open arms.

Fixing the Migration Approach

You are a proud Chevy owner and want to stick with a 1930 model as long as you will drive. However, one that you have is not up for your daily commute. You cannot do much because that is the only car that you have and you’re committed to it. You visited a renowned car modification expert in your neighborhood and he agrees to upgrade your car with a fresh coat of paint and 21st century mechanical and electric parts while you can still take it on a drive every evening.

If you’re a mechanic with unlimited budget, then creating a replica is less risky since the client is a little paranoid about his car and may freak out if it stops working during his daily drives.

In real world scenarios, this is how you approach migrations, automobiles or web technologies. This was our plan until… We will build an application clone in React and replace it with the AngularJS application one day. This is how migrations are done or is there another way? If I tell you that you can keep riding your car as you were and I will replace one car component every day until you have a new car. Sounds ridiculous? I thought so too then I realized this makes more sense in the context of software engineering than automobile engineering. A few “Google searches” later, we were fixated on this gradual approach.

Of course, many more factors influenced our choice. AngularJS was an incredible tool to setup MVPs and most of the applications were in a perpetual development cycle. Our scrum-masters decimated the idea of a rewrite. We had to integrate six features into the application in the next six months. A parallel, non-gradual approach meant we had to code the exact, to-be-integrated features in React as well as, god forbid, AngularJS. Some of the features we were adding were beyond the scope of AngularJS or were too much work. We could code the same feature in React in a matter of weeks. React is perfect ;).

Prerequisites

The application was still in AngularJS 1.2 as we were more interested in a migration than upgradation. The attempts to get rid of AngularJS finally and the legacy code was not of much help. In fact, the legacy code made the simple upgradation to AngularJS 1.5 a headache.

You will be shocked to learn we were hardcoded to Bower & Gulp. I repeat Gulp and Bower. You reach a stage in AngularJS development that you start improvising to survive. We reached that stage while developing the app a long time ago and after that, it was all playing with fire. We did not made the upgrade to npm and Webpack because it might break the entire application and we have to revert to the earlier version eventually. Now we have to make the upgrade one last time and we would do it with a smiling face.

AngularJS to React Migration – Key Points

The first thing you will notice while migrating AngularJS application to ReactJS is Components. Components are the building blocks of ReactJS; they are everywhere. AngularJS has directives and they are similar. You could switch the view layer from Angular style templates to React style components and things should turn out fine in most cases as long as you’re using one of those style guides, stick to yours and do not improvise. This is neither AngularJS nor will not turn out to be. You got to start on a solid foundation for your application. Converting Angular directives to React Components was facilitated by a JS library react2angular.

While the 3rd party library made the conversion approachable. We still had to pass them to Redux store. Yes, React + Redux is the industry standard when building React application. When building a new React application, you wrap the root components into Provider. In our approach, where we essentially adding new features in React to an AngularJS application, we had no options but to manually wrap each component with a provider. We were literally copy-pasting code, component after components although ng-redux made the job a little easier.

After a couple of months into making the essential parts work, we were on the last part—setting up routing paths for the newly development parts of the application in React. We wanted to be ready for production as soon as possible. To make things a little more faster and efficient, we wrapped the React component in an AngularJS component and routed it to an inline-template that employs the AngularJS component. react2angular was the reason we could complete the project faster and before the client expected.

Epilogue

When your approach is gradual migration, things get a little complicated. Of course, changing engine in a moving car is more difficult than in one parked in the garage. On top of that, you have to add new features as well replace the existing ones at the same time. Of course, this saves you from rewriting the same code in two different technologies. Nevertheless, making changes in the codebase of a live application is not very different from playing with fire. Gradual approach is indeed not the ideal way to face the migration.

A parallel rewrite makes more sense from both development and business point of view. It is more of a luxury and necessity. As I said technology migrations are not straightforward, sometimes to make things work and make business sense, you have to pick the unconventional way. Who cares as long as the car takes you to the workplace and back?

FAQs

1. 1. Is React better than AngularJS?
2. Choosing the right framework for a new application or website is essential for any business. Although both technologies are powerful and flexible, ReactJS offers better flexibility and facilitates customization.
3. 2. Does AngularJS to React Migration actually help?
4. ReactJS has flexible architecture and offers greater control to developers. The applications are faster to develop, predictable, and easy to maintain. This is why the migration from AngularJS to ReactJS can help your business.
5. 3. What are the prerequisites for AngularJS to ReactJS Migration?
6. A strong foundation is the most important requirement for migration. This is possible with the help of experienced experts with TOPS Infosolutions. We can plan and schedule a parallel rewrite to make things less complicated and manageable.
7. 4. How to make AngularJS to React Migration easy?
8. If you want to migrate from AngularJS to ReactJS, all you have to do is hire hire angularjs to react migration developer with TOPS Infosolutions! We have the expertise to answer all your AngularJS-ReactJS migration questions and help make the transition easy and hassle-free.

hire angularjs to react migration | angularjs to react migration

Angular is developed by Google and is one of the widely used JavaScript frameworks which help developers to build web applications by using HTML as a template language.

Angular’s data binding and dependency injection eliminate much of the code which you could otherwise have to write manually, which may result in a tedious task. In order to deliver the latest features, Google has been updating Angular consistently to make it lightweight, fast, and easy to use.

In November 2017, Google released Angular 5.0 with a number of features and bug fixes. The core focus of this update is to simplify app development, code sharing, code compilation time, etc.

The Key Features of Angular 5 are as follows:

1. Build Optimizer

The new release of Angular 5 comes with the Build Optimizer tool which makes the framework smaller, faster, and easier to use. Build Optimizer is run by default when production builds are created with CLI (Command line interface) and decreases the size of JavaScript. Basically, Build Optimizer has 2 main roles i.e. it:-

• Marks the part of your application as ‘pure’ which removes the part of your application i.e. not needed during runtime via tree shaking
• Remove decorators from the application’s runtime code because decorators are used by the compiler and are not needed at runtime

These jobs can enhance the boot speed of your application and lessen the size of JavaScript bundles.

2. Compiler Improvements

The improvements were also made in the compiler to provide faster rebuilds for both productions builds and AOT builds. The previous version was a bit slow and a small change in a template needed full compilation. This updated version has a ‘pipeline transformer’ which has the ability of a TypeScript compiler that only compiles what is necessary with a new watch mode.

Features were added to the decorators which made it possible to create smaller bundles by removing whitespaces. The new compiler saves 95% of the build time when performing an incremental AOT build.

You can take advantage by using, ng serve –aot

3. Improved decorator support

The new feature of Angular 5 supports decorators like use-value, use factory, and data in object literals.  These decorators help to use the values that are calculated at runtime. Rather than using the name function, NULL can be used, so that it can execute the code without affecting the public API.

Before

Component({
                              provider: [{provide: ‘token’, useValue: calculated()}]
                     })
export class MyClass {}

Angular 5

Component({
                              provider: [{provide: ‘token’, useFactory: () => null}]
                      })
export class MyClass {}

 

4. HTTP Client Instead of HTTP

HTTP client came into existence in version 4.3; angular/HTTP was used for making smaller, simpler, and more powerful HTTP web requests in an angular application. Now in version 5, the angular team recommends using an HTTP client for all applications.

To update HTTP Client, replace Http Module with Http ClientModule from @angular/common/http in each of the modules, inject the HttpClient service, and eliminate any map(res => res.json()) calls, which are no longer required.

Its features include

• Typed, synchronous response body access, including support for JSON body types.
• JSON is now used as a default; it no longer explicitly parsed JSON
• Interceptors enable middleware logic to be inserted into the pipeline
• Immutable request/response objects
• Progress events for request upload and response download

5. Angular Universal Transfer API

In Angular 5, sharing code between the client-side and server-side versions of the application has become much easier. Angular Universal was introduced to provide support for the developers in order to perform server-side rendering of Angular applications.

Furthermore, two modules like ServerTransferStateModule and BrowserTransferStateModule were added which help to generate information on the platform server and then transfer information to the client side to avoid regeneration of the same information. This is useful when an application fetches data over HTTP!

By transferring state from the server, angular developers can refrain from making another HTTP request, once the application makes it to the client.

Furthermore, Domino is added to the platform-server; this means that Angular 5 supports DOM-based manipulations within server-side contexts and also supports third-party JavaScript and Component libraries.

6. Internationalization of Pipelines For Number, Date, and Currencies

The latest update of Angular 5 includes number, date, and currency pipes which enhanced standardization across browsers and eliminated the need for i18n polyfills. Apart from this, the pipe has been updated to provide extensive locale support and configurations for any locales relying on the CLDR.

If you do not want to use this new pipe, you can import the module DeprecatedI18NPipesModuleto after the CommonModule to access the previous behavior.

import { NgModule } from ‘@angular/core’;

import { CommonModule, DeprecatedI18NPipesModule } from ‘@angular/common;

7. New Router lifecycle event

Angular 5 includes lifecycle events that enable developers to track router cycles from the beginning of running guards until the completion of activation.  The new events of the router lifecycle are:-

• *ActivationStart*
• *ActivationEnd*
• *ChildActivationStart*
• *ChildActivationEnd*
• *GuardsCheckStart*
• *GuardsCheckEnd*
• *ResolveStart*
• *ResolveEnd*

Above mentioned events can be used to have more control of your application.

8. Form Validation

In Angular 5, forms can run validation and value updates using ‘on blur’ or ‘on submit’ rather than on every input event.

<input name=“lastname” ngModel [ngModelOptions]=“{updateOn: ‘blur’}”>

If you have any server-side validation or any heavy process triggered by validation or any value changes that are not run often; with this form validation in the new update, you can take control of the validation and value change timing at the control level or specify it for a complete form.

Moreover, ‘asyncValidators’ can be specified in an options object, instead of declaring it as a third parameter.

Conclusion

Angular 5 is smaller and faster and is loaded with significant features and great improvements. This update has very useful tools which will make your application faster and fully optimized. Angular update guide will help the development teams to learn more about Angular updates.

The team of Angular is very active; although they came up with Angular 5 in November 2017, major bug fixes in versions Angular 5.1 and Angular 5.2 were out soon after the release.

Well… the story doesn’t end up here… Angular 6 is about to release soon providing easier, smaller, and quicker web development services.

Looking to build your next project in Angular 5? Connect with us today!