Технические рекомендации и инструменты для создания SaaS

Перевод Twitter-треда с ценными техническими рекомендациями и инструментами, крайне полезными при создании SaaS приложения.

Цели

• Предоставить фантастический пользовательский опыт.
  
• Чем меньше разработки тем лучше.
• Быстрая разработка.
• Устойчивость системы.
• Простота для одного разработчика.

Первая часть будет для определенного стека технологий, вторая — не зависящая от стека.

Используйте React или Vue

Пользователи ожидают красивый и удобный интерфейс, который проще и быстрее построить и поддерживать с помощью React. Сегодня это проверенная и скучная технология, используемая везде — от корпораций до стартапов. Если вам когда-нибудь понадобятся мобильные приложения, можно использовать React Native for Web, чтобы запускать ваш код на всех платформах.

Используйте мета-библиотеки React или Vue

Next.js (React) или Nuxt.js (Vue) предоставляют потрясающие окружение для построения пользовательских интерфейсов. Нет необходимости ругаться на Webpack и кричать на Babel. Команда Chrome активно работает, чтобы сделать то, что уже быстро работает в Next.js, ещё быстрее.

Используйте утилитарный (utility‑first) CSS

Вы можете построить весь пользовательский интерфейс без написания кода CSS, потому что он предоставляет вам похожие на Lego блоки CSS, которые вы можете скомпоновать в любом виде. @tailwindcss или CSS‑in‑JS комбинация Emotion + Theme‑UI делает использование CSS в вашем приложении очень простым.

Используйте GraphQL

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

Используйте Low‑Code GraphQL — сервер

Эти серверы автоматически генерируют каждую CRUD-операцию для ваших данных, обрабатывают миграции и обеспечивают тонкую настройку прав — все это без дополнительного кода! Дни, когда надо было писать каждый REST‑endpoint отдельно, давно уже в прошлом.

Варианты:@HasuraHQ, AWS AppSync, @8base

Используйте serverless functions для бизнес-логики

Они более надёжные, их легче поддерживать, они лучше масштабируются, чем образы EC2. Также GraphQL-серверы, упомянутые выше, спроектированы для работы с serverless functions, поэтому работа с ними очень проста.

Используйте Typescript для фронтэнда и бэкэнда

Typescript — это статически типизированный JavaScript, который сейчас активно используется. Его использование равноценно 1000 юнит-тестам. Вы сможете писать код быстрее и увереннее. А автодополнение кода в IDE позволит оставаться в «потоке» без необходимости искать методы или атрибуты.

Используйте генерацию кода

GraphQL и Typescript позволяют автоматически генерировать код для получения данных. Вы определяете, какие данные вам необходимы, и они генерируют функцию для получения, включая строго типизированные классы для автодополнения и компиляции.

Базовая модель данных

Вам потребуются модели для пользователя, команды и аккаунта. Пользователь может входить в систему. Аккаунт оплачивает счёт. Команда владеет ресурсами. На старте необязательно предоставлять функциональность для команды, но она точно потребуется в будущем.

Используйте среды развертывания

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

Пишите тесты: не слишком много, по большей части интеграционные

Настройте тестирование с самого начала. Для каждой крупной фичи напишите хотя бы один интеграционный end-to-end-тест. Добавьте git hook, чтобы запускать тесты при git push и отлавливать проблемы заранее. Для JS используйте Jest для запуска тестов — и Cypress для end-to-end-тестов.

CI/CD

Вам нужно, чтобы каждый коммит в master запускал автотесты и, если они успешны, запускалось автоматическое развертывание в продакшн. Аналогично: настройте ветку git для разработки (dev), с автотестами и автоматическим развертыванием. Таким образом публикация в продакшн будет простым git merge из ветки dev в master

Обрабатывайте вебхуки асинхронно

Когда вы используете вебхуки сторонних сервисов, сохраняйте их в собственную таблицу в базе данных и запускайте по событию асинхронно с помощью serverless function. Это минимизирует шанс, что кто-то сможет выполнить успешную DoS-атаку на ваше приложение.

Использование собственной базы данных оставляет возможность для DoS-атаки. Лучшим вариантом будет использование очередей.

Не делайте собственную аутентификацию

Для аутентификации используйте сервисы вроде @auth0 или AWS Cognito. Такой подход намного безопаснее. Эти сервисы позволяют моментально подключить двухфакторную аутентификацию, вход через социальные сети и многое другое.

Не делайте собственный биллинг

Для биллинга используйте сторонние сервисы вроде @Chargebee или @Outseta. Вам нужны все те возможности, которые недоступны в Stripe: визуальный интерфейс биллинга, возможность обновить подключенную карту и изменить тариф, но вы не должны тратить на это свое время. Сфокусируйтесь на продукте.

Используйте сторонний сервис для изображений

Используйте @Imgix или @Cloudinary для загрузки изображений нужного размера и разрешения вместо созданий собственного обработчика.

Для видео рекомендую посмотреть на Cloudflare Stream. Он позволяет загрузить видео, получить тег <stream> и мгновенно начинает проигрывание в отличие от других сервисов.

Вам нужен инструмент для транзакционных электронных писем

@postmarkapp — один из лучших и достаточно недорогой. Используйте его для сброса паролей, отчётности, обучающих писем, но не используйте для маркетинга.

Я лично предпочитаю использовать @mailgun для этих задач. Одна из самых полезных функций там — HTML-шаблоны сообщений, куда можно подставить свои данные и отправить их пользователю.

Ван нужен инструмент для маркетинговых электронных писем

Вам нужен отдельный сервис для отправки писем и маркетинговых компаний. @Mailchimp или @Userlist вполне подходят для этого.

Вам нужен мониторинг серверов

Используйте @UptimeRobot для постоянного пинга ваших серверов и отправки уведомления, если что-то пошло не так. Добавьте дополнительный эндпойнт, например /health, который проверяет подключения к базе данных и возвращает 200, если все хорошо.

Вам нужна система отслеживания ошибок

Пользователи никогда не сообщат вам о большей части возникших у них проблем. Используйте сервисы @getsentry или @honeybadgerapp для отслеживания фронтенд- и бэкэнд-ошибок.

Вам нужно логирование

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

Вам нужен чат для поддержки пользователей

В первые месяцы после запуска чат поддержки значительно улучшает взаимодействие с пользователем и отладку проблемных ситуаций. Можно использовать такие сервисы, как @Intercom, @Crisp_im или @Outseta

Вам нужна пользовательская аналитика

Вы должны понимать, как пользователи используют ваше приложение. Как много делают это каждый день? Каждую неделю? Кто перестал заходить в приложение? Какие покупатели наиболее активны? Какую фичу следует улучшать дальше? Используйте сервисы @Amplitude_HQ или @Outseta.

Вам нужен публичный changelog

Ваши пользователи должны знать, какие возможности вы добавляете в приложения, чтобы начать их использовать. Используйте такие сервисы, как Beamer, Headway или @changefeedapp.