Типы событий в React и TypeScript

При работе с React и TypeScript вы часто сталкиваетесь с подобными ошибками:

 onChange = (e) => {}; // Parameter 'e' implicitly has an 'any' type.
 
<input onChange={onChange} />;

Не всегда понятно, какой тип следует присвоить пременной е внутри функции onChange.

Это может произойти с onClick, onSubmit или любым другим обработчиком событий, которые получают элементы DOM.

В этой статье вы узнаете как можно решить эту проблему

Ссылка

#статьи

❔Что такое Rest API? Soap? GraphQL? Websockets? RPC (gRPC, tRPC)

📌 REST API - думаю, что многие знают, что это такое и сталкиваются с этим каждый день, но некоторые называют это протоколом… но это не так. В действительности, это архитектурный стиль, который представляет собой набор правил для серверного приложения. Здесь может использоваться любой формат данных, например, JSON/XML или какой-либо другой. Основные концепции включают:

- Модель взаимодействия клиент-сервер, где система может быть многоуровневой.
- Stateless (без сохранения состояния) - клиент отправляет запрос на сервер, и между ними нет посредников. Каждый раз клиент и сервер общаются, как будто это первый раз.
- Единообразный унифицированный интерфейс.
- Кеширование.

📌 SOAP - это протокол обмена структурированными сообщениями. Формат данных для обмена - только XML (SOAP-XML). Для описания SOAP-сервисов используется WSDL (Web Services Description Language) - язык описания веб-сервисов и доступа к ним, основанный на XML. В отличие от REST, у SOAP нет привычных эндпоинтов, зато есть операции, которые клиент передает серверу. Структура сообщения в SOAP имеет следующий вид: Envelope → Header → Body. Также может присутствовать блок Error, но он не является обязательным.

📌 GraphQL - это не архитектурный стиль и не протокол, а язык запросов (что-то типа SQL). Это очень удобный инструмент, потому что сервер определяет схему, а клиент запрашивает только нужные ему данные, не ожидая создания отдельного эндпоинта для каждого случая. Основные виды запросов в GraphQL включают:

- Query (запрос/GET-запрос) - используется для получения данных, где мы указываем необходимые нам поля.
- Mutation (POST-запрос) - используется для создания или удаления данных.

GraphQL также автоматически создает документацию, что очень удобно. Рекомендую всем изучить GraphQL более подробно, так как это замечательный инструмент.

📌 WebSockets - это протокол, который позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером. Он широко используется для реализации функциональности, такой как чаты, real-time графики, отображение элементов на карте и других штук, где требуется непрерывное обновление данных между клиентом и сервером. WebSockets обеспечивает более эффективную и масштабируемую связь между клиентом и сервером по сравнению с традиционными HTTP-запросами и ответами.

📌 RPC (Remote Procedure Call) - это протокол для удаленного вызова процедур. Например, на клиентской стороне у нас есть метод client.stub.doSmth(), который не реализован на клиенте, но реализован на сервере. Это и есть удаленный вызов процедуры.

gRPC - это фреймворк, набор инструментов и платформа, разработанная Google. Он популярен в микросервисной архитектуре, так как обеспечивает удобное взаимодействие между сервисами.

tRPC (type safe RPC) - это фреймворк, который позволяет разрабатывать полностью типобезопасные API для клиент-серверных приложений. Он является посредником между сервером и клиентом, позволяя им использовать один маршрутизатор (роутер) для обработки HTTP-запросов.

Считается, что RPC-подходы, такие как gRPC и tRPC, имеют большой потенциал и могут стать будущим развития веб-сервисов Однако, REST API все еще широко используется и остается популярным в настоящее время.

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

Миграция с Webpack и react-scripts на Vite: Путь к Быстрому и Легковесному React

Настройка Webpack иногда бывала сложной, но в целом он справлялся с задачей сборки проектов. Однако в последнее время мои коллеги начали восторгаться новым инструментом - Vite. Они рассказывали о его легковесности, быстрой сборке и преимуществах для разработчиков React-приложений.

В этой статье я поделюсь своим опытом миграции с Webpack и react-scripts на Vite.

Ссылка

#utils

Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде

Меня зовут Данил, я Frontend-разработчик в Samokat.tech. Недавно мы с командой распилили монолит на Angular и перешли к микрофронтендам на Vue.

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


Ссылка

#статьи

Прощайте, useState и useEffect: революция в React

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

Ссылка

#react

👋 Всем привет, сегодня хотелось бы рассказать про метод массива под названием flatMap()

FlatMap объединяет в себе функции map и метода массивов filter. Рекомендую использовать flatMap() вместо комбинации filter() и map().

В отличие от комбинации filter() и map(), flatMap делает один проход и не создает промежуточного массива 😱

Ниже будут примеры реализации⬇️

Это пример с использованием filter и map после каждого прохода по массиву будет создаваться новый объект

 numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const squaredOddNumbers = numbers
    .filter(num => num % 2 !== 0) 
    .map(num => num * num)

console.log(squaredOddNumbers); // [1, 9, 25, 49, 81]

Этот пример с использованием flatMap() и тут можем наблюдать один проход по массиву и отсутвие промежуточных массивов

 numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const squaredOddNumbers = numbers.flatMap(num => 
    num % 2 !== 0 ? [num * num] : []
);


console.log(squaredOddNumbers); // [1, 9, 25, 49, 81]

И забыл сказать что при использовании flatMap() также применяется функция flat() на каждое возвращаемое значение и тем самым поднимает вложенные массивы на 1 уровень

Более подробно можете прочитать здесь, я хотел вам показать возможно не очевидный кейс использования flatMap() вместо map и filter


Пишите в комментариях как вам такой способ использования flatMap

Задачка на знание React

Напиши React hook с названием useFetch, который получает на вход URL для загрузки и возвращает полученные данные. Для загрузки данных можно использовать любое API, даже собственно придуманное. Для простоты считаем, что по указанному адресу будет JSON, загружаем методом GET, никаких других методов, заголовков и типов данных не требуется. Импорты можно не писать.

Если вы тоже в вечном поиске классных фронтендеров или сами часто проходите собесы - велком в эту статью

Ссылка

#react

Итераторы и генераторы в JavaScript

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

В этой статье вы разберетесь что такое итераторы и генераторы

Ссылка

#js

Вопросы и ответы для собеседования на позицию frontend-разработчик

В этой статье (части) рассмотрим вопросы, связанные с великим и могучим TypeScript'ом, которые задают на собеседованиях.

Пожалуйста, не заучивайте вопросы, это вредно для вашего здоровья!)

Ссылка

#собеседования

Создание веб-приложения с использованием микрофронтендов и Module Federation

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

В данной статье мы разберём процесс разработки веб-приложения на основе подхода микрофронтендов с использованием технологии Module Federation.

Ссылка

#react