😎 Топ-вакансий для фронтендеров за неделю

Разработчик JavaScript/TypeScript — до 240 000 ₽, удаленно (Москва)

Frontend-разработчик — от 150 000 до 180 000 ₽, удаленно (Москва)

Frontend Vue & Developer Middle++ — от 2000 до 2500 $, удаленно (ОАЭ)

Senior JavaScript developer — от 290 000 ₽, удаленно (Москва)

Frontend Team Lead — от 350 000 до 400 000 ₽, удаленно (Краснодар)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

🐸 Библиотека фронтендера

#свежак

🌸 Как эффективно использовать Vue Composition API

Vue Composition API позволяет создавать более гибкие, масштабируемые и чистые компоненты, разделяя логику по частям. Вместо того чтобы создавать большие компоненты, мы можем инкапсулировать логику в функции.

Почему важно:

📍 Повышает читаемость и поддерживаемость кода

📍 Облегчает тестирование

📍 Улучшает повторное использование логики

1. Основы Composition API:

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubledCount = computed(() => count.value * 2);

    const increment = () => {
      count.value++;
    };

    return { count, doubledCount, increment };
  },
};

— ref(): создаёт реактивные данные для примитивных типов.

— computed(): создаёт вычисляемые значения.

2. Создание повторно используемой логики:

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

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  
  return { count, increment };
}

Теперь используем в компоненте:

import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();
    
    return { count, increment };
  },
};

3. Работа с API и асинхронными данными:

import { ref } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const loading = ref(true);
  
  fetch(url)
    .then(response => response.json())
    .then(fetchedData => {
      data.value = fetchedData;
      loading.value = false;
    });

  return { data, loading };
}

Используем в компоненте:

import { useFetch } from './useFetch';

export default {
  setup() {
    const { data, loading } = useFetch('https://api.example.com');

    return { data, loading };
  },
};

💡 Рекомендации:

— Разделяйте логику на composition functions для улучшения читаемости.

— Используйте ref для примитивов и reactive для объектов.

— Используйте computed для вычисляемых значений, а не для хранения состояния.

🐸 Библиотека фронтендера

#буст

👍 Что нового в Next.js

14 июля вышел Next.js 15.4, в котором улучшена производительность и стабильность. Теперь команда next build --turbopack прошла все 8298 интеграционных тестов, что приближает Turbopack к стабильному релизу.

Также был анонсирован первый взгляд на Next.js 16 — следующую мажорную версию, которая принесет новые возможности для разработки.

🔗 Читать подробнее

🐸 Библиотека фронтендера

#свежак

📌 Команда дня: загружаем компонент отложенно

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

const LazyComponent = React.lazy(() => import("./MyComponent»));

✔️ Используется для тяжёлых страниц, графиков, модалок, админок и любых не-критичных блоков.

Зачем это нужно:

— Уменьшает размер основного бандла.

— Улучшает скорость первого рендера (LCP).

— Позволяет загружать компонент только тогда, когда он реально нужен.

😳 Лайфхаки:

— Можно обернуть в Suspense, чтобы показать loader:

<Suspense fallback={<Spinner />}>
  <LazyComponent />
</Suspense>

— Компонент загружается один раз и кешируется браузером.

— Можно использовать dynamic import и в Next.js:

const LazyComponent = dynamic(() => import("./MyComponent"), { ssr: false });

🐸 Библиотека фронтендера

#буст

Все герои выдуманы и совпадения случайны, конечно же 😶

🐸 Библиотека фронтендера

#развлекалово

⭐️ Чек-лист для Performance-анализ перед релизом

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

1️⃣ Тестирование TBT (Total Blocking Time):

— Используйте инструменты, такие как Lighthouse или WebPageTest, чтобы измерить TBT и убедиться, что основная часть контента становится интерактивной в пределах 100-200 мс.

2️⃣ Ленивая загрузка ресурсов:

— Убедитесь, что изображения, видео и другие ресурсы, которые не видны при загрузке страницы, загружаются только по мере необходимости (lazy-loading).

3️⃣ Использование requestIdleCallback:

— Оптимизируйте неважные задачи (например, отправка аналитики, обработка неважных фонов задач) с помощью requestIdleCallback, чтобы не блокировать основной поток выполнения.

4️⃣ Шрифты не блокируют рендер:

— Используйте font-display: swap для веб-шрифтов, чтобы они не блокировали рендер страницы при их загрузке.

5️⃣ Оптимизация загрузки JavaScript:

— Разделите код на части с помощью динамической загрузки (code splitting), чтобы минимизировать начальный бандл. Используйте defer или async для скриптов.

6️⃣ Ресурсы и кеширование:

— Настройте заголовки кеширования для статичных ресурсов и используйте механизмы вроде stale-while-revalidate для API-запросов.

7️⃣ Минимизация и сжатие ресурсов:

— Проверьте, что весь JavaScript, CSS и HTML сжаты и минифицированы, используя инструменты типа Terser или CSSNano.

8️⃣ Асинхронная загрузка стилей и скриптов:

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

9️⃣ Проверка по инструментам измерения производительности:

— Прогоните ваше приложение через Lighthouse и WebPageTest, чтобы узнать, есть ли какие-то узкие места, которые могут замедлять работу.

🔧 Завершающая проверка:

— Пройдитесь по результатам и проверьте, не превышают ли важные метрики (например, FCP, LCP) пороговых значений.

🐸 Библиотека фронтендера

#буст

🧑‍💻 Безумные запросы от дизайнеров, которые пришлось реализовать

Работа с дизайнерами — это всегда вызов, когда их креативные идеи выходят за рамки привычного.

Вопрос от подписчика:

«Однажды дизайнер настоял на том, чтобы кнопки в интерфейсе были в стиле старых приложений Windows 95 — с анимациями и даже с мигающими кнопками. «Старый стиль», «кнопки, которые моргают», — все это нужно было сделать с помощью CSS. Конечно, такой запрос вызвал у меня вопросы и у всей команды, но в итоге мы смогли воссоздать эту атмосферу, только с использованием современных технологий.»

❓ Какие странные идеи от дизайнеров вам приходилось выполнять? Что из этого точно не для продакшн?

Поделитесь своими историями в комментариях 🔚

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

🐸 Библиотека фронтендера

#междусобойчик

🔥 Как работает TypeScript внутри — и почему он может тормозить

Глубокий разбор проблем с производительностью TypeScript в больших проектах и монорепах.

В подкасте:

➖ Почему TS может тормозить в монорепозиториях — и что с этим делать

➖ Как project references и workspace реально ускоряют компиляцию

➖ Почему VSCode иногда медленнее самого tsc

➖ Альтернативы: Go‑компилятор для TypeScript и другие неожиданные решения

➖ Советы по оптимизации типов, импорта и структуры проекта

Разговор не про хейт TypeScript, а про то, как сделать его быстрым и удобным даже в огромных кодовых базах.

🔗 Слушать выпуск

🐸 Библиотека фронтендера

#буст