Angular Vs React
Two of the biggest powerhouses for frontend development today are React and Angular. Both are known as Javascript frameworks. Although, some would argue that React is better described as a Library. It is marketed as a library by the developers of React since it comes with less inbuilt tools and is incredibly lightweight compared to other frameworks. It is also worth mentioning NextJs as it is a newer option that provides more support features around React. This allows for it to be more solidly defined as a framework rather than a library. Ultimately it is open to interpretation and your own definition of what defines a framework and library.
Both React and Angular follow the more modern approach of modular, reusable component code structure and allowing for data to flow more dynamically between components. However each one has its own key benefits and differences which I aim to explore within this article. It is also important to note that there are other options as well such as Vue or the previously mentioned NextJs but this article will focus exclusively on React and Angular.
React Structure
React is considered to be the more flexible option between the two technologies as it doesn’t enforce any particular method for code structure and it uses one way data binding. This means that developers will have more control over the data flow when creating their web and mobile apps. Of course this is not ideal when we need data to be updatable. For example, we would need to be able to close the data loop for update forms. This is supported by React through the use of state management which is a key feature. It is integral to any React app that its developers have a keen understanding on how state works.
Additionally the open-ended approach to the structure of a React app places a lot more freedom as well as responsibility on the developer to create a file structure that makes sense. Some developers will focus more on organising the structure by component and some will do it by file types. Common folders you may find in a React app include;
- Data
- Components
- Views or Pages or Screens
- Context
- Styles or Stylesheets
- Assets
- Utils
- Hooks
React Hooks
Another key feature is React Hooks. React Hooks were introduced in 2018 and while a developer can opt out of the use(I will cover more on this later), they are preferred due to how they have allowed for easy state management from within functional components. Before the 16.8 update, this could only be managed through class components which can still be used instead if a developer opts out of the usage of React Hooks but this will be covered in greater detail later. React provides a wide variety of these hooks out of the box but it is also possible to very easily make your own and then use them the same way. Below is a brief overview of the major React Hooks and how they are used.
State Hooks
Allows the application to remember information by storing it inside a variable that is under state management.
- useState
- useReducer
Context Hooks
- useContext
Effect Hooks
- useEffect
Ref Hooks
- useRef
- useImperativeHandle
Performance Hooks
- useMemo
- useCallback
Props
Props are an essential tool for passing data between components and they help React achieve one way data binding. Props are not limited to passing values as functions can also be passed through. The term, ‘props’ is short for properties and it is up to the developer to give appropriate names to their props, same as they would for variables, functions, etc. There is no ironclad naming convention that most developers follow for props but generally it is best to be descriptive and clearly indicate the props purpose in its name.
Although React is natively a Javascript library, it can support Typescript files. I have found that in these cases, having a solid understanding of types is essential when working with props as this is where it will come into play the most. Typescript components in React require the addition of interfaces or types created within each component that describes the props being passed in. This will not be necessary when working in Javascript files.
Context
This is how information and data can be made globally available across the entire project so that any component can access what is contained within the context by using the useContext hook.
React Rendering
Applications traditionally developed in React use client side rendering. This is where the page is rendered directly by browser using Javascript. After the Javascript is downloaded and executed, the page should be both viewable and interactable. It is also possible to use server side rendering for React through NextJs or by using node.
React also uses a Virtual DOM during rendering in order to allow for faster updates and better performance.
Server Side rendering means that the request is sent to the server which renders all of the html before sending the result back to the client side. This further means that the user won’t have to sit looking at a completely blank website as the initial html handed to their device has been pre-rendered making the website viewable. However it takes longer for the page to become interactable as the browser then needs to download and run the Javascript.
React Class Based (/Stateless vs Stateful)
The class based approach to writing code within React is largely being moved away from functional components and React Hooks but developers can still take this approach instead of using React hooks. Class components are more complex and tend to be lengthier in nature. To create one in React, we must use ES6 Javascript classes. They are also known as stateful components due to the fact that we can innately manage local state. Conversely we can also call functional components stateless components as they do not allow for local state management and cannot contain state unless hooks are used. Through the use of hooks, functional components can become stateful. This is important to note and keep in mind so we don’t fall into a trap of asumming that ‘stateful’ will always refer to class based components.
Ultimately there is a lot more support for the stateful functional components approach with a focus by the React team to make Hooks more efficient than using class components. It’s important to understand for niche cases but it is unlikely you will find many use cases for class components nowadays when developing with React.
Benefits
- Flexible control over data flow
- Modular Structure is not strictly enforced
- Reusable, modular, nestable components.
- Major Documentation overhaul in 2023 with clear, simplified explanations.
- React skills can be applied to React native
- Robust community ecosystem
Angular Structure
This framework uses the Model-View-Controller structure. Developers can run the ‘ng generate INSERT_NAME’ command to create default components in Angular. This will help enforce modularisation and module structure by requiring 3 files in order to adhere to the MVC structure. Css files represent the ‘model’, html files represent the ‘view’ and ts files represent ‘controllers’. The overarching structure will also be similar as angular projects will have an app component that acts as the parent component for every other component. This component can also have a html file, css file and ts file. There will generally need to be an app.module.ts file that keeps track of imports and declarations unless the developer decides to opt for a standalone component structure instead which I will cover later. Angular structure naturally makes it easier to keep the structure of a project clean by defaulting the creation of its components to follow the MVC structure. However this can also lower its flexibility.
NgModules vs Standalone
The standard Angular approach to imports is the use of NgModules which can be found in the app.module.ts file. This allows for every import to be easily tracked within one file as well as providing a list to view every component in the app. Alternatively, a developer can also choose to set up their project to use standalone components instead.
Pipes
This is one of the key features inbuilt to Angular that allows for easy transformation of data. Pipes can be used to format date variables and capitalise strings to name just a few examples. There is no true equivalent to pipes in a React application but this is because it is not needed since pure Javascript can be used from within JSX in React. For example, to achieve the effect of transforming a string variable to uppercase from within JSX, we can use the uppercase Javascript function.
Directives
Directives are a key feature of Angular that is used to bundle a lot of utility into this framework. They can be used to achieve a variety of tasks such as managing forms, styles, lists and more. Some examples include:
- NgModel
Adds two way data binding to a form element
- NgFor
Can repeat a HTMl element based on a given array
Routing
Angular also provides inbuilt support for routing which makes it a lot easier and quicker to set up routing in this framework compared to React. This routing is component based. The developer can map a single component or a hierarchy of components to a specific URL.
Benefits
- More inbuilt support and bundled features including dependency Injection
- Can create reusable and custom components
- Easy maintainability of structure and code leading to more stable scalability
- Robust Routing utility
- Seamless updates using Angular CLI plus a clear version schedule, backwards compatibility and 18 month support
- Robust community ecosystem
Differences in Kickstarting a project
Initial setup in an angular project is more complex compared to React as it involves complicated boilerplate code. Also, as a fully packaged framework that has more tools built-in, there is a need to answer some questions which are asked during app creation.
Below is an outline of the standard setup process for both. If a step is specific to Angular or React then only this will be noted or if there is a significant difference in each one’s approach, then this will be specified.
- Install Initial Dependencies(Node for both)
- Create React App tool (React)
- Angular CLI (Angular)
- Run cmd to create project
- ‘create-react-app my-app’ cmd (React)
- ‘ng new my-app’ cmd (Angular)
- Answer y/n to questions asked (Angular)
- Setup file structure(React)
- Structure varies more widely and is flexible but it is good practice to implement it at the start (React)
- Optional for Angular as it automates a lot of this process but it can be fine tuned to an extent (Angular)
- Make components as necessary
- Component structure and creation is up to the developer (React)
- ‘ng generate component my-comp’ cmd to create components(Angular)
- Run the app using a cmd.
- ‘npm run start’ is the default cmd but it can be changed by the developer. (React)
- ‘ng serve’ is the default cmd but it can be changed by the developer (Angular)
Core Differences
- Angular is a fully packaged framework as opposed to React which means that angular comes with more support out of the box and a variety of inbuilt tools for developers. React is more lightweight and flexible.
- React largely relies on pure inbuilt Javascript functions for data formatting whereas Angular comes with pipes.
- React uses a Virtual DOM whereas Angular uses incremental DOM. The Virtual DOM allows React to perform faster as it does have to rewrite the entire HTML every time it needs to render.
- React uses one way data binding but Angular uses both one way data binding and two way data binding
- The learning curve for React is generally recognised to be lower than for learning Angular by most developers due to its more flexible nature.
- Switching between versions is easier in React.
Conclusion
Overall, I believe that the benefits and general structure of React make it best suited for projects that require flexibility or that aren’t expected to become overly complex. Often larger projects tend to increase in complexity in proportion to their size which is where Angular is better suited due to the stricter structure it enforces and additional pre-packaged tools. However, React will still do best when needed for flexibility, creativity and faster rendering such as any application that heavily relies on visuals. At the end of the day, both are suitable for SPA website development but offer different approaches and benefits. It’s best to use the option that suits the needs of your use case and project workflow.
