В далёком Контуровском царстве, в чудесном Фокусовском государстве жила-была дружная команда разработчиков. Денно и нощно они создавали интерфейсы для поиска надёжных контрагентов, возводя величественные «палаты» функциональности и прокладывая пути обновлений. Но однажды, дабы ускорить доставку фич и снизить нагрузку на фронтендеров, было решено привлечь необычных существ — примитивов...
В моих предыдущих статьях (1, 2) я подробно рассматривал, как работает React.memo, а также делился более эффективными подходами к оптимизации производительности с помощью компоновки. Однако для глубокого понимания работы React необходимо разобраться в основном механизме, лежащем в основе всех этих оптимизаций – алгоритме согласования (reconciliation).
Согласование – это процесс, в результате которого React приводит DOM в соответствие с деревом компонентов. Именно этот механизм позволяет реализовать декларативный подход к программированию на React: вы формулируете свои намерения, а React самостоятельно определяет, как выполнить эти намерения наилучшим образом и с наименьшими затратами.
Привет, меня зовут Дмитрий, я React-разработчик и в статье хочу снова рассмотреть тему, которая у всех на слуху, однако «подкапотной» информации по ней не так много. Всем известно, что React обновляет компоненты, когда это необходимо, но как это происходит на самом деле, «под капотом»? Давайте разберемся вместе — что мне удалось узнать.
В этой статье я расскажу про swagger-coverage-tool — инструмент, который показывает, насколько полно ваши тесты покрывают API по спецификации Swagger (OpenAPI). Всё работает автоматически, без изменений в логике тестов. Поддерживаются httpx и requests, отчёт генерируется в один клик. Идеально, если вы хотите объективно видеть, что действительно проверяют ваши API автотесты.
Раньше, когда трава была зеленей, а доллар стоил 30, в мире enterprise-разработки преимущественно использовались десктопные приложения. Если вспомнить, как выглядели пользовательские интерфейсы в то время, то перед глазами возникает грустная и серая картина из кучи таблиц, кнопок, форм и бесконечно открывающихся экранов поверх других экранов. Также не забудем про тот факт, что бизнес довольно сдержанно относится к любым изменениям, особенно если они требуют дополнительных трат. Из всего этого можно сделать вывод, что красивого UI бизнес-приложений не могло существовать в то время. Однако современные фреймворки, такие как React, позволяют довольно быстро построить красивый и функциональный интерфейс. Но React'ом ли единым? Есть ли другие инструменты для эффективного написания бизнес-приложений?
VK Cloud — облачная платформа, объединяющая современные технологии для разработчиков и бизнеса, нацеленных на эффективное внедрение инновационных решений. В сотрудничестве с партнерами, такими как JMIX, мы стремимся делиться практическим опытом, который помогает компаниям ускорять процесс разработки и оптимизировать затраты на сопровождение приложений. В этой статье мы представляем материал, подготовленный экспертами JMIX и посвященный подходам и лучшим практикам разработки приложений.
Почти — потому что используется всего две функции из библиотеки:
Создать элемент DOM
Обновить элемент DOM
Эта библиотека упрощает использование нативных функций DOM, таких как createElement и replaceChild. Библиотека Fusor направлена на то, чтобы сделать эти функции проще и компактнее.
Ниже приведены примеры распространенных проблем. Попробуйте воспроизвести их с использованием инструментов, которые вы сейчас используете. Вы можете быть удивлены, обнаружив, что разработка с Fusor может быть наиболее компактным, гибким, легким и производительным способом создания фронтенд-приложений.
С вами Дима, старший фронтенд разработчик в Surf, и сегодня мы разберём React 19 — новую версию одной из самых популярных библиотек для создания пользовательских интерфейсов.
Вперёд, к подробному разбору основных фичей, оценке их плюсов и минусов и исследованию будущего React.
Список необходимых инструментов.
В прошлый раз мы остановились на том, что получили в свое распоряжение сервер – операционную систему внутри контейнера, которая автоматически стартует, в ответ на указанные действия в репозитории. В нашем случае – пока что на событие пуш.
И на этом сервере, мы можем выполнять любой набор команд для автоматизации.🫡
Но самый важный момент на этом этапе – какие настройки должны быть на этом сервере? Какие программы, пакеты или библиотеки, должны быть установлены? В конце концов, какую операционную систему использовать? ⚠️
Мы уже определили набор команд, которые хотим запускать. Давайте разберемся, что нам нужно для их успешного выполнения? Это будет вторым важным и сложным на первых порах моментом, который следует разобрать.
Проще всего, на мой взгляд, относится следующим образом. Что должно быть у нас в наличии, для запуска командeslint . –fix
npm run build
Если попробовать перечислить, то получится следующий список
Всем привет! Меня зовут Олег Косарев. Я – ведущий инженер-программист. В группе компаний «Цифра» занимаюсь развитием и поддержкой продукта «Диспетчер». Моя основная специализация – Frontend-разработка.
В данной статье я хочу поделиться с вами нашим опытом по созданию MVP (Minimum Viable Product, «минимально жизнеспособный продукт») редактора аналитических панелей.
Всем привет. Наверняка каждый, кто так или иначе связан с IT сферой, слышал модную аббревиатуру CI/CD. Везде мы слышим про необходимость ее использования, преимущества автоматизации процессов и т.д.
В вакансиях все чаще требуется опыт работы с одним из инструментов в этой инфраструктуре – Jenkins, Travis, AWS, Gitlab CI/CD.
⚠️Я предлагаю вам посмотреть на этот процесс, глазами простого разработчика. Чем ему может помочь автоматизация. Что в конечно итоге скрывается под этой аббревиатурой, и как уже начать получать дивиденды в своей ежедневной рабочей практике.
Первые шаги
Мы рассмотрим внедрение инструментов автоматизации в приложение, построенное на базе React. В целом разберем именно основные подходы и моменты, на которые стоит обратить внимание в самом начале.
В целом, это будет актуально для любого стека.
Чаще всего я использую для хранения кодовой базы и групповой работе над проектами Gitlab. Очень кстати, что эта площадка предоставляет инструментарий CI/CD.
Я пытался пару лет подступиться к этому вопросу. Стильно, модно, молодежно. Да, дает кучу преимуществ. Но все попытки переварить официальную документацию, заканчивались неудачей. А видео уроки или материалы в общем доступе – чаще всего давали рецепт автоматизации какого-то конкретного кейса, который либо частично, либо полностью отличался от моего приложения.
Мне не хватало именно взгляда на основные шаги – что, зачем и как мы делаем. А уже потом реализации практических задач.
CI – continuous integration
Что же скрывается за термином "непрерывной интеграция". Когда мы работаем над созданием программного продукта – в одиночку, или в рамках команды, мы стараемся добавить в наш проект, несколько строк кода. Новый функционал, исправление или доработки. Суть не особо важна. В конечно счете – либо появляется новый код, либо появляются изменения в старом. И нам нужно убедиться, что эти новые изменения, не содержат ошибок, которые могут вызвать проблемы или неработоспособность приложения. ⛔️
Всем привет.
Немного контекста. У нас есть легаси проект, который пишется уже на протяжении порядка пяти лет. Когда мы его стартовали, было принято решение использовать redux в качестве стэйт менеджера. Сейчас не вижу смысла рассуждать на тему того, было ли это решение правильным, имеем то, что имеем, а именно кучу кода, мигрировать который на что-то иное вряд ли получится за адекватное время одновременно с написанием новых фич. А в чем проблема, спросите вы, redux прекрасный инструмент, зачем от него отказываться? Проблема в том, что философия глобальности redux побудила команду писать код, который постепенно превратился в неподдерживаемое нечто. Вообще, конечно, странная штука – глобальные переменные испокон веков считались антипаттерном, но redux, который по сути является глобальным объектом, обрел такую популярность и повсеместное использование. Но это так, мысли вслух.
Вторая проблема redux, которую мы ощутили на себе – он из коробки плохо переиспользуется. Возможно, это следствие его глобальной природы
Давайте попробуем на простых примерах понять, что эти две озвученные проблемы означают для нас и что-то сделать, для того, чтобы решить их по возможности минимальными усилиями, без полного переписывания всего и вся.
Создание простого хука для работы с формами в React на основе zod
В этой статье мы реализуем удобный хук useForm, который минимизирует ререндеры и упрощает работу с формами в React, используя FormData для сбора данных и zod для валидации. Рассмотрим разницу между контролируемыми и неконтролируемыми компонентами.
Изначально интернет в современном его понимании Тимом Бёрнерс-Ли и Робертом Кайо задумывался для умных людей. Прежде всего для физиков-ядерщиков, а также для химиков, биологов и т.д. Но, к сожалению, со временем Интернет выродился в ресурсы для самых недумающих. В полном соответствии с мировым трендом на идиотократию. Сеть заполнили миллиарды постов с фото о том, кто что покушал, и кто где покакал. Я про FaceBook с Инстаграммами Вашими брюзжу. Нет, я понимаю, в мире, в котором 23% людей теоретически не в состоянии научиться читать, капиталистам глупо вкладывать деньги в ресурсы для умных - не окупятся! Лайкнуть котика может и даун, а вот вникнуть в сложные идеи Платона - мало лишь кто (на мой взгляд не более 2%). Но с другой стороны это что ж, умным людям вообще оставаться без созданных под их нужды ресурсов? Не порядок!
В данной статье будут не только теоретически размышления об идеальном сайте для умных, но и заготовка прототипа реализации такого проекта, с открытым исходным кодом в github, и с предложением влиться в community. Всё как мы любим. Поехали!
Рассмотрим типичный сценарий разработки фронтенд-приложений. Бизнес выдвигает требования, которые постепенно усложняют компоненты. Это приводит к проблемам сопровождения, особенно в больших проектах.
Привет! На связи снова Дмитрий — React-разработчик, который стремится разобраться, как всё устроено, и делится информацией с вами.
В прошлой статье мы подробно разобрали, что такое Proxy и как он работает, поэтому повторяться не будем. Сегодня поговорим о том, как MobX использует Proxy, создавая свою "реактивную магию".
Как MobX делает объекты реактивными?
MobX превращает обычные объекты JavaScript в реактивные, что позволяет автоматически отслеживать изменения их свойств и обновлять зависимости. В основе этого механизма лежат два ключевых инструмента: makeAutoObservable и observable.
Привет, хабр! Больше года назад я впервые узнал про сигналы, а три месяца назад @Sin9k записал видео на эту тему. И поскольку сигналы по-прежнему обходят стороной, попробую немного исправить ситуацию)
В материале будет использоваться обёртка signals-react, так как изначально рассматриваемая библиотека написана под Preact.
Привет, Хабрчане! Это Леша Жиряков, техлид backend-команды витрины KION. В прошлый раз я писал о секретах популярности Python, а сегодня будет пост о разработке на React. Расскажу, какие библиотеки стоит добавить в свой набор в 2025 году, приведу плюсы и минусы каждой, данные с GitHub и примеры использования. Начнем!
Подписки в GraphQL позволяют клиенту подписаться на изменения данных на сервере. Например, в чате с их помощью можно получать уведомления о сообщениях, их удалении или изменении. В отличие от обычных запросов, подписки работают асинхронно, поддерживая постоянное соединение через WebSocket. В этом случае сервер может в любое время послать запрос клиенту. В то же время для обычных запросов(queries), чтобы увидеть изменение данных, клиенту нужно запрашивать их заново каждый раз. А ещё с помощью GraphQL Subscriptions и библиотеки Relay можно создать собственный мессенджер.
В этой статье мы продолжим разбирать базовые концепции реактивности на основе идей и примеров, изложенных Райан Карниато (Ryan Carniato), автором SolidJS. Сегодня рассмотрим, как в реактивных системах планируется выполнение изменений производных значений.
Большинство разработчиков воспринимают реактивность как систему событий. У вас есть некоторое состояние, которое обновляется, а все зависящие от него данные пересчитываются. В итоге это изменение проявляется через побочные эффекты.
React существует уже довольно давно, и за эти годы вокруг него выросла огромная экосистема библиотек. Разработчики, переходящие с других языков или фреймворков, часто испытывают трудности с выбором библиотек, необходимых для создания веб-приложений с помощью React.
React позволяет разработчикам создавать пользовательские интерфейсы (user interfaces, UI) на основе функциональных компонентов. Хотя он предоставляет встроенные решения, такие как хуки (hooks), для управления локальным состоянием, обработки побочных эффектов и оптимизации производительности, в конечном итоге все сводится к работе с функциями — как компонентами, так и хуками — для построения UI.
В этой статье мы рассмотрим основные библиотеки React на 2025 год. Эти библиотеки являются строительными блоками для разработки приложений. Независимо от того, новичок вы или опытный разработчик, эта шпаргалка поможет вам сориентироваться в обширной экосистеме React.
