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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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