Skip to main content

Angular vs React

Angular vs React


Angular and React are the most used modern JavaScript frameworks out there currently. Here's a look at their features and comparing the differences

                                        

1. Performance


Angular - Competitive, optimized with change detection


Angular performs worse, especially in the case of complex and dynamic web pages. The performance of Angular apps is negatively affected by the bidirectional data-binding. Each binding is assigned a watcher to track changes and each loop continues until all the watchers and associated values are checked. Because of this, the more bindings you have, the more watchers are created, and the more cumbersome the process becomes. However, the most recent update of Angular has greatly improved its performance, and it does not lose to React anymore. Moreover, the size of an Angular application is slightly smaller than the size of a React app.


React     - Competitive, optimized with Virtual DOM.


React's performance is greatly improved with the introduction of the virtual DOM. Since all virtual DOM trees are lightweight and built on the server, the load on the browser is reduced. Furthermore, since the data-binding process is unidirectional, bindings are not assigned watchers as in the case of Angular and so no additional workload is created.


2. Both are component-based model


3. Angular supports Dependency Injection but React does not support


4. Angular is a JS Framework whereas React is a JS library.


The full-fledged framework does not need any external libraries. React is a library for UI development and needs external libraries like Redux, React Router and Helmet for State Management, Routing and interaction with API. Also need external libraries for DI, data binding, form validation.


5. Angular uses NgRx for state management whereas React uses Redux or Mobx


6. Data binding is bidirectional in Angular (data is mutable) where it's unidirectional (data is immutable) in React


7. Angular uses Change Rendering Real DOM and Change detection. React uses virtual DOM for rendering


8. Unit test tools


Angular - Jasmine( Unit test FW), Protractor(Automation test FW), Karma (Test Runner)

React     - Enzyme, Jest( Unit test FW), React-unit


9. Both have Command Line Interface to help with development. Angular has Angular CLI and react has Create React App CLI


10. Angular was developed by Google and React by Facebook

Labels:

Comments

Post a Comment

Popular posts from this blog

How to clear Visual Studio Cache

How to clear visual studio cache Many times, during development you would face situations where project references are not loaded properly or you get missing/error DLL's. This is because the Component cache gets corrupted randomly and without any warnings. The first option that needs to be done is to clear component cache and restart Visual Studio since the Cache might be holding onto previous DLL versions. Here are the steps on how to clear Visual Studio Cache, Clearing Component Cache: Close all Visual Studio Instances running in your machine. Also, make sure devenv.exe is not running in the Task Manager Delete the Component cache directory - %USERPROFILE%\AppData\Local\Microsoft\VisualStudio\1x.0\ComponentModelCache Restart Visual Studio The above steps should fix the cache issue most of the times, but some times that is not enough and you need to perform the below steps as well. Clearing User's Temp Folder: Open the temp folder in this locatio n -  %USERPROFILE%\AppData\Loc
231 comments
Read more

How to dependency inject to static class

.Net core supports dependency injection. There are many ways that you can inject services like constructor injection, action method injection, property injection. But there will be scenarios where you need to inject dependency services to static classes. For example, injecting services to extension methods. First, create a static class with a one property IServiceProvider type public void ConfigureServices(IServiceCollection services) { services.AddScoped<ILoggerEntry, LoggerEntry>(); services.AddTransient<IMongoRepository, MongoRepository>(); } Second, configure your services in ConfigureServices() method in Startup.cs and define the lifetime of the service instance using either Transient, Scoped or Singleton types. public void ConfigureServices(IServiceCollection services) { services.AddScoped<ILoggerEntry, LoggerEntry>(); services.AddTransient<IMongoRepository, MongoRepository>(); } For the next step to configure the Static class provider proper
Post a Comment
Read more

PCF Health Check Delay - Invocation timeout

In PCF we can set up the health check invocation timeout to execute X seconds after the instance has been created.  But before that, let's understand the PCF Health Check Lifecycle. Stage 1: The application is deployed to PCF Stage 2: When deploying the app, a health check type is specified and optionally a timeout. If a health check type is not specified, then the monitoring process defaults to a port health check Stage 3: Cloud Controller stages, starts, and runs the application Stage 4: Based on the type specified for the app, Cloud Controller configures a health check    that runs periodically for each app instance Stage 5: When Diego starts an app instance, the app health check runs every two seconds until a response indicates that the app instance is healthy or until the health check timeout elapses. The 2-seconds health check interval is not configurable Stage 6: When an app instance becomes healthy, its route is advertised, if applicable.                  Subsequent hea
1 comment
Read more