Все потоки
Поиск
Написать публикацию
Обновить
26.92

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

Пробуем Junie от JetBrains на реальной задаче (или как я попал в рассказ Азимова)

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров16K

JetBrains зарелизил новую версию своего AI-ассистента и вместе с ним Junie - автономного нейросетевого агента-программиста, которому можно поручать небольшие рабочие задачи.

Буквально вчера я получил к нему доступ и не смог не воспользоваться возможностью. Я даже не представлял...

насколько это весело.

React vs Vue – подробное сравнение и перспективы

Уровень сложностиСредний
Время на прочтение46 мин
Количество просмотров23K

В этой статье мы проведём подробный анализ современных практик frontend-разработки, сравним состояние React и Vue 5 лет назад и на текущий момент, а также попробуем спрогнозировать их перспективность в обозримом будущем с учётом развития LLM моделей и AI агентов. Посмотрим их экосистемы (Next.js и Nuxt, Redux и Pinia), использование в бэкенде, популярность решений в энтерпрайзе, а так же понимание разработчиками и LLM моделями.

Читать далее

Отрицание, торг, депрессия и принятие: путь фронтендера к Feature-Sliced Design на React

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров6.3K

Когда проект разрастается до десятков экранов, а папка helpers начинает весить больше, чем хотелось бы, приходит время пересмотреть подход к архитектуре. В этой статье — как я пришёл к принятию Feature-Sliced Design на React. Только личный опыт, ошибки и выводы.

Читать далее

SSG своими руками

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров5.3K

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

Сегодня я хочу поделиться с вами руководством, как реализовать Static Site Generation (SSG) в React без использования сторонних фреймворков, таких как Next.js, TanStack Start, React Router и им подобных. Сразу оговорюсь: я не считаю их чем-то «плохим» и не агитирую против их применения. Всё гораздо проще: иногда по тем или иным причинам нет возможности использовать эти инструменты, или самостоятельная реализация оказывается предпочтительнее из-за количества изменений в кодовой базе.

Если вам интересна тема стратегий рендеринга веб-приложений, то прошу под кат.

Читать далее

Измерение покрытия UI тестами

Время на прочтение22 мин
Количество просмотров4.1K

Как понять, что реально делают ваши UI автотесты?

ui-coverage-tool — это инновационный инструмент нового поколения, не имеющий аналогов. Он визуализирует покрытие прямо в браузере, работая с реальным приложением. История по каждому элементу, фильтры по действиям, динамика и полная наглядность — всё, чтобы не просто тестировать, а понимать и улучшать.

Читать далее

Chat Popup Widget

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров317

Интеллектуальный чат-бот с нейросетью GPT, подключаемый двумя строками

Chat Popup Widget — это автономный виджет чата, подключаемый к любому сайту всего двумя строками HTML-кода. Он предоставляет пользователю живое взаимодействие с нейросетью GPT, оформленное в виде плавающего окна, которое можно перемещать, масштабировать и кастомизировать.

Читать далее

Сказка. Слёзы бэкендера, или что такое примитивы

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров1.4K

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

Читать далее

React Reconciliation: скрытый механизм, управляющий компонентами

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров4.6K



❯ Механизм согласования


В моих предыдущих статьях (1, 2) я подробно рассматривал, как работает React.memo, а также делился более эффективными подходами к оптимизации производительности с помощью компоновки. Однако для глубокого понимания работы React необходимо разобраться в основном механизме, лежащем в основе всех этих оптимизаций – алгоритме согласования (reconciliation).


Согласование – это процесс, в результате которого React приводит DOM в соответствие с деревом компонентов. Именно этот механизм позволяет реализовать декларативный подход к программированию на React: вы формулируете свои намерения, а React самостоятельно определяет, как выполнить эти намерения наилучшим образом и с наименьшими затратами.

Читать дальше →

Reconciliation в React, обновления виртуального DOM: что это и как работает под капотом простыми словами

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров5.4K

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

Читать далее

Измерение покрытия API тестами на основе Swagger для Python

Время на прочтение11 мин
Количество просмотров5.2K

В этой статье я расскажу про swagger-coverage-tool — инструмент, который показывает, насколько полно ваши тесты покрывают API по спецификации Swagger (OpenAPI). Всё работает автоматически, без изменений в логике тестов. Поддерживаются httpx и requests, отчёт генерируется в один клик. Идеально, если вы хотите объективно видеть, что действительно проверяют ваши API автотесты.

Читать далее

Не только React: сравнительный анализ React и Jmix для написания UI бизнес-приложений

Время на прочтение31 мин
Количество просмотров2.9K

Раньше, когда трава была зеленей, а доллар стоил 30, в мире enterprise-разработки преимущественно использовались десктопные приложения. Если вспомнить, как выглядели пользовательские интерфейсы в то время, то перед глазами возникает грустная и серая картина из кучи таблиц, кнопок, форм и бесконечно открывающихся экранов поверх других экранов. Также не забудем про тот факт, что бизнес довольно сдержанно относится к любым изменениям, особенно если они требуют дополнительных трат. Из всего этого можно сделать вывод, что красивого UI бизнес-приложений не могло существовать в то время. Однако современные фреймворки, такие как React, позволяют довольно быстро построить красивый и функциональный интерфейс. Но React'ом ли единым? Есть ли другие инструменты для эффективного написания бизнес-приложений?

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

Читать далее

Почти Ванильный Фронтэнд

Время на прочтение6 мин
Количество просмотров2K

Почти — потому что используется всего две функции из библиотеки:

Создать элемент DOM

Обновить элемент DOM

Эта библиотека упрощает использование нативных функций DOM, таких как createElement и replaceChild. Библиотека Fusor направлена на то, чтобы сделать эти функции проще и компактнее.

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

Читать далее

React 19: что нового, что полезного, и куда мы движемся

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров14K

С вами Дима, старший фронтенд разработчик в Surf, и сегодня мы разберём React 19 — новую версию одной из самых популярных библиотек для создания пользовательских интерфейсов. 

Вперёд, к подробному разбору основных фичей, оценке их плюсов и минусов и исследованию будущего React. 

Читать дальше

Ближайшие события

CI/CD для чайников — разберитесь и начните наконец-то автоматизировать рутину в разработке. Часть 2. Запускаем CI

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров13K

Список необходимых инструментов.

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

И на этом сервере, мы можем выполнять любой набор команд для автоматизации.🫡

Но самый важный момент на этом этапе – какие настройки должны быть на этом сервере? Какие программы, пакеты или библиотеки, должны быть установлены? В конце концов, какую операционную систему использовать? ⚠️

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

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

eslint . –fix

npm run build

Если попробовать перечислить, то получится следующий список

Читать далее

Make Data Visualization Great Again (или как мы создавали свой инструмент визуализации данных)

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров2.9K

Всем привет! Меня зовут Олег Косарев. Я – ведущий инженер-программист. В группе компаний «Цифра» занимаюсь развитием и поддержкой продукта «Диспетчер». Моя основная специализация – Frontend-разработка.

В данной статье я хочу поделиться с вами нашим опытом по созданию MVP (Minimum Viable Product, «минимально жизнеспособный продукт») редактора аналитических панелей.

Читать далее

CI/CD для чайников — разберитесь и начните наконец-то автоматизировать рутину в разработке. Часть1. Введение

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров39K

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

В вакансиях все чаще требуется опыт работы с одним из инструментов в этой инфраструктуре – Jenkins, Travis, AWS, Gitlab CI/CD.

⚠️Я предлагаю вам посмотреть на этот процесс, глазами простого разработчика. Чем ему может помочь автоматизация. Что в конечно итоге скрывается под этой аббревиатурой, и как уже начать получать дивиденды в своей ежедневной рабочей практике.

Первые шаги

Мы рассмотрим внедрение инструментов автоматизации в приложение, построенное на базе React. В целом разберем именно основные подходы и моменты, на которые стоит обратить внимание в самом начале.

В целом, это будет актуально для любого стека.
Чаще всего я использую для хранения кодовой базы и групповой работе над проектами Gitlab. Очень кстати, что эта площадка предоставляет инструментарий CI/CD.

Я пытался пару лет подступиться к этому вопросу. Стильно, модно, молодежно. Да, дает кучу преимуществ. Но все попытки переварить официальную документацию, заканчивались неудачей. А видео уроки или материалы в общем доступе – чаще всего давали рецепт автоматизации какого-то конкретного кейса, который либо частично, либо полностью отличался от моего приложения.

Мне не хватало именно взгляда на основные шаги – что, зачем и как мы делаем. А уже потом реализации практических задач.

CI – continuous integration

Что же скрывается за термином "непрерывной интеграция". Когда мы работаем над созданием программного продукта – в одиночку, или в рамках команды, мы стараемся добавить в наш проект, несколько строк кода. Новый функционал, исправление или доработки. Суть не особо важна. В конечно счете – либо появляется новый код, либо появляются изменения в старом. И нам нужно убедиться, что эти новые изменения, не содержат ошибок, которые могут вызвать проблемы или неработоспособность приложения. ⛔️

Читать далее

Redux: Реанимируем легаси проект

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров1.3K

Всем привет.

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

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

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

Читать далее

Создание простого хука для работы с формами в React на основе `zod`

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров1.4K

Создание простого хука для работы с формами в React на основе zod

В этой статье мы реализуем удобный хук useForm, который минимизирует ререндеры и упрощает работу с формами в React, используя FormData для сбора данных и zod для валидации. Рассмотрим разницу между контролируемыми и неконтролируемыми компонентами.

Читать далее

Каким должен быть Интернет-ресурс для умных, или возвращаясь к истокам отцов-основателей

Уровень сложностиПростой
Время на прочтение21 мин
Количество просмотров2.3K

Изначально интернет в современном его понимании Тимом Бёрнерс-Ли и Робертом Кайо задумывался для умных людей. Прежде всего для физиков-ядерщиков, а также для химиков, биологов и т.д. Но, к сожалению, со временем Интернет выродился в ресурсы для самых недумающих. В полном соответствии с мировым трендом на идиотократию. Сеть заполнили миллиарды постов с фото о том, кто что покушал, и кто где покакал. Я про FaceBook с Инстаграммами Вашими брюзжу. Нет, я понимаю, в мире, в котором 23% людей теоретически не в состоянии научиться читать, капиталистам глупо вкладывать деньги в ресурсы для умных - не окупятся! Лайкнуть котика может и даун, а вот вникнуть в сложные идеи Платона - мало лишь кто (на мой взгляд не более 2%). Но с другой стороны это что ж, умным людям вообще оставаться без созданных под их нужды ресурсов? Не порядок!

В данной статье будут не только теоретически размышления об идеальном сайте для умных, но и заготовка прототипа реализации такого проекта, с открытым исходным кодом в github, и с предложением влиться в community. Всё как мы любим. Поехали!

Читать далее

Классическая жизнь фронтенд-приложений и их сопровождение

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров4K

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

Читать далее

Вклад авторов