ТОП - Тёма о программировани

Альтернативы

Для группы констант, когда типизация не нужна:

const BookGenre = {
  horror: 'horror',
  comedy: 'comedy'
} as const

Если нужны только типы - юнион литералов(обожаю их, максимум пользы и минимум лишнего):

type BookGenre = 'horror' | 'comedy' // как обычный тип уйдет на компиляции

Нужны и значения, и типы:

const BookGenre = {
  horror: 'horror',
  comedy: 'comedy'
} as const
type BookGenre = keyof typeof BookGenre

function logGenre(genre: BookGenre) {} // тип
logGenre(BookGenre.comedy) // значение

Enums - зло? Или мы просто не поняли замысел творца?

Вокруг enums в TS ходит большое кол-во споров. Кто-то их любит, кто-то ненавидит. Я был и в том, и в другом лагере. Давайте посмотрим на их плюсы и минусы(по моему мнению), чтобы вам было проще вывести для себя ответ. ВАЖНО!!! Я не призываю отказываться от enums, просто призывая подумать.

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

enum BookGenre {
  horror = 1,
  comedy = 'comedy'
}

➕:
Строковые enums удобны.
Вы сразу и константы сгруппировали по смыслу, и тип сделали. Лаконично и наглядно.

enum BookGenre {
  horror = 'horror',
  comedy = 'comedy'
}
function logGenre(genre: BookGenre) {}
logGenre(BookGenre.comedy)

➕➖:
Нелогичное поведение при проверке значений.
В данном примере значение у элемента энама идентично строке, но в TS будет ошибка. Где-то это +, мол, мы явно говорим использовать только конкертный enum, где-то минус, бэкенд присылает вам просто строку, и тут вам будет недостаточно просто проверить значение, нужно писать тайпгард.

logGenre(BookGenre.comedy)
logGenre('comedy') // error

Реверсивность.
Числовые элементы enum(в значении число) являются реверсивными: по ключу получаем значение, по значению ключ. Выглядит это так:

enum BookGenre {
  horror,
  comedy
}
console.log(BookGenre.comedy) // 1
console.log(BookGenre[1]) // comedy

Иногда это может вам пригодиться. Но как поведет себя вот такой энам?

enum BookGenre {
  horror = 1,
  comedy = 1
}
console.log(BookGenre[1]) // ?

Ответить на этот вопрос мы можем, если посмотрим в результат компиляции этого enum:

var BookGenre;
(function (BookGenre) {
    BookGenre[BookGenre["horror"] = 1] = "horror";
    BookGenre[BookGenre["comedy"] = 1] = "comedy";
})(BookGenre || (BookGenre = {}));

После этого ответ становится очевидным, но поведение, по моему мнению, странное. Сделали бы и на уникальность числовых значений проверки…
А как вам такой пример?

console.log(BookGenre[25])

Логично было бы увидеть тут ошибку, т.к. у нас нет элемента со значением 25, но нет, ошибки от TS мы не увидим.

➖:
Лишний код.
Часто enums используют просто для типизации. Но не все задумываются, во что эти энамы компилируются. Многие уже привыкли, что типы в скомпилированный код не попадают… Тудуууум:

var BookGenre;
(function (BookGenre) {
    BookGenre[BookGenre["horror"] = 1] = "horror";
    BookGenre[BookGenre["comedy"] = 1] = "comedy";
})(BookGenre || (BookGenre = {}));

Знакомьтесь, ваш энам. И он поедет с вашим кодом к пользователю, даже если вам от него нужны только типы. И если у вас их много, то и лишнего когда у вас много.

Кто-то предложит использовать const enum. Я очень часто разрабатываю пакеты, поэтому нет, спасибо. Дока.

Они мерджатся.
Давайте взглянем на такой код:

enum BookGenre {
  horror = 'horror',
  comedy = 'comedy'
}
// много строк между
enum BookGenre {
  drama = 'drama'
}

В нем нет ошибки, он рабочий. Скомпилируется он в:

var BookGenre;
(function (BookGenre) {
    BookGenre["horror"] = "horror";
    BookGenre["comedy"] = "comedy";
})(BookGenre || (BookGenre = {}));
(function (BookGenre) {
    BookGenre["drama"] = "drama";
})(BookGenre || (BookGenre = {}));

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

Что делать если вы решили заменить часть или все ваши энамы. 🔽

Итоги первого месяца

Привет, работяги!

В прошлом месяце я решил вернуться к решению задачек на «Литкоде». Старался решать минимум по 1 задачке в будний день.

Итоги следующие: большую часть дней всё получилось, проблемы были по четвергам и в конце месяца я заболел, несколько дней провалялся с температурой, в итоге ритм сбился.

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

НО! Какое-то время назад, достаточно давно, я начал бороться именно с пагубным перфекционизмом, не путать со здоровым перфекционизмом. Поэтому сейчас смотрю на челендж иначе. Главное не сделать всё идеально с первого раза, куда важнее после пропуска сделать выводы и снова вернуться на дистанцию и продолжать. Может звучать очень очевидно и слишком просто, но в этом и кроется опасность. Слишком легко недооценить идею.

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

Скидывайте свои результаты за месяц в комменты. Чтобы добавить интереса, предлагаю среди самых стойких решателей задач разыграть символический приз — созвон 1-1, на котором можем пообщаться на интересующие вас темы (в рамках программирования, конечно), поревьюить код, поговорить о книгах, развитии и карьере, мб смогу помочь вам каким-то советом. !Важно! Это не консультация, их я, как и раньше, проводить не планирую.

В следующем месяце поступим аналогично)

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

Челендж

Здарова, работяги!

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

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

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

P.S. Буду рад, если в комменты к этому посту скинете ваши любимые подборки задачек)

Вакансия

Здарова, работяги!

Ко мне в команду открылась вакансия.

Ищем мощного разработчика (JS/TS), который будет вместе с нами развивать плеер Кинопоиска. Более подробное описание о том, что предстоит делать, и требования в самой вакансии. Если будут вопросы, пишите).

Материалы со ШРИ 2024

Здарова, работяги!

Что-то затянул я с материалами со ШРИ — исправляюсь.

Лекция 1 - базовый реакт
- Видео
- Преза
- Код

Лекция 2 - next.js
- Видео
- Преза
- Код

Приятного просмотра)

И еще новость!
27 июня буду на Youngcon. Если тоже планируете посетить — пишите, буду рад пообщаться вживую)
(не реклама)

Здарова, работяги!

В открытый досутп опубликовали доклад с весенней HolyJs - YouTube.

А уже 24, 25, 26 июня в рамках ШРИ будет блок лекций по React.
В этом году план следующий:
1. 24 поговорим о базе Реакта. Я каждый год делаю эту лекцию с нуля, добавляю новые нюансы, улучшаю объяснения и т. д. Этот год не исключение.
2. 25 большая лекция про NextJS. Посмотрим, как построить приложения, используя этот фреймворк.
3. 26 Андрей Зубков, мой коллега, расскажет о построении классического SPA.

Все лекции, как и каждый год, будут в открытом доступе.

Привет, работяги!

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

Есть мысли собрать ламповый список с художественной литературой. Если интересно, то пишите в комменты)

Приятного чтения!

Привет, работяги!

С последнего поста прошло много времени, много всего поменялось. Хочу поделиться с вами различными новостями и планами на каналы в «Телеграме» и YouTube, планами на выступления и прочие активности.

В ноябре 2023-го я выступал на HolyJs в Питере. Рассказывал о ререндерах в React. Видео уже доступно на канале конференции — https://youtu.be/DDN9himU5PE?si=aFGsKPTsJXGCy9si. Приятного просмотра)

В конце апреля выступил на HolyJs в Москве. Доклад был про роутеры NextJs, виды рендеринга и серверные компоненты. Записи пока нет, но скину в канал сразу, как откроют доступ.

В ближайших планах ШРИ. Будет, как всегда, летом. Готовим полностью новые лекции по React, ну или не только по React) Уже скоро скину более точную инфу.

Теперь о курсах, которые я веду на платформе learn.javascript.ru. Принял решение завершить преподавание в таком формате. Сейчас идёт/заканчивается набор на курс по React, TypeScript и паттернам. Это последние наборы, которые буду вести я, потом там будут другие преподаватели. Мой уход с платформы не значит, что там что-то не так, нет. Я просто решил сместить фокус на другие сферы своей жизни. Уверен, лекторы, которые будут вести после меня, тоже будут супер.

После ухода с платформы я не планирую совсем завязывать с преподаванием, оно останется в моей жизни как хобби. Теперь основными платформами будут «Телеграм» и YouTube. Уход с платформы позволит перенаправить часть освободившегося времени на них, поэтому скоро наконец будет новый контент. В ближайших планах — серия роликов по React, Next и экосистеме, контент по внутреннему устройству React и Next. Для «Телеграма» уже заготовил пару интересных постов)

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

Есть еще ряд планов, которые я пока не хочу спойлерить, оставлю небольшую интригу)

Типизация ошибок

Здарова, работяги!

Скорее всего, у многих возникала проблема с типизацией ошибок. Рассмотрим кейс:

try {
    // logic
} catch (error: Error) {
    
}

В этой ситуации ts будет ругаться:

Catch clause variable type annotation must be 'any' or 'unknown' if specified.ts(1196)

Возникает вопрос, почему any или unknown?

В ошибку может прилететь все что угодно:

throw 'hello';
throw null;
throw {};
throw undefined;
throw 123;

Поэтому единственно верным вариантом будет:

try {
    // logic
} catch (error: unknown) {
    
}

Именно с unknown!!! Никакого any!!!

Но как тогда обработать такую ошибку?
Очень просто, написать тайпгард:

if (error instanceof Error) {
    return error.message; // как пример
 }

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

Современная программная инженерия. ПО в эпоху эджайла и непрерывного развертывания. Дэвид Фарли

Недавно (больше месяца назад, недавно...) был на HollyJs и на стенде с книгами приобрел себе несколько книг. Одна из них была — «Современная программная инженерия. ПО в эпоху эджайла и непрерывного развертывания» Дэвида Фарли.

Ранее я уже читал книгу этого автора — «Непрерывное развертывание ПО: автоматизация процессов сборки, тестирования и внедрения новых версий программ». Именно поэтому я уже был готов к тому, что CI, TDD, trunk-based development и т. д. будут всячески превозноситься в этой книге. Так и случилось, тут без сюрпризов. Возможно, когда-то я напишу посты со своим мнением об этих подходах, но сейчас мне хочется остановиться на другом:

1. Фокус автора на важность в разработке программной инженерии. К сожалению, сейчас многие превращают разработку в рутину, просто ремесло. Но идея автора сильно бодрит, отрезвляет и помогает иначе взглянуть на то, что мы делаем каждый день. Позволяет увидеть наметки пути к улучшениям и развитию. Эта идея открывает дверь ко многим практикам, которые недоступны ремесленнику, но полезны инженеру.
2. Хороший обзор современной разработки, процессов, метрик. А самое главное — со ссылками на источники.

Советую ли я эту книгу?
Если вы закопались в рутине — точно да.
Если вы никогда не слышали про DORA-метрики, практики экспериментов, циклы обратной связи, не знаете отличия итерации от инкремента, не слышали про управление сложностью, то снова да.

НО нужно помнить, что эта книга — приятный старт, а не исчерпывающее руководство. И если вас заинтересует то, о чем рассказывает автор, и вы захотите внедрить себе что-то, то лучше почитать что-то более конкретное. Благо автор дает ссылки на другую литературу.
Одной из таких книг является «Ускоряйся! Наука DevOps. Как создавать и масштабировать высокопроизводительные цифровые организации», о ней 100% процентов будет отдельный пост, так как книга очень достойная.

Callback в ref

Здарова, работяги!

Думаю, для вас не секрет, что в React доступ к DOM-элементу можно получить не только с помощью document.getElementById(и подобного), но и используя useRef. Но есть еще один способ, и в некоторых случаях он даже лучше.

Допустим, мы хотим установить фокус на DOM-элемент. Часто я вижу подобное решение:

function MyComponent() {
    const inputRef = useRef(null);

    useEffect(() => {
        inputRef.current?.focus();
    }, []);

    return (
        <div>
            {/* разные элементы */}
            <input ref={inputRef} />
            {/* разные элементы */}
        </div>
    );
}

По моему мнению, оно не самое эффективное, особенно учитывая двойные вызовы колбека useEffect в React.StrictMode(dev mode). Чтобы воспользоваться альтернативным решением, необходимо посмотреть на апи ref’а. Там мы увидим, что ref ожидает следующие значения:

RefCallback<T> | RefObject<T>

Делаем вывод, что [[ref]] принимает еще и ссылку на функцию. Собираем пример:

function MyComponent() {
    const onRender = useCallback((element) => {
        element?.focus();
    }, []);

    return (
        <div>
            {/* разные элементы */}
            <input ref={onRender} />
            {/* разные элементы */}
        </div>
    );
}

onRender будет вызываться при добавлении (и при удалении, если этот элемент рисуется условно).

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

App Router

Здарова, работяги!

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

Ютуб

Приятного просмотра!

Куда пропал?

Здарова, работяги!

Давненько не писал посты, не выкладывал видео.
И если вы думаете, что я забил, халтурил, свалил в отпуск или что-то подобное, то нет. Готовился к ШРИ.

В этом году читал 3 лекции про Реакт:
1. База;
2. Продвинутые темы;
3. Next + StateManagement.

Приятного просмотра!

P.S. возвращаюсь к постам в тг и видео на канал)

Магия TS

Здарова, работяги!

Вы просили - я сделал. Первое видео о TypeScript уже на канале. В нем разбираю MappedTypes мощный инструмент для генерации типов.

Youtube
ВК

Приятного просмотра!

Next 13.4

Здарова, работяги!

Недавно релизнулся Next 13.4. Самое основное, что приносит нам эта версия - стабильный AppRouter, который ранее находился в бете.

Мотивация разработчиков в том, что время идёт, технологии развиваются и нексту тоже хочется расти и радовать нас новыми классными фичами, поддерживать крутые новинки реакта, но PageRouter(его мы использовали до версии 13.4) уже не позволяет это делать. Поэтому ребята подготовили новое решение AppRouter, которое с версии 13.4 становится основным выбором.

Про PageRouter я рассказывал в этом видео. Какое-то время он еще будет актуален, тк проекты обновляются не по щелчку пальцев.

В ближайшее время постараюсь релизнуть подробный разбор AppRouter)

Минутка саморекламы
#Анонсы

Здарова, работяги!

Я веду курс по React и интенсив по TS на платформе https://learn.javascript.ru/
Сейчас проходит набор:
20.05-21.05 интенсив по TS - https://learn.javascript.ru/courses/typescript
18.05 - 26.06 курс по React(React+Next) - https://learn.javascript.ru/courses/react

Лекции веду я лично, все дз проверяю я лично в формате код-ревью.

Если у вас есть желание освоить новую технологию, либо закрыть пробелы, то буду рад вас видеть.