ReactJS *

Привет! Я Дима, фронтенд-разработчик в Surf. Сегодня рассмотрим самую популярную библиотеку для фронтенда — React. Что было в React18? Давайте узнаем!

Недавно столкнулся с интересным багом в Next.js. Если на странице not-found делать навигацию через router.push(pathname), теряются все переменные окружения, которые мы инициализируем через библиотеку next-runtime-env (значение window.__ENV становится undefined).

В проекте мы используем next-runtime-env, так как придерживаемся подхода Build once, deploy many — это позволяет держать один Docker-образ, в который при запуске прокидываются нужные переменные окружения. Next.js из коробки не поддерживает такое поведение, ведь он хочет собирать env-переменные на этапе сборки приложения.

Баг проявился на not-found странице, где у нас есть кнопка, позволяющая создать элемент в один клик, если что-то не найдено. Этот же компонент кнопки используется и на других страницах, и вот что интересно: на остальных страницах router.push(pathname) работает корректно, а на not-found — нет.

Сначала я подумал, что проблема кроется в next-runtime-env. Наверное, библиотека переопределяется при обновлении страницы, потому что скрипт, устанавливающий переменные в window.__ENV, размещён в root layout. Я также пробовал версионировать Next.js, предполагая, что баг связан с определёнными версиями фреймворка, но это не дало результатов. В итоге, временным решением стало использование window.location.href, что предотвращало рефреш страницы и помогало сохранить переменные.

Однако на этом история не закончилась.

Сегодня было анонсировано следующее поколение инструментария для JavaScript от автора Vue и Vite. В рамках начального финансирования было привлечено $4.6 миллиона, при этом основными инвесторами стали Accel и Amplify. В свете этого анонса важно понять контекст, в котором он происходит, и значимость изменений, которые он приносит.

Пятнадцать лет назад JavaScript был в основном языком сценариев для браузеров. Сегодня он стал самым широко используемым языком, применяемым для создания веб-приложений, мобильных приложений, игр и даже Интернета вещей (IoT). Несмотря на развитие множества инструментов для решения все более сложных задач, экосистема JavaScript остаётся фрагментированной, что делает настройку совместной работы зависимостей одной из самых сложных задач. 

Эван Ю вложил значительные усилия в изучение стека инструментов JavaScript и разработку абстракций для упрощения работы разработчиков, что привело к созданию Vite в 2020 году. За четыре года Vite стал одним из ведущих инструментов для веб-разработки, поддерживаемым множеством мета-фреймворков и обладающим более чем 15 миллионами загрузок в неделю. Vite зарекомендовал себя как общий инфраструктурный слой для следующего поколения веб-фреймворков.

Друзья, приветствую! В создании своих pet проектов часто возникает задача аутентификации пользователя. Это может быть связано с персональным отображением страниц, настройки доступа и т.д. В этой статье я хочу показать свое решение с помощью Python,FastApI и React.

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, при этом имеет похожий, но очень простой интерфейс. Построена на иммутабельном паттерне, характерном для Zustand/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, но я для себя выделил несколько наиболее удобных и простых методов.

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

Всем привет! В этом материале я поделюсь с вами практическим опытом по оптимизации своего мобильного приложения на React Native. Я расскажу как я ускорил свое приложение в 3 раза.

Я разрабатываю свое мобильное приложение BookDesk для хранения прочитанных книг. Предыдущие серии: 1, 2, 3