Технические рекомендации и инструменты для создания 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> и мгновенно начинает проигрывание в отличие от других сервисов.

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

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

— Встраивание Vimeo: медленно начинает проигрывание, если вообще начинает.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Pavel Osadchuk", "author_type": "self", "tags": [], "comments": 2, "likes": 1, "favorites": 19, "is_advertisement": false, "subsite_label": "dev", "id": 102967, "is_wide": true, "is_ugc": true, "date": "Fri, 24 Jan 2020 14:32:34 +0300", "is_special": false }
0
{ "id": 102967, "author_id": 8513, "diff_limit": 1000, "urls": {"diff":"\/comments\/102967\/get","add":"\/comments\/102967\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/102967"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 235819, "last_count_and_date": null }
2 комментария
Популярные
По порядку
1

Очень годно

Ответить
0

Вам нужен не только мониторинг, но и инцидент-менеджмент, а еще GraphQL — супер стремная штука с точки зрения производительности.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }