Migrating from AngularJS to React

by

angular-react

Most organizations with a web application will inevitably need to make a decision regarding their current front-end framework.  I’ve personally been involved with two projects that have come to this crossroads. One of the two applications was written in AngularJS, the other in Backbone.js. In both cases, the organization decided that the best course of action was a full rewrite using React and Redux.  In the case of the AngularJS app, a gradual migration approach was considered and I was lucky enough to have the opportunity to investigate this possibility.

Why Change?

On July 1, 2018, AngularJS will release version 1.7 and then enter a 3-year period of long term support.  During this period, the team will address security concerns and maintain support for new versions of jQuery and web browsers, but there will be no significant improvements or advancements.  Meanwhile, Angular (version 2+) and other frameworks like React will continue to be developed and improved. Depending on the complexity of your application and your staffing levels, it might make sense to keep using your existing framework during this time.  But, for many organizations, ensuring their product avoids obsolescence is a significant enough reason to make a change.

The Gradual Approach

After choosing the framework, I began investigating what a gradual migration from AngularJS to React might look like.  I started reading blog posts from other people who had attempted it and began investigating various tools to aid in the process.  I started reading about libraries to convert React to AngularJS, AngularJS to React and some that simplify integrating Redux into Angular applications.  Some of the libraries I found were no longer maintained, some had links to other libraries to which they had conceded defeat. Eventually, I determined that the two best solutions for my needs were react2angular (https://github.com/coatue-oss/react2angular) and ng-redux (https://github.com/angular-redux/ng-redux).

react2angular allows you to expose a React component to Angular as if it were an Angular component.  What does this mean? I chose a fairly simple AngularJS directive from the existing code base and decided to replace it with a React component.  The process was as follows:

  • Create a React component
  • Use the html from the AngularJS template to create the markup in the React component’s render method
  • Rewrite the click handlers and basic functionality from the AngularJS controller in the React component
  • Wrap the new react component in react2angular to expose it as an AngularJS component

It really wasn’t very difficult to do and it offered a great solution to what seemed on the surface to be a difficult problem.

ng-redux was the other library that I experimented with.  The library is well documented and is a great solution for incorporating Redux into any AngularJS app independently of whether you intend to use React or not.  You can easily connect AngularJS components to the Redux store similarly to the way you would a React component.

While the library was easy to use and configure, the real challenge here was in figuring out exactly how to migrate the state management of the application from AngularJS to Redux.  I quickly realized that having a hybrid app relying the same information in two different states on the client was a nightmare. Ideally, I would suggest changing the entire state management layer of your application to Redux before introducing React. If this were not possible, I would change it over in “slices” by moving all of the state related to one object or model type at a time.

So, what’s the problem?

So, if both of these tools are so easy to use, why doesn’t everyone do this?

It can quickly make for a complicated code base.  Depending on the experience level of your developers, exposing them to a hybrid of two frameworks could be very confusing.  My biggest concern as I started down the path of “making this work” was that I found myself figuring out how to replace the existing AngularJS code with the equivalent in React.  This was often not the same way I would architect a new React app.  It’s hard to follow best practices for two very different front-end solutions at the same time.  Ultimately you can end up with a confusing application full of hacky solutions that aren’t reflective of best practices in either framework.

Conclusion

When choosing to upgrade you have to choose the best approach for your organization.  My conclusion was that whenever possible, the best course of action is to rebuild from scratch. The migration is possible, but it will probably take longer and you’ll inevitably make decisions regarding application architecture that facilitate the migration more than what’s best for your application.  The argument for migrating gradually really comes down to staffing. If you have a small staff, there are a couple of scenarios where it may make sense to use this approach.  If you need to keep pushing out new features in your existing codebase while making the migration, or if your application is so large, that you don’t feel like you could rewrite it in a reasonable amount of time, you may consider migrating gradually.

ForwardJS SF 2018 Recap

by

ForwardJS was the first developer conference that I ever attended, and it was a pleasure to be able to attend again this year. Forward has been releasing batches of the recorded talks on YouTube, so I thought that I would share a few of my favorite talks from this year’s conference, along with the video and slides when available.

The Rise and Future of Coding Bootcamps

by

If you work in the tech industry, coding bootcamps are something you have probably heard of, possibly attended, or know someone that graduated from one. For those of you who are unfamiliar with the term, the industry of coding bootcamps is fairly new, with the first ones starting around 2011-2012. In the short time they have been around, these alternative education programs have gained significant popularity, making their presence known in the tech world.

The Magic of Agile and the Design Process

by

Over the past year, I’ve been working as the solo designer embedded in a team of mostly developers and one project manager designing web experiences and publishing software for one of our clients, Rivals.com. We follow an agile methodology and work hard to effectively and efficiently integrate design. This blog post breaks down the major phases of our process and illustrates, at a high level, the role of design throughout.

Developing for Web Accessibility

by

HTML 5 represented in American Sign Language

When developing websites it is important to consider your audience and how they interact with your application. This can be even more significant for a person with disabilities. Even the most stunning visual presentation can lose its value when the content cannot be interpreted by an individual due to, for example, a learning disability or difficulty seeing. Therefore, it is important, when doing any development or design, we do not dismiss the 1 in 5 people that would benefit on an accessible web.

Designing Cross-Cultural User Experiences

by

Upon hearing the term cross-cultural UX design most people might be unsure what it means and find it a mouthful to say. As the name suggests, cross-cultural UX design is when designers create a product that can be an enjoyable user experience for all people of all countries and cultures throughout the world. It makes sense that this is a relatively unknown and new term as it has only been used in recent years as our world experiences rapid globalization. Below I put together 6 major points to take into consideration when designing cross-cultural user experiences.

Grio and Angular 2: Are They Ready for Each Other?

by

At Grio, we love Angular.  By my estimation we currently use it for at least half of our front-end web application code.  And I in particular have affection for it, so I greeted the recent release of Angular2 with some interest and trepidation.

The release was just an event, though. The framework had already been around long enough for me to fret about it for some time.

Introduction to React Native

by

React Native underlines a JavaScript framework used in writing real and natively rendering mobile applications for Android and iOS. The framework is based on React, which is Facebook’s JavaScript library used in building interfaces for web applications. Building a mobile application using javascript isn’t anything new. The similar technique has been used in frameworks such as Ionic, Sencha Touch, Phone Gap, Cordova, and the list goes on.

Intro to Elm

by

In this blog post I’ll be covering Elm, an up and coming functional programming language for building web application front ends. Elm compiles into JavaScript and utilizes virtual DOM technology to efficiently render web UIs. Elm focuses on simplicity for the developer with a helpful compiler and an easy to understand application architecture.