Фронтенд — это то, что видит и с чем взаимодействует каждый пользователь интернета, но как он работает на самом деле?
ReactJS *
JavaScript-библиотека для создания интерфейсов
Новости
@tanstack/react-query + react typescript
Хотелось бы рассказать как я использую @tanstack/react-query
в своих проектах при построении архитектуры приложения
Библиотека RRC для управления запросами и кэшем на базе Redux: [лучшая] альтернатива RTK-Query и другим решениям
Вашему вниманию представляется react-redux-cache (RRC) - легковесная библиотека для загрузки и кэширования данных в React приложениях, которая поддерживает нормализацию, в отличие от React Query и RTK Query, при этом имеет похожий, но очень простой интерфейс. Построена на базе Redux, покрыта тестами, полностью типизирована и написана на Typescript.
«Нерешаемых задач не бывает»: история о том, как я пришла в разработку в 27
Привет, Хабр! Меня зовут Татьяна и уже почти два года я занимаюсь разработкой фронтенда в МКБ. Это история о том, как я сменила профессию, какую роль сыграли дисциплина, четкое видение конечного результата и пара мотивирующих цитат.
Истории
Replit Agent создает программы за вас или кодинг без IDE
Многие слышали про AutoGPT и GPT Engineer — агентные системы, которые позволяют генерировать код по промпту от пользователя. Меня зовут Евгений Кокуйкин. Я руководитель AI продуктов компании Raft. Сегодня расскажу про Replit Agent — AI Copilot для написания кода без знаний в программировании. Без шуток! Раньше у меня на такие прототипы уходили часы кодинга и отладки. А сейчас я сгенерировал код приложения через агент — быстрее, чем писал эту статью. Так что теперь можно участвовать в хакатоне, не зная Python.
Replit — это онлайн-IDE, где с помощью AI можно быстро создать прототип приложения и задеплоить его прямо в облаке. Недавно вышла экспериментальная фича Replit Agent, которая стоит 25 баксов. Правда, для оплаты потребуется зарубежная карта, но это уже каждый сам решает, стоит заморачиваться или нет. Эта фича позволяет начать генерацию проекта одним промптом. Я так вдохновился постом Степана Гершуни, что тестировал кодинг-агента в Replit, а потом не спал всю ночь, записывая впечатления. Так появился этот обзор.
В помощь разработчику: 6 полезных библиотек визуализации данных
Привет, жители Хабра! Я Саша Пиманов, ведущий iOS-разработчик в МТС Диджитал. В прошлый раз я рассказывал, что почитать начинающим разработчикам. А сегодня поделюсь подборкой из шести библиотек, которые помогут в ежедневной работе. Среди них простые и сложные, с возможностью глубокой кастомизации и без нее. Все они могут здорово облегчить работу программиста, когда нужно визуализировать какие-то данные. Подробности — под катом.
Как нейминг влияет на качество кода?
В этой статье я хочу обратить внимание на такой аспект разработки как нейминг.
Мы рассмотрим, почему важно уделять внимание названиям переменных и функций, и как грамотный подход к неймингу может сократить время и усилия на поддержку и развитие проекта. Надеюсь, мои мысли окажутся полезными. Буду рада обратной связи в комментариях.
Практическая реализация современной аутентификации на платформе .NET: OpenID Connect, шаблон BFF и SPA
Построение современной и надежной системы аутентификации — задача, которая требует тщательного подхода. В огромном количестве информации легко запутаться: многие материалы представлены в неструктурированном виде, а часть из них и вовсе описывает устаревшие или даже небезопасные в настоящее время методы и подходы. К тому же каноническое описание шаблона 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. В результате выполнения инструкций вы самостоятельно создадите полнофункциональное приложение с безопасной аутентификацией и надежным взаимодействием с внешними сервисами и разберетесь в его внутреннем устройстве и взаимодействии с другими сервисами.
React и жизнь после сборки
Бывает что на руках есть лишь «бинарная» сборка сайта на модном фреймворке вроде Angular или React, в которой «срочно надо что‑то поправить». А исходного кода нет. Есть лишь вы, «бандл» с обфрусцированным JavaScript‑кодом внутри и горящие сроки. Рассказываю что с этим можно cделать кроме увольнения.
Способы запуска Telegram mini apps
Существует множество различных способов запуска Telegram Mini Apps, но я для себя выделил несколько наиболее удобных и простых методов.
Истории и боли frontend-разработчика
После нескольких лет веб разработки хочу поделиться с вами историями и своим опытом, делая при этом полезные (или не очень) выводы.
Как я ускорил свое мобильное приложение BookDesk на React Native в 3 раза?
Требуется мультиязычность на странице: английский и французский
Требуется мультиязычность на странице: английский и французский.
Будем использовать Redux ToolKit, Axios, sessionStorage.
Перевод состоит из двух частей.
Ближайшие события
SOLID in React
Хочется вспомнить SOLID принципы и рассмотреть, как можно их применять в разработке интерфейсов на примере React компонентов.
S: Single Responsibility Principle (Принцип единственной ответственности). Означает, что каждый класс/функция/компонент должны выполнять только одну конкретную задачу.
На примере React компонента: компонент, который отрисовывает пользовательский интерфейс, не должен содержать в себе логику авторизации этого пользователя.
O: Open-Closed Principle (Принцип открытости-закрытости). Означает, что класс/функция/компонент должны быть открыты для расширения, но закрыты для модификации. Чтобы их можно было расширять новым функционалом, не изменяя при этом исходный код.
Работа с массивами в формах(динамическое добавление полей) с использованием библиотеки react-hook-form
Привет друзья!
В данной статье я хочу показать вам, как разработать форму с динамическими добавлениями полей на React.js с использованием библиотеки react-hook-form и валидацией полей с использованием библиотеки yup на конкретном примере.
Формы являются неотъемлемой частью веб-разработки, и эффективная обработка пользовательского ввода является ключевым аспектом создания интерактивных приложений. Библиотека React Hook Form предоставляет разработчикам мощный инструментарий для упрощения работы с формами в React-приложениях.
Новый фронтенд-фреймворк?
В этой статье я расскажу о том, как разрабатывать веб-компоненты с использованием библиотеки Fusor и преимуществах данного подхода.
Такие компоненты можно будет затем собирать в полноценные веб-приложения, сопоставимые с теми, что созданы с использованием React, Angular, Vue, Solid, Svelte и т.д.
От Web к Native с React
React Native — отличный выбор для веб-разработчиков, имеющих опыт работы с React, которые хотят создать первое мобильное приложение.
Хотя у React и React Native много общего, между веб-платформой и нативными приложениями существуют некоторые различия. В этой статье освещаются наиболее распространенные ошибки и вопросы, с которыми сталкиваются разработчики при переходе с React на React Native.
Система оценивания для проведения экзаменов, срезов в СПО
Привет всем! Сегодня я расскажу вам о моей системе оценивания, которая создана для проведения экзаменов и оценки знаний студентов. Система построена на Django Rest Framework (DRF) для бэкенда и React с MaterialUI для фронтенда. Я добавил множество полезных функций, включая интеграцию с ISPmanager, которые делают систему удобной и эффективной.
Основы тестирования React-приложений через Cypress
Привет, Хабр! Сегодня рассмотрим как автоматизировать тестирование React-приложений с инструментом Cypress.
Как мы приготовили Feature-Sliced Design в VK
Всем привет! Меня зовут Дмитрий, я Frontend-разработчик в VK. В этой статье расскажу немного о том, как мы знакомились с замечательной архитектурой FSD (Feature-Sliced Design), как мы рефакторили свои проекты под неё. И, самое главное, что из этого вышло. Постараюсь заинтересовать вас, чтобы и вы смело её внедряли в свои проекты. FSD — это, пожалуй, то, чего так не хватало в Frontend-мире.
Вклад авторов
ru_vds 1186.4aio350 516.1jarvis394 375.0artalar 265.0MrCheater 199.4varanio 191.0EFS_programm 168.0maxfarseer 163.8comerc 161.6kashey 155.0