Angular 6 VS ReactJs Co.

Components

Angular: TypeScript class decorated with @Component metadata to identify as component. Has a life cycle, constructor, and can have a dedicated style file, a template file, animations, and can be atomic or container. Template syntax is HTML + Angular Directives syntax. Can have data binding one/two way.

Good separation between logic, markup, styles

Close to web components, uses shadow DOM

Supports the awesome async pipe (check this out)

ReactJs: A JSX file, a syntax extension for Javascript, which has both markup and logic inside, with lifecycle methods, and props for data binding.

Can use JS inside the markup

All in one, styles, logic, html

At scale complex and fussy structure, no separation of concerns, propTypes, connectors, import of CSS in JS,

On the left and Angular component, on the right a ReactJs component

Modules

Angular: Introduces NgModules, couplers, that have components, own routing, are independent from main module, can be reused and shared. Useful for organising the architecture of your app. Similar to the concept of Builder design pattern, where you want to isolate and hide complex implementation for building the whole application.

ReactJs: Does not have the concept of modules (not to be confused with JS modules), the most close are the container component.

HTTP Client

Angular: HttpClient Angular Module. Supports custom headers, request type, automatically parses JSON, can be streamed, piped, debounced, retry, response can be typed, returns an Observable, can be intercept (request and response), chain-able, and transformed, has caching strategies and events. Powerful and fits any type of needs.

ReactJS: A lot of community libraries. Here is where in my opinion React starts lacking. There are a lot of libraries like Fetch, Redux-Saga, Redux-Thunk, Axios, Request. The paradox of choice, not easy to change one from the other (unless we have a good abstraction and interfaced architecture). A lot of boilerplate just for making a single Http Request, and some libraries work better with another library .

Routing & Navigation

Angular: Angular Router Module. Easy to configure, supports wild chars, nesting, route guards, http request resolvers, lazy loading, can be called runtime from code as well used as link and most important supports multiple outlets (where to render the content served by the router). Can load single components as well as modules. The routing has a state, which can be stored, and can be observed, parameters can be passed and read in different formats, and supports events (Navigation/Start/End/Cancel/Error).

ReactJs: The most used library for ReactJs is React-Router. Configuration very to Angular Router. Can be called runtime, from link, the rendering happens where the <Route> element is placed. Lazy loading does not come easily, needs dynamic imports and webpack plugins integrations. Route guards and events are missing. To mention also Redux-First-Route, which sync the state…

Angular And React routing config examples

State management

Angular: NGRX performant observable based state management library. Supports state composition, combine selectors, subscription to state change and side effects, all in 1. Can be injected (similar to connect) directly in the component or used through a service.

ReactJs: Redux is the most famous library for state management. Based on actions and reducers, need to be connected manually with connect in every component that needs state (the equivalent of DI). Reselect library is used for the selectors

Dependency Injection

Angular comes with DI pattern, powerful, helps to write testable and maintainable code, encapsulation, hides object creation and separate responsibilities. In a single word : clean.

ReactJs does not come with such pattern, most of time is not possible neither using singletons. Props are used to inject data to other components. This leads (in my opinion) to confusion, allowing the developers the “freedom” to create objects everywhere and replicate code, causing code structure to rot easily unless you really disciplined.

Animations

Angular: Angular Animation module, which allows to animate almost everything with just code directives(using the component meta tag animation attribute), with great flexibility, abstracting all the boilerplate of css and web animations. Easy to combine animations, monitor states, events, keyframes all abstracted to make it easy to use.

Can be stored in separate files and reuse.

Learning curve is high

Possible to integrate with custom CSS animations

ReactJs: ReactTransitionGroup, allow basic transitions, css based. Not easy to combine programatically.

Server Side Rendering

Angular: Angular provides platform-server and with minimal changes to the entry point root module, you can run your angular app on a node server. Full guided provided in the Angular page. Unique condition is not to use direct DOM access in your app.

ReactJs: Needs extra packages integrations like react-universal-component, and carefully chose the http client library (ex. isomorphic-fetch), that should be supported by node. Also the routing configuration needs changes using StaticRouter in the server entry point. The node server concept is the same as Angular one. Verbose and hard if it is not introduced from the start of the development. NextJS can be used to achieve SSR, but in my experience is better to do this manually with Universal Route and a custom node server. Although this needs a deep knowledge and understanding of webpack compile process.

Syntax and Language

Angular: Standard HTML, (S)CSS and TypeScript. TypeScript is great and helps write code, by using classes, interfaces, models, improve readability of the code. HTLM and CSS are kept separated avoiding mixing with TS code. Code (again in my opinion) is nicer, and more readable.

ReactJS: CSS and JSX syntax sugar mix of HTML (but not really HTML) with Javascript. Simple and uses JS. A component is a mix of logic, view and styling.

NPM packages

Angular: All the necessary packages comes shipped with the framework, SASS support, Routing, Http Client, SSR, Animations, RxJs, Forms... The dependencies list of packages.json is really small compared to ReactJs. This is a big advantage because the packages are kept updated by Angular team, they comes in sync, and a change log is released with deprecations for future updates, they are tested over Google products, bugs are fixed faster than in community projects, and you do not have to worry about libraries incompatibilities.

ReactJs: ReactJs comes only with the view part, all the rest, like routing, http clients is up to the user to chose community projects. Most of time you have the paradox of selecting the proper library, updates are not in sync with each other and are very slow to address bug fixes, tests are just community driven, not on real enterprise products.

Packages.json on left Angular, on the right ReactJs

Tools and helpers

Angular: With Angular CLI you can start a new project literally in seconds, under the hood it sets up for you everything, wraps up and hides all the Webpack configurations and exposes just a anguar.json file for all the necessary custom configs we might need. Angular Material also helps to setup a start nice user interface with gadgets and customisable elements.

ReactJs: Community tool based, like create-react-app (now under Facebook), material design for React is available, webpacks configuration is totally manual (in my last React project I had 4 webpack configurations) and might be hard for not expert users. Although allows you to refine and trick every single step of the building system.

Code Structure and Standards

Angular: Here is where Angular wins. Comes with guidelines, but not strict to it. There is a good separation of concerns, Components, Services, Modules, Routing, component isolated styles, global styles. Typescript allows you to define proper classes, interfaces, models, type your variables and http requests/responses. You can write SOLID code like never before in the front end. You have to learn Angular once, and you can work in any team, any company without difficulties. https://angular.io/guide/styleguide

ReactJS: Totally un-opinionated and total flexibility at the same time. It has not real standards or guide lines, sometimes create friction between devs preferences, on what to choose. Unexperienced developers tends to abuse of it, putting more templates in the same component or splitting components at atom level. You can find projects where there is not a clear distinction between templates, services, styles, libraries, components (example https://github.com/react-boilerplate/react-boilerplate/tree/master/app/containers/HomePage). Powerful to make fine tuning and flexible structure.

Performance

Angular: Angular 6 has great performance in rendering with the new template engine and change detection. The compile process optimizes the code for the Browser with the AOT. The final bundle size of a hello world app is around 280kb. With the introduction of the new compile engine Ivy, the final bundle will be reduced further more. For more see Google IO 2018 on Angular https://www.youtube.com/watch?v=jnp_ny4SOQE

ReactJS: Is blasting for rendering with VDOM. Performance are great in general, better than Angular, and the final size of a hello world app is around 300kb.

Use in production

Angular: Google using it in almost all his product (example Firebase), Microsoft, Intel, Disney Studio, AWS.

ReactJS: Facebook, Netflix, Airbnb, AWS.