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

в 16:45, , рубрики: distributed tracing, frontend мониторинг, observability, opentelemetry, React, логирование, трассировка

Привет! Я Никита, Staff-инженер в крупном финтехе. В этой статье я хочу поделиться нашим опытом построения системы observability. Мы прошли путь от простых логов до сквозной трассировки, и я покажу, как это работает на фронтенде.

TL;DR: В статье разбираем опыт внедрения OpenTelemetry в крупном финтех-проекте.
Проблема: Логи без контекста не позволяют быстро найти причину 500-й ошибки в распределенной системе.
Решение: Сквозная трассировка (Distributed Tracing) от фронтенда до бэкенда.
Что внутри: Реализация CompositeLogger на TypeScript, патчинг fetchЧитать полностью »

в 6:26, , рубрики: commit, fiber, javascript, React, react.js, render, rerender, браузер, фронтенд

Когда говорят «React перерендерился» — обычно имеют в виду что-то расплывчатое. Новичкам это слово объясняет всё и ничего одновременно. В официальной документации процесс описан точнее: trigger → render → commit. Давайте разберём, что происходит на каждом этапе — без магии, зато с Fiber, флагами и браузерным пайплайном.

Render-фаза: вычисление изменений

Render-фаза — это не обновление DOM. Это вычисление того, каким DOM должен стать.

React рекурсивно обходит дерево компонентов, вызывает их функции (или render()Читать полностью »

в 12:16, , рубрики: android, React, мессенджер

Новое пополнение в списке «Российские разработоки мессенджеров». Нет, делаем его не по причине отключения нас от мировых сервисов...

Предыстория

В октябре был в путешествии, за пару месяц до, наша компания как и многие компании в РФ стали переходить на свои мессенджеры в замен Telegram. У нас выбор пал на Mattermost, ну это такой, аналог Slack. За период примерно 3 месяца я столкнулся с максимально ужасным UI по моему мнению. Нет, проработка его очень отличная. Но вот трудности в самом представлении для пользователей — ужас.

Threads

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

в 9:16, , рубрики: AI, copilot, javascript, nextjs, React, TypeScript

Полгода назад я решил провести эксперимент: месяц работать с AI-копилотами на максимум — Cursor, GitHub Copilot и ChatGPT — на реальном продакшн-проекте на React/Next.js. Не ради хайпа, а чтобы честно понять: это действительно ускоряет разработку или я просто трачу время на исправление чужих (нейросетевых) багов?

Спойлер: и то, и другое. Но дьявол, как всегда, в деталях.

Контекст

Я фронтенд-разработчик с пятилетним опытом. Основной стек — React, Next.js, TypeScript, Tailwind. Работаю в продуктовой команде из шести человек, проект — B2B-платформа с дашбордами, сложными формами и интеграцией с десятком внешних API.

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

в 7:16, , рубрики: app router, formdata, javascript, next.js, React, TypeScript, zod, формы

Мне нравится направление, в котором движутся React и Next.js: нативные формы, Server Actions, меньше клиентского JavaScript, больше progressive enhancement.

На уровне идеи это очень красиво.

Но как только форма становится сложнее, чем одно поле email, выясняется, что вокруг нее снова появляется много однотипного glue code:

  • достать значения из FormData

  • собрать массивы и вложенные поля

  • провалидировать все через zod

  • превратить ошибки zod в удобный объект для UI

  • вернуть предсказуемый state для useActionState

  • снова руками прописывать defaultValue, defaultChecked, Читать полностью »

в 13:29, , рубрики: gis, Leaflet, qgis, React, вайбкодинг, карта завода, сезон heavy digital, цифровизация

С чего всё началось

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

в 5:45, , рубрики: Discord, electron, nodejs, Prisma, React, TypeScript, voip, WebRTC, WebSocket, мессенджер

Когда в октябре 2024-го заблокировали Дискорд, я сидел в голосовом канале с друзьями. Связь оборвалась, все полезли за впн-ками, кто-то ушёл в Телеграм, кто-то просто пропал. Серверы, которые мы строили годами, с каналами, ролями, ботами, в один момент стали недоступны.

Я фрилансер, пишу на React и Node.js. В тот вечер подумал: а насколько сложно вообще сделать свой мессенджер с серверной структурой? Не чат на вебсокетах из туториала, а нормальный. С серверами, каналами, ролями, голосовыми комнатами, ботами. Такой, чтобы можно было перетащить своё сообщество и не чувствовать разницы.

Оказалось, сложно. Но я всё равно сделал.

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

в 5:15, , рубрики: fullstack, next.js, React, разработка

в 12:45, , рубрики: infinite scroll, javascript, performance, React, tanstack, TypeScript, бесконечный скролл, виртуализация, оптимизация

Большинство туториалов по бесконечному скроллу покрывают только одно направление: вниз. Ловим конец списка, подгружаем, готово. Но в реальных приложениях нужен скролл в обе стороны: история чата, лог-вьюеры, таймлайны. А скролл вверх создаёт проблему, которой при скролле вниз просто нет.

В этом гайде я покажу, как собрать двунаправленный бесконечный скролл с нуля. Здесь React и @tanstack/react-virtual, но сама техника — просто математика над scroll offset. Работает так же в Vue, Svelte или на ванильном JS.

Демо | Исходный кодЧитать полностью »

в 7:38, , рубрики: hydration, next.js, performance, php, React, архитектура по, мнения, холивар

Вступление: 4 часа на деплой контентного сайта

На днях я стряхнул пыль с небольшого пет-проекта. Это простой блог, наверняка каждый из вас хотя бы думал о таком для себя.
В 2015 году я бы просто закинул файлы по FTP на хостинг за 100 рублей. Время деплоя: 30 секунд.
В 2026 году я потратил 4 часа. Я настраивал Edge Middleware, дебажил рассинхрон HTML между клиентом и сервером (hydration mismatch) и разбирался, почему облако не хочет дружить с моей базой данных из-за долгого пробуждения функций (холодного старта).

Где мы свернули не туда?
Это колесо Сансары, которое дало новый оборот.

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

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