Обновить

Фронтенд

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

Привет, Хабр! Задали насущные вопросы про технологии и команду Александру Сырцову, Head of Frontend клиентского сайта Wildberries. Мини-интервью — ниже.

Какие самые большие мифы вокруг фронтенд-разработки тебе встречались?

Миф 1. Фронтенд обязательно должен быть «глупым». Получили данные — отрисовали, изменили — отправили обратно на сервер.

В масштабах маркетплейса Wildberries фронтенд, наоборот, должен быть «умным»: мы сознательно выносим часть бизнес-логики на устройства клиентов, чтобы снизить нагрузку на серверные мощности. При этом сами микросервисы стараемся упрощать.

На таких высоконагруженных проектах, как наш, фронтенд — это сложная инженерия: управление состоянием тысяч динамических элементов, оптимизация времени загрузки на медленных соединениях, построение архитектуры, которая масштабируется вместе с ростом бизнеса, а также прямое влияние на конверсию и Core Web Vitals.

Миф 2. Мобильная и десктопная версии могут сильно отличаться.

Для нас критически важна консистентность. Пользователь может начать покупку в приложении или мобильном браузере, а завершить её на десктопе. Поэтому единая логика, дизайн-система и API — это не nice to have, а обязательное требование.

Миф 3. Производительность фронтенда — это забота только фронтенд-разработчиков.

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

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

Какое самое необычное решение по оптимизации фронтенда тебе когда-либо приходилось применять?

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

Мы измерили метрики для обоих подходов — классического и «революционного» — и увидели, что пользователи значительно чаще совершают заказы, если могут максимально быстро увидеть страницу и начать с ней взаимодействовать.

Какие изменения произошли в экосистеме фронтенд-технологий за последнее десятилетие и как они повлияли на твою работу?

Десять лет для мира фронтенда — это целая вечность. Мы прошли путь от MVC-фреймворков к компонентному подходу, пережили расцвет TypeScript, серверного рендеринга и его эволюции к гибридным моделям. Вслед за бэкендом научились строить микросервисы на фронтенде — микрофронтенды, и это лишь часть изменений.

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

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

Вторая часть здесь.

Теги:
Рейтинг0
Комментарии0

Открытый учебный проект JavaScript Mastery — Complete Learning Path — это курс для изучения языка программирования JavaScript. Энтузиасты собрали более 500 учебных материалов — репозиторий заменяет буквально 4 года учёбы в университете. Есть вся база от определения переменных до ООП, замыканий и других сложных, но функциональных концепций. Сотни упражнений для повторения материалов и закрепления знаний. Примеры кода, визуализация всех концепций, каждый учебный пример авторы разжёвывают до последней строчки. В конце есть идеи пет‑проектов, чтобы закрепить знания. В проекте есть гайд для подготовки к собеседованиям со всеми актуальными вопросами.

Теги:
Рейтинг0
Комментарии1

Несколько важных новостей

👀 THE MAIN THING!

Gemini в Chrome.
Google официально встроил Gemini прямо в браузер. Пару дней назад Firefox обьявила о том, что приостанавливает создание AI-браузера из-за недовольства пользователей. Google решила сделать наоборот и начинает Новую эру браузеров".

Вот несколько фичей которые они представили:

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

  2. Автоматический просмотр. Агент сам будет смотреть ваши вкладки, формы, инфу и будет реализовывать сложные цепочки шагов покупок или заполнения форм регистрации или чего-то еще за вас. Звучит немного фантазийно и сложно, но может в будущем так и будет.

  3. Встроенный Nano Banana. Редактирование и создание изображений прямо в браузере без надобности их сохранять и запускать в Paint.

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

😍 ЕЩЕ НЕМНОГО ИНТЕРЕСНОГО

Bun ускоряет async/await на 35%.
Bun v1.3.7 обновил JavaScriptCore и дал реальный прирост производительности для async/await операций. Для фронтенд-команд это означает более быстрые билды и CI/CD пайплайны, особенно если вы используете Bun для сборки Next.js или других фреймворков.

Yarn 6 переписывают на Rust.
Yarn делает логичный ход: порт в Rust с фокусом на производительность. Если это действительно ускорит установку зависимостей, это сэкономит часы времени разработчиков в неделю, особенно в больших монорепозиториях. Но скорее всего, они просто не смогли победить pnpm, и решили добиться ускорения засчет нативности Rust. 💪

WSO2 публично прощается с Java, переходит на Go.
Enterprise-компания, которая 20 лет строила middleware на Java, теперь говорит: "Java — не язык будущего для нашей инфраструктуры". Для фронтенд-команд это важно, потому что переход backend на Go означает более быстрые BFF и API, что напрямую влияет на UX наших приложений.

Ryan Carniato выпустил обзор JavaScript-фреймворков на 2026 год.
Автор SolidJS делает традиционный "большой обзор" ландшафта фреймворков. Полезен не из-за "кто победит", а из-за того, как он раскладывает тенденции по направлениям — это помогает планировать, какие технологии изучать команде.

Cloudflare делает microfrontends частью своей платформы.
Ещё один шаг к тому, чтобы "фронтенд как монолитное SPA" оставался больше в учебниках, чем в проде. Если инструменты для microfrontends становятся более доступными, это открывает возможности для разделения фронтенда на независимые части.

Мой телеграм канал, все новые посты там! Подпишись!

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии5

Представлен открытый проект PeerWeb — децентрализованного веб‑хостинга на базе WebTorrent. Решение обеспечивает децентрализованный, устойчивый к цензуре веб‑хостинг через пиринговые сети. «Загружайте свои статические веб‑сайты и делитесь ими по всему миру, не полагаясь на централизованные серверы и не оплачивая хостинг», — пояснили авторы решения.

Теги:
Всего голосов 4: ↑4 и ↓0+4
Комментарии0

Gemini представляет GenUI: Новый стандарт адаптивных интерфейсов

Google совершает очередной прорыв в области взаимодействия человека и ИИ, анонсируя Gemini GenUI (Generative User Interface). Это не просто обновление модели, а концептуальный сдвиг от статичных UI к интерфейсам, которые создаются «на лету» под конкретную задачу пользователя.

Что такое GenUI?

Основная идея GenUI заключается в том, что ИИ больше не ограничен текстовыми ответами или стандартными виджетами. Модель теперь способна генерировать динамические элементы интерфейса в реальном времени.

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

Ключевые возможности:

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

Мультимодальная интеграция: Плавный переход между генерацией текста, изображений и функциональных UI-компонентов.

Интерактивность «из коробки»: Сгенерированные элементы не просто картинки. Это рабочие инструменты, с которыми можно взаимодействовать (двигать ползунки, сортировать данные, переключать режимы).

Адаптация под девайс: GenUI автоматически учитывает форм-фактор устройства, создавая удобный интерфейс как для десктопа, так и для мобильных платформ.

Почему это важно для разработчиков?

Для создателей приложений GenUI открывает путь к «бесформенному» дизайну. Вместо того чтобы прорисовывать тысячи сценариев (Edge Cases), разработчики могут предоставить Gemini набор высокоуровневых компонентов и правил, а модель сама решит, как лучше их скомпоновать для решения проблемы клиента.

«Мы переходим от эры, где пользователь учится понимать интерфейс, к эре, где интерфейс учится понимать пользователя».

Теги:
Всего голосов 4: ↑3 и ↓1+3
Комментарии0

Проект HTTP Cats (GitHub) позволяет использовать котиков в разных ситуациях для объяснения сетевых ошибок и проблем в работе веб-систем.

Теги:
Всего голосов 5: ↑5 и ↓0+6
Комментарии7

Джуны - всё. Это уже статистика

Как говорилось в Герои3, астрологи объявили, что новых сеньоров не будет, мы последние

За 2023-2025 рынок entry-level позиций в программировании схлопнулся структурно, а не циклично.

 • 🇺🇸 В США количество junior-вакансий упало на -67% за один год

 • 🇪🇺 В Европе найм entry-level сократился на -73%, при том что весь рынок упал всего на –7%

 • Занятость разработчиков 22-25 лет снизилась на –20% с конца 2022

 • Безработица среди выпускников computer science в 2025 - 6.1%, хуже, чем у философов и биологов

 • AI автоматизировал именно те задачи, на которых раньше учились juniors: boilerplate, тесты, базовую отладку

 • Компании больше не могут позволить себе 6-12 месяцев обучения из-за высоких ставок

 • ROI теперь нужен с первого дня, а не “когда-нибудь”

 • Junior = расходы + менторинг + риск ухода через год

“Junior” вакансия сегодня = React + Backend + Google Cloud / AWS + CI/CD + 3-5 лет опыта

На одну позицию - сотни и тысячи кандидатов. Первый шаг в карьере фактически убрали, второй (мидл) скоро уберут.

Это не только из-за AI. Основная причина - экономика.

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

 • Появляется новый вход: AI-augmented developer

 • Ожидают готовые production-проекты, end-to-end системы, AI-фичи

 • Спрос на таких “джунов” вырос на +143%, пока классические junior-роли падают

Если сейчас убрали 60-70% джунов, то в 2031-2036 рынок получит жесткий дефицит senior и tech lead. Кадровая яма уже заложена. А может и они/мы уже тоже не будут нужны

Старая карьерная лестница “учёба → junior → middle” больше не работает.

Для новичков вход в IT стал сложнее и дороже, а интерны вообще уходят в прошлое

Теги:
Всего голосов 17: ↑13 и ↓4+13
Комментарии66

Макротасок не существует.

Один из самых частых вопросов на собеседованиях для frontend разработчиков: Расскажите про событийный цикл? как выполняются таски? что такое микротаски и макротаски?

В архитектуре event loop вообще нет такого слова как макротаски(macrotasks). Я вообще не смог найти ни одной спецификации, где было бы написано слово macrotask. Кроме Promises/A+. Так в чем же разница между Promise и setTimeout? Почему Promise всегда(не всегда) будут исполняться в приоритете?

Браузер имеет несколько очередей задач (task queues) для разных типов тасок. Таска - это любой javascript код, запланированный стандартными механизмами, такие как запуск программы, запуск события или коллбэки. Помимо этого вы можете создать таску с помощью API, например WindowTimers(setTimeout, setInterval). Микротаски же в свою очередь такие же конструкции javascript, которые позволяют выполнять операции не дожидаясь запуска нового цикла event loop (process.nextTick, Promises, queueMicrotask). Так вот, так как setTimeout, setInterval относятся к браузерному API, то очередь микротасок, таких как Promise и т.д. всегда будет в приоритете выполнения, перед браузерным API.

При этом стоит учитывать, что браузерные API исполняют таски в разные очереди и по разному, например MutationObserver среагировавший после того, как в очередь микротасок попал успешный промис от функции fetch, будет выполнен раньше. То есть вставка в очередь тасок может быть не только как push. Таким образом то, что называют макротасками - это таски браузерного API, которые выполняются по одной на цикл движка браузера.

Полезные материалы

  1. W3 (https://www.w3.org/TR/2011/WD-html5-20110525/webappapis.html#task-queue)

  2. MDN Event Loop (https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop)

  3. Tasks, microtasks, queues and schedules (https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules)

  4. Филипп Робертс: Что за чертовщина такая event loop? | JSConf EU 2014 (https://www.youtube.com/watch?v=8aGhZQkoFbQ)

  5. Джейк Арчибальд. В цикле - JSConf.Asia (https://www.youtube.com/watch?v=cCOL7MC4Pl0)

Теги:
Всего голосов 5: ↑3 и ↓2+2
Комментарии0

Где учиться фронтенду?

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

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

HTML. Разметка и структура веб-страниц.

CSS. Стили и визуальное оформление сайтов

JavaScript. Интерактивность и логика интерфейса.

TypeScript. Статическая типизация JavaScript для предсказуемости.

React. Создание сложных пользовательских интерфейсов и одностраничных приложений.

Vue.js. Разработка интерфейсов с понятной архитектурой.

Прокачивайте свои скиллы из любой точки мира

Теги:
Всего голосов 2: ↑2 и ↓0+2
Комментарии0

Делимся записью докладов с нашего митапа «Вперед в будущее!»

Павел Варнавский, руководитель группы разработки «ДАР» (Корус Консалтинг), рассказал, как их команда использует BI Magic в своих проектах для создания мощных аналитических решений.

Смотреть выступление

В записи - примеры и разбор:

  • Как сделать дэшборд с уникальной визуализацией

  • Как внедрять CI/CD для дэшбордов и масштабировать решения под конкретные процессы, там, где стандартных «коробочных» решений не хватает

  • Два практических кейса, где кастомная разработка на Luxms BI решила нетипичные задачи

Будет интересно всем, кто работает с нестандартной аналитикой, сложными требованиями бизнеса и хочет понимать, как кастомная BI-разработка может быть управляемой и удобной

Теги:
Всего голосов 1: ↑1 и ↓0+3
Комментарии0

Представлен открытый веб-редактор изображений DPaint.js (онлайн-версия) на JavaScript, созданный по образцу легендарного Deluxe Paint, с упором на ретро-форматы файлов Amiga. Помимо современных форматов изображений, DPaint.js может читать и записывать файлы иконок Amiga и изображения IFF ILBM.

Основные возможности проекта: слои, выделение, маскирование, инструменты трансформации, эффекты и фильтры, множественная отмена/повтор действий, копирование/вставка из любой другой программы обработки изображений или источника изображений, настраиваемые инструменты дизеринга и циклическая смена цветов.

Теги:
Всего голосов 2: ↑2 и ↓0+2
Комментарии0

Коллеги привет, искал себе решение как реагировать на изменения в объекте и нашел отличный сервис, который используется внутри директив таких как NgClass и NgStyle.

KeyValueDiffers позволяет создать KeyValueDiffer для сравнения изменений текущих пар ключ-значение с новыми. Если вы используете иммутабельные объекты, то можно просто обернуть все в эффект, ну а если вы наследники крутого легаси, где все объекты мутируются по ссылке, тогда проверку нужно вешать в DoCheck, чтобы реагировать на каждый тик change detection.

Накидал оба примера, чтобы поделиться с вами:

Иммутабельный с effect:


@Component({
  selector: 'app-test',
  template: ''
})
export class TestComponent {
  public state = input.required<Record<string, string | number>>();
  
  private differs = inject(KeyValueDiffers);
  private differ: KeyValueDiffer<string, string | number> | undefined;

  constructor() {
    effect(() => {
      const currentState = this.state();
      
      // создаем диффер, если он еще не создан
      if (!this.differ) {
        this.differ = this.differs.find(currentState).create();
      }

      // Эффект будет перезапускаться при изменении инпут-сигнала.
      const changes = this.differ.diff(currentState);

      // только если есть изменения
      if (changes) {
        changes.forEachAddedItem((record) => {
          console.log(`В объект добавлена запись: Ключ: ${record.key} | Значение: ${record.currentValue}`)
        });

        changes.forEachChangedItem((record) => {
          console.log(`Изменено: ${record.key} | Новое значение: ${record.currentValue}`)
        });

        changes.forEachRemovedItem((record) => {
          console.log(`Удалено: ${record.key}`)
        });
        
        // Остальные методы forEachItem и forEachPreviousItem по необходимости
      }
    })
  }
}

Легаси подход, которого, надеюсь, ни у кого нет, но на всякий случай :)

@Component({
  selector: 'app-legacy',
  template: ''
})
export class LegacyComponent implements OnInit, DoCheck {
  @Input({ required: true }) state!: Record<string, string | number>;
  
  private differs = inject(KeyValueDiffers);
  private differ: KeyValueDiffer<string, string | number> | undefined;

  ngOnInit() {
    // Создаем диффер при инициализации
    this.differ = this.differs.find(this.state).create();
  }

  // Запускается на каждый тик change detection, так как мутации по-другому не отследим.
  ngDoCheck(): void {
    const changes = this.differ?.diff(this.state);

    if (changes) {
      changes.forEachAddedItem((record) => {
        console.log(`В объект добавлена запись: Ключ: ${record.key} | Значение: ${record.currentValue}`)
      });

      changes.forEachChangedItem((record) => {
        console.log(`Значение изменилось: ${record.key}`)
      });

      changes.forEachRemovedItem((record) => {
        console.log(`Запись удалена: ${record.key}`)
      });

      // Остальные методы forEachItem и forEachPreviousItem по необходимости
    }
  }
}
Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии0

Почему у PWA до сих пор нет полноценного «магазина приложений» — возможно ли это вообще?

Всем привет.

В течение последних месяцев, работая с PWA-приложениями, мы постоянно сталкивались с одним и тем же вопросом:

Почему в 2025 году у PWA до сих пор нет настоящего App Store?

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

При изучении существующих PWA-магазинов и каталогов обнаруживаются одни и те же повторяющиеся проблемы.

  1. Установка остаётся непонятной для пользователей

Даже сегодня установка PWA вызывает затруднения у обычных пользователей.

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

Во многих PWA-каталогах всё ограничивается текстовой инструкцией — и на этом взаимодействие с сервисом фактически заканчивается.

  1. Отсутствие доверия

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

Со стороны разработчиков наблюдаются крайности:
• либо любой может опубликовать приложение без подтверждения права собственности,
• либо проверка обязательна, но сложна и ограничена одним способом (например, через DNS-записи).

В итоге доверие не формируется ни у одной из сторон.

  1. Разработчики — второстепенные участники экосистемы

Распространённые проблемы:
• медленные и неудобные процессы публикации,
• почти полное отсутствие автоматического заполнения данных из манифеста,
• нехватка инструментов, которые были бы полезны разработчику ещё до установки приложения пользователем.

Экосистема не стимулирует разработчиков поддерживать и развивать свои PWA.

  1. Интерфейс не воспринимается как «нативный»

Это тонкий, но важный момент.

Если магазин:
• выглядит как обычный веб-сайт,
• не вызывает ассоциаций с App Store или Google Play,

пользователи инстинктивно доверяют ему меньше — даже если сами приложения качественные.

При этом сами PWA как технология за последние годы заметно повзрослели: офлайн-режим, push-уведомления, installability, Web APIs.
Однако именно слой распространения и доверия остаётся самым слабым звеном.

Главный вопрос, к которому мы пришли

Возможно ли вообще создать PWA-магазин, который:
• пользователи будут воспринимать как настоящий магазин приложений,
• не станет источником боли для разработчиков,
• сможет устойчиво развиваться, а не быть заброшенным через несколько месяцев?

Или же сама идея магазина PWA в текущей экосистеме изначально ошибочна?

Будет интересно узнать ваш опыт.

Вы публиковали PWA-приложения в существующих магазинах или каталогах?
Что вызывало наибольшие сложности — у разработчиков или у пользователей?

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии10

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

Открытый скрипт для браузера IKEA 3D Model Downloader добавляет на сайте IKEA кнопку «Download 3D» на страницы товаров. Проект позволяет скачать файл с точной 3D-моделью дивана, стола или шкафа. Очень удобно для планирования ремонта. Можно закинуть мебель в 3D-планировщик квартиры, посмотреть, как она встанет по размерам, прикинуть цвета и сочетания, а не покупать вслепую «по картинке» Работает на всех версиях сайта IKEA и с новой версией тоже. По сути — примерка мебели у себя дома, только в цифре.

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии2

Попробовал вчера Kурсор впервые:
ШОК!!!

-Сказать дорого, ничего не сказать. После всех оптимизаций какие толкьо можно было выкрутить с помощью перплексити от 1 до 16м токенов в запрос? Да ну на х…
-Молниеносное отупение. Вместо того чтобы понимать какой компонент нужно доделать руками или через чат, тупо жми кнопку все будет ок. Только плати.

Вообщем вывод:

  • если у тебя большой проект: плати и тупи;

  • если у тебя сайтик, то повезло. Радуйся и не думай.

А лично я , кроме удобного интерфейса , не увидел ни чего хоть на 1% нужного. Знаю тут ни кто не поддержит) ну и ладно)))

Теги:
Всего голосов 3: ↑3 и ↓0+4
Комментарии2

Функциональное программирование перевернуло фронтенд: почему JS возвращается к платформам?

Функциональное программирование перевернуло фронтенд-разработку, но теперь индустрия возвращается к платформенным подходам — почему и как это меняет JS-экосистему?

Статья «Как функциональное программирование изменило фронтенд и почему отрасль возвращается к платформе» разбирает эволюцию: от чистого FP к гибридным решениям, с примерами и выводами для фронтендеров.

Виктория Копылова делится своим анализом, основанным на современных наблюдениях и на тех статьях прошлого, где функциональное программирование воспринималось как путь к «правильному» фронтенду.

Теги:
Всего голосов 2: ↑1 и ↓1+2
Комментарии0

С новым рабочим годом, Хабр
Мы в SSP SOFT опять расширяем команду и ждем ваши резюме

Кто мы? Занимаемся заказной разработкой ПО и предоставляем крупным клиентам выделенные команды на ИТ-аутсорсинг.

В 2025 году SSP SOFT вошел в число лидеров найма ИТ-специалистов на российском рынке за год мы наняли 179 сотрудников!
И главное в 2026 году найм продолжается.

У нас новый московский офис в 2025 году у самой Красной площади! А еще есть вакансии в офис в Томске и на удаленку из любой точки России.

Открытые вакансии в SSP SOFT: это реальные проекты, дружная команда и атмосфера, где работать — продуктивно, без выноса мозга и микро-менеджмента. В январе 2026 ищем гуру, кто готов в новое профессиональное будущее вместе с нами.

1️⃣ Fullstack разработчика (C# + React) (https://vk.cc/cT6vMP)
2️⃣ Python Разработчика (ML Engineer) (https://vk.cc/cT6vNp)
3️⃣ Программиста 1С (https://vk.cc/cT6vNR)
4️⃣ Fullstack-разработчика (Java+Go/React) (https://vk.cc/cT6vOl)

Что вас ждет в SSP SOFT:
✅ Рост: Центр компетенций для максимального апгрейда скиллов.
✅ Свобода геолокации: Возможность работать удаленно, гибрид или офис.
✅ Баланс: Работаем, чтобы жить, а не наоборот.

🎁 Приятные бонусы: ивенты для всей команды, ДМС для штата, обучение и бенефиты.

Подробности о вакансиях читайте на нашей странице ХХ.ру, но туда откликаться необязательно. Ждем резюме в ЛС нашему HR Lead Алине (https://t.me/AONikitina). Не забудьте добавить «секретную фразу» в сопроводительное письмо, «Увидел(а) вакансию на Хабре».

Желаем всем успешной карьеры в 2026 году 🚀)

Теги:
Всего голосов 3: ↑3 и ↓0+5
Комментарии0

Решил сегодня почитать, что пишут в Ангуляр комьюнити Хабра, и увидел сильно популярный пост с аж 51 лайком и 71 закладкой.

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

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

Автор условно говорит, что у нас есть плохой пример использования:

this.http.get('/api/data').subscribe((data) =>; {
  this.data = data; // Что если запрос не вернётся?
});

и затем приводит хороший пример с сигналами и RxJs:

readonly data = signal([]);
readonly error = signal(null);

loadData() {
  this.http.get('/api/data').pipe(
    tap(() =>; this.error.set(null)), // Сбрасываем предыдущую ошибку перед загрузкой
    catchError((err) =>; {
      this.error.set('Не удалось загрузить данные');
      return of([]); // Возвращаем пустой массив, чтобы поток не прерывался
    })
  ).subscribe((result) =>; {
    this.data.set(result);
  });
}

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

interface State<T = object> {
  data: T[];
  error: string | null;
}

@Component({...})
export class BestRxJs {
  private http = inject(HttpClient);
  private loadDataAction$ = new Subject<void>();

  private state$ = this.loadDataAction$.pipe(
    switchMap(() => 
      this.http.get<State[]>('/api/data').pipe(
        map((result) => ({ data: result, error: null })),
        catchError(() => of({ data: [], error: 'Не удалось загрузить данные' })),
        startWith({ data: [], error: null })
      )
    ),
    shareReplay({ bufferSize: 1, refCount: true })
  );

  readonly private state = toSignal(this.state$, {
    initialValue: { data: [], error: null } 
  });

  readonly protected data = computed(() => this.state().data);
  readonly protected error = computed(() => this.state().error);

  protected loadData(): void {
    this.loadDataAction$.next();
  }
}

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

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии6