Технические Консультации И Инструменты Для Создания Saas

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

Цели

• Обеспечьте фантастический пользовательский опыт.
• Чем меньше развития, тем лучше.

• Быстрое развитие.

• Стабильность системы.

• Простота для одного разработчика.

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

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

Пользователи ожидают красивый и удобный интерфейс, который будет проще и быстрее создавать и поддерживать с помощью React. Сегодня это проверенная и надежная технология, используемая повсюду – от корпораций до стартапов.

Если вам когда-нибудь понадобятся мобильные приложения, вы можете использовать React Native for Web для запуска своего кода на всех платформах.

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

Next.js (React) или Nuxt.js (Vue) предоставляют потрясающую среду для создания пользовательских интерфейсов.

Нет необходимости разглагольствовать о Webpack или кричать на Babel. Команда Chrome активно работает над тем, чтобы сделать то, что и без того быстро в Next.js, еще быстрее.

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

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

@tailwindcss или комбинация CSS-in-JS Emotion + Theme-UI делает использование CSS в вашем приложении очень простым.

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

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

Это намного лучше, чем REST для партнеров и пользователей, поэтому GitHub, Shopify и многие другие стали использовать его вместо REST.

Используйте сервер GraphQL с низким кодом

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

Параметры: @HasuraHQ ,AWS AppSync, @8base

Используйте бессерверные функции для бизнес-логики

Они более надежны, проще в обслуживании и лучше масштабируются, чем изображения EC2. Кроме того, упомянутые выше серверы GraphQL предназначены для работы с бессерверными функциями, поэтому работать с ними очень просто.

Используйте Typescript для внешнего и внутреннего интерфейса

Typescript — это статически типизированный JavaScript, который в настоящее время активно используется.

Его использование эквивалентно 1000 модульным тестам.

Вы сможете писать код быстрее и увереннее.

А автодополнение кода в IDE позволит вам оставаться в «потоке» без необходимости искать методы или атрибуты.

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

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

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

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

Вам понадобятся модели для пользователя, команды и учетной записи.

Пользователь может войти в систему.

Счет оплачивает счет. Команда владеет ресурсами.

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

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

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

Это позволит вам тестировать изменения в изолированной среде, не боясь что-то сломать и потерять клиентов.

Пишите тесты: не слишком много, в основном интеграционные.

Настройте тестирование с самого начала.

Для каждой основной функции напишите хотя бы один сквозной интеграционный тест. Добавьте перехватчик git для запуска тестов git push и раннего обнаружения проблем.

Для JS используйте Jest для запуска тестов и Cypress для сквозных тестов.

CI/CD

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

Аналогично: настроить ветку git для разработки (dev), с автотестами и автоматическим развертыванием.

Таким образом, публикация в производство будет простым слиянием git из ветки разработки в мастер-версию.

Асинхронная обработка веб-перехватчиков

Когда вы используете веб-перехватчики из сторонних сервисов, сохраните их в отдельной таблице в базе данных и запускайте их асинхронно по событию с помощью бессерверной функции.

Это сводит к минимуму вероятность того, что кто-то сможет провести успешную DoS-атаку на ваше приложение.

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

Лучшим вариантом будет использование очередей.

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

Для аутентификации используйте такие сервисы, как @auth0 или AWS Когнито.

Этот подход гораздо безопаснее.

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

Не выставляйте счета самостоятельно

Для выставления счетов используйте сторонние сервисы, такие как @Chargebee или @Outseta .

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

Сосредоточьтесь на продукте.

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

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

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

— Самостоятельный хостинг: медленный запуск видео.

— Встраивание YouTube: рекламный ролик может начинаться перед вашим видео.

- Вставка Vimeo: воспроизведение начинается медленно, если вообще воспроизводится.

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

@postmarkapp - один из лучших и совсем недорогой.

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

Лично я предпочитаю использовать @mailgun для этих задач.

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

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

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

@Mailchimp или @Список пользователей вполне подходит для этого.

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

Использовать @UptimeRobot постоянно пинговать ваши серверы и отправлять уведомления, если что-то пойдет не так.

Добавьте дополнительную конечную точку, например /health, которая проверяет подключения к базе данных и возвращает 200, если все в порядке.

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

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

Воспользоваться услугами @getsentry или @honeybadgerapp для отслеживания ошибок внешнего и внутреннего интерфейса.

Вам нужна регистрация

@papertrailapp собирает логи со всех мест, где вы запускаете какой-либо код. Такие сервисы облегчат поиск проблемных вопросов в журналах.

Без этих сервисов отладка производственных проблем станет серьезной головной болью.

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

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

Вы можете воспользоваться такими услугами, как @Внутренняя связь , @Crisp_im или @Outseta

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

Вам необходимо понимать, как пользователи используют ваше приложение.

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

Вам нужен общедоступный журнал изменений

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

Используйте такие сервисы, как Beamer, Headway или @changefeedapp .