Frontend | Иван Усынин – Telegram
Frontend | Иван Усынин
149 subscribers
35 photos
5 videos
20 links
👨🏻‍💻 TechLead Frontend в Альфа-Банк. Запускал проекты в production до того, как это стало мейнстримом.

💡 На канале: рабочие заметки, решение возникающих проблем, полезные материалы про Frontend

Связаться: @usyninis
Download Telegram
Hello world 🌎
Полезный митап намечается у нас в Альфе: Москва, 21 сентября, офлайн и онлайн.

Подробности тут: https://digital.alfabank.ru/events/frontend-day

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

Решение: составил табличку as is -> to be в разрезе различных сценариев использования, по ячейкам сразу стало понятно, какие сценарии не покрыты командами. Цветом сразу выделил недостающие команды - осталось дело за малым: реализовать их 😊

#workflow@usyninis_dev
🔥1
👨‍💻 кейс: фронтендер часто взаимодействует с бэком/аналитиком по части запросов/ответов от разрабатываемых апишек или сервисов. Например - у нас упал запрос на фронте и бэку для отладки нужен этот запрос через curl.

решение: открываем вкладку network -> выбираем нужный запрос -> контекстное меню -> copy -> copy as cURL

#workflow@usyninis_dev
Please open Telegram to view this post
VIEW IN TELEGRAM
на этой неделе в нам в команду присоединился инженер по нагрузочному тестированию (НТ). Наш проект будет проходить НТ согласно производственному процессу. Это очень важный этап, позволяющий выявить проблемы технических решений до раскатки в прод.

🔜 На своем опыте помню один кейс, когда НТ помогло бы сэкономить кучу нервов и времени: на nodejs один из участков кода добавлял глобальный обработчик событий на каждый запрос пользователя: т.е если 1 пользователь открывал 5 страниц, то добавлялось 5 обработчиков. 1000 пользователей - добавляло 5000 обработчиков.. event loop lag рос многократно. Именно в этот момент на проект пустили рекламный трафик.. и контейнер лопался 😳

Локально и на тестовом стенде естественно это не стреляло, т.к. пользователей там не так много. История закончилась хорошо: несколько дней разбора когда, анализа изменений и баг был устранен. В подарок - бесценный опыт 😎
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
У нас в Альфа-Банке проводятся встречи тех-лидов, на которых можно обменяться опытом, обсуждить технические решения или любые прочие front-темы.

На одной из таких встреч поделился техническими решениями разработанными на нашем проекте с коллегами.

Фидбек помог пополнить бэклог полезными задачами 👌
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 кейс: проект не запускается на локальной машине, ругается на занятость порта (EADDRINUSE..), при этом вроде бы все приложения остановлены..

решение (macos):

определяем PID по порту:
lsof -i tcp:<PORT>

убиваем процесс:
kill -9 <PID>

#workflow@usyninis_dev
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
https://excalidraw.com/

Сервис для рисования в браузере с возможностью совместного редактирования и стилизацией под карандаш

Удобно, если требуется нарисовать какую-нибудь схемку/структуру 👍

#tools@usyninis_dev
🔥1
Привет! Пишу, в том числе, в социальной сеть для нетворкинга от hh.ru, где можно строит профессиональные связи, обмениваться экспертизой и развиваться в комьюнити.

Мой профиль в сетке: https://set.ki/2tsKkoy
Зачем frontend-разработчику изучать TypeScript? 🤔

В мире frontend-разработки решения принимаются быстро, и ошибки могут стоить дорого. Именно поэтому изучение TypeScript становится важным шагом для любого разработчика, желающего повысить качество и надежность своего кода. TypeScript вводит строгую типизацию в ваш проект. Это снижает риск возникновения ошибок и исключает неожиданности во время выполнения кода, делая его более предсказуемым.

⭐️Одним из основных преимуществ использования TypeScript является улучшенная поддержка инструментов разработки, таких как автозаполнение и рефакторинг. С TypeScript становится проще работать в команде, ведь каждый разработчик получает четкое представление, какие типы данных использовать.

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

На наших проектах мы полностью пишем код на typenoscript, будь-то бизнесовый код или общие библиотеки 🛠
1
👨‍💻 задача:

вывести количество рендеров в react-компоненте

решение:

import { useRef } from 'react';

export function useRendersCount(): number {
return ++useRef(0).current;
}


в компоненте:
const Demo = () => {
const [item, itemChange] = useState(0);
const rendersCount = useRendersCount();

return (
<div>
<span>Renders count: {rendersCount}</span>
<br />
<button onClick={() => itemChange(item + 10)}>re-render</button>
</div>
);
};


еще куча полезных хуков: https://github.com/streamich/react-use

#workflow@usyninis_dev
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Подборка React-библиотек на 2025 год: https://www.robinwieruch.de/react-libraries/
Please open Telegram to view this post
VIEW IN TELEGRAM
What is Turborepo?

Turborepo: https://turbo.build/ - Очень удобная и высокопроизводительная система сборки JS и TS. Используем на своем проекте для монорепозитория платформенных библиотек.

Гибкая система кэширования и реализация через таски позволяет реализовывать сложные сценарии сборки/тестирования/публикации пакетов в монорепе

#tools@usyninis_dev
Что такое kafka?

Даже если ты frontend-разработчик, важно понимать как устроен бэкенд/devops и в целом технологический стек проекта.

Для крупных проектов обязательным инструментом является брокер сообщений, на нашем проекте это Apache Kafka.

Следующий видос очень помог мне понять основу и назначение Kafka: https://rutube.ru/video/32b7ce6c5bb9b974dd448435241feb90/