В этой статье речь пойдет об инструментах, с помощью которых можно проанализировать качество спроектированного front-end разработчиком сайта. В качестве наглядного материала используется проект, реализованный на базе Next.js 14-й версии с app router.
Рубрика «react.js» - 2
Обработка ошибок Axios
2025-01-29 в 11:15, admin, рубрики: Axios, javascript, React, react.js, TypeScript, обработка ошибокПривет, меня зовут Алёна, я senior фронтент-разработчик в отдела разработки ПО для розничного бизнеса в Райффайзенбанке. Недавно наша команда решила улучшить пользовательский опыт обработки ошибок запроса к бекенду и я решила комплексно исследовать эту тему и собрать воедино все лучшие практики.
Начтем с того, что при обработке ошибок Axios запросов существуют 4 ситуации, которые необходимо по-разному интерпретировать:
-
Запрос был обработан сервером и статус ответа сервера вне диапазона 2xx
-
Запрос был сделан, но ответ не был получен.
-
Ошибка возникла из-за неправильных настроек Axios.
ИИ для веб-разработки
2025-01-22 в 9:10, admin, рубрики: AI, artificial intelligence, javascript, React, react.js, ReactJS, timeweb_статьи, ИИ, искусственный интеллект
Привет, друзья!
В праздники я провел небольшое исследование представленных сегодня на рынке бесплатных инструментов с участием "искусственного интеллекта" для помощи в веб-разработке, результатами которого хочу с вами поделиться, авось кому-нибудь пригодится.
Обратите внимание, что я акцентировал внимание на бесплатных решениях для написания кода клиентской части веб-приложений.
Список протестированных инструментов:
Далее я подробнее расскажу о первых трех (Codeium, Devv, V0) и немного о двух следующих за ними (ChatGPT, GPT4All) решениях из представленных в списке, как наиболее "выдающихся" с моей точки зрения. Остальные сервисы (начиная с cursor и ниже) в той или иной степени похожи на codeium и `devv`, но показывают более плохие результаты генерации кода по запросу, исправления ошибок и документирования кода, а также менее удобны в использовании и иногда требуют дополнительных настроек, например, указания ключа OpenAI, установки лишних инструментов (тулкитов), являются условно бесплатными и т.п.
@tanstack-react-query + react typescript
2024-09-14 в 12:16, admin, рубрики: @tanstack/react-query, FrontEnd Development, frontend react, frontend-разработка, React, react query, react.js, TypeScriptХотелось бы рассказать, как я использую @tanstack/react-query в своих проектах при построении архитектуры приложения.
Все приложения, которые в той или иной мере имеют связь с сервером требуют выполнение стандартного набора действий:
1. Загружать данные;
2. Хранить эти данные;
3. Информировать о том что идет загрузка;
4. Информировать о том что произошла ошибка;
Давайте создадим базовый набор компонентов, методов, типов для построения такого приложения.
Инфраструктура
Будем считать, что у нашего приложения есть backend, и для нас он предоставляет следующие REST ручки.
-
Получение списка записей GET Читать полностью »
Причины говнокода во фронтенде. Мнение мимокрокодила
2024-01-16 в 18:15, admin, рубрики: javascript, React, react.js, ReactJS, redux, vue, vue.js, vuejs, vuex, ПрограммированиеДисклеймер
Все, что написано ниже, является личным мнением автора на основе его собственного опыта, не претендует на звание истины в последней инстанции и может кардинально отличаться от мнения читателя. Автор не ставит целью оскорбить кого-либо или принизить достоинства чего-либо, и т.д. и т.п. А впрочем...
Откуда есть пошли SPA
Архитектура и реактивное программирование
2023-05-24 в 9:00, admin, рубрики: javascript, mobx, React, react.js, reactive programming, reactivity, ReactJS, Reatom, ruvds_статьи, rx, rxjs, state, state management, state manager, Блог компании RUVDS.com, Программирование, реакт, реактивное программирование, реактивность, состояние
Что такое реактивное программирование? Не Rx. И даже не Excel. Это архитектурный паттерн, позволяющий абсолютно иначе писать код. В статье мы устаканим фундаментальные знания, утвердимся в том, что React.js всё же является реактивным, и подумаем о том, как и когда нужно, а когда не нужно применять паттерны реактивного программирования.Читать полностью »
Как я написал самую эффективную библиотеку для реактивного состояния
2023-02-01 в 13:00, admin, рубрики: javascript, React, react.js, ReactJS, ruvds_статьи, state, state management, state manager, Блог компании RUVDS.com, состояние
Всем привет, меня зовут Артём Арутюнян, и я уже пять лет изучаю реактивное программирование. Меня задела недавняя статья, Big State Managers Benchmark, в которой моя библиотека Reatom заняла лишь третье место (скорее второе, ну да ладно) и я решил написать самую эффективную реализацию реактивных состояний, убрав лишние фичи, сфокусировавшись на простоте и производительности.
Немного поэкспериментировав я добился удивительных результатов, в сто строк (0.3KB gzip) уместив максимально простое апи, которое позволяет подключаться к React и Svelte без дополнительных адаптеров. Но самое главное, найденный алгоритм фундаментально покрывает любые краевые случаи условных переподписок зависимых вычислений, с которыми подавляющее большинство популярных библиотек не справляется и дают глитчи.
Если вам интересны детали реализации — прошу под кат.
Читать полностью »
Знакомство c Reatom
2023-01-03 в 9:00, admin, рубрики: javascript, React, react.js, reactive programming, ReactJS, Reatom, redux, ruvds_статьи, state, state management, state manager, Блог компании RUVDS.com, состояние
Привет, меня зовут Артём Арутюнян и я автор менеджера состояния Reatom. Этим постом открывается серия обучающих материалов на русском языке, документация на английском доступна на официальном сайте.
А оно вам надо? Думаю, да, потому что Reatom — это универсальное решение, которое позволяет легко пошарить глобальное состояние за микроскопическую (2.5KB) цену, эффективно строить самодостаточные и переиспользуемые логические модули гигантских приложений или просто сделать ваш сетевой кеш реактивным с помощью дополнительного пакета @reatom/async.
В этой статье мы кратко пройдёмся по мотивации и истории, а потом разберём основные фичи и примеры их использования вместе с биндингами к React.js. Похожий разбор есть в виде скринкаста.Читать полностью »
Что такое состояние
2022-12-26 в 9:00, admin, рубрики: javascript, React, react.js, ReactJS, ruvds_статьи, state, state management, state manager, Блог компании RUVDS.com, Программирование, состояние
Привет! Меня зовут Артём Арутюнян, много где меня можно встретить под ником artalar. 10 лет я разрабатываю крупные веб-сервисы, и вот уже четыре года менеджер состояния, исследуя тему реактивности, консистентности данных и состояния. А началось всё с простого вопроса: почему React, самая популярная современная библиотека для написания UI, по умолчанию полностью рушит приложение и показывает белый экран при появлении ошибки в любом компоненте во время рендера?
В данной статье хотелось бы описать и раскрыть формальную сторону вопроса «что такое состояние» для лучшего понимания фундаментальных основ надёжности любого клиентского приложения. Хочется уже поставить точки в некоторых вопросах терминологии, чтобы чётче отвечать на вопросы «что, когда и зачем брать» при выборе библиотек и технологий для клиентского веб-приложения.
Примеров будет немного, т. к. их достаточное описание превратило бы статью в небольшую книжку. Но надеюсь, что сами идеи всё же будут понятны.Читать полностью »