Angular vs Svelte - что лучше?

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
  user: User;
  
  constructor(private userService: UserService) {}
  
  ngOnInit() {
    this.userService.getUser().subscribe(data => this.user = data);
  }
}

// One-way binding
<img [src]="user.avatarUrl">
 
// Two-way binding
<input [(ngModel)]="user.name">

# Сравнение метрик производительности (меньше = лучше)
| Метрика                  | Angular | Svelte |
|--------------------------|---------|--------|
| Размер бандла (gzip, KB) | 267     | 83     |
| TTI (среднее моб.устр.)  | 3.8s    | 1.2s   |
| Память (пиковая)         | 8.2MB   | 3.1MB  |
| Перерисовка 1000 элем.   | 89ms    | 31ms   |

// TypeScript в Svelte
<script lang="ts">
  import type { User } from './types';
  
  export let user: User;
  export let onUpdate: (user: User) => void;
  
  function handleSubmit(): void {
    onUpdate(user);
  }
</script>

// Пример теста Angular-компонента
describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture<UserComponent>;
  let userService: jasmine.SpyObj<UserService>;
 
  beforeEach(async () => {
    const spy = jasmine.createSpyObj('UserService', ['getUser']);
    
    await TestBed.configureTestingModule({
      declarations: [ UserComponent ],
      providers: [
        { provide: UserService, useValue: spy }
      ]
    }).compileComponents();
    
    userService = TestBed.inject(UserService) as jasmine.SpyObj<UserService>;
  });
 
  it('should display user name', () => {
    userService.getUser.and.returnValue(of({name: 'Иван'}));
    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    
    const element = fixture.nativeElement;
    expect(element.querySelector('.user-name').textContent).toContain('Иван');
  });
});

// Типичный код на Angular, который вызовет нервный тик у новичка
@Component({
  selector: 'app-user-list',
  template: `
    <div *ngIf="users$ | async as users; else loading">
      <div *ngFor="let user of users">{{ user.name }}</div>
    </div>
    <ng-template #loading>Loading...</ng-template>
  `
})
export class UserListComponent implements OnInit {
  users$: Observable<User[]>;
  
  constructor(private userService: UserService) {}
  
  ngOnInit() {
    this.users$ = this.userService.getUsers().pipe(
      catchError(error => {
        console.error('Failed to load users', error);
        return of([]);
      })
    );
  }
}

// user-form.component.ts
@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;
 
  constructor(private fb: FormBuilder) {}
 
  ngOnInit() {
    this.userForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }
 
  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
}

// task.service.ts
@Injectable({
  providedIn: 'root'
})
export class TaskService {
  constructor(private http: HttpClient) {}
  
  getTasks(): Observable<Task[]> {
    return this.http.get<Task[]>('/api/tasks');
  }
  
  addTask(task: Task): Observable<Task> {
    return this.http.post<Task>('/api/tasks', task);
  }
}
 
// task-list.component.ts
@Component({
  selector: 'app-task-list',
  template: `
    <div>
      <h2>Задачи</h2>
      <ul>
        <li *ngFor="let task of tasks$ | async">
          {{ task.title }}
        </li>
      </ul>
      <form [formGroup]="taskForm" (ngSubmit)="addTask()">
        <input formControlName="title">
        <button type="submit">Добавить</button>
      </form>
    </div>
  `
})
export class TaskListComponent implements OnInit {
  tasks$: Observable<Task[]>;
  taskForm: FormGroup;
  
  constructor(
    private taskService: TaskService,
    private fb: FormBuilder
  ) {}
  
  ngOnInit() {
    this.taskForm = this.fb.group({
      title: ['', Validators.required]
    });
    
    this.tasks$ = this.taskService.getTasks();
  }
  
  addTask() {
    if (this.taskForm.valid) {
      const newTask = { title: this.taskForm.value.title };
      this.taskService.addTask(newTask).subscribe(() => {
        this.tasks$ = this.taskService.getTasks(); // Перезагружаем список
        this.taskForm.reset();
      });
    }
  }
}

// actions.ts
export const loadTasks = createAction('[Task] Load');
export const loadTasksSuccess = createAction('[Task] Load Success', props<{ tasks: Task[] }>());
export const addTask = createAction('[Task] Add', props<{ task: Task }>());
 
// reducer.ts
export const initialState: TaskState = {
  tasks: [],
  loading: false
};
 
export const taskReducer = createReducer(
  initialState,
  on(loadTasks, state => ({ ...state, loading: true })),
  on(loadTasksSuccess, (state, { tasks }) => ({ ...state, tasks, loading: false })),
  on(addTask, (state, { task }) => ({ ...state, tasks: [...state.tasks, task] }))
);
 
// effects.ts
@Injectable()
export class TaskEffects {
  loadTasks$ = createEffect(() => this.actions$.pipe(
    ofType(loadTasks),
    switchMap(() => this.taskService.getTasks().pipe(
      map(tasks => loadTasksSuccess({ tasks })),
      catchError(() => EMPTY)
    ))
  ));
 
  constructor(
    private actions$: Actions,
    private taskService: TaskService
  ) {}
}

// Angular routing
const routes: Routes = [
  { path: 'tasks', component: TaskListComponent },
  { path: 'tasks/:id', component: TaskDetailComponent },
  { path: '', redirectTo: '/tasks', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// ParentComponent
@Component({
  template: `
    <app-child [data]="parentData" (updateData)="handleUpdate($event)"></app-child>
  `
})
export class ParentComponent {
  parentData = { value: 'initial' };
  
  handleUpdate(newValue) {
    this.parentData.value = newValue;
  }
}
 
// ChildComponent
@Component({
  selector: 'app-child'
})
export class ChildComponent {
  @Input() data: any;
  @Output() updateData = new EventEmitter<string>();
  
  changeValue() {
    this.updateData.emit('updated');
  }
}