Рубрика «React» - 2

в 9:15, , рубрики: app router, next-runtime-env, next.js, next.js 14, React, react.js

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

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

Читать полностью »

в 8:15, , рубрики: fastapi, jwt, jwt auth, python, React

В создании своих pet проектов у многих возникает вопрос аутентификации пользователя. Это может быть связано с персональным отображением страниц, настройки доступа и т.д.

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

Что будем использовать?

Я решил поэкспериментировать с JWT (JSON web token) токеном, так как его не нужно хранить в базе или где то на сервере, это упрощает архитектуру приложения.

Для работы нам необходимо установить PyJWT

pip install pyjwtЧитать полностью »

в 12:16, , рубрики: @tanstack/react-query, FrontEnd Development, frontend react, frontend-разработка, React, react query, react.js, TypeScript

Хотелось бы рассказать, как я использую @tanstack/react-query в своих проектах при построении архитектуры приложения.

Все приложения, которые в той или иной мере имеют связь с сервером требуют выполнение стандартного набора действий:

1. Загружать данные;
2. Хранить эти данные;
3. Информировать о том что идет загрузка;
4. Информировать о том что произошла ошибка;

Давайте создадим базовый набор компонентов, методов, типов для построения такого приложения.

Инфраструктура

Будем считать, что у нашего приложения есть backend, и для нас он предоставляет следующие REST ручки.

  1. Получение списка записей GET Читать полностью »

в 15:09, , рубрики: React

в 11:15, , рубрики: .net, architecture, authentication, BFF, C#, oauth2, OIDC, React, SPA

в 18:16, , рубрики: javascript, pwa, React, TWA, vue, web-разработка, производительность, фронтенд

Нет, истории будут не про то, как я заказывал лавандовый раф, а мне принесли с сиропом топинамбура.

*в этом абзаце вы узнаете, какой я крутой и почему вы должны это читать*

Читать полностью »

в 13:38, , рубрики: React, solid, web, разработка
Solid principles

Solid principles

Хочется вспомнить SOLID принципы и рассмотреть, как можно их применять в разработке интерфейсов на примере React компонентов.

S: Single Responsibility Principle (Принцип единственной ответственности). Означает, что каждый класс/функция/компонент должны выполнять только одну конкретную задачу.

На примере React компонента: Читать полностью »

в 8:16, , рубрики: javascript, React, web-разработка, работа в it, фронтенд

Чингачкук прогал три года. Вообще-то в ИТ он не был чужаком. Шесть лет проработал инженером и кое в чём разбирался.

Он не спешил найти работу программистом, потому что программирование — это непростое ремесло, думал он. Он хотел писать код, за который не стыдно. Были деньги и другая работа, он много занимался и ждал, когда придёт осознание того, что он может написать что-то стоящее. Однажды оно пришло.

Читать полностью »

в 7:13, , рубрики: React, web, webapi, банкинг, финтех

Привет! Меня зовут Виктор, я Frontend-разработчик в Clevertec. Сейчас мы с командой разрабатываем веб-версию банкинга с использованием React. Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, мы используем Web API. Подробно расскажу о них в этой статье и раскрою некоторые тонкости.

Web Share API

Читать полностью »

в 9:00, , рубрики: ajax, api, HDA, htmx, HTMX 2, HyperCard, Hypermedia-Driven Applications, hyperscript, HyperTalk, json, React, rest, RESTful, ruvds_статьи, SPA, UI, веб 2.0, гипермедицные системы, груг, Карсон Гросс, Рой Филдинг, усталость от JavaScript, фронтенд
Карсон Гросс, создатель HTMX - 1

Карсон Гросс (Carson Gross) — профессор информатики из Монтаны, который неожиданно стал одним из самых ярких персонажей в индустрии веб-программирования последних лет. Он автор языка HyperScript и популярной библиотеки для фронтенда HTMX, позволяющей создавать сложные интерактивные сайты средствами HTML. Красивая альтернатива клиентскому рендерингу на JavaScript решает сразу несколько проблем современного веба, связанных с избыточной сложностью разработки и поддержки, производительностью и ожирением сайтов.

Создавать сайты очень просто, тот же Хабр написал один программист, а не команда из сотен разработчиков и девопсов, как сейчас принято нанимать в интернет-компании.

Многие веб-разработчики нашего времени выросли со знанием только одностраничных приложений SPA и фреймворков для них. Они начали свои карьеры с приложений на React.js, которые общаются с сервером Node через JSON API. Это настоящая трагедия, считает Гросс. Интерактивные приложения можно делать совершенно иначе.
Читать полностью »

123...1020...72
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js