React 19 на подходе. Команда React анонсировала предрелизную версию React 19 в апреле. Это крупное обновление принесет с собой ряд улучшений и новых паттернов, нацеленных на повышение производительности, удобство использования и опыта разработки.
Многие из этих возможностей были представлены в экспериментальном режиме в React 18, но в React 19 они станут стабильными. Давайте подготовимся к этому обновлению.
В данной статье хочу рассказать про инструмент измерения покрытия gRPC сервисов tests-coverage-tool, написанный на языке Golang. Основная задача инструмента — автоматическое измерение покрытия требований на основе proto контрактов. Поговорим про использование в автотестах, концепцию, отчет и кратко про архитектуру самого инструмента tests-coverage-tool.
Приветствую всех любителей кодинга!
Сегодня мы с вами рассмотрим на примере простого React-приложения, как легко и дешево сделать его доступным для пользователей с помощью сервисов AWS.
Фронтенд — это то, что видит и с чем взаимодействует каждый пользователь интернета, но как он работает на самом деле?
Хотелось бы рассказать как я использую @tanstack/react-query в своих проектах при построении архитектуры приложения
Вашему вниманию представляется react-redux-cache (RRC) - легковесная библиотека для загрузки и кэширования данных в React приложениях, которая поддерживает нормализацию, в отличие от React Query и RTK Query, при этом имеет похожий, но очень простой интерфейс. Построена на базе Redux, покрыта тестами, полностью типизирована и написана на Typescript.
Одной из самых важных теоретических тем, понимание которой облегчает работу с библиотекой React является процесс рендеринга компонентов. Как React понимает, что пора обновить DOM-дерево? Как ререндеринг влияет на производительность и как ее улучшить? Что происходит под капотом React, когда мы решаем отобразить компонент на странице? Какую роль в этом всем играют хуки? Чтобы ответить на эти вопросы необходимо разобраться с такими понятиями, как рендеринг, жизненный цикл компонента, реконциляция, побочные эффекты и с некоторыми другими.
План статьи:
1) Рендеринг в контексте React
2) Жизненный цикл компонента
2.1) Mounting компонента
2.2) Update компонента
2.3) Unmounting компонента
3) Некоторые вопросы для самопроверки
Привет, Хабр! Меня зовут Татьяна и уже почти два года я занимаюсь разработкой фронтенда в МКБ. Это история о том, как я сменила профессию, какую роль сыграли дисциплина, четкое видение конечного результата и пара мотивирующих цитат.
Многие слышали про AutoGPT и GPT Engineer — агентные системы, которые позволяют генерировать код по промпту от пользователя. Меня зовут Евгений Кокуйкин. Я руководитель AI продуктов компании Raft. Сегодня расскажу про Replit Agent — AI Copilot для написания кода без знаний в программировании. Без шуток! Раньше у меня на такие прототипы уходили часы кодинга и отладки. А сейчас я сгенерировал код приложения через агент — быстрее, чем писал эту статью. Так что теперь можно участвовать в хакатоне, не зная Python.
Replit — это онлайн-IDE, где с помощью AI можно быстро создать прототип приложения и задеплоить его прямо в облаке. Недавно вышла экспериментальная фича Replit Agent, которая стоит 25 баксов. Правда, для оплаты потребуется зарубежная карта, но это уже каждый сам решает, стоит заморачиваться или нет. Эта фича позволяет начать генерацию проекта одним промптом. Я так вдохновился постом Степана Гершуни, что тестировал кодинг-агента в Replit, а потом не спал всю ночь, записывая впечатления. Так появился этот обзор.
Привет, жители Хабра! Я Саша Пиманов, ведущий iOS-разработчик в МТС Диджитал. В прошлый раз я рассказывал, что почитать начинающим разработчикам. А сегодня поделюсь подборкой из шести библиотек, которые помогут в ежедневной работе. Среди них простые и сложные, с возможностью глубокой кастомизации и без нее. Все они могут здорово облегчить работу программиста, когда нужно визуализировать какие-то данные. Подробности — под катом.
В этой статье я хочу обратить внимание на такой аспект разработки как нейминг.
Мы рассмотрим, почему важно уделять внимание названиям переменных и функций, и как грамотный подход к неймингу может сократить время и усилия на поддержку и развитие проекта. Надеюсь, мои мысли окажутся полезными. Буду рада обратной связи в комментариях.
Построение современной и надежной системы аутентификации — задача, которая требует тщательного подхода. В огромном количестве информации легко запутаться: многие материалы представлены в неструктурированном виде, а часть из них и вовсе описывает устаревшие или даже небезопасные в настоящее время методы и подходы. К тому же каноническое описание шаблона Backend-For-Frontend (BFF) довольно абстрактно и вызывает сложности в практической реализации у многих разработчиков.
Это подтолкнуло меня создать подробное и максимально доступное руководство, посвященное реализации современного подхода к аутентификации на платформе .NET с использованием OpenID Connect, архитектурного шаблона Backend-For-Frontend (BFF) и распределению ответственности между одностраничным приложением (SPA) на React и серверным API.
В статье рассматриваются ключевые аспекты настройки аутентификации, такие как использование потока Authorization Code с Proof Key for Code Exchange (PKCE) и интеграция его с одностраничными приложениями (SPA) на React. Приведены примеры на базе .NET и React, включающие пошаговые инструкции по настройке клиента OpenID Connect и BFF, а также демонстрируется использование библиотеки YARP для проксирования запросов к внешним API. В результате выполнения инструкций вы самостоятельно создадите полнофункциональное приложение с безопасной аутентификацией и надежным взаимодействием с внешними сервисами и разберетесь в его внутреннем устройстве и взаимодействии с другими сервисами.
Бывает что на руках есть лишь «бинарная» сборка сайта на модном фреймворке вроде Angular или React, в которой «срочно надо что‑то поправить». А исходного кода нет. Есть лишь вы, «бандл» с обфрусцированным JavaScript‑кодом внутри и горящие сроки. Рассказываю что с этим можно cделать кроме увольнения.
Существует множество различных способов запуска Telegram Mini Apps, но я для себя выделил несколько наиболее удобных и простых методов.
После нескольких лет веб разработки хочу поделиться с вами историями и своим опытом, делая при этом полезные (или не очень) выводы.
Требуется мультиязычность на странице: английский и французский.
Будем использовать Redux ToolKit, Axios, sessionStorage.
Перевод состоит из двух частей.
Хочется вспомнить SOLID принципы и рассмотреть, как можно их применять в разработке интерфейсов на примере React компонентов.
S: Single Responsibility Principle (Принцип единственной ответственности). Означает, что каждый класс/функция/компонент должны выполнять только одну конкретную задачу.
На примере React компонента: компонент, который отрисовывает пользовательский интерфейс, не должен содержать в себе логику авторизации этого пользователя.
O: Open-Closed Principle (Принцип открытости-закрытости). Означает, что класс/функция/компонент должны быть открыты для расширения, но закрыты для модификации. Чтобы их можно было расширять новым функционалом, не изменяя при этом исходный код.
Привет друзья!
В данной статье я хочу показать вам, как разработать форму с динамическими добавлениями полей на React.js с использованием библиотеки react-hook-form и валидацией полей с использованием библиотеки yup на конкретном примере.
Формы являются неотъемлемой частью веб-разработки, и эффективная обработка пользовательского ввода является ключевым аспектом создания интерактивных приложений. Библиотека React Hook Form предоставляет разработчикам мощный инструментарий для упрощения работы с формами в React-приложениях.
В этой статье я расскажу о том, как разрабатывать веб-компоненты с использованием библиотеки Fusor и преимуществах данного подхода.
Такие компоненты можно будет затем собирать в полноценные веб-приложения, сопоставимые с теми, что созданы с использованием React, Angular, Vue, Solid, Svelte и т.д.
