Frontender Libs - обзор библиотек JS / CSS

Оптимизируем производительность в React Рассмотрим одну из новых фич Reacta - Batching. Батчинг является процессом оптимизации производительности в React, при котором несколько обновлений состояния и свойств компонентов объединяются в одно обновление перед рендерингом. Это позволяет уменьшить количество обновлений DOM и повысить производительность. Пример использования:

    function MyComponent() {
        const [count, setCount] = useState(0);
        
        const handleClick = () => {
          setCount(count + 1);
          setCount(count + 1);
          setCount(count + 1);
        }
        
        return (
          <div>
            <p>Count: {count}</p>
            <button onClick={handleClick}>Increment</button>
          </div>
        );
      }

При клике на Increment будет вызван три раза метод setCount, но благодаря batching'у обновления будут объединены в одно. 👉 @sWebDev

Хочешь щёлкать задачи по фронтенду как орешки? Канал Frontend Tests & Tasks научит! Это не очередной канал с задачами. Здесь придется думать. Убедись сам 👉 @frontend_tests

Декомпозиция и интерфейс vue-компонентов В большом vue-приложении всегда есть необходимость в декомпозиции компонентов и их логики. В статье приводятся размышления и некоторые выводы относительно подходов к декомпозиции vue-компонентов и их интерфейсу. 👉 @sWebDev

Klona Klona - это библиотека для создания копий JavaScript-объектов. Она поддерживает работу с обычными объектами, массивами, датами и другими структурами данных. Klona предоставляет дополнительные методы для взаимодействия с объектами. Например, клонирование с выбором глубины вложенности. Библиотека будет полезной для разработчиков, работающих с большими объемами данных и желающими повысить производительность своих приложений. 👉 @sWebDev

Voxelizing Three.js Geometries Проект генератора геометрических фигур, выполненный с применением библиотеки Three.js. 👉 @sWebDev

Управление состоянием компонента в React Можем ли мы в React управлять состоянием компонента, используя функцию-редьюсер? 👉 @sWebDev

Airplanes Реализация анимированного скролла при помощи библиотеки Gsap.js. 👉 @sWebDev

Angular. Работа с template-driven формами Разработчики angular, как правило знают, что для работы с формами существует два подхода: reactive forms и template driven forms. Также, хорошо известно, что для работы с формами разработан такой функционал как валидация, однако исчерпывающе описано его применения для подхода reactive forms. Давайте рассмотрим как можно получить те же преимущества для template driven подхода. 👉 @sWebDev

Three js - Interactive solar system Анимированный проект солнечной системы, выполненный на Three.js. 👉 @sWebDev

PixiJS PixiJS часто используют в качестве игрового движка, но у библиотеки более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5. Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas. 👉 @sWebDev

5 ошибок начинающих разработчиков в React В материале перечислены распространенные ошибки начинающих разработчиков React. Авторы советуют не использовать несколько элементов в корневом компоненте, избегать условных операторов в JSX и дают другие советы, которые помогут избежать распространенных ошибок при начале работы с библиотекой. 👉 @sWebDev

Настраиваем объект, передаваемый родительскому компоненту React Хук useImperativeHandle в React используется для передачи определенных функций из компонента-родителя. Он позволяет родительскому компоненту вызывать методы вложенного компонента. Пример:

    import { forwardRef, useImperativeHandle } from 'react';

    const ChildComponent = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        focus: () => {
        inputRef.current.focus();
        }
    }));

    const inputRef = useRef(null);

    return (
        <input type="text" ref={inputRef} />
    );
    });

    export default ChildComponent;

Мы экспортируем дочерний компонент ChildComponent, имеющий метод focus. Мы используем хук useImperativeHandle, чтобы экспортировать этот метод через ref. 👉 @sWebDev

Vanilla JS Snake "Змейка", выполненная при помощи библиотеки Vanila.js 👉 @sWebDev

Использование хуков React Материал по работе с хуками в React. Автор рассказывает о работе с хуками жизненного цикла, хуками контекста и кастомными хуками React. 👉 @sWebDev

Как условно рендерить элементы на основе булевого значения Vue.js? Используя одну из директив Vue мы можем рендерить элементы на основе булевого значения. Какая это директива? 👉 @sWebDev

В планах перейти в веб-разработку? Бесплатный вебинар 1 апреля в 14:00 (мск) обсудим варианты обучения с основателем буткемпа SaintCode Bootcamp Женей Гриценко и разработчицей в компании SoftSwiss Олей Кравченко. Выдаем дорожную карту для самообучения фронтенду и словарь современного айтишника. Записывайся — https://clck.ru/33vCam

Nano ID Легковесная библиотека для генерации уникальных идентификаторов с использованием криптографически безопасного случайного числа. Nano ID может генерировать идентификаторы различной длины и с разными параметрами, такими как использование только символов верхнего или нижнего регистра, цифр, а также символов из пользовательского набора. Пример использования библиотеки Nano ID для генерации случайного идентификатора длиной в 10 символов с использованием символов верхнего, нижнего регистра и цифр:

        import { nanoid } from 'nanoid';

        const id = nanoid(10);
        console.log(id);
        // "g5U5Fzv1iR"

Библиотека будет полезна для различных задач, связанных с генерацией уникальных идентификаторов. Например, для генерации ID для элементов интерфейса, идентификации пользователей, создания временных токенов и т.д. 👉 @sWebDev

X5 Frontend Meetup #2 – митап по фронтенду, который состоится 12 апреля В программе: - «Что нам стоит блог построить?», Никита Дубко, доброжелюбный бородач из подкаста «Веб-стандарты» - «Мобильное приложение за три дня! Самый быстрый старт!», Андрей Поляков, руководитель фронтенд-разработки в команде торговой сети «Чижик» - «State Of A11y 2023», Лена Райан, фронтенд-разработчица в команде «Обратной связи» в X5 Tech Онлайн и бесплатно 12 апреля в 18:00 по мск Регистрация на мероприятие