Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Как ускорить React на 300%: реальный кейс

Виртуальный DOM — вещь полезная, но не всемогущая. Если каждый клик запускает цепочку ререндеров, он не спасёт. Со временем даже шустрое React-приложение превращается в тормозящего гиганта.

Что в статье:

📍

Разбор реального кейса: как e-commerce приложение превратилось из быстрого в тормозное, и что помогло это исправить

📍

Причины медленной работы: ненужные ререндеры, монолитные компоненты, неоптимальный context

📍

Использование инструментов: React DevTools, why-did-you-render, профилирование

📍

Практические примеры кода «до» и «после»

📍

Хаки и техники: React.memo, useCallback, useMemo, react-window, динамическая загрузка компонентов

🔗

Читать статью

🐸

Библиотека фронтендера

Please open Telegram to view this post

VIEW IN TELEGRAM

12.1K views08:38

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Please open Telegram to view this post

VIEW IN TELEGRAM

2.7K views18:04

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Please open Telegram to view this post

VIEW IN TELEGRAM

2.7K views07:02

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

💧

📈

Как сделать гидратацию в React 19 по настоящему эффективной

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

В статье рассказывается про то, как:

1️⃣ Новые подходы в React 19 изменяют процесс гидратации

2️⃣ Выборочная и прогрессивная гидратация позволяют ускорить взаимодействие с пользователем

3️⃣ Потоковый серверный рендеринг с Suspense снижает нагрузку на клиент

4️⃣Серверные компоненты устраняют необходимость в гидратации для статических частей интерфейса.

Как новые возможности React 19 помогут вам создавать быстрее загружающиеся и более отзывчивые приложения, читаем по ссылке ⬇️

Статья

🔗

� Библиотека фронтендера

Please open Telegram to view this post

VIEW IN TELEGRAM

12.4K views18:02

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

0:09

This media is not supported in your browser

VIEW IN TELEGRAM

💭 Документация у него в голове

🐸

Библиотека фронтенда

#развлекалово

Please open Telegram to view this post

VIEW IN TELEGRAM

2.5K views09:00

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🐸

Библиотека фронтенда

#междусобойчик

Please open Telegram to view this post

VIEW IN TELEGRAM

2.4K views13:01

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Твой выбор ⤵️

Anonymous Poll

597 voters2.7K views13:01

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Please open Telegram to view this post

VIEW IN TELEGRAM

3.1K views13:01

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🚬

TypeScript вне учебников: продвинутая подборка для тех, кто уже в теме

1️⃣

15 Advanced TypeScript Tips and Tricks You Might Not Know

Автор делится продвинутыми приёмами TypeScript, включая использование infer, шаблонных литералов и других мощных фич.

2️⃣

Thoughts on State Management Libraries in the React Compiler Era

Обзор изменений в управлении состоянием с приходом React Compiler и как это влияет на необходимость использования сторонних библиотек.

3️⃣

Zod: TypeScript-first Schema Validation

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

🐸

Библиотека фронтенда

#свежак

Please open Telegram to view this post

VIEW IN TELEGRAM

3.0K views13:00

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

3.0K views07:04

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

😳

Топ-вакансий для фронтендеров за неделю

Frontend Developer — удаленка/Офис (Москва/Санкт-Петербург)

Frontend Developer (Vue.js) — от 250 000 ₽, удаленно (Москва)

Разработчик JS (Middle) — от 150 000 ₽ до 300 000 ₽, удаленно (Казань)

Frontend-разработчик — офис (Санкт-Петербург)

Frontend-разработчик — 180 000 - 190 000 ₽, удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

🐸

Библиотека фронтендера

#свежак

Please open Telegram to view this post

VIEW IN TELEGRAM

2.8K views18:04

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🔧

Как устранить FOUC

FOUC (Flash of Unstyled Content) — это кратковременное отображение неоформленного HTML перед применением CSS, что может негативно сказаться на пользовательском опыте.

Почему возникает:

📍 Асинхронная загрузка стилей.

📍 Динамические изменения DOM через JavaScript до полной загрузки стилей.

📍 Использование async или defer при подключении скриптов, что может привести к несогласованности в порядке загрузки ресурсов.

Как устранить:

1️⃣ Предзагружаем критичные стили

<link rel="preload" href="/styles/main.css" as="style">

2️⃣ Встраиваем Critical CSS прямо в HTML

<style>
  body { margin: 0; font-family: system-ui; }
</style>

Таким образом, мы обеспечиваем мгновенное появление базового оформления без скачков.

3️⃣ Минимизируем блокировки рендера

• Добавляем defer к скриптам
• Переносим второстепенные стили вниз
• Избавляемся от лишних <link> в <head>

4️⃣ Оптимизируем изображения

Пересобираем графику в WebP или AVIF, уменьшаем вес — и пользователь видит контент быстрее.

5️⃣ Переходим на SSR

Используем серверный рендеринг (Next.js, Astro и др.), чтобы отправлять уже отрендеренную страницу, а не заставлять браузер гадать, как это должно выглядеть.

💡Следуя приведённым рекомендациям, вы сможете обеспечить плавное и профессиональное отображение вашего веб-приложения с самого начала.

🐸

Библиотека фронтендера

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

2.6K views07:03

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Когда сроки горят, а разработчиков не хватает

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

Решение проблемы — задействовать дополнительные ресурсы на аутсорсе или аутстаффе. Например, обратиться в Proglib. Да-да, мы запустили свою студию веб-разработки!

Что мы предлагаем:

• Опытные специалисты для аутстаффа (frontend, backend, DevOps, UI/UX, PM, BA)

• Полноценная разработка проектов под ключ

• Гибкое масштабирование команды под потребности клиента

• Прозрачная коммуникация и регулярная отчетность

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

Заполните форму, чтобы ускорить свою разработку 👉 https://forms.yandex.ru/u/67e548a4eb614622efa0bcb2/

2.8K views12:00

About

Blog

Apps

Platform