If you are a React developer and looking to learn Angular development? And you are worried about how much of your knowledge is exchangeable? While React and Angular have many differences, some patterns and similarities alter between these two. The following tips should be seen as shortcuts to make the transition from React to Angular easier and introduce the fuller Angular concepts. Let's jump in!
Angular & its history
Let's talk about Angular. It is an open-source TypeScript-based web application framework led by Google. Angular is one of the solutions for single-page application development alongside React. The first version of the framework is AngularJS which started in 2009. But due to its unpredictable change detection system and robustness, the Google developers needed to rebuild the framework and named it Angular 2+. Before Angular 2+, there were Angular Js. The current version is Angular 12, which is released on 28 July 2021.
So, what does this signify?
React is concentrated on updating the view layer and relies on the react ecosystem to provide solutions for common problems like routing, forms, etc.
Angular has many of these built-in features as part of the framework.
This means that when developing with React and requiring to build forms - we have several options to pick from, such as developing our components or choosing between Formik or any other React form libraries.
While, when developing with Angular, we pick from one of the form approaches that are part of the framework, such as template forms, or reactive forms, which come with built-in support for validation, etc.
While switching from React to Angular, it is worth having in mind that there is far less flexibility for you to decide how to do certain things as Angular will have it covered; however, the responsibility of evaluating several other options is taken care of for you. There is always a trade-off.
What are the similarities between React and Angular?
There are some similarities between React & Angular. Let's see them.
Both Angular and React support typescript, live or hot-reloading, modular component design, lazy-loading, lifecycle hooks, etc.
Encourage dumb components which are free of business logic.
Both are both component-based
Before going too deep, here are some of the common lingoes that Angular uses.
TypeScript — TypeScript is the chosen language for Angular development.
Workspace — This is our app project folder which holds our library, etc.
Modules — same like JS modules, this is an encapsulated piece of functionality usually serving a single purpose.
Component /template — The combination of a component and template represents a view.
Dependency injection — Angular can include services, functions, strings when required by using the dependency injection.
CLI — This is your shortcut to create components, services, etc.
Observable — Angular uses observables while subscribing to a data source to trigger callbacks when data changes. This is the same as async data calls from an api. When that data changes, the observable triggers a shift in the subscribers.
Services — Services are a great way of sharing code over the application. When linked with dependency injection, they are precious.
This has become the biggest complaint initially. Angular's folder structure seems extreme compared to React's. Each component folder includes a component.html, component.ts, component. Spec test file and a component.scss file. Apart from these, there are a few more essential files in Angular. Some of the important files are listed below.React'sReact's
angular.json: It'sIt's a configuration file for our angular application. It usually defines the structure of our app and also includes any settings to achieve with the application.
tsconfig.json: It is a typescript compiler of the configuration file in Angular.
tsconfig.app.json: It overrides the tsconfig.json file with the app-specific configurations.
tsconfig.spec.json: It overrides the tsconfig.json file with the app-specific unit test cases.
karma.config.js: It specifies the config file in the karma Test runner. It runs test cases for angular.
main.ts: It is the main ts file that will run first. It is mainly used for defining global configurations.
polyfills.ts: It is used to provide compatibility support for older browsers.
test.ts: The primary test file that the Angular CLI command ng test will apply to traverse all unit tests in the app.
PropTypes of reacting is the typescript of Angular. PropTypes for React allows us to check the props that we pass to our components. This assures that our component gets the data in the format it requires and warns you if any unexpected data types are essential.
Angular lets you do the same and a lot more by using Typescript. PropTypes checks the props passed into your React component at run time, whereas Typescript has all your code strongly typed and works at build time.
In React, we have create-react-app, while in Angular, we have Angular CLI. The easiest way to start a new React project is by using create-react-app, which sets up a React dev environment.
npx create-react-app my-app
The Angular CLI is the tool that helps you create a new Angular app, as well as helping you run, build, test, and upgrades the app.
ng new my-app
We can also use it to create components, services, and directives.
ng generate component my-card
These are the building blocks of your UI and like React components or Pure Components. Angular components consist of HTML, Angular class (.component.ts), CSS / SCSS, and a test file.
A module is a place where we can group the components, directives, pipes, and services related to the application and extend its capabilities with external libraries. At a high level, an Angular app consists of three types of artifacts:
An Angular module encapsulates these as one unit. NgModule is a core building block of the Angular framework. Each app needs to have a root module, which is an AppModule.
This AppModule exists in the app.module.ts file in the Angular app. This is the entrance point of bootstrapping an angular app. Apart from AppModule, there are other modules, which are FormsModule, HttpClientModule, and RouterModule.
[ ] - binding values, - interpolation of strings, ( ) - binding events, * - structural directives, etc.
Navigation is the most important aspect of a web application. Providing clear and right navigation elements decides the success of an application. Unlike React js, Angular has its routing module. Angular gives a separate module, RouterModule, to set up the routing in the application.
In React, we communicate between parent and child through props. In Angular, we can achieve the same with @Input/@Output. If we want the child to communicate with the parent, we define an @Output and emit events to listen to it. In the child component, we need to pass incoming data using @Input() and pass events to the parent by @Output.
Example 1 : Parent component - todo-lists.component.html & todo-lists.component.ts
Example 2 : Child component - todo-item.component.html & todo-item.component.ts
TDD is nothing but the development of tests before adding a feature in code. This approach is based on the principle that we should write small codes.Test and Behavior Driven Development
Two-way Data Binding vs. One-way Data Flow
This is one of the unique parts to get used to. Angular directives allow two-way binding. Each directive treats its DOM property as a model. Changing the view also changes the value of the property in that model.
While react uses one-way data flow. React doesn't have a technique to allow the HTML to change the component. The HTML can only raise events to which the component reacts.
Diagram below -
Services and Observables vs. [Reducers & Actions]
Services include reusable functions that perform data exchange. Every Angular module has a Providers property to define which Services are convenient to them. In the root of Angular apps, the services are injected so that they can be used over the application by any component.
While Managing Redux with React, reducers handle and respond to changes in the state. In Redux, actions need to be defined, and the action creators are dispatched to update the state and change the view.
While Angular doesn't have actions, angular has observable. An Observable is a function that can return a stream of values to an observer over time, either synchronously or asynchronously. The API calls and events return observable. The observable listens for an event, then transfers it to subscribers. It can also be helpful to handle HTTP requests & transfer data to the component.
Note: React is known for using Redux while Angular is known for using Rxjs.
Well, in the end, it comes to personal preferences. Both are best in their fields. But here are some points we can consider when choosing Angular or react.
We can choose Angular when
The complexity of the app stays low to medium level.
We need readymade solutions.
We need a feature-rich large-scale app.
We can select React when
We need to build shareable elements in our app project.
We require an app with several events.
A customized app solution is what we need.
We need flexibility in Building Blocks and component-based UI.
We know about a few key concepts that can help us get into Angular development as a React developer. There are many other Angular basics such as Directives, Pipes, FormBuilder, and many more. But this can be an essential building box of concepts from which you can dive more into Angular development.