ReactJS *

Видеоаналитика в СИБУРе — это сложный и многогранный продукт, который внедряется на разных производствах. Несмотря на то, что это один продукт, его конфигурация может сильно отличаться: используются различные камеры, детекторы и параметры, а также интеграции с разнообразными сторонними системами.

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

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

Меня зовут Владимир Кирилкин, я техлид в Цифровом СИБУРе, в команде Индустрии 4.0. Мы разрабатываем продукт «Видеоаналитика на производстве», и о наших задачах уже писали на Хабре.

Мы подошли к задаче нестандартно: вместо заранее заданных форм на фронте реализовали их автоматическую генерацию с использованием JSON-схем и немного ✨магии✨.

Наши сервисы построены на Python и React, но предложенный подход можно адаптировать и для других технологий — правда, с чуть меньшим количеством ✨магии✨.

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

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

Как избавиться от проп-дриллинга, упростить тестирование и навести порядок в зависимостях React/JS‑приложения? В статье — зачем вообще нужен dependency injection в JavaScript, почему он редко используется и как это меняет @wroud/di. С кодом, примерами и без тяжёлой рефлексии.

HTMX и AlpineJS это две JS библиотеки, которые расширяют HTML специальными аттрибутами и позволяют писать фронтенд без SPA фреймворков.

Это альтернативы React/Vue/Angular и иже с ними. Их появление вызвано усталостью от сложной JS экосистемы и тоской по временам, когда задачи решались с помощью PHP и jQuery.

Я всю жизнь писал JSON API и SPA интерфейсы и моему мозгу трудно было переварить, зачем нужны эти библиотеки и как с ними работать. Поэтому я написал эту статью.

Каждый разработчик рано или поздно сталкивается с вопросом: как организовать проект так, чтобы он не превратился в хаос? Или как исправить проект, в котором уже царит хаос?

Начинается всё одинаково: мы делаем простое MVP или проект с ограниченным функционалом, не заморачиваемся по поводу архитектуры и организации кода, ведь проект небольшой и несложный, а сделать его нужно уже здесь и сейчас. Но время идёт, и у бизнеса появляются всё новые требования. Какие‑то изначальные идеи полностью отменяются или меняются до неузнаваемости, разрастается команда, дизайн меняется несколько раз, появляется необходимость покрыть проект тестами, а иногда и необходимость вообще сменить стек технологий. И вот вы уже работаете над кодом, в котором становится всё сложнее вносить изменения в существующий функционал. Всё держится на костылях, становится трудно ориентироваться в куче файлов, и кажется, что всё устроено как‑то не так, как должно быть.

В этот момент мы начинаем задаваться вопросом: «а как нужно писать и организовывать код на самом деле?». В поисках ответа мы читаем статьи, смотрим обучающие видео, доклады и неизбежно натыкаемся на Feature‑Sliced Design (FSD).

🚀 Устал каждый раз руками создавать Component.tsx, index.ts, styles.module.scss и всё по кругу?

Решение есть! Простой и кастомизируемый CLI-инструмент для Vite, который генерирует компоненты — из шаблонов, которые ты сам задаешь.

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

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

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

Привет, хабр! Больше года назад я впервые узнал про сигналы, а три месяца назад @Sin9k записал видео на эту тему. И поскольку сигналы по-прежнему обходят стороной, попробую немного исправить ситуацию)

В материале будет использоваться обёртка signals-react, так как изначально рассматриваемая библиотека написана под Preact.

В последнее время я перестал читать комментарии к статьям на Хабре. Причина — токсичность и ненависть друг к другу. Абсолютно безобидные технические статьи подчас вызывают бурю агрессии у отдельных лиц. Всех банить тоже нельзя — свобода слова закреплена в Конституции. Но есть решение: давайте используем искусственный интеллект, который будет анализировать комментарий и переписывать его, меняя токсичность на вежливость, сохраняя основную мысль комментария.

Мы воспользуемся FastAPI для бэкенда, React для фронтенда, заставим их между собой общаться через RESTful API, а бизнес-логику реализуем путём обращения к ИИ через gRPC.

Как фокус только на обучении повлиял на результат и стоит ли сейчас идти во фронтенд? Вот моя честная история пути в IT. Она похожа на восхождение на вершину без акклиматизации.

Привет, Хабр. Я Сергей, фронтенд-разработчик в Clevertec. И сегодня поделюсь опытом использования обновленной 7-й версии React Router. Расскажу, как мы реорганизовали структуру роутинга. Покажу, как избавились от лишних «букав кода», улучшили производительность приложения, создали навигацию по страницам и еще много полезного.

IDE упрощают рефакторинг, но при работе с большими или распределёнными кодовыми базами, особенно без полного контроля над ними, часто требуется помощь codemods. Используя абстрактные синтаксические деревья (AST), codemods автоматизируют изменения кода с высокой точностью и минимальными усилиями, что особенно полезно при критических изменениях в API.

В статье мы рассмотрим, как codemods решают задачи удаления feature toggles и рефакторинга сложных компонентов React, а также узнаем про типичные подводные камни и как их избежать в крупных проектах.

Всем привет! Сейчас без live-coding'a никуда: на собеседованиях часто дают одну-две задачки, которые нужно решить за определённое время. Сами задачи могут быть несложными (не супер-пупер алгоритмическими), но новички могут переволноваться и не справиться с ними.

Поэтому в этой статье я хотел бы описать типовые задачи, которые встречаются в этой секции на позицию frontend или backend разработчика (если бэк на JS). Это поможет вам получить общее представление о том, что может ждать вас.

Привет! Я – Егор, фронтенд-разработчик в Чиббис. Наша команда разработала новый личный кабинет для партнеров – b2b-приложение с нуля, используя Feature-Sliced Design. В статье я делюсь нашим опытом: от выбора стека технологий до построения процесса разработки, который помог нам за 5,5 месяцев превратить пустую папку в рабочий продукт. Мы разберем итерации, FSD-макеты, этапы создания разделов и расскажем, как удалось сократить время разработки и тестирования.

Вас ждет готовый шаблон процесса, который вы сможете применить в своих проектах.

Привет, Хабр.

Меня зовут Роман, я основатель Somazone — платформы для сохранения голосовой памяти о близких людях. Пользователь загружает аудиозаписи, мы клонируем голос и создаём AI-агента, с которым можно общаться.

Звучит просто, да?

Два месяца без выходных. Рефакторинги в три часа ночи, когда глаза уже не фокусируются, но ты точно знаешь, что если не починишь сейчас — утром будет хуже. Прод падает в субботу вечером, когда ты наконец-то решил поужинать с семьёй. Баги, которые воспроизводятся только на проде и только у одного пользователя из Владивостока (почему Владивосток? мы так и не поняли). WebSocket-соединения, которые умирают по непонятным причинам. FFmpeg, который выжирает всю память на сервере и роняет всё вокруг.

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

Ленивая загрузка - это принцип, который должен быть известен большинству frontend разработчиков. Однако, этот механизм обманчиво прост, и его освоение является гораздо более комплексной задачей, чем кажется многим. Если уже используете Lazy Loading, у вас все равно могут быть серьезные пробелы в знаниях. Но даже если вы считаете, что знаете про ленивую загрузку абсолютно все, освежить память не будет лишним.

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

«Ну вот, опять эти формы...» — знакомая мысль? Мы постоянно ищем способ сделать их удобными и предсказуемыми, но идеальное решение все никак не находится. В этой серии статей Артем Леванов, Front Lead в WebRise, подробно разберет, с какими сложностями мы сталкиваемся, изучим разные подходы и в итоге придем к элегантному решению: как описывать все формы на сайте, используя всего по одному компоненту для каждого типа полей.