Two of the hottest frontend technologies to emerge from the last decade are the Angular framework and the ReactJS library. Before going any further, it is important to understand the differences between the concepts of a framework and a library.
A framework enforces the workflow by defining a template that the developer expands on to build their application. To imagine this, it’s easy to think about game development and the use of prebuilt game engines. Developers could create their own game engine from scratch, but such a task is difficult, would require much time, and has already been done. Many small and large studios alike instead opt to use frameworks such as Unity or Unreal Engine to save time and money — the stipulation being that developers are restricted to the workflow imposed by the engines and using them in the way they were built to be used. Angular is comparable to Unity. The “engine” has already been built, now it is up to the developer to use the methods and tools in place to expand and create their application.
A library is more akin to building blocks, imported and assembled piece by piece as the developer sees fit. It is impossible to use Angular without being aware of the skeleton you are working inside, where this is not true of React. By including the React scripts, you can add React components to any HTML page without much overhead.
As a framework, Angular provides many functionalities by default. Dependency injection, routing, and form handling are a few examples. Using React, you often must rely on separate libraries or custom logic to deliver these functionalities. This means that React is leaner, allowing the developer to add only the dependencies they need. However, functionalities built into the Angular framework can often be considered stable, whereas published libraries can sometimes be outdated, incompatible with other libraries, or introduce bugs into your application.
There were many obvious differences I encountered when transitioning between the two technologies. As a developer who first learned React before moving on to Angular, I felt better equipped to handle the learning curve of Angular, which can be significantly higher due to it being an all-encompassing framework. Here are a couple thoughts on just a few of the differences I experienced.
Dependency injection is a design pattern that is not unique to Angular, but was a novel concept to me. I had little or no experience with the design pattern, but after becoming more familiar with it and using it in several applications, it has become a powerful tool for separating business logic from components and sharing services among components. It is invaluable in testing, due to the ability to provide fake, mocked versions of the dependencies or services.
Are you a developer who has used both the Angular and React technologies? Share your experiences—both good and —with us at firstname.lastname@example.org, or giving us a shoutout on Twitter, @wewritecode, or Facebook, @WeWriteCodeDSM.