Сова пишет…
3.13K subscribers
345 photos
37 videos
5 files
417 links
Frontend Senior Fullstack Backend Lead и прочие слова.
Изучаю самые современные технологии.
Обучаю разработчиков как стать сильнее — https://frontend.vision.

По коллаборациям и сотрудничеству пишите в сообщения канала!
Download Telegram
И вот все эти utils, helpers без четкой структуры такое же «разное» или «мусорка».
Чтобы код был в чистоте, нужно к нему относиться соответствующе. Иначе получите ровно то, что заслужили

Отсылаю к статье: https://sova.dev/ru/why-utils-and-helpers-is-a-dump/
🔥11👍2
Новеньким добро пожаловать!
И у меня сходу вопрос: для добавления одной env-переменной, мне пришлось изменить 18 файлов.

Это норм, как считаете?
👎22🤩4👍3
Месяца четыре я пишу сценарий про личное планирование. В текущих обстоятельствах я обнаружил слабые места своих подходов.

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

https://podcast.ru/e/6gAEnGruJRS
👍7🤔2
Иногда нужно выполнить код прямо перед выходом из функции.

В языках вроде Go есть специальный синтаксис defer. В Javascript точно такого синтаксиса не имеется. Но подобное поведение можно реализовать через try/finally.

Да, конструкцию try/catch/finally можно использовать без секции catch. Рекомендую поиграться с этим подходом, иной раз код довольно сильно упрощается.

UPD.: на самом деле поведение кода немного отличается. В примере с try/finally, cb() может бросать исключения, но код finally гарантированно будет выполнен. Именно это мне и нужно было
👍103👎3
Ну что? Кто уже поддержал Дурова платной подпиской?
Anonymous Poll
15%
Я
20%
Попозже
43%
Не буду
22%
Платная подписка?!
🕊13🌭7🤡4🐳4🌚4
Ребята, хуки в React — код намертво прибитый к View.

Я даже не представляю, с чего люди взяли, что завернув свой код в хук, код сразу же становится вынесенным из компонента. Это вообще не так!

А как понять, когда код отделен от View или же прибит намертво?
Легко, попробуйте запустить его без React, за пределами компонента. Да так, чтобы семантика поведения сохранилась и все работало как раньше. Всякие хаки с моком useState, useEffect не в счет, потому что здесь как раз мокаются методы React, то есть код зависим от View.

К тому, же, хуки жить не могут без react lifecycle. Да даже банально посмотрите, какие методы хуки юзают внутри себя — конечно же это методы React. Так как вообще можно назвать код, который использует методы React, называть отвязанным от View? Если эти же хуки используются ТОЛЬКО внутри React-компонентов?

Но, в чем проблема, скажут некоторые?
А в том, что код прибитый к React, невозможно переиспользовать в любом другом месте. А также любые данные, которые лежат в React Context невозможно использовать за пределами React-компонента. А раз хуки невозможно использовать где-то еще, то и логика в них оказывается зашита и код придется дублировать.

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

Код асинхронных преобразований уже написан и вызывается на 5-6 уровней вложенности выше формы. Там создается контекст, в который прокинута куча методов для работы с формой. После сабмита формы, запускается валидация, как на сервере, так и на клиенте, затем запрашиваются дополнительные данные, а уже потом нужно преобразовать данные формы в реальный чек с финансовыми операциями, а затем отправить на бекенд.

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

И я в тупике. Код ПРИДЕТСЯ продублировать для чека в форме и для формирования чека при отправке формы. А к чему это ведет? Да к десяткам багов, потому что используется react-hook-form, который не может гарантировать правильных типов для полей формы, к тому же спокойно проставляет undefined как начальное значение для любого поля формы.

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

Как решить проблему?
Полностью удалить все возможную бизнес-логику из хуков. В хуках рассчитываем только всякие UI-штуки, вроде анимаций, отслеживания opened у dropdown и прочее тому подобное. Компонент по сути должен только оповещать нашу бизнес-логику о том, что что-то произошло, например “кнопка отправки нажата”, “изменился получатель платежа”, “изменилась валюта”, “страница смонтирована” и так далее. И именно бизнес-логика реагирует на эти события так, как ей нужно, она может начать грузить данные, взять их из кеша, вообще ничего не делать. Компоненту должно быть все равно, он просто рендерит данные, которые ему подсовывает бизнес-логика.

Именно так, код становится гораздо более очевидным.
Пожалуйста, не пишите логику в хуках и компонентах, это адская боль.
🔥28❤‍🔥16👍12🐳3🤔1
Очень рекомендую посмотреть видео от создателя XState на эту тему. Автор доклада рассказывает о том, почему всякая логика внутри useEffect приводит к проблемам.

https://youtu.be/HPoC-k7Rxwo
👍8🌭2
Live stream scheduled for
Завтра вечером будем разбираться что такое полином и полиномиальная сложность!

Я не шарю в этой теме, но кто понимает как оно устроено и что значат эти слова, пожалуйста присоединяйтесь. Мы поспрашиваем и разберемся вместе!
На канале будет live call!

Кому интересна эта тема ставьте лукас 👍
👍361
Live stream started
Начинаем когда соберется побольше человек.
Live stream finished (1 hour)
Тлдр: избегайте вложенных циклов, изучите структуры данных, их сложность и не стесняйся тащить их на фронт. 2-3 кб погоды не сделают, а читаемость и производительность кода будет выше
👍14
Личные консультации по effector, react и FSD!

За почти 10 лет коммерческого опыта в веб-разработке, я насобирал внушительный опыт в разных технологиях. Хотя специализируюсь я в React + Effector, готов помочь решить очень разнообразные задачи и ответить на массу вопросов.

Чем конкретно я могу помочь за выделенный час-два:
Объясню как решить задачу на effector, настроить связанный с ним тулинг и написать тесты.
Помогу отдебажить приложение, найти узкое горлышко в коде, проработать элементы приложения с архитектурной точки зрения.
Проведу быстрое ревью архитектуры React-приложения, помогу понять узкие места, обозначу migration plan и расскажу почему-зачем нужно проводить такие изменения.

Помогу в проектировании библиотечного кода, DX и типизации на TypeScript.
Проанализирую бизнес-кейс в продукте и помогу разобраться как лучше реализовывать его в указанных условиях.
Помогу с выбором технологического стека на старте проекта, учитывая требования бизнеса, существующую команду, возможности расширения и особенности продукта.
Настрою процесс взаимодействия с командой Backend и проектирования API, а также помогу проработать конкретно ваше API.

На самом деле это не исчерпывающий список, я готов выслушать любой ваш кейс, касающийся Frontend, DevOps, CI/CD, процессов в команде, найме и обучении.

Писать @sovasergey, репост очень приветствуется.
👍347🔥3🤡3🤔2
Effector Halley 22.2.0

Еще в начале февраля я снял видео-обзор новых фич effector 22.2.0. Но все сильно поменялось, как и планы публикации видео.

Видос готов, думаю он будет полезен. Фидбек очень жду!
https://www.youtube.com/watch?v=pTq9AbmS0FI&1
👍17🔥7❤‍🔥3
За все это время я собрал довольно много полезных инструментов и статей для frontend и rust разработчиков!

https://news.sova.dev/issues/17-1181475
🔥11👍31🤩1
Я знаю способ как обелить крипту для властей РФ.
А какие вы способы знаете?
Я свой сформулирую и напишу позже
🔥2
Forwarded from Заметки про React (Ilmir Shaikhutdinov)
Возможно вам не нужны эффекты

Эффекты – это выход из парадигмы React. Они позволяют синхронизировать компоненты с какой-либо внешней системой, такой как виджет, не относящийся к React, сеть или DOM браузера. Если не задействована какая-то внешняя система (например, изменение стейта при обновлении какого-то пропа), вам не нужен эффект.

Основные случаи, когда эффект не нужен:

- Обновление стейта при обновлении стейта или пропа. Вместо этого используйте производные переменные.
- Кэширование вычислений. Используйте useMemo.
- Сброс стейта при изменении пропа. Установите изменяющийся проп в проп key. При изменении key, React пересоздает DOM и сбрасывает стейт у компонента и всех его потомков.
- Получение данных. Если делаете fetch в эффекте, то используйте cleanup функцию для отмены запроса, чтобы предотвратить race condition. Также есть комментарий Дэна Абрамова про рекомендованный способ получения данных в React 18.

https://beta.reactjs.org/learn/you-might-not-need-an-effect
👍9