Angular or React? This is the question!

Angular or React
Image (skull) from http://bit.ly/freepikBrSkull

Welcome to my article, where I will help you start the quest to select the ideal technology for developing native, hybrid, web, SPA, or mobile applications between Angular and React, also known as React Native.

Dozens of publications on the internet can assist you in making a technical decision, and this is not the main point here, but to give you my perspective as a full-stack developer and tech lead for large Brazilian companies when I started my first time on projects with Angular and React.

Starting with

Before starting to develop with Angular and React, my background in development was in Microsoft technologies.

These experiences guided me to start working with them. Let's see what my first experience with each of them was like.

Angular: it took me almost a month to adapt and deeply comprehend, including routing, componentization NGRX, etc. Using Visual Studio instead of Visual Studio Code was challenging because VS Code is better suited and lightweight for front-end development.

React: It became significantly more manageable for me since I gained experience with Angular, and it became more accessible for me to master, even though it has other development complexities and necessary knowledge. With my background, including Angular, the learning curve was easier. The experience with it was better here since we were using Visual Studio Code.

What is the primary difference technically?

Angular is based on TypeScript, while React is based on JavaScript.

For some solutions, you will need to use React if you have a dependent framework in JavaScript; in the same way, if you have in TypeScript, you need to choose Angular.

About the history: AngularJS, initially written in JavaScript, was discontinued in 2010.

Development style

Both Angular and React can help us develop components. React is slightly easier to create and work with, while Angular provides a more structured code design and routing.

The biggest challenge in both projects was working with customized components and open-source software, which sometimes did not work as expected and provided little or no support. The components we created for the solutions were a new take on the wheel. I was already familiar with the professional components offered by Telerik, especially grids, inputs, and filters.

Using Telerik Framework

It is challenging to pick the best tool that gives the best return on investment (ROI), adds value to the product, is secure, and costs less to maintain over time.

To stand out from the crowd, we must make it simple, intuitive pages/views and reliable components with an excellent and professional look, and most importantly, highly maintainable, allowing us to respond to market needs with technical excellence.

Creating the user interface (UI) as an extension of the user experience (UX*) is desirable to capture the consumer's mind and soul. This is especially important when introducing new or revamped apps, products, and services to the market.

To be pretty and functional, is the minimum expected.

Fortunately, Telerik provides highly efficient, adaptable, and reliable components with specialized support, so our solutions don't have to reinvent the wheel.

Telerik's frameworks have the same look and feel, independent of the technology chosen—one less thing to worry about.

Code Sample

I added some code from the Planning feature to both samples so you can compare them a little.

It's necessary to explain that both frameworks use their version of KendoUI with their particularities.

Angular

Here I have a piece of the code for the Planning Coffee Wharehouse demo application:

Container with scheduler, source code at: https://github.com/telerik/kendo-angular/blob/master/examples-standalone/coffee-warehouse/src/app/components/planning/planning.component.html.

<div class="card-component">
    <kendo-scheduler
        [kendoSchedulerBinding]="data"
        [kendoSchedulerReactiveEditing]="createFormGroup"
        [selectedDate]="selectedDate"
        [selectedViewIndex]="1"
        [timezone]="'Etc/UTC'"
        style="height: 600px"
        startTime="08:00"
        endTime="19:00"
        [eventStyles]="setEventStyles"
    >
        <kendo-scheduler-day-view> </kendo-scheduler-day-view>
        <kendo-scheduler-work-week-view scrollTime="12:00"> </kendo-scheduler-work-week-view>
        <kendo-scheduler-week-view> </kendo-scheduler-week-view>
        <kendo-scheduler-month-view> </kendo-scheduler-month-view>

        <ng-template
            kendoSchedulerEditDialogTemplate
            autoFocusedElement=".title input"
            let-formGroup="formGroup"
            let-isNew="isNew"
            let-editMode="editMode"
        >
            <form class="k-form k-form-vertical" [formGroup]="formGroup">
                <fieldset class="k-form-fieldset">
                    <kendo-formfield orientation="vertical">
                        <span> Start </span>
                        <kendo-datetimepicker [popupSettings]="{ appendTo: 'root' }" [formControl]="formGroup.get('start')">
                        </kendo-datetimepicker>
                    </kendo-formfield>

                    <kendo-formfield orientation="vertical">
                        <span> End </span>
                        <kendo-datetimepicker [popupSettings]="{ appendTo: 'root' }" [formControl]="formGroup.get('end')">
                        </kendo-datetimepicker>
                    </kendo-formfield>

                    <kendo-formfield orientation="vertical">
                        <span> Title </span>
                        <kendo-textbox placeholder="Title" [formControl]="formGroup.get('title')"> </kendo-textbox>
                    </kendo-formfield>

                    <kendo-formfield>
                        <span> Description </span>
                        <kendo-textarea
                            [rows]="2"
                            placeholder="Add description to the event"
                            [formControl]="formGroup.get('description')"
                        >
                        </kendo-textarea>
                    </kendo-formfield>

                    <kendo-formfield>
                        <kendo-label class="k-checkbox-label" text="All Day Event">
                            <input type="checkbox" kendoCheckBox [formControl]="formGroup.get('isAllDay')" />
                        </kendo-label>
                    </kendo-formfield>

                    <kendo-formfield>
                        <span> Team </span>
                        <kendo-dropdownlist
                            [data]="teams"
                            [valuePrimitive]="true"
                            valueField="teamID"
                            textField="teamName"
                            [formControl]="formGroup.get('teamID')"
                        >
                            <ng-template kendoDropDownListValueTemplate let-dataItem>
                                <span class="k-team-mark" [ngStyle]="{ 'background-color': dataItem.teamColor }"></span> {{
                                    dataItem?.teamName
                                }}
                            </ng-template>
                            <ng-template kendoDropDownListItemTemplate let-dataItem>
                                <span class="k-team-mark" [ngStyle]="{ 'background-color': dataItem.teamColor }"></span>
                                {{ dataItem.teamName }}
                            </ng-template>
                        </kendo-dropdownlist>
                    </kendo-formfield>
                </fieldset>
            </form>

            <!-- Separate form for recurrence editor -->
            <form [formGroup]="formGroup" style="margin-top: 35px">
                <div *ngIf="isEditingSeries(editMode)">
                    <kendo-recurrence-editor [formControl]="formGroup.get('recurrenceRule')"> </kendo-recurrence-editor>
                </div>
            </form>
        </ng-template>
    </kendo-scheduler>
</div>

React

I have an equivalent code from the Coffee Wharehouse in React with the container here. The source code is available here: https://github.com/telerik/kendo-react/blob/master/examples/react-coffee-warehouse/src/pages/Planning.jsx.

<div id="Planning" className="planning-page main-content">
    <div className="card-container grid">
        <h3 className="card-title">{localizationService.toLanguageString('custom.teamCalendar')}</h3>
        {

            orderEmployees.map(employee => {
                return (
                    <div
                        key={employee.id}
                        onClick={() => onEmployeeClick(employee.id)}
                        style={!filterState[employee.id] ? {opacity: .5} : {}}
                    >
                        <Card style={{ borderWidth: 0, cursor: 'pointer'}}>
                            <CardHeader className="k-hbox" >
                                <Avatar type='image' shape='circle' size={'large'} style={{
                                    borderWidth: 2,
                                    borderColor: teams.find(({teamID}) => teamID === employee.teamId).teamColor,
                                }}>
                                    <div className="k-avatar-image" style={{
                                        backgroundImage: images[employee.imgId + employee.gender],
                                        backgroundSize: 'cover',
                                        backgroundPosition: 'center center',
                                    }}
                                    />
                                </Avatar>
                                <div>
                                    <CardTitle style={{color: teams.find(({teamID}) => teamID === employee.teamId).teamColor}}>{employee.fullName}</CardTitle>
                                    <CardSubtitle>{employee.jobTitle}</CardSubtitle>
                                </div>
                            </CardHeader>
                        </Card>
                    </div>
                );
            })
        }
        
        <div className="card-component" >
            <Scheduler
                data={data.filter(event => filterState[event.employeeID])}
                onDataChange={onDataChange}
                modelFields={ordersModelFields}
                resources={[
                    {
                        name: 'Teams',
                        data: teams,
                        field: 'teamID',
                        valueField: 'teamID',
                        textField: 'teamName',
                        colorField: 'teamColor'
                    }
                ]}
            />
        </div>
    </div>
</div>

Scheduler.jsx

Source code available here: https://github.com/telerik/kendo-react/blob/master/examples/react-coffee-warehouse/src/components/Scheduler.jsx.

import React from 'react';
import * as PropTypes from 'prop-types';

import {
    Scheduler as KendoScheduler,
    DayView,
    WeekView,
    WorkWeekView,
    MonthView,
} from '@progress/kendo-react-scheduler';

export const Scheduler = (props) => {
    const {
        data, modelFields, resources, onDataChange
    } = props;

    const defaultDate = new Date("2020-04-27T00:00:00Z");

    return (
        <KendoScheduler
            data={data}
            modelFields={modelFields}
            resources={resources}
            timezone={'Etc/UTC'}
            defaultDate={defaultDate}
            defaultView={window.innerWidth < 768 ? "day" : "work-week"}
            onDataChange={onDataChange}
            editable={{
                add: true,
                remove: true,
                drag: true,
                resize: true,
                edit: true
            }}
        >
            <DayView />
            <WorkWeekView numberOfDays={7} />
            <WeekView />
            <MonthView />
        </KendoScheduler>
    );
};

Scheduler.displayName = 'Scheduler';
Scheduler.propTypes = {
    data: PropTypes.array
};

Sample Apps

Telerik UI for Angular and Telerik UI for React have more than 110 components available. Here is a sample application called Coffee Warehouse, written in Angular and React. The result is very similar in both languages.

Telerik UI for Angular	Telerik UI for React

https://github.com/telerik/kendo-angular/tree/master	https://github.com/telerik/kendo-react/tree/master

Before deciding, call your team to visit the GitHub of these samples above and take a tour.

Who did what, and who is using it?

Angular was built and is supported by Google.

React was built and supported by Facebook.

Here are some references for you to consider.

Google uses Angular,

Microsoft,

IBM,

BMW,

Forbes,

Samsung,

Udemy,

Snapchat, and others.

Facebook uses React,

Instagram,

Tesla,

Airbnb,

Netflix,

Walmart, and others.

From this perspective, both frameworks have big companies supporting and using them.

Peopleware

If the element Script (JavaScript/TypeScript) does not define your project, here is the differential for your solution's success.

Is your front-end team skilled in JavaScript or TypeScript?

If you hire developers, is it possible that you will find more professionals skilled in Angular?

In my experience, the quality of the developers can make your project soar, and the team, along with the training available in your Telerik account, can be unbeatable.

The human factor is the most significant aspect of any enterprise. With the authors' support, choosing between Telerik UI for Angular and Telerik UI for React is the path to success.

UX*

UX extends much beyond the experience with software and application management. The consumer may grumble about the product or have a fantastic experience and discuss it with friends in a relaxing setting, such as a bar, expressing their happiness and enthusiasm for your product.

Q&A

How do the Angular and React frameworks compare performance and scalability?

Angular and React are popular frameworks for building scalable, high-performance web applications. However, their approaches to performance and scalability differ.

Angular is a full-fledged framework that provides a complete solution for developing web applications. It has built-in features for optimizing performance, such as change detection and ahead-of-time (AOT) compilation. However, due to its complexity, it may require more resources and can have a steeper learning curve.

React, on the other hand, is a lightweight library focused on building user interfaces. It is known for its virtual DOM, which can improve performance by minimizing the number of updates to the actual DOM. React is also highly modular and can be combined with other libraries to build scalable applications. However, it may require more setup and configuration to achieve optimal performance.

Ultimately, the performance and scalability of an application built with either framework will depend on various factors, including the architecture, code quality, and optimization techniques.

What are the specific advantages and disadvantages of using Telerik UI for Angular and Telerik UI for React?

These are the main differences we can list here:

Technical differences: Angular is based on TypeScript, while React is based on JavaScript. Depending on the project's requirements, one framework may be more suitable.
Performance and scalability: Angular has built-in features for optimizing performance, while React is known for its virtual DOM, which can improve performance. The performance and scalability of an application built with either framework will depend on various factors, including the architecture, code quality, and optimization techniques.
Development style: Angular provides a more structured code design and routing, while React is more accessible for creating and working with components.
Learning curve: Due to its complexity, Angular may have a steeper learning curve, while React may require more setup and configuration to achieve optimal performance.
Telerik UI: There are specific advantages and disadvantages to using Telerik UI for Angular and Telerik UI for React.
Team expertise: The development team's expertise in JavaScript or TypeScript may also factor in deciding which framework to use.

Telerik UI for Angular

Advantages

Provides a complete solution for developing web applications with Angular.
Offers a wide range of customizable components that are easy to integrate into Angular applications.
It has built-in features for optimizing performance, such as change detection and ahead-of-time (AOT) compilation.

Disadvantages

There may be a steeper learning curve due to the complexity of the Angular framework.
It may require more resources to develop and maintain applications.

Telerik UI for React

Advantages

It offers a wide range of customizable components easily integrated into React applications.
Lightweight and modular, allowing for more flexibility in development.
It can improve performance by minimizing the number of updates to the actual DOM through virtual DOM.

Disadvantages

It may require more setup and configuration to achieve optimal performance.
It does not provide a complete solution for developing web applications like Angular and may require additional libraries.

Conclusion

I have provided you with my point of view, and it is up to you and your team to choose the best development option.

Please feel free to discuss it with me about it on LinkedIn.