3 ms·
These are pretty subjective but: * Angular classes just feel a lot more verbose/messy than the equivalent functional implementation in React. * Perhaps it's j
by Jochim 3y ago
These are pretty subjective but:
* Angular classes just feel a lot more verbose/messy than the equivalent functional implementation in React.
* Perhaps it's just familiarity but I have a much easier time understanding what a functional React component is doing just by reading it from top to bottom.
* I have an irrational hatred for separate html template files.
* I'm also not a fan of templating via custom html attributes.
* Two way data binding is sometimes convenient but feels messy.
Pulling a random hello world comparison that starts from a base template from google:
React: 16 lines - 342 chars - 2 files changed.
Angular 34 lines - 808 characters - 3 files changed, 4 if following common html template practice.
React
HelloWorld.js:
import React from 'react';
function HelloWorld() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
export default HelloWorld;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.render(<HelloWorld />, document.getElementById('root'));
Angular
hello-world.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-hello-world',
template: `
<div>
<h1>Hello, World!</h1>
</div>
`,
})
export class HelloWorldComponent {}
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world.component';
@NgModule({
declarations: [AppComponent, HelloWorldComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-hello-world></app-hello-world>
`,
})
export class AppComponent {}