React and other libraries - rs-hash/Senior GitHub Wiki

1. Angular vs React

Angular is a full-fledged model-view-controller (MVC) framework
provides builtin feature out of the box
we don't have to make lot of decisions
easy to create large applications with a lot of components.
Framework - more structured, safer, it has opinions
For someone who's worked with OOP backend and things like AJAX/JQuery for frontend, Angular feels much more intuitive than React
It has classes, interfaces, services, dependency injection, directives, modules, decorators, pipes -
change detection, zones, ahead-of-time compilation,Rx.js
do no evil - won't end up bad
developer chooses everything in react - routing, state management, translation - but it comes in the box with angular framework
major updates every 6 months

choose based on

React uses a Virtual DOM (Document Object Model) to improve performance and optimize rendering in web applications. The Virtual DOM is an in-memory representation of the actual DOM elements, maintained by React.
When changes are made to the application state, React compares the current Virtual DOM with the previous one to identify the minimal set of changes needed to update the actual DOM. This process, known as reconciliation, reduces the number of DOM manipulations and improves rendering efficiency.

Angular does not use a Virtual DOM like React. Instead, Angular employs a different mechanism called change detection. Angular's change detection system tracks changes in component properties and templates to update the DOM accordingly.
Angular's change detection works by detecting changes in component state, input properties, and events. It triggers re-rendering of components and updates the DOM elements affected by these changes.

Angular supports two-way data binding, where changes to the model (data) in the component are automatically reflected in the view (UI), and vice versa. This bidirectional binding simplifies data synchronization between the model and the UI elements.
React, on the other hand, primarily uses one-way data flow. Data flows from parent components to child components through props, and changes to data are propagated downwards through the component hierarchy. To achieve two-way data binding in React, developers often use libraries like Redux or React Hooks for state management.

React's Virtual DOM and efficient reconciliation algorithm contribute to its good performance by minimizing DOM manipulations and rendering only the necessary updates.
Angular's performance relies on its change detection mechanism. Angular's change detection strategy is optimized for most scenarios, but developers need to be cautious with complex data bindings and frequent changes that can impact performance. Angular provides tools like OnPush change detection strategy to optimize performance further.

React uses various state management approaches, including local component state, context API for global state, and libraries like Redux or MobX for complex state management across components.
Angular has its built-in state management solutions, such as services, RxJS observables, and Angular's state management library called NgRx for managing application state in a reactive and scalable manner.

React is known for its simplicity, performance optimizations with Virtual DOM, and flexibility in choosing state management solutions. It's preferred for building interactive UIs and single-page applications (SPAs) where performance and scalability are crucial.
Angular provides a comprehensive framework with built-in features like two-way data binding, dependency injection, and a structured architecture suitable for large-scale enterprise applications. It offers a more opinionated approach compared to React, which can be beneficial for teams seeking a standardized development environment.

Next.js is a React based framework for server side rendered apps, static site generation

server takes the load of executing JS on the server
executing the code in the server before sent to the client
the server executes the JS code, pre renders the content and sends the pre rendered HTML file
it's faster because browser doesn't have to download large js code and execute it

only when we use input fields, buttons,- need events, states, effects we need to use client components

To build a TODO APP

developed by meta
Javascript library, popular, large community support, frequent releases, stable updates
create-react-app ( CLI ), vite , gatsby
tree of components, uses webpack to bundle it together
can add handlers to form and buttons, easy to understand, jsx, useEffect to handle lifecycle
It has support for routing, animation ( react-spring ), state management ( React redux )

developed by google, single Page Apps, based on typescript
opinionated about organize & structure a project, powerful CLI
builtin support for Forms, routing, accessibility, internationalization, animation, state management, server side rendering, angular material
more predictable but less flexible
need to use Typescript
Components, Templates, directives(*ngFor), dependency injection. directives, decorators, two way data binding ( ngModel )
Dependency injection refers to the pattern Angular uses to create and deliver services or objects that a class needs to perform a specific function.
Angular facilitates the interaction between dependency consumers and dependency providers using an abstraction called Injector. When a dependency is requested, the injector checks its registry to see if there is an instance already available there. If not, a new instance is created and stored in the registry.
Directives are classes that add additional behavior to elements in your Angular applications. Use Angular's built-in directives to manage forms, lists, styles, and what users see.
higher learning curve
good for enterprise level application

React, Vue.js, Angular: These frameworks/libraries provide structured ways to build interactive user interfaces and manage state efficiently.
Next.js, Nuxt.js: Frameworks built on top of React and Vue.js respectively, offering server-side rendering (SSR), static site generation (SSG), and other performance optimizations.
Redux, Vuex, NgRx: State management libraries for managing complex application states, such as user sessions, shopping carts, and UI states.