CodeRoll | Frontend
4.98K subscribers
1.6K photos
73 videos
1 file
912 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
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

Ссылка

#статьи
👍51👎1
Оптимизация приложений на 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.
👍133🔥3🤡2🤯1

const person = {
name: "John",
age: 30
}

for (const [x, y] of Object.entries(person)) {
console.log(x, y)
}
🤯4🔥3
Пояснение к ответу

Object.entries(person) возвращает массив вложенных массивов, содержащий ключи и значения: [ [ 'name', 'John' ], [ 'age', 30 ] ]. С помощью цикла for-of мы перебираем элементы массива - в данном случае подмассивы. Мы можем деструктурировать подмассивы в цикле, используя const [x, y]. x равняется первому элементу в подмассиве, y - второму. Первым подмассивом является [ "name", "John" ], где x равняется name, а y - John. Вторым подмассивом является [ "age", 30 ], где x равняется age, а y - 30.
👍6
Решение задач Front End с интервью. Throttle

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

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

Ссылка

#js
👍6🔥1
Решение задач Front End с интервью. Promise Pool

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

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

Ссылка

#js
👏6👍21
JavaScript: структуры данных и алгоритмы. Часть 1

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


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


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

Ссылка

#js
👍111👏1👌1🤡1
Как узнать количество перерисовок? React Custom Hook: useRenderCount

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

Ссылка

#react
🔥4👎2👍1🤩1
Что такое атрибут 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 можете прочитать здесь
👍6
Кэширование кода в веб-приложениях

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

Ссылка

#статьи
3👏2👍1
Отличия 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
👍6🔥4👏1
🔧 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, с примерами и детальными объяснениями.
👍11🔥2👏2
⚛️ Продвинутые концепции React: Хуки, Контекст и Оптимизация производительности


Конечно! Вот пост для более продвинутых разработчиков, посвященный углубленным темам и современным подходам в React.

⚛️ Продвинутые концепции React: Хуки, Контекст и Оптимизация производительности

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

🔄 React Hooks: Революция в управлении состоянием и побочными эффектами
Hooks, представленные в React 16.8, позволили отказаться от классовых компонентов в пользу функциональных, сохраняя при этом все возможности управления состоянием и жизненным циклом компонента.

- useState: Позволяет добавлять состояние в функциональные компоненты.
- useEffect: Управляет побочными эффектами, такими как подписки, API-запросы и манипуляции с DOM.
- useMemo и useCallback: Оптимизируют производительность, предотвращая ненужные рендеры и создания функций.


const MyComponent = () => {
const [count, setCount] = useState(0);

useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);

const increment = useCallback(() => setCount(count + 1), [count]);

return <button onClick={increment}>Click me</button>;
};



🌐 React Context: Управление глобальным состоянием

Контекст позволяет передавать данные (например, тему или авторизацию) через дерево компонентов без необходимости пробрасывать пропсы на каждом уровне.

Создание контекста: const MyContext = React.createContext(defaultValue);
Использование в компонентах: const value = useContext(MyContext);

Контекст полезен, когда нужно избежать "prop drilling", но важно помнить, что его чрезмерное использование может усложнить отладку и понимание кода.

⚡️ Оптимизация производительности: Мемоизация, разделение кода и Concurrent Mode

Для повышения производительности приложений на React важно учитывать несколько ключевых аспектов:

Мемоизация с React.memo, useMemo, useCallback — предотвращает повторные рендеры, если пропсы или состояние не изменились.

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

Concurrent Mode — новый подход к рендерингу, позволяющий React выполнять задачи без блокировки пользовательского интерфейса.
🔥7👍3😱1
🛠 Типичные ошибки в React и как их избежать

🔥 React — мощная библиотека, но даже опытные разработчики могут допускать ошибки. Давайте разберем несколько распространенных проблем и как их избежать.

Неправильное использование состояния
Изменение состояния напрямую (например, this.state.value = newValue).
Всегда используйте setState или useState для обновления состояния.

Отсутствие ключей в списках
Не использовать key или использовать индексы массива в качестве ключей.
Применяйте уникальные идентификаторы для key, чтобы React мог эффективно управлять DOM.

Неоптимизированные рендеры
Рендеринг больших списков без оптимизации.
Используйте React.memo, useMemo или виртуализацию списков (например, с react-window).

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

💡 Избегая этих ошибок, вы сможете сделать свои React-приложения более надежными и производительными!
6👍2🔥2
🎨 Тренды в дизайне UI/UX 2024

🚀 UI/UX дизайн постоянно развивается, и важно быть в курсе актуальных трендов, чтобы создавать современные и удобные интерфейсы. Вот что будет популярно в 2024 году:

Темная тема по умолчанию
🌑 Пользователи все чаще выбирают темные темы для своих приложений, так что подумайте о внедрении темного режима по умолчанию.

Морфизм в интерфейсах
🧊 Neumorphism и Glassmorphism возвращаются, придавая интерфейсам мягкие тени и полупрозрачные слои.

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

Суперадаптивные интерфейсы
📱 Гибкость на всех устройствах — от больших мониторов до маленьких экранов умных часов. Дизайн должен быть адаптивным и настраиваемым.

Zero UI
🗣 Интерфейсы без экрана, например, голосовые ассистенты или интерфейсы, управляемые жестами.

👨‍🎨 Следуя этим трендам, вы сможете создавать интерфейсы, которые будут не только стильными, но и удобными для пользователей.
7👍3🔥1
🔍 Дебаггинг в React — лучшие практики

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

React Developer Tools

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

Логгирование состояния и пропсов
📝 Используйте console.log, чтобы отслеживать состояние и пропсы. Можно подключить более продвинутые инструменты, такие как redux-logger.

Использование Error Boundaries
🚧 Создайте компоненты Error Boundary, чтобы отлавливать ошибки на уровне компонентов и предотвращать падение всего приложения.

Профилирование производительности

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

Storybook
📚 Storybook помогает изолировать и тестировать компоненты вне контекста приложения. Отличный способ проверить логику и дизайн отдельных компонентов.

⚠️ Совет: Всегда разбивайте большой компонент на более мелкие части. Это не только упрощает поддержку, но и облегчает дебаггинг!
4👍2🔥2
🎨 Дизайн для доступности: основные принципы и инструменты

♿️ Доступность (Accessibility) — важный аспект веб-дизайна, обеспечивающий удобный доступ к вашему контенту для людей с ограниченными возможностями. Вот основные принципы и инструменты для улучшения доступности:

🔑 Основные принципы:

Семантическая разметка
Используйте правильные HTML-теги (<header>, <nav>, <main>, <footer>) для лучшего восприятия вашего контента скрин-ридерами.

Контраст и читаемость
Убедитесь, что текст хорошо читаем на фоне (достаточный контраст) и используйте большие шрифты.

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

Навигация с клавиатуры
Убедитесь, что все элементы интерфейса можно навигировать и активировать с помощью клавиатуры.

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

🔧 Полезные инструменты:

WAVE — онлайн-инструмент для проверки доступности веб-страниц.
axe — расширение для браузеров, которое помогает находить и исправлять проблемы с доступностью.
Color Contrast Checker — инструмент для проверки контраста текста и фона.

🛠 Интеграция принципов доступности в ваши проекты сделает их более инклюзивными и удобными для всех пользователей.
👍5🔥1
🌐 Введение в WebAssembly (Wasm)

🔍 WebAssembly (Wasm) — это новая технология, которая позволяет выполнять код в браузере на скорости близкой к нативной. Это отличное решение для улучшения производительности веб-приложений.

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

Кросс-платформенность: Работает в любом современном браузере.

Совместимость: Может взаимодействовать с JavaScript, что позволяет использовать его вместе с существующим кодом.

💡 Ресурсы:
Официальный сайт WebAssembly
Документация MDN
🔥72👏1
🚀 Введение в Server-Side Rendering (SSR) с Next.js

⚡️ Server-Side Rendering (SSR) — это процесс рендеринга страниц на сервере, что позволяет значительно улучшить SEO и ускорить время загрузки первой страницы.

Почему стоит использовать SSR?
- SEO: Поисковые системы лучше индексируют страницы с SSR.
- Быстрый первый рендер: Контент отображается быстрее, особенно на медленных устройствах.
- Предварительный рендеринг: Возможность рендерить страницы заранее и кэшировать их.

Как использовать SSR с Next.js?
Next.js — это популярный фреймворк для React, который поддерживает SSR "из коробки". Вот простой пример:



import React from 'react';

export async function getServerSideProps() {
// Запрос данных на сервере
const res = await fetch('https://api.example.com/data');
const data = await res.json();

return { props: { data } };
}

function Page({ data }) {
return <div>{data.title}</div>;
}

export default Page;


Полезные ссылки:

Документация Next.js
SSR vs CSR: Что выбрать?(ru)
👍5💩2🤮1🤡1