RxJs для самых маленьких

В этой статье мы подробно рассмотрим такую библиотеку как RxJs. Разберем несколько простых примеров и поймем что такое поточность в программировании.

Ссылка

#статьи

Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

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

Ссылка

#css

await vs yield на примере Effection 3.0 и React

18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах (Structured Concurrency and Effects for JavaScript).

В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом:

- Race condition

- AbortController

- Clean up

- Debounce

Ссылка

#статьи

Оптимизация приложений на React важна для улучшения производительности и пользовательского опыта. Вот несколько ключевых принципов и техник оптимизации в React:

1. Использование React.memo
React.memo используется для предотвращения ненужных повторных рендеров функциональных компонентов, если их пропсы не изменились.

const MyComponent = React.memo(function MyComponent(props) {
  // Component logic
});

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

useMemo мемоизирует значение:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback мемоизирует функцию:

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

3. Разделение кода (Code Splitting)
Разделение кода позволяет загружать только необходимые части приложения. Это можно сделать с помощью React.lazy и Suspense.

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

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

4. Динамическая загрузка (Dynamic Import)
Позволяет загружать модули по мере необходимости, что уменьшает начальный размер бандла.

import(/* webpackChunkName: "moduleA" */ './moduleA').then(module => {
  // Использование модуля
});

5. Избегание анонимных функций и стрелочных функций в пропсах
Создание новых функций при каждом рендере может приводить к ненужным рендерингам потомков.

// Вместо этого:
<MyComponent onClick={() => doSomething()} />

// Используйте:
const handleClick = useCallback(() => doSomething(), []);
<MyComponent onClick={handleClick} />

6. Оптимизация рендеров с помощью shouldComponentUpdate и PureComponent
Для классовых компонентов можно переопределить shouldComponentUpdate или использовать PureComponent, который автоматически выполняет поверхностное сравнение пропсов и состояния.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

7. Избегание большого количества состояний и контекста
Старайтесь не создавать много состояний на уровне компонентов. Вместо этого объединяйте связанные состояния в одно, чтобы уменьшить количество рендеров.

const [state, setState] = useState({
  name: '',
  age: 0,
  address: ''
});

// Изменение состояния:
setState(prevState => ({ ...prevState, name: 'John' }));

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

9. Оптимизация загрузки изображений
Загружайте изображения асинхронно и используйте техники, такие как lazy loading для изображений, чтобы не блокировать рендеринг.

10. Использование производительных библиотек и инструментов
Используйте проверенные и оптимизированные библиотеки, такие как react-window или react-virtualized для рендеринга больших списков.

Эти принципы и техники помогут вам создать более производительные и отзывчивые приложения на React.

Решение задач Front End с интервью. Throttle

Задача на реализацию Throttling часто дается на интервью по front end разработке.

Давайте реализуем функцию throttle, которая принимает функцию callback и время ожидания. Вызов throttle() должен возвращать новую функцию, которая будет вызывать внутри себя callback функцию.

Ссылка

#js

Решение задач Front End с интервью. Promise Pool

Разбираем задачу Promise Pool (Leetcode 2636)

Дан массив асинхронных функций functions и максимальный размер пула n. Необходимо написать асинхронную функцию promisePool. Она должна возвращать Promise, который разрешается, когда разрешаются все входные функции function.

Ссылка

#js

JavaScript: структуры данных и алгоритмы. Часть 1

В этой серии статей мы будем разбирать структуры данных и алгоритмы, представленные в этом замечательном репозитории.


Сегодня мы будем говорить о самых простых и популярных структурах данных: односвязном и двусвязном списках, стеке и очереди.


Код, представленный в этой и других статьях серии, можно найти в этом репозитории.

Ссылка

#js

Как узнать количество перерисовок? React Custom Hook: useRenderCount

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов. Сегодня мы сосредоточимся на хуке useRenderCount, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

Ссылка

#react

Что такое атрибут key? Для чего он нужен?

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

Key всегда должен присваивается на верхнем уровне:

Правильно:

const howUseKey = () => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};

Неправильно (Приглядитесь к its a trap):

const howNotUseKey = () => { 
 const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div className="its a trap">
          <div key={item}>{item}</div>
        </div>
      ))}
    </div>
  );
};

Если использовать индекс массива или другие значения которые могут меняться, то мы можем получить неприятные баги. Лучше всего использовать уникальный id объекта.

Более подробно про key можете прочитать здесь

Кэширование кода в веб-приложениях

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

Ссылка

#статьи

Отличия Function components от class components?

Основные отличия это:

1) Классовые компоненты медленнее, из-за большого количества встроенных методов
2) Классовые компоненты имеют больше методов жизненного цикла
3) Множество синтаксических различий

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

Получается можно забыть про классовые компоненты?

Да, в реальном коде почти нет ситуаций когда классовый компонент будет лучше функционального, можно вспомнить про error boundary, который для своей реализации требует метод из классового компонента, но в противовес есть сторонние библиотеки, реализующие нужное поведение под капотом, или можно зайти на официальный сайт React и скопировать классовый компонет error boundary, и немного его поправить под себя, какой то специфичной логики там нет.
Вот ссылка на Error boundary, если интересно https://ru.react.js.org/docs/error-boundaries.html

🔧 CSS Grid — создание сложных макетов с минимальными усилиями

🎨 CSS Grid — мощный инструмент для создания сложных макетов, который значительно упрощает работу с версткой.

💡 Основные концепции:

- Grid Container — контейнер, в котором работает - сетка.
- Grid Items — элементы, расположенные внутри контейнера.
- Grid Lines — линии, определяющие структуру сетки.

🌐 Пример простого макета с Grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
}

⏩ Результат: Макет с тремя равными колонками, разделенными отступами. CSS Grid упрощает создание адаптивных макетов без сложных вычислений.

📘 Полезные ресурсы:

CSS Grid Garden — Интерактивная игра для изучения CSS Grid. Отличный способ закрепить теорию на практике в игровой форме.

MDN Web Docs: CSS Grid Layout — Документация от Mozilla. Включает описание всех свойств, связанных с CSS Grid, с примерами и детальными объяснениями.