ReactJS *

Привет, на связи снова я – React-разработчик Дмитрий. Сегодня отвлечемся от теории и разберем конкретный случай и какое решение для него использовалось.

При работе с готовыми UI-библиотеками часто возникает небольшая проблема —  компонент хорош, но его поведение нельзя настроить под требования конкретного случая. Я столкнулся с этим на практике, когда в используемой версии UI Kit не было возможности кастомизировать тексты выводимых ошибок, а бизнес-требования четко задали формулировки.

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

Собственно, выглядит компонент загрузки файла вот так:

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

Если вы искали решения, то, скорее всего, уже встречали i18next или react-intl. Оба инструмента мощные, но у них есть свои недостатки: высокий порог входа, множество шаблонных JSON-файлов или сложная интеграция с TypeScript.

В этой статье мы разберём:

Всем привет! Меня зовут Артем, я фронтенд разработчик в Банки.ру. Недавно перед нашей командой встала задача внедрить SSO-аутентификацию через Keycloak для клиентских сервисов. Помимо базовой настройки важно было полностью переработать стандартные формы входа, чтобы они соответствовали корпоративному стилю и UX-требованиям.

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

Представь, что ты строишь крутой интерактивный сайт из деталек LEGO. React — это как раз такой продвинутый набор «умных» деталек для постройки сайтов. А эта книга — инструкция к нему.

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

В данной статье рассказывается о личном опыте переезда с JS на TS, как у меня получилось подружить Node.JS с TypeScript без сторонних инструментов.

Команда JavaScript for Devs подготовила перевод статьи о том, как доминирование React сдерживает развитие фронтенда. Автор утверждает: выбор React «по умолчанию» тормозит инновации, мешает развитию альтернативных фреймворков и превращает всю экосистему в монокультуру.

Это третья статья из цикла про наш фреймворк Steroids: в ней мы рассказываем о том, как пришли к созданию собственного движка форм для React. Если вы ещё не читали предыдущие материалы, рекомендуем с ними ознакомиться:

Недавно мы с командой работали с клиентом из финансового сектора: у него есть сайт и личный кабинет, давно написанные на PHP (бэк и фронт), и задача — обновить дизайн и пользовательский опыт без глобальных изменений «под капотом».

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

В данной статье будет предоставлена детальная информация по реализации высокопроизводительного вьюпорта мессенджера на Angular, который обеспечит высокую и плавную скорость работы и низкое потребление ресурсов с применением инструмента виртуализированных списков ng-virtual-list. А также представлен порт на React.

Всем привет! Меня зовут Александр Битько, я фронтенд-разработчик в ПСБ. Сегодня поговорим об одной из частых болей в работе с микрофронтенд-архитектурой — поиске баланса между независимостью микрофронтов и согласованным UI. Когда независимые микрофронты используют разные подходы к стилям (CSS-фреймворки, методологии вроде BEM или CSS-in-JS, глобальные стили), возникают конфликты с визуальной несогласованностью в приложении. Красная кнопка вдруг становится зелёной, шрифты начинают прыгать и так далее. 

Что с этим делать? В этой статье я расскажу о конфликтах стилей: какими они бывают, как с ними бороться и какие стратегии лучше подходят для приложений в разных случаях. И приведу примеры, как это работает на Angular и на React с использованием наиболее популярных библиотек Angular Matherial и MUI. Поехали.

Сегодня поговорим про реализации решения конфликтов подходов local / offline-first – это когда ваше приложение позволяет пользователям работать полностью или частично оффлайн, а когда они выходят в сеть, синхронизировать все их изменения.

Примеры таких приложений: Notion-like редакторы, Figma-like вайтборды или Linear-like таск менеджеры.

Основная идея – коллаборация, а коллаборация несет за собой конфликты, разберем очень наглядный пример:

Когда я начал разбираться с Motion для React, то оказалось, что свежих обзорных статей почти нет — нашёл только несколько старых постов про framer-motion. Поэтому я решил написать свой обзор: перевёл и разобрал документацию (ссылки в конце), попробовал библиотеку в деле и собрал всё в одном месте.

В статье есть примеры кода, GIF-анимации и описание хуков, которых, по моему личному мнению, достаточно, чтобы понять Motion, и, возможно, попробовать его руками, сэкономив время на чтении документации.

Полная реализация push-уведомлений в PWA без сторонних сервисов

Разбираем архитектуру: Service Worker, Push API, VAPID ключи и Notifications API. Показываем, как настроить PWA для работы на всех платформах, включая iOS.

В статье:
• Теория всех компонентов системы
• Готовый код Service Worker и клиентской части
• Backend на Express с отправкой уведомлений
• Настройка PWA для iOS 16.4+
• Детекция платформы и предложение установки

Все работает из коробки! 🎯

Давайте честно. Есть один этап в IT-найме, от которого у любого Senior-разработчика начинает дергаться глаз. Это технический скрининг с HR-ом.

Вы специалист с 10-летним опытом. А напротив вас сидит 23-летняя девушка, которая по бумажке задает вам вопросы, ответы на которые она сама не понимает. «А чем отличается SQL от NoSQL?», «Расскажите про SOLID».

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

Но что, если я скажу вам, что ваша злость и попытки «доказать, что вы умный» это именно то, из-за чего вы проваливаете этот этап?

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

На выходных вышли сразу две громкие ИИ-новости, которые захотелось пощупать руками.

Во-первых, на OpenRouter тихо появились две стелс-модели: Sonoma Dusk Alpha и Sky Alpha. Обе заявлены с окном контекста 2 млн токенов, поддержкой изображений на входе и параллельным вызовом инструментов, и сейчас бесплатны; Dusk заявляется как быстрая модель на каждый день, Sky - как максимально интеллектуальная для сложных задач.

Во-вторых, z.ai запустили API совместимый с Claude Code с доступом к своей флагманской модели GLM-4.5 по за $3/мес (план GLM Coding Lite) — с лимитом ~120 промтов на каждые 5 часов. Есть и Pro за $15/мес (~600 промтов/5 ч). Эти планы работают только внутри инструментов кодинга вроде Claude Code (в веб-чате их не включают).

Ну как не потестить? Потестим.

По мере роста фронтенд-приложений управление пользовательскими взаимодействиями становится все более важным. Добавление обработчика событий на каждый интерактивный элемент — плохая практика: это усложняет код, увеличивает расход памяти и снижает производительность. Здесь на помощь приходит делегирование событий (event delegation).

Каждая интерактивная веб-страница опирается на Document Object Model (DOM) и ее систему событий. Когда мы нажимаем кнопку, вводим текст в поле или наводим курсор на изображение, возникает событие. Но оно не происходит само по себе — событие проходит по дереву DOM в процессе, который называется распространением события (event propagation).

Показать данные красиво и понятно бывает сложнее, чем написать саму бизнес-логику. Нужно не просто вывести цифры, а сделать так, чтобы ими было удобно пользоваться: масштабировать, сравнивать, фильтровать. Можно ли совместить мощь, интерактивность и гибкость в одной библиотеке визуализации — и при этом без боли интегрировать ее в React? Спойлер: да, и это ECharts.

Привет, Хабр! Меня зовут Ольга Китова, я разработчик в IBS. Эта статья — про ECharts, один из самых сильных и гибких инструментов для визуализации данных. Я покажу, какие возможности дает эта библиотека, как она устроена «под капотом», в чем ее плюсы и минусы и как использовать ECharts в React-приложениях, на практике.

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

Давайте вспомним как мы строим роутинг в наших приложениях. В примере ниже – react-router-dom, но в других фреймворках/библиотеках все примерно также:

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

Написал утилиту на Go для генерации структур файлов по шаблонам, которая, думаю, будет полезна многим.