Angular Signals + RxJS: объединяем два реактивных мира в одном стейт-менеджере

Angular долгое время ассоциировался с RxJS. Даже слишком: многие разработчики ощущали, что без Observable ничего не работает. Но вот в Angular 17 появляются Signals — синхронная реактивность прямо из коробки. В 17+ — они становятся мейнстримом. Возникает вопрос: а что делать с RxJS? Выбрасывать?

Signals и RxJS — не конкуренты, а два мощных инструмента для решения разных задач. И если их правильно сочетать, можно построить удобную, масштабируемую и эффективную архитектуру

В этой статье мы:
- Разберёмся в различиях между Signals и RxJS
- Покажем, когда использовать что
- Сделаем свой собственный state-manager с красивым API
- И покажем, как всё это выглядит в реальном Angular-приложении

👉 @frontendInterview

Хотите научиться создавать интерактивные элементы на сайте, используя только чистый JavaScript?

У вас есть базовые знания HTML и CSS, но вы не уверены, как «оживить» сайт с помощью JavaScript?

На открытом уроке 26 августа в 20:00 МСК мы разберём, как использовать JavaScript для работы с DOM, создавать динамичные элементы и анимации, и всё это без фреймворков! На вебинаре мы создадим мини-проект — интерактивную карточку, которая будет реагировать на действия пользователя.

❗️ Изучив основы работы с JavaScript и DOM, вы сможете самостоятельно управлять интерактивными элементами на сайте. Получите полезные навыки, которые сразу сможете применить на практике и добавить в портфолио.

👉 Запишитесь на открытый урок → https://gclnk.com/PS1ylUFa

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
erid 2SDnjf3k1wt

Вписался как родной

👉 @frontendInterview

Что такое mutations и actions в vuex?

Который является официальной библиотекой для управления состоянием в приложениях Vue.js, mutations (мутации) и actions (действия) играют ключевые роли в управлении состоянием. Они помогают обеспечивать предсказуемость изменения состояния и организовывают логику приложения.

Mutations (Мутации)
Это единственный способ изменить состояние в Vuex. Каждая мутация имеет тип и обработчик. Обработчик мутации получает состояние как первый аргумент, и дополнительный аргумент в качестве полезной нагрузки (payload), который можно использовать для передачи данных в мутацию. Мутации должны быть синхронными, чтобы изменения состояния можно было легко отслеживать. Это помогает делать отладку и логгирование более предсказуемыми.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    incrementBy(state, payload) {
      state.count += payload.amount;
    }
  }
});

Actions (Действия)
Действия используются для выполнения асинхронных операций или сложной бизнес-логики перед вызовом мутаций. Действия могут содержать произвольную асинхронную логику, такие как API-запросы, и затем вызывать мутации для изменения состояния. Действия вызываются с помощью метода dispatch и могут возвращать промисы, что полезно для обработки цепочек асинхронных операций.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
    incrementByAsync({ commit }, payload) {
      setTimeout(() => {
        commit('incrementBy', payload);
      }, 1000);
    }
  }
});

Взаимодействие между Mutations и Actions:

Mutations
Синхронно изменяют состояние.
Actions
Могут быть асинхронными и обычно вызывают мутации для изменения состояния.

Пример взаимодействия

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    fetchMessage({ commit }) {
      setTimeout(() => {
        const message = 'Hello from async action!';
        commit('setMessage', message);
      }, 2000);
    }
  }
});

Компонент

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="loadMessage">Load Message</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['fetchMessage']),
    loadMessage() {
      this.fetchMessage();
    }
  }
};
</script>

👉 @frontendInterview

Web Design in easy steps, 7th Edition (2023)

Эта книга раскрывает ключевые принципы хорошего веб-дизайна, который представляет собой искусство и науку создания эффективных и привлекательных веб-сайтов. Книга познакомит вас с ключевыми технологиями веб-дизайна и принципами проектирования, лежащими в основе успешных сайтов.

👉 @frontendInterview

Break camelCase

Завершите решение так, чтобы функция разбивала camelCase пробелом.

Пример:

"camelCasing"  =>  "camel Casing"
"identifier"   =>  "identifier"
""             =>  ""

👉 @frontendInterview

​Какие есть способы оптимизации рендеринга в react?

Это процесс снижения количества лишних перерисовок компонентов, что улучшает производительность приложения. React повторно рендерит компоненты, когда их состояние (state) или свойства (props) изменяются. Однако часто это приводит к ненужным рендерам, которые можно избежать.

Производительность
Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM.

Экономия ресурсов
Избегая лишних рендеров, приложение работает быстрее, а пользовательский интерфейс становится более отзывчивым.

Лучший UX
Плавная работа интерфейса критична для сложных приложений с большим количеством данных.

Мемоизация компонентов
React предоставляет утилиту React.memo, чтобы предотвращать ререндеринг компонента, если его props не изменились.

import React from 'react';

const MyComponent = React.memo(({ count }) => {
  console.log('Рендер компонента');
  return <div>Счётчик: {count}</div>;
});

// Использование
export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <MyComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Использование `useMemo` и `useCallback`
Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ number }) {
  const calculatedValue = useMemo(() => {
    console.log('Выполняются сложные вычисления...');
    return number ** 2;
  }, [number]); // Пересчитывается только если `number` изменился

  return <div>Результат: {calculatedValue}</div>;
}

Пример useCallback

import React, { useCallback, useState } from 'react';

const Child = React.memo(({ onClick }) => {
  console.log('Рендер дочернего компонента');
  return <button onClick={onClick}>Кликни меня</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Кнопка нажата');
  }, []); // Создаётся одна и та же функция между рендерами

  return (
    <div>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Увеличить {count}</button>
    </div>
  );
}

Разделение кода и ленивый рендеринг
Использование React.lazy и Suspense позволяет загружать компоненты только тогда, когда они необходимы.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Проверка зависимости в `useEffect`
Избегайте запуска побочных эффектов, если зависимости не изменились.

React.useEffect(() => {
  console.log('Эффект сработал!');
}, [/* следите только за нужными зависимостями */]);

Избегайте анонимных функций и объектов в `props`
Передача новых объектов и функций через props вызывает лишние рендеры.

<ChildComponent data={{ key: 'value' }} />

Лучше так

const data = { key: 'value' };
<ChildComponent data={data} />;

Разделение больших компонентов
Если компонент слишком сложный, разделите его на более мелкие, чтобы React мог эффективно управлять состоянием и перерисовкой.

Использование ключей при рендере списков
Каждый элемент списка должен иметь уникальный ключ, чтобы React мог правильно отслеживать изменения.

{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

👉 @frontendInterview

👉 @frontendInterview

​Как повернуть блок на 45 градусов?

Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.

Пример использования

.rotated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: rotate(45deg);
}

Основной синтаксис
Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).

transform: rotate(угол);   

Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotated-box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated-box"></div>
</body>
</html>

Свойство transform
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
Функция rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.

Использование в реальных проектах
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.

В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.

👉 @frontendInterview

JavaScript: массивы от А до Я для тех, кто только начал

Кажется, пришло время поговорить о массивах. Не просто поговорить, но еще и разобрать полезные примеры, которые помогут узнать о них больше. В этой статье я доступно расскажу, что такое массивы, какие у них особенности и для чего они вообще нужны. Заваривайте чай, открывайте редактор кода на своем компьютере для экспериментов — начнем разбираться!

👉 @frontendInterview

Начните карьеру в IT с профессии Frontend-разработчика

Frontend-разработчик создает визуальную часть сайтов и приложений, с которой взаимодействуют пользователи. Это востребованная профессия с отличными перспективами роста и высоким уровнем дохода.

Преимущества профессии:
— Высокий доход: от 70 000 рублей для начинающих специалистов, до 300 000 рублей для опытных разработчиков
— Широкие возможности для работы: IT-компании, банки, стриминговые сервисы, фриланс
— Гибкий график: 50% вакансий предлагают удаленный формат работы

Чем занимается Frontend-разработчик:
— Создает адаптивные интерфейсы, которые корректно отображаются на любых устройствах
— Разрабатывает интерактивные элементы: формы, кнопки, анимации
— Оптимизирует производительность сайтов и приложений
— Работает с современными технологиями: HTML, CSS, JavaScript, React, Vue.js

С чего начать обучение:
— Освоить основы HTML и CSS
— Изучить JavaScript и принципы работы с DOM
— Практиковаться на реальных проектах
— Изучить популярные фреймворки (React, Vue.js, Angular)

Получите подробную карту развития (Skill-map) для frontend-разработчика и узнайте, как построить успешную карьеру в IT.

Зарегистрируйтесь и скачайте гайд → https://clck.ru/3Nu7sK

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
erid 2SDnjdwxYn2