Angular или Svelte - что выбрать?

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent {
  count = 0;
 
  increment() {
    this.count++;
  }
 
  decrement() {
    this.count--;
  }
}

<script>
  let count = 0;
  
  function increment() {
    count += 1;
  }
  
  function decrement() {
    count -= 1;
  }
</script>
 
<button on:click={decrement}>-</button>
<span>{count}</span>
<button on:click={increment}>+</button>
 
<style>
  span { margin: 0 0.5em; }
</style>

{#if isVisible}
  <ul>
    {#each items as item, i}
      <li>{i + 1}. {item.name}</li>
    {/each}
  </ul>
  <input bind:value={searchTerm} on:keyup={event => event.key === 'Enter' && search()}>
{/if}

@Injectable({
  providedIn: 'root'
})
export class UserStateService {
  private user = new BehaviorSubject<User | null>(null);
  user$ = this.user.asObservable();
 
  updateUser(userData: User) {
    this.user.next(userData);
  }
 
  clearUser() {
    this.user.next(null);
  }
}

@Component({
  selector: 'app-profile',
  template: `
    <div *ngIf="user$ | async as user">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
    </div>
  `
})
export class ProfileComponent {
  user$ = this.userState.user$.pipe(
    filter(user => !!user),
    distinctUntilChanged()
  );
 
  constructor(private userState: UserStateService) {}
}

// Определение действия
const loginSuccess = createAction(
  '[Auth] Login Success',
  props<{ user: User }>()
);
 
// Селектор
const selectUser = createSelector(
  (state: AppState) => state.auth,
  (auth) => auth.user
);
 
// Использование в компоненте
@Component({...})
export class DashboardComponent {
  user$ = this.store.select(selectUser);
  
  constructor(private store: Store<AppState>) {}
}

<script>
  let count = 0;
  
  // Эта переменная автоматически пересчитывается при изменении count
  $: doubled = count * 2;
  
  function increment() {
    count += 1; // Это автоматически обновит UI
  }
</script>
 
<button on:click={increment}>+</button>
<p>Count: {count}, Doubled: {doubled}</p>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let name = 'World';
</script>
 
<Child {name} />
 
<!-- Child.svelte -->
<script>
  export let name; // принимаем проп
</script>
 
<p>Hello {name}!</p>

<script>
  import { user } from './store';
  
  function login() {
    $user = { id: 1, name: 'Alice' }; // префикс $ для автоподписки
  }
</script>
 
{#if $user}
  <p>Привет, {$user.name}!</p>
  <button on:click={() => $user = null}>Выйти</button>
{:else}
  <button on:click={login}>Войти</button>
{/if}

@Component({
  selector: 'reactive-counter',
  template: `
    <p>{{ counter }}</p>
    <p>Computed: {{ computedValue }}</p>
    <button (click)="increment()">+</button>
  `
})
export class ReactiveCounterComponent {
  counter = 0;
  
  get computedValue() {
    console.log('Вычисляем...');
    return this.counter * 2;
  }
  
  increment() {
    this.counter++;
  }
}

@Component({
  selector: 'optimized-counter',
  template: [INLINE]...[/INLINE],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedCounterComponent {
  @Input() data: any;
  
  constructor(private cd: ChangeDetectorRef) {}
  
  forceUpdate() {
    this.cd.markForCheck(); // явно указываем, что компонент нужно проверить
  }
}

<script>
  let count = 0;
  
  // Реактивное объявление
  $: doubled = count * 2;
  
  // Реактивный блок
  $: {
    console.log(`Счетчик: ${count}`);
    if (count > 10) {
      alert("Многовато!");
      count = 0;
    }
  }
  
  function increment() {
    count += 1;
  }
</script>
 
<p>{count}</p>
<p>Удвоено: {doubled}</p>
<button on:click={increment}>+</button>

// Через геттер (вызывается при каждой проверке изменений)
get fullName() {
  return `${this.firstName} ${this.lastName}`;
}
 
// Через RxJS
fullName$ = combineLatest([this.firstName$, this.lastName$]).pipe(
  map(([first, last]) => `${first} ${last}`)
);

<script>
  let firstName = 'John';
  let lastName = 'Doe';
  
  $: fullName = `${firstName} ${lastName}`;
  
  // Можно использовать сложную логику
  $: {
    if (fullName.length > 20) {
      console.warn('Длинное имя!');
    }
  }
</script>

// Это минимальная подготовка для Angular-приложения
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
@Component({
  selector: 'hello-world',
  template: '<h1>Привет, мир!</h1>'
})
class HelloWorldComponent {}
 
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ HelloWorldComponent ],
  bootstrap: [ HelloWorldComponent ]
})
class HelloWorldModule {}
 
platformBrowserDynamic().bootstrapModule(HelloWorldModule);

<!-- App.svelte -->
<h1>Привет, мир!</h1>

// Строгая типизация в Angular
interface User {
  id: number;
  name: string;
  email: string;
  preferences?: {
    theme: 'light' | 'dark';
    notifications: boolean;
  };
}
 
@Component({...})
export class UserProfileComponent {
  @Input() user!: User; // строгий тип для входных данных
  
  updateEmail(newEmail: string): void {
    // TypeScript проверит соответствие типов
    this.user.email = newEmail;
  }
}

<script lang="ts">
  // Включение TypeScript в компоненте Svelte
  export let user: {
    id: number;
    name: string;
    email: string;
    preferences?: {
      theme: 'light' | 'dark';
      notifications: boolean;
    };
  };
  
  function updateEmail(newEmail: string): void {
    user.email = newEmail;
  }
</script>
 
<input type="email" value={user.email} on:change={e => updateEmail(e.target.value)} />

// Angular с включенной строгой проверкой шаблонов
// Это вызовет ошибку компиляции, если user может быть undefined
<div>{{ user.name }}</div>
 
// Корректный подход
<div *ngIf="user">{{ user.name }}</div>

@NgModule({
  imports: [
    CommonModule,
    UserSharedModule,
    RouterModule.forChild(userRoutes)
  ],
  declarations: [
    UserDashboardComponent,
    UserSettingsComponent
  ],
  providers: [UserStateService]
})
export class UserModule { }

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canActivate: [AdminGuard]
  }
];

// todo.component.ts
import { Component, OnInit } from '@angular/core';
 
interface Task {
  id: number;
  title: string;
  completed: boolean;
}
 
@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {
  tasks: Task[] = [];
  newTaskTitle = '';
  filter: 'all' | 'active' | 'completed' = 'all';
  
  constructor() {}
  
  ngOnInit(): void {
    // Инициализация данных
    this.tasks = [
      { id: 1, title: 'Изучить Angular', completed: false },
      { id: 2, title: 'Создать компонент', completed: true }
    ];
  }
  
  addTask(): void {
    if (!this.newTaskTitle.trim()) return;
    
    const newTask: Task = {
      id: Date.now(),
      title: this.newTaskTitle,
      completed: false
    };
    
    this.tasks = [...this.tasks, newTask];
    this.newTaskTitle = '';
  }
  
  toggleTask(task: Task): void {
    this.tasks = this.tasks.map(t => 
      t.id === task.id ? { ...t, completed: !t.completed } : t
    );
  }
  
  deleteTask(taskId: number): void {
    this.tasks = this.tasks.filter(t => t.id !== taskId);
  }
  
  get filteredTasks(): Task[] {
    if (this.filter === 'active') {
      return this.tasks.filter(task => !task.completed);
    } else if (this.filter === 'completed') {
      return this.tasks.filter(task => task.completed);
    }
    return this.tasks;
  }
}

<!-- Todo.svelte -->
<script>
  let tasks = [
    { id: 1, title: 'Изучить Svelte', completed: false },
    { id: 2, title: 'Создать компонент', completed: true }
  ];
  let newTaskTitle = '';
  let filter = 'all';
  
  function addTask() {
    if (!newTaskTitle.trim()) return;
    
    const newTask = {
      id: Date.now(),
      title: newTaskTitle,
      completed: false
    };
    
    tasks = [...tasks, newTask];
    newTaskTitle = '';
  }
  
  function toggleTask(taskId) {
    tasks = tasks.map(task => 
      task.id === taskId 
        ? { ...task, completed: !task.completed } 
        : task
    );
  }
  
  function deleteTask(taskId) {
    tasks = tasks.filter(task => task.id !== taskId);
  }
  
  $: filteredTasks = filter === 'active' 
    ? tasks.filter(t => !t.completed) 
    : filter === 'completed' 
      ? tasks.filter(t => t.completed) 
      : tasks;
</script>
 
<div class="todo-container">
  <h1>Мои задачи</h1>
 
  <div class="input-group">
    <input 
      type="text" 
      bind:value={newTaskTitle} 
      on:keypress={e => e.key === 'Enter' && addTask()}
      placeholder="Добавить задачу..."
    />
    <button on:click={addTask}>Добавить</button>
  </div>
 
  <div class="filters">
    <button class:active={filter === 'all'} on:click={() => filter = 'all'}>Все</button>
    <button class:active={filter === 'active'} on:click={() => filter = 'active'}>Активные</button>
    <button class:active={filter === 'completed'} on:click={() => filter = 'completed'}>Выполненные</button>
  </div>
 
  <ul class="task-list">
    {#each filteredTasks as task (task.id)}
      <li class:completed={task.completed}>
        <input 
          type="checkbox" 
          checked={task.completed} 
          on:change={() => toggleTask(task.id)}
        />
        <span>{task.title}</span>
        <button class="delete-btn" on:click={() => deleteTask(task.id)}>×</button>
      </li>
    {:else}
      <p>Нет задач для отображения</p>
    {/each}
  </ul>
</div>
 
<style>
  .todo-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .input-group {
    display: flex;
    margin-bottom: 20px;
  }
  
  .input-group input {
    flex: 1;
    padding: 8px;
  }
  
  .filters {
    margin-bottom: 15px;
  }
  
  .filters button {
    margin-right: 5px;
    padding: 5px 10px;
  }
  
  button.active {
    background-color: #007bff;
    color: white;
  }
  
  .task-list {
    list-style: none;
    padding: 0;
  }
  
  .task-list li {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .task-list li.completed span {
    text-decoration: line-through;
    color: #888;
  }
  
  .delete-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 18px;
    cursor: pointer;
  }
</style>

// Angular - измененная версия
toggleTask(task: Task): void {
  const index = this.tasks.findIndex(t => t.id === task.id);
  this.tasks[index].completed = !this.tasks[index].completed;
}

// Svelte - это не сработает для обновления UI!
function toggleTask(taskId) {
  const task = tasks.find(t => t.id === taskId);
  task.completed = !task.completed;
}
 
// Правильный подход в Svelte
function toggleTask(taskId) {
  tasks = tasks.map(task => 
    task.id === taskId 
      ? { ...task, completed: !task.completed } 
      : task
  );
}

{#each filteredTasks as task (task.id)}
  <!-- Элементы списка -->
{:else}
  <p>Нет задач для отображения</p>
{/each}

// Расширенный компонент Angular
export class TodoComponent implements OnInit {
  // ... существующий код ...
  
  editingTask: Task | null = null;
  editText = '';
  
  ngOnInit(): void {
    // Загрузка задач из localStorage
    const savedTasks = localStorage.getItem('angular-tasks');
    if (savedTasks) {
      this.tasks = JSON.parse(savedTasks);
    } else {
      this.tasks = [
        { id: 1, title: 'Изучить Angular', completed: false },
        { id: 2, title: 'Создать компонент', completed: true }
      ];
    }
  }
  
  // Сохранение при каждом изменении
  private saveToStorage(): void {
    localStorage.setItem('angular-tasks', JSON.stringify(this.tasks));
  }
  
  addTask(): void {
    // ... существующий код ...
    this.saveToStorage();
  }
  
  toggleTask(task: Task): void {
    // ... существующий код ...
    this.saveToStorage();
  }
  
  deleteTask(taskId: number): void {
    // ... существующий код ...
    this.saveToStorage();
  }
  
  startEditing(task: Task): void {
    this.editingTask = task;
    this.editText = task.title;
  }
  
  saveEdit(): void {
    if (!this.editingTask || !this.editText.trim()) return;
    
    this.tasks = this.tasks.map(t => 
      t.id === this.editingTask?.id 
        ? { ...t, title: this.editText } 
        : t
    );
    
    this.editingTask = null;
    this.saveToStorage();
  }
  
  cancelEdit(): void {
    this.editingTask = null;
  }
}

<script>
  import { onMount } from 'svelte';
  
  let tasks = [];
  let newTaskTitle = '';
  let filter = 'all';
  let editingTaskId = null;
  let editText = '';
  
  // Загрузка при инициализации
  onMount(() => {
    const savedTasks = localStorage.getItem('svelte-tasks');
    if (savedTasks) {
      tasks = JSON.parse(savedTasks);
    } else {
      tasks = [
        { id: 1, title: 'Изучить Svelte', completed: false },
        { id: 2, title: 'Создать компонент', completed: true }
      ];
    }
  });
  
  // Автоматическое сохранение при изменении задач
  $: {
    if (tasks.length > 0) { // Проверка для предотвращения сохранения до инициализации
      localStorage.setItem('svelte-tasks', JSON.stringify(tasks));
    }
  }
  
  function addTask() {
    // ... существующий код ...
  }
  
  function toggleTask(taskId) {
    // ... существующий код ...
  }
  
  function deleteTask(taskId) {
    // ... существующий код ...
  }
  
  function startEditing(task) {
    editingTaskId = task.id;
    editText = task.title;
    // В реальном приложении здесь стоило бы добавить 
    // фокусировку на поле ввода после рендеринга
  }
  
  function saveEdit() {
    if (!editText.trim()) return;
    
    tasks = tasks.map(task => 
      task.id === editingTaskId 
        ? { ...task, title: editText } 
        : task
    );
    
    editingTaskId = null;
  }
  
  function cancelEdit() {
    editingTaskId = null;
  }
  
  $: filteredTasks = /* ... существующий код ... */;
</script>
 
<!-- Обновленный шаблон Svelte -->
<ul class="task-list">
  {#each filteredTasks as task (task.id)}
    <li class:completed={task.completed}>
      <input 
        type="checkbox" 
        checked={task.completed} 
        on:change={() => toggleTask(task.id)}
      />
      
      {#if editingTaskId !== task.id}
        <span on:dblclick={() => startEditing(task)}>
          {task.title}
        </span>
      {:else}
        <div class="edit-container">
          <input 
            type="text" 
            bind:value={editText}
            on:blur={saveEdit}
            on:keydown={e => {
              if (e.key === 'Enter') saveEdit();
              else if (e.key === 'Escape') cancelEdit();
            }}
          />
        </div>
      {/if}
      
      <button class="delete-btn" on:click={() => deleteTask(task.id)}>×</button>
    </li>
  {:else}
    <p>Нет задач для отображения</p>
  {/each}
</ul>

$: {
  if (tasks.length > 0) {
    localStorage.setItem('svelte-tasks', JSON.stringify(tasks));
  }
}

// Angular-сервис для работы с API
@Injectable({
providedIn: 'root'
})
export class UsersService {
private apiUrl = 'https://api.example.com/users';
private usersSubject = new BehaviorSubject<User[]>([]);
users$ = this.usersSubject.asObservable();
 
constructor(private http: HttpClient) {}
 
getUsers(filter?: string): Observable<User[]> {
  let params = new HttpParams();
  if (filter) {
    params = params.set('filter', filter);
  }
  
  return this.http.get<User[]>(this.apiUrl, { params }).pipe(
    tap(users => this.usersSubject.next(users)),
    catchError(error => {
      console.error('Ошибка при загрузке пользователей', error);
      return throwError(() => new Error('Не удалось загрузить пользователей'));
    })
  );
}
}

@Component({/*...*/})
export class UsersComponent implements OnInit, OnDestroy {
users$ = this.usersService.users$;
loading = false;
error: string | null = null;
private destroy$ = new Subject<void>();
 
constructor(private usersService: UsersService) {}
 
ngOnInit(): void {
  this.loadUsers();
}
 
loadUsers(filter?: string): void {
  this.loading = true;
  this.error = null;
  
  this.usersService.getUsers(filter).pipe(
    finalize(() => this.loading = false),
    takeUntil(this.destroy$)
  ).subscribe({
    next: () => {}, // Данные уже обновлены через BehaviorSubject
    error: err => this.error = err.message
  });
}
 
ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}
}

<script>
import { onMount } from 'svelte';
 
let users = [];
let loading = false;
let error = null;
 
async function loadUsers(filter = '') {
  loading = true;
  error = null;
  
  try {
    const params = filter ? `?filter=${encodeURIComponent(filter)}` : '';
    const response = await fetch(`https://api.example.com/users${params}`);
    
    if (!response.ok) {
      throw new Error('Сервер вернул ошибку');
    }
    
    users = await response.json();
  } catch (err) {
    console.error('Ошибка при загрузке пользователей', err);
    error = 'Не удалось загрузить пользователей';
  } finally {
    loading = false;
  }
}
 
onMount(() => {
  loadUsers();
});
</script>
 
{#if loading}
  <div class="loading-spinner">Загрузка...</div>
{:else if error}
  <div class="error-message">{error}</div>
{:else}
  <ul class="users-list">
    {#each users as user (user.id)}
      <li>{user.name}</li>
    {:else}
      <li>Пользователи не найдены</li>
    {/each}
  </ul>
{/if}
 
<button on:click={() => loadUsers()}>Обновить</button>

{#await loadUsers()}
  <p>Загрузка...</p>
{:then loadedUsers}
  <ul>
    {#each loadedUsers as user}
      <li>{user.name}</li>
    {/each}
  </ul>
{:catch error}
  <p>Ошибка: {error.message}</p>
{/await}