React vs Angular: A First Look
Ben Greenberg Dec 25 '17 Originally published at Medium on Dec 25, 2017
This past week I needed to learn Angular for a small project I was assigned. Through that process, after taking a first look at Angular, I have some reflections on React vs Angular, and also a big lesson to share. I hope these reflections are helpful for you as you deliberate on which approach might be better suited for your application’s needs.
First, the big lesson. Sharing where you made a mistake is not always easy, especially in a public forum, but all too often our Internet selves is a distillation of our lives into just the perfect moments. Real life and growth is through the mistakes as much as it is through the successes.
So, having said that, my big lesson is know which version you need to learn! Prior to the project start date, I spent a few days learning Angular, and I thought when the project began that while I was not an expert, I did have a grasp of it. I couldn’t have been more wrong. Without realizing it, I had spent the prior few days learning the first version of Angular assuming that newer versions would be similar to that. I found a curriculum I really liked and went with it. Well, that was a big mistake. Angular 2+ is very different than the first version. Like, practically an entirely different framework level of difference.
Big Lesson: Do your research on version changes of a technology before committing to learning a particular version.
Now on to the initial reflections on the differences:
className for an HTML
class. This allows you to create React components that take advantage of simple logic to render views to your users. You could deploy a ternary operator to display different data depending on the outcome of that check. JSX lets you do all of that from within the same file.
Within Angular 2 a developer takes advantage of directives that can be inserted directly into your HTML that represent different actions defined either in the core Angular code or custom written by you. For example,
ngIf is a way to define a conditional check inside an HTML tag that you might use for creating alert messages if a form is not correctly filled out. Another common one for a form is
How Opinionated Do You Want Your Framework To Be?
React because it is a library that simply provides the View for your application is not highly opinionated on your application’s structure. There are lots of best practices out there for how to structure your React application and I would recommend following them for both convention reasons and for scalability. Yet, you do not need to do so if you do not want to. It is highly recommended, for example, to separate out your components that manage state and the ones that are stateless. It is also a good idea to build code that is reusable throughout your application, but again you do not need to do these things if for some reason you don’t want to.
In my learning of Angular thus far I have discovered a highly opinionated framework. Both React and Angular are great at displaying errors that are helpful in moving your application forward and identifying where the issues are. However, in Angular when moving to compile the app to production mode with the helpful Angular CLI and
ng build, a single error, even a small one that doesn’t impact the running of the application at all, will stop the build of the application. A quick Google search shows that this a source of frustration for many people.
However, you can see how this is also a good thing. If you are compiling your application for production you shouldn’t leave any errors! Yes and it is also true though there is a difference between should and could. In Angular you can’t, in React you shouldn’t but can.
Your Data: A One Way or Two Way Highway?
One of the first lessons you learn when you begin down the React journey is the immutability of data. Programming conventions like Flux and middleware like Redux implement one way data flow in your application. Whether you have one store of data or multiple stores, dispatchers or a dispatcher built into the store are questions about how you want to design your application, but what lies at the core is the idea that data flows in one direction. Whether you employ Object.assign or the spread operator in ES6 to update your state, what you are doing each time is creating a new state and not modifying your existing one.
Angular, on the other hand, is all about two way data binding. The
ngOnChanges hook in HTML can watch for any changes in a user input to update the data of the application. The mutability of your application’s data can create a great deal of dynamism and flexibility. Yes, you can enforce immutability in Angular using things like Immutable.js or other strategies, but it is not inherent into the organizing philosophy of the framework. Mutable data makes tracking changes more challenging and can also have implications for performance, so it seems based on my research this week, more and more people are enforcing immutability of their data in their Angular applications as well.
Who Has The Steeper Learning Curve?
As mentioned above, my learning of Angular this past week was colored by my beginning with an older version that was, for the most part, no longer applicable to the current versions. However, putting that aside, Angular, in my experience, has a steeper learning curve initially than React while React is quicker to learn at the outset but takes more learning once you get going to use it well.
Due to the more opinionated nature of Angular and its stricter enforcement of its conventions, you need to commit more time at the outset to learning how to initially setup your Angular application. React, because it is largely not concerned with how you structure your application, takes less time initially to learn. That changes though once you get past the initial phases and begin thinking about not only how to get your application going, but how to do it well. Precisely because React is less structured initially, it requires more learning on how to optimally structure it down the road. So, in my estimation, Angular takes a larger investment of time initially while React takes a larger investment of time later once you are past the beginner stage.
As one probably expected, the answer is it depends. It depends on what you are looking for, what your business requirements are, what kind of functionality you want out of the box and more. Both React and Angular have engaged worldwide communities surrounding them and both are supported by major industry leading companies so you can be assured that they will have long term shelf life.