5 ms·

I hear this critique a lot, but what exactly is that pointless boilerplate? When I write a React application, I have to use a lot of React-flavored boilerplate

• 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 {}