React Native *

🚀 Snuffer: Как я превратил Android-смартфоны в распределенную сеть мониторинга (и спас свои нервы)

Меня зовут Виталий, я из команды ArcaneGaming.
Сегодня я хочу рассказать вам о своем пет-проекте, который немного вышел из-под контроля и превратился в полноценный продукт.
Встречайте - Snuffer !

😫 С чего всё началось?
Знаете это чувство, когда вам пишет клиент (или, что еще хуже, мама):

"А почему сайт не открывается?"
И ты такой:
"Да ладно, у меня всё работает!"
А потом оказывается, что сервер упал 3 часа назад, база данных ушла в дедлок, а ты в это время спокойно пил кофе и смотрел мемы.

Я перепробовал кучу сервисов: UptimeRobot, Pingdom, Better Uptime. Они крутые, спору нет.
Но:

• Дорого , если нужно много проверок.

• Ограниченные локации . Иногда нужно проверить доступность именно из конкретной сети или региона.

• Скучно . Где веселье в том, чтобы просто заплатить денег?

И тут я посмотрел на ящик своего стола. Там лежали они... Герои прошлых лет. Samsung Galaxy S7, какой-то старый Xiaomi с треснутым экраном и Pixel первого поколения. Они смотрели на меня своими пыльными камерами и шептали: "Мы еще можем быть полезны..."

И меня осенило! 💡

А что, если использовать эти устройства как узлы мониторинга? 
Ведь смартфон - это мощный компьютер с Wi-Fi и GSM модулем. Он может пинговать, делать HTTP-запросы, проверять порты. И если раздать такие телефоны друзьям в разных городах (или просто подключить к разным провайдерам), получится настоящая распределенная сеть мониторинга .
Так родился Snuffer

📱 Что такое Snuffer?
Если говорить умными словами, это распределенная система мониторинга доступности сервисов с использованием мобильных агентов .

"Давай короче, что это такое?":

1. Вы регистрируетесь в админке .

2. Скачиваете Android-приложение .

3. Сканируете QR-код.

4. БУМ! Ваш телефон превращается в "Снуффера" (нюхача), который постоянно проверяет, живы ли ваши сайты.

🛠 Что он умеет?

• HTTP / Keyword Monitor : Проверяет, отдает ли сайт 200 OK и есть ли на странице нужное слово (например, "Success"). Если нет - бьет тревогу.

• Ping / Port Monitor : Пингует серверы и проверяет открытые порты (полезно для баз данных или кастомных сервисов).

• DNS Monitor : Следит, чтобы ваши домены резолвились куда надо (а не на фишинговые заглушки).

• Vulnerability Scanner : В админке есть встроенный сканер уязвимостей! (Но я пока его еще не сделал, но обязательно доделаю, честно!)

• Telegram Бот : Уведомления прилетают мгновенно. Потому что почту мы читаем редко, а телегу - каждые 5 минут.

🤓 Немного "под капотом"
Я люблю, когда всё работает быстро и четко. Поэтому стек выбрал проверенный и надежный:

• Backend : Node.js + Express (старая добрая классика).

• Database : PostgreSQL + Prisma (потому что писать SQL руками в 2025 — это моветон, хотя я умею!).

• Frontend : React + Tailwind CSS (чтобы было красиво и адаптивно).

• Mobile : React Native / Expo (одна кодовая база, минимум боли).

Самое интересное - это архитектура .
Сервер раздает "задачи" (tasks) подключенным устройствам через WebSocket. Устройства выполняют проверки и шлют отчеты обратно.

Если устройство говорит "Сайт лежит", сервер не верит ему на слово (вдруг у телефона просто Wi-Fi отвалился?). Он ждет подтверждения от других узлов или от самого сервера. Это минимизирует ложные срабатывания.

🌍 Почему это круто?

1. Вторая жизнь вещам . Ваши старые гаджеты не загрязняют природу, а приносят пользу. Экологично! 🌱

2. Полный контроль . Вы сами выбираете, откуда мониторить. Хотите проверить доступность из офиса конкурента? Просто подбросьте им телефон с Snuffer (шутка... или нет?).

3. Бесплатно (почти). Вы платите только за электричество для зарядки телефона.

Проект живет и развивается. Сейчас я выкатил версию v4.15.11 (да, мы часто обновляемся!).
В планах:

• iOS версия (Apple, пустите в AppStore, ну пожалуйста!).

• Больше типов проверок (например, скриншоты сайтов).

• Публичное API.
  

  Если вам интересно попробовать или просто потыкать палочкой — залетайте:
  👉 snuffer.net

Буду рад любому фидбеку, критике или просто комментариям.

Почему у PWA до сих пор нет полноценного «магазина приложений» — возможно ли это вообще?

Всем привет.

В течение последних месяцев, работая с PWA-приложениями, мы постоянно сталкивались с одним и тем же вопросом:

Почему в 2025 году у PWA до сих пор нет настоящего App Store?

Не просто каталога ссылок, а полноценного магазина приложений — знакомого, вызывающего доверие и понятного обычным пользователям.

При изучении существующих PWA-магазинов и каталогов обнаруживаются одни и те же повторяющиеся проблемы.

⸻

1. Установка остаётся непонятной для пользователей

Даже сегодня установка PWA вызывает затруднения у обычных пользователей.

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

Во многих PWA-каталогах всё ограничивается текстовой инструкцией — и на этом взаимодействие с сервисом фактически заканчивается.

⸻

2. Отсутствие доверия

Со стороны пользователя это проявляется в следующем:
• нет содержательных отзывов,
• отсутствует история установок,
• нет ощущения личной библиотеки приложений.

Со стороны разработчиков наблюдаются крайности:
• либо любой может опубликовать приложение без подтверждения права собственности,
• либо проверка обязательна, но сложна и ограничена одним способом (например, через DNS-записи).

В итоге доверие не формируется ни у одной из сторон.

⸻

3. Разработчики — второстепенные участники экосистемы

Распространённые проблемы:
• медленные и неудобные процессы публикации,
• почти полное отсутствие автоматического заполнения данных из манифеста,
• нехватка инструментов, которые были бы полезны разработчику ещё до установки приложения пользователем.

Экосистема не стимулирует разработчиков поддерживать и развивать свои PWA.

⸻

4. Интерфейс не воспринимается как «нативный»

Это тонкий, но важный момент.

Если магазин:
• выглядит как обычный веб-сайт,
• не вызывает ассоциаций с App Store или Google Play,

пользователи инстинктивно доверяют ему меньше — даже если сами приложения качественные.

⸻

При этом сами PWA как технология за последние годы заметно повзрослели: офлайн-режим, push-уведомления, installability, Web APIs.
Однако именно слой распространения и доверия остаётся самым слабым звеном.

⸻

Главный вопрос, к которому мы пришли

Возможно ли вообще создать PWA-магазин, который:
• пользователи будут воспринимать как настоящий магазин приложений,
• не станет источником боли для разработчиков,
• сможет устойчиво развиваться, а не быть заброшенным через несколько месяцев?

Или же сама идея магазина PWA в текущей экосистеме изначально ошибочна?

Будет интересно узнать ваш опыт.

Вы публиковали PWA-приложения в существующих магазинах или каталогах?
Что вызывало наибольшие сложности — у разработчиков или у пользователей?

Жёсткая структура React-компонентов

При работе над React-приложениями я часто сталкиваюсь с тем, что мои коллеги смешивают в одном файле и JSX, и CSS-in-JS стили, и логику, и типы компонента. Работать с таким месивом очень сложно. Даже если настаивать на выделении логики, стилей и типов в отдельные файлы, это то делается, то нет. Для введения жёсткой структуры компонентов мною была написана простейшая библиотека react-component-structure.

https://github.com/sergeyshpadyrev/react-component-structure

Работает она простейшим образом. Любой компонент необходимо разделить на три хука и файл с типами:

-| Component
    -| index.ts
    -| logic.ts
    -| render.tsx
    -| style.ts
    -| types.ts

В файле logic.ts мы пишем хук useLogic - контроллер компонента, включающий в себя всю его бизнес-логику - все хуки useCallback, useEffect, useMemo и подобные. В этом хуке у нас есть доступ к props компонента.

import { useCallback, useState } from 'react';
import type { Props } from './types';

const useLogic = (props: Props) => {
    const [count, setCount] = useState(props.defaultCount);

    const onClickMinus = useCallback(() => setCount((c) => c - 1), []);
    const onClickPlus = useCallback(() => setCount((c) => c + 1), []);

    return {
        count,
        onClickMinus,
        onClickPlus,
    };
};

export default useLogic;

В файле styles.ts мы помещаем хук useStyle со стилями нашего компонента. Тут мы можем использовать inline-стили, CSS-in-JS или Tailwind. В этом хуке у нас есть доступ к props нашего компонента и к его контроллеру.

import type { Props } from './types';
import useLogic from './logic';
import { useMemo } from 'react';

const useStyle = (props: Props, logic: ReturnType<typeof useLogic>) =>
    useMemo(
        () => ({
            counter: {
                fontSize: logic.count + 10,
            },
            title: {
                color: props.color,
            },
        }),
        [logic.count, props.color],
    );

export default useStyle;

В файле render.tsx мы помещаем хук useRender с JSX, то бишь отображение компонента. В этом хуке у нас есть доступ и к props компонента, и к его контроллеру logic, и к стилям.

import type { Props } from './types';
import type useLogic from './logic';
import type useStyle from './style';

const useRender = (props: Props, logic: ReturnType<typeof useLogic>, style: ReturnType<typeof useStyle>) => {
    return (
        <div>
            <div style={style.title}>Hello {props.greeting}!</div>
            <div style={style.counter}>Count: {logic.count}</div>
            <div onClick={logic.onClickMinus}>Decrease</div>
            <div onClick={logic.onClickPlus}>Increase</div>
        </div>
    );
};

export default useRender;

В index.ts файле мы соединяем все три хука с помощью функции createComponent:

import { createComponent } from 'react-component-structure';

import useLogic from './logic';
import useRender from './render';
import useStyle from './style';

const Component = createComponent({ useLogic, useRender, useStyle });

export default Component;

И в файле types.ts мы объявляем тип для props компонента:

export interface Props {
    color: string;
    defaultCount: number;
    greeting: string;
}

Если у компонента нет props, то можно объявить их так:

export type Props = unknown

При использовании каждый компонент нашего приложения имеет чёткую структуру, состоящую из файлов контроллера, отображения, стилей и типов. Это разделение подобно разделению на HTML (отображение), CSS (стили) и JavaScript (контроллер) в ванильных JS-приложениях.

Если подход и библиотека вам понравились, поставьте репозиторию звезду на гитхабе. Надеюсь этот подход будет вам полезен.

Реакт уже никогда в жизни не догонит angular по производительности и функциональности) Рано или поздно от реакта откажутся, потому что библиотека всегда будет уступать полноценному фреймворку. Жду коммы от джунов, которые в жизни не работали с крупными проектами

Опять попробовали React Native и снова решили, что не хотим его внедрять у себя 🧐

Олег и Денис, наши фронтенд-разработчики, рассказали, почему отказались от этого фреймворка, несмотря на то что потратили на погружение в него немало времени. Это был хороший эксперимент, который дал нам много полезных инсайтов. ✍️

Перед нашей командой стояла задача: написать код один раз, собрать под три платформы и встроить в существующие нативные и веб-приложения. Решили поэкспериментировать с React Native: до этого мы «щупали» фреймворк в 2018-м, но делали новое приложение, опыта разработки SDK у нас не было. Отправились гуглить и узнавать, как это сделать. Начали с разработки под Android, потом подключили в веб, и уже финально — iOS, в котором практически всё заработало по дефолту.

В React Native просто начать делать компоненты, но, погрузившись в нативную часть, мы почувствовали себя джунами — запилить поле ввода с нативной валидацией было непросто.

Вот что мы поняли при разработке:

● Обязательно нужна единая дизайн-система под все три платформы под React Native и библиотека компонентов. А ещё — команда из фронтенд и мобильных разработчиков под iOS и Android: одни будут поддерживать часть React Native, которая относится к нативной платформе, другие — писать бизнес-логику и UI.

● React Native может подойти для проектов, которые начинаешь с нуля и нужно охватить мобильные платформы и веб сразу.

Результаты нашего эксперимента

Хоть и ушло на работу с React Native несколько кварталов, мы решили не внедрять его. Было ли нам обидно? Нет, потому что благодаря эксперименту мы:

✔ Закрепили опыт, что фронтенд-разработчики могут писать на React Native.

✔ Поняли, как всё работает изнутри, какие у фреймворка плюсы и минусы.

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

Как я выбил 350к в месяц, не написав ни одной строчки кода сам

Залетел тут недавно на Хабр почитать про очередные страдания тимлидов, и решил поделиться, как последние полгода зарабатываю на жизнь без этого всего геморроя.

Короче, я открыл для себя вайбкодинг. Не, серьезно, вся эта тема с генерацией кода по описанию — это как будто я нанял себе джуна на полный день бесплатно.

Инструменты

Harvi.pro — мой основной инструмент. Норм генерит фронт по текстовому описанию, меньше заморочек с оплатой для наших:

• 999₽ — 10М токенов

• 2499₽ — 25М + 5М бонусом

• 4999₽ — 50М + 10М бонусом

Под капотом Claude 3.7 Sonnet. Беру средний тариф, хватает на 3-4 недели активной работы.

V0.dev от Vercel — тоже неплохой, но дороговат для меня:

• Free — 20 генераций

• Pro — $20 в месяц

• Team — $30 в месяц

Под капотом тоже Claude 3.7 Sonnet. Качество вроде чуть лучше бывает, но с оплатой сами знаете что.

Replit — тут я собираю всё в кучу, тестирую и деплою. Удобно, что можно быстро показать клиенту результат.

Как это на самом деле работает

Не буду врать, что просто нажимаю кнопку и получаю готовый продукт. Это все еще работа:

1. Собираю с клиента максимум инфы и референсов

2. Генерю компоненты по частям (целые страницы редко получаются с первого раза)

3. Много времени уходит на склеивание и фиксы

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

Но при этом скорость выросла раза в 3-4. Раньше лендинг делал неделю, сейчас — день-два. Простое приложение с формами — было 2 недели, стало 3-4 дня.

Беру в среднем 80-100к за проект, делаю 3-4 в месяц. Вот и выходит около 350к.

Да, чувствую, что теряю навыки в некоторых областях. Зато прокачался в составлении промптов — это теперь как отдельная специальность.

Ручной кодинг... скоро только в музее)))

Пишете на React Native и хотите добавить в приложение крутые игровые механики или AR/VR-функции? Это легко сделать с помощью Unity. Мы расписали подробно все этапы и разобрали возможные проблемы. Переходите по ссылке и читайте пошаговую инструкцию для интеграции 👉 https://habr.com/ru/articles/848100/

Не пытайтесь, это React Native + Flavor

Инсайт дня: React Native и flavor

В компании где я работаю, существует приложение написанное на нативных технологиях в лице — Kotlin/Swift.

Так вот, в приложение на андроид реализована система flavor, практически для более чем 80 компаний.

Попытка удешевить разработку, привела нас к React Native, так как у меня был немалый опыт разработки и работы с данным фреймворком.

С первого взгляда не было очевидно, но… оказывается в React Native поддержки подобного попросту нет от слова совсем.

Конечно, любой скажет «да ведь просто можно использовать переменную флейвора текущего приложения, и менять контент условностями» — но все не столь однозначно и просто… (ведь требование и цель использовать все преимущества этой концепции)

Как итог, если вы хотите реализовать концепцию flavor в полной мере, используя React Native (и вы четко понимаете как это работает в нативе) — то предупрежу сразу что у вас не получится, банально из‑за того, что вы получаете возможность настроить лишь ваши иконки и заголовки, ну и настройки на уровне андроид конфигов =)