JavaScript *

На днях с коллегой @nin-jin возник небольшой спор в комментариях к статье "ООП: худшее, что случалось с программированием". Мы обсуждали, что является истинным IoC: "контекст окружения" (Ambient Context) или же "внедрение зависимостей" (Dependency Injection).

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

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

Прошу воспринимать этот опрос в легком и неформальном ключе. Мне просто интересно, какой из этих двух методов более распространен среди хабровчан.

Привет, на связи снова Дмитрий, React-разработчик, и сегодня захотелось написать про Proxy и Reflect.

Что такое Proxy в JavaScript?

Proxy — это встроенный объект в JavaScript, который позволяет создавать обертки для объектов и перехватывать стандартные операции с ними, такие как: доступ к свойствам, их изменение, удаление и другие. Это мощный инструмент, который можно использовать для реализации различных паттернов, например, для создания реактивных объектов, создания ленивая инициализации свойств, проверки прав доступа и выполнения других задач.

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

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

tabs-broadcast — это открытая библиотека JavaScript, предназначенная для удобной коммуникации между вкладками браузера в одном приложении. Она решает распространенную проблему: как синхронизировать состояние и события между несколькими вкладками без лишних запросов к серверу и без сложных обходных путей. С помощью этой библиотеки разработчики могут организовать обмен сообщениями между вкладками так, будто это единое приложение, обеспечивая согласованность данных и оптимизируя нагрузку.

Какие задачи помогает решить tabs‑broadcast? В современных веб-приложениях пользователь нередко открывает одну и ту же страницу в нескольких вкладках. Без координации эти вкладки работают изолированно: могут дублировать дорогостоящие операции (например, загрузку одних и тех же данных), создавать конфликты состояний (например, разные вкладки по-разному отображают авторизацию или настройки) и увеличивать нагрузку на сервер (несколько соединений от одного пользователя). Библиотека tabs-broadcast предоставляет механизм единого центра управления для таких случаев. Она позволяет одной «главной» вкладке выполнять критичные задачи (синхронизация с сервером, получение обновлений, запись в хранилище и т.п.), а другим вкладкам — получать результаты и уведомления от неё. Для разработчиков это означает более простой код для синхронизации вкладок и избавление от ручного использования низкоуровневых API.

Почему это полезно? Во-первых, улучшение UX: пользователь всегда видит актуальное состояние во всех открытых окнах приложения. Во-вторых, оптимизация ресурсов: за счет того, что тяжелые операции выполняются только в одном экземпляре, снижается нагрузка на браузер (меньше потоков, соединений, таймеров) и на сервер (меньше дублирующих запросов). В-третьих, упрощается разработка функционала, требующего взаимодействия между вкладками (не нужно изобретать собственный велосипед на базе localStorage или postMessage). Библиотека предоставляет готовые инструменты для регистрации обработчиков событий и широковещательной рассылки сообщений, позволяя фокусироваться на логике приложения, а не на тонкостях межвкладочного взаимодействия.

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

Если вас когда-либо раздражало, что Array.prototype.map нельзя использовать для объектов или reduce постоянно требует передавать начальное значение, Ramda.js решает эти проблемы, делая код чище, декларативнее и удобнее.

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

Symfony и React – мощная связка для создания современных веб-приложений. Symfony, как PHP-фреймворк, обеспечивает надежный серверный бэкенд: работу с базой данных, бизнес-логику, REST API и безопасность. React же отвечает за динамичный интерфейс на стороне клиента, позволяя создавать богатые Single Page Application (SPA) с мгновенной реакцией на действия пользователя. Используя их вместе, разработчики получают гибкость разделения фронтенда и бэкенда, что упрощает поддержку и масштабирование. Например, бэкенд на Symfony можно переиспользовать для мобильного приложения или другого клиента, пока React обеспечивает отличное UX в браузере.

Однако сочетание двух разных технологий несет и ряд вызовов. Нужно грамотно спроектировать API для связи между фронтом и бэком, обеспечить безопасный обмен данными и учесть особенности работы SPA (например, отсутствие перезагрузки страниц, хранение состояний на клиенте и пр.). Возникают вопросы: как организовать взаимодействие React-приложения с Symfony API? Как защитить API и пользовательские данные от угроз, таких как несанкционированный доступ или атаки? В этой статье мы рассмотрим основные проблемы интеграции Symfony + React, связанные с API и безопасностью, а также предложим практические методы их решения. Статья ориентирована на разработчиков от начинающих до среднего уровня и включает примеры кода и наглядные иллюстрации ключевых моментов.

Chrome 133 развивает существующую функцию всплывающих подсказок, представляя новый режим: popover="hint". Этот режим, управляемый браузером, позволяет использовать новый контекст наложения, упрощающий создание всплывающих подсказок и подобных эфемерных плавающих элементов. Он снижает трудозатраты разработчиков, сохраняя гибкость дизайна.

В прошлой статье я показал, как создать мини-чат с комнатами на FastAPI и WebSockets. Но что, если есть более мощное и удобное решение для Real-time? В этот раз разберем Centrifugo – технологию, которая берет на себя всю работу с WebSockets и масштабированием!

В статье мы разберем теорию, а затем на практике разработаем веб-приложение-опросник, где результаты обновляются в реальном времени без перезагрузки страницы. А в финале – деплой на Amvera Cloud.

Готовы прокачать свои навыки? Тогда вперед!

В эпоху цифрового контента каждая миллисекунда загрузки страницы может существенно повлиять на пользовательский опыт. В Hikasami, платформе, предоставляющей потоковое аниме и азиатские медиа для пользователей СНГ, наша цель — обеспечить мгновенную загрузку страниц, минимизировать задержки, а также гарантировать актуальность данных. Для этого мы внедрили Next.js 15, который открыл перед нами возможности глубокой оптимизации:

Хранение данных и управление глобальным состоянием в React-приложениях всегда было важной темой среди разработчиков. К 2025 году выбор подходящей библиотеки для решения этих задач стал еще более разнообразным — от проверенного Redux до современных, легковесных решений, таких как Zustand и SWR. Каждое из этих решений имеет свои особенности, плюсы и подводные камни, что делает выбор оптимального инструмента порой непростым. В этой статье я рассмотрю 5 самых популярных библиотек на сегодняшний день, проанализирую их основные преимущества, применение на реальных проектах и актуальность в контексте последних трендов разработки.

Привет, Хабр! Меня зовут Мария Кустова, я frontend-разработчик IBS. Подобного рода сравнительные исследования стейт-менеджеров выходят каждый год. Когда я начинала сбор информации, именно перевод похожей статьи стал для меня отправной точкой, но в ней были приведены другие библиотеки. Думаю, эта статья будет интересна тем, кто хочет узнать, что сейчас активно используют коллеги по React.

В предыдущей статье я рассказал о finmap.org - инструменте визуализации данных Мосбиржи. Спасибо хабравчанам за отзывы и предложения. Отдельная благодарность за донаты - я уже покрыть расходы на AWS. Благодаря вашим идеям, в finmap.org появилась строка поиска по тикеру, а в portfolio можно отобразить американские ETF.

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

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

Eslint плагин eslint-plugin-import-group

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

Привет, Хабр! Меня зовут Алёна, я senior фронтенд-разработчик отдела разработки ПО для розничного бизнеса в Райффайзенбанке. Недавно передо мной встала задача улучшения пользовательского опыта обработки ошибок запросов к бэкенду. Я решила комплексно исследовать эту тему на примере HTTP-клиента Axios.

Если при отправке запросов с помощью Axios возникает ошибка — клиентское приложение получает аргумент, который может быть экземпляром объекта, производного от системного класса Error, или любым типом. Он может содержать много информации и не всегда понятно, что самое важное для определения типа исключения и способа обработки. Поэтому я выделала 4 категории ошибок запросов, сделанных при помощи Axios, которые нужно по-разному интерпретировать.

Иногда возникает необходимость разделить длительную дорогую (с точки зрения вычислений) задачу на несколько тиков (ticks) цикла событий (event loop). Существует множество способов это сделать. Рассмотрим их.

Легко "уничтожить" пользовательский опыт, позволив длительной дорогой задаче захватить основной поток (main thread). Неважно, насколько сложным является приложение, цикл событий может выполнять только одну задачу за раз. Пока выполняется одна задача, другие ждут своей очереди. Как правило, задача выполняется настолько быстро, что пользователь ничего не замечает. Но так бывает не всегда.

Каждый PHP-разработчик, работая с современными JavaScript-фреймворками, наверняка задумывался о том, как было бы здорово передавать данные напрямую в компоненты без танцев вокруг контроллеров и типов данных. Арон Френсис, видимо, тоже терзал себя этим вопросом, поэтому 4 февраля 2025 года на своём ютуб-канале представил новую веху развития фронтенда на Laravel — Fusion.  В этом статье мы рассмотрим базовые принципы работы библиотеки и основные нюансы работы с ней.

Что вы делаете с незакрытыми вкладками браузера? На мой взгляд, они занимают слишком много места на экране, поэтому на этой неделе я разобрался, как запустить в этих вкладках Pong.

Это 240 вкладок браузера в плотной сетке 8x30. И в них запущен Pong! Видно, что мяч и ракетки перемещаются по canvas в окне и во всех вкладках.

Код (ужасный) можно посмотреть на GitHub. Но как он работает?

Хотите освоить WebSocket и создать собственный чат с комнатами? В этой статье мы разберем:

• В чем разница между WebSocket и классическим HTTP

• Как реализовать сервер на FastAPI с поддержкой WebSocket

• Как создать простой FullStack-чат для мгновенного обмена сообщениями

• Как всего за пару минут развернуть готовое приложение на облачном сервисе

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

Если ваша форма разрастается и превращается в бесконечный список полей, стандартного функционала react-jsonschema-form может быть недостаточно. Я покажу, как легко расширить возможности библиотеки и организовать поля в удобный многоколоночный макет.

Хотя я немного разочаровался в web-движке PlayCanvas, после того как его апгрейды поломали мне первый диаблоид - для каких-то очень маленьких легковесных игр он остаётся достаточно хорош. Поэтому для разнообразия реанимировал аккаунт и немного погрузился в программирование на js, написав аркаду (с механикой что-то вроде специфического урезанного BattleCity, но на сфере), где инопланетный космический кораблик летает над некоей планеткой.