It has begun! Moving from Angular 1.6 to ReactJS

This is an active WIP post. It will get updated as I work through things.

If you missed my previous post, I detail the current State of the Union at Aver where we have over 18 distinct AngularJS 1.6 Single Page Web Applications which make up a single product/site.

With so many AngularJS applications, and AngularJS 1.6 starting to feel dated, it's got me thinking..

  • So what do we do with future developments, do we still continue using Angular 1.x or do we slowly start migrating to a newer framework?
  • What if that framework goes obsolete tomorrow and we have to migrate again to a newer one?
  • Is it really feasible to redo the entire app with newer framework?
  • Is there a way I can keep my current AngularJs 1.x stack and slowly add the future releases of my app using newer libraries/frameworks?
  • How do I pass data between AngularJs and the new library that I use?

So... I'm in the midst of experimenting with moving from AngularJS@1.6 to ReactJS. By that, I don't mean migrating all of our front-end-micro-services over, but rather coming up with a strategy where our legacy AngularJS apps live side-by-side with the newer ReactJS apps. The plan is that we are able to re-use as much shared code as possible with minimal re-write and in the end, our Users won't be able to tell the difference.

I have to say, it's going swimingly so far! I'll be trying to keep this page updated with any notes or fun stuff I find along the way. Here's my current react setup:

  • create-react-app with no eject. I'll try my damndest not to eject the create-react-scripts but I may run into issues with needing to customize my webpack config.
  • Bootstrap CSS - We have a custom bootstrap css library that I was able to plug in with minimal work.
  • Bootstrap-React - Pretty similar to the Angular-Bootstrap library we're using in the legacy stuff. It basically takes all of the components that have interactions that would typically require JQuery (Typeaheads, tooltips, etc) if you were using stock bootstrap, and wraps them in whatever library you're using. In this case React & Angular respectively.
  • React-Router - A basic page router

I believe this will grow and get more complicated as I go, but for now that's it! Super simple.

Corey Snyder

Corey Snyder

Senior Front-End Engineer for Aver Inc.. I have independently developed & released multiple video-games. I play Ice Hockey, I race FPV Drones, and I love my Subaru WRX STI.

Read More