Рецепт Full-Stack Serverless MVP для стартапов, испытывающих финансовые затруднения.

Бесконечная независимость + экономическая эффективность + безграничная гибкость = удачных стартапов везде!

Что такое MVP?

Нет, мы не говорим о «самом ценном игроке», хотя этот термин применим. Мы говорим о минимально жизнеспособном продукте. И ваш минимально жизнеспособный продукт может стать вашим самым ценным игроком, если вы правильно спланируете свой продукт.

Разработка нового продукта — дорогое удовольствие. Это достаточно легко понять. С большими затратами связан большой риск того, что окупаемость инвестиций будет слишком мала, чтобы оправдать стоимость разработки продукта. Сокращение функций, которые входят в продукт, является важной частью снижения риска с любой новой идеей. Философия MVP заключается в том, чтобы исключить все, кроме основных функций, которые потребуются первому клиенту. Продукт по-прежнему ценен, потому что позволяет клиенту решить некоторые проблемы. Таким образом, продукт является жизнеспособным, но только в минимальной степени.

Помимо снижения риска, меньшее количество функций также означает более короткий путь к запуску продукта. MVP позволяет разработчикам и владельцу продукта гораздо быстрее получать обратную связь. Это похоже на новое измерение гибкой итеративной разработки — расширение цикла разработки на рынок для реальной реакции на идею продукта, чтобы помочь команде разработчиков понять, движутся ли они в правильном направлении. Предположения по проектированию и разработке выставляются на всеобщее обозрение со стороны конечных пользователей.

Думайте о MVP как о своем первом мега-спринте в цикле разработки.

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

фритир.png

Что такое бессерверная архитектура?

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

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

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

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

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

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

Преимущества бессерверной архитектуры

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

Создание отличного MVP

Большая часть MVP требует основных требований, чтобы называться MVP. такие как сервер, хранилище, поток аутентификации и т. д.

Синхронизация приложений AWS для сервера Graphql

Создавайте приложения на основе данных с возможностями работы в режиме реального времени и в автономном режиме.
Appsync заменит традиционный REST API на Графкл.

Бесплатные
Уровень бесплатного пользования предлагает следующие ежемесячные уровни использования бесплатно в течение 12 месяцев после регистрации учетной записи AWS.
250 000 запросов или операций модификации данных
250 000 обновлений в реальном времени
600 000 минут подключения

AWS Когнито для потока авторизации

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

Бесплатные
AWS Cognito взимает плату за MAU (ежемесячный активный пользователь), а первые 50 000 MAU свободно.

АВС Лямбда для пользовательской бизнес-логики.

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

Бесплатные
Уровень бесплатного пользования Lambda включает 1 млн бесплатных запросов в месяц и** 400 000 ГБ-секунд вычислительного времени** в месяц.

AWS DynamoDB для хранения.

Быстрая и гибкая служба базы данных NoSQL для любого масштаба

Бесплатные
25 ГБ в месяц для хранения данных
200 миллионов запросов в месяц
2,5 млн стрим-запросов в месяц

Реагировать

Библиотека JavaScript для создания пользовательских интерфейсов.

React — самая распространенная UI-библиотека, имеющая огромное сообщество.

Клиент Аполлона

Apollo Client — лучший способ использовать GraphQL для создания клиентских приложений.

Который поставляется с кучей вкусностей, таких как,

— Декларативное извлечение данных

если у вас есть опыт работы с React-редукс вы, вероятно, видели уродливую обработку запросов ajax в избыточных действиях, которая выглядит так.

export const FETCH_JOB = "FETCH_JOB";
export function fetchJob(job_name) {
  return function (dispatch) {
    dispatch(fetchingJob(job_name));
    return axios.get(searchApi(`/jobs/${job_name}`)).then(function (response) {
      return dispatch(jobFetched(response.data));
    }).catch(function (error) {
      console.error(error);
      return dispatch(jobFetchFailed(error));
    });
  };
}

export const FETCHING_JOB = 'FETCHING_JOB';
export function fetchingJob(job_name) {
  return {
    type: FETCHING_JOB,
    job_name
  };
}

export const JOB_FETCHED = 'JOB_FETCHED';
export function jobFetched(job) {
  return {
    type: JOB_FETCHED,
    job
  };
}

export const JOB_FETCH_FAILED = 'JOB_FETCH_FAILED';
export function jobFetchFailed(error) {
  return {
    type: JOB_FETCH_FAILED,
    message: "error fetching job"
  };
}

с Аполлон-Клиент вы можете копулировать эту логику внутри компонента.

const JobFeed = () => (
  <Query query={GET_JOB}>
    {({ loading, error, data }) => {
      if (error) return <Error />
      if (loading || !data) return <Fetching />;

      return <DogList dogs={data.dogs} />
    }}
  </Query>
)

с которым приятнее работать.

— Кэширование с нулевой конфигурацией

Просто настроив Apollo Client, вы получаете интеллектуальный кеш «из коробки» без дополнительной настройки
.

— Объедините локальные и удаленные данные

Благодаря плагину Apollo Client apollo-link-state вы можете обрабатывать состояние приложения без избыточности.

const GET_JOB = gql`
  query GetJobById($Id: String!) {
    Job(Id: $Id) {
      images {
        url
        id
      }
      isLiked @client
    }
  }
`;

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

АМС Усиление

Основа для ваших облачных мобильных и веб-приложений

Клиент AppSync с AWS Amplify для упрощения рабочих процессов аутентификации пользователей в вашем приложении. AppSync обеспечивает аутентификацию с использованием ключа API, пулов пользователей Cognito или политик AWS IAM, а AWS Amplify дополняет то же самое методами, предоставляемыми в Auth Class для регистрации пользователей, входа в систему, подтверждения пароля и выхода из системы.

Как вы подключаетесь к AWS Appsync из внешнего интерфейса.

import Amplify, { Auth } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react/dist/Auth';
import AWSAppSyncClient from 'aws-appsync';
import { ApolloProvider } from 'react-apollo';
const client = new AWSAppSyncClient({
  url: '
  region: 'us-east-1',
  auth: {
    // AWS Cognito User Pool
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken(),
    
    // API KEY
    type: AUTH_TYPE.API_KEY,
    apiKey: 'xxxxxxxxxxxxx',
    // AWS IAM
    type: AUTH_TYPE.AWS_IAM
    credentials: () => Auth.currentCredentials(),
   },
});
const WithProvider = () => (
  <Router>
    <ApolloProvider client={client}>
  </Router>
);
export default withAuthenticator(WithProvider);

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

import React from 'react';
import { Button, Icon, message } from 'antd';
import { navigateTo } from 'gatsby-link';
import { Auth, Logger } from 'aws-amplify';
import { LoginForm } from '../../Form'

const logger = new Logger('Auth:Login');

// TODO: This should be a form.
class Login extends React.Component {
  state = { status: 'idle' }

  onSuccess(message) {
    logger.debug('login success', message);
    this.setState({ status: 'success' });
    navigateTo('/dashboard');
  }

  onError(err) {
    logger.error(err);
    message.error(err.message)
    this.setState({ status: 'error' });
  }

  /**
   * Log user in using cognito
   */
  onCognitoLogin = (values) => {
    logger.debug('login start')
    this.setState({ status: 'loading' });

    Auth.signIn(values.email, values.password)
      .then((success) => this.onSuccess(success))
      .catch((err) => this.onError(err));
  }

  render() {
    return <LoginForm
      onSubmit={this.onCognitoLogin}
      centered="true"
      status={this.state.status}
    />
  }
}

export default Login;

ЛогинФорма.js

import React from 'react';
import { Form, Input, Button, Col, Icon } from 'antd';
import { Logger } from 'aws-amplify';
import { intlShape, injectIntl } from 'react-intl';
import styled from 'styled-components'; 

import * as t from '../../i18n';

const logger = new Logger('Form:Login', 'DEBUG');

const StyledForm = styled(Form)`
  width: 200px;
  margin: auto;

  .login-button {
    width: 100%;
    float: right;
  }

  .ant-form-item {
    margin-bottom: 5px;
  }
`;

class Login extends React.Component {
  state = { confirmDirty: false }

  onSubmit = (e) => {
    e.preventDefault();
    const { validateFields } = this.props.form;

    validateFields((err, values) => {
      if (err) { return; }

      this.props.onSubmit(values);
    });
  }

  render() {
    const { form, centered, initialValues, status } = this.props;
    const { getFieldDecorator } = form;

    return (
      <StyledForm centered={centered} status={status}>
        <Form.Item>
          {
            getFieldDecorator('email')
            (<Input placeholder="Email" placeholder={this.props.intl.formatMessage({
              id: 'signin.placeholder_email'
            })} />)
          }
        </Form.Item>
        <Form.Item>
            {
              getFieldDecorator('password', {
                rules: [
                  {required: true, message: 'Please input your password!'},
                ]
            })(<Input type="password" placeholder={this.props.intl.formatMessage({
              id: 'signin.placeholder_password'
            })} />)
            }
        </Form.Item>
        <Form.Item>
          <Button
            ghost
            className="login-button"
            type={ status === "error" ? "danger" : "primary" }
            onClick={this.onSubmit}
          >{status === "loading" ? <Icon type="loading" /> : t.signin.confirm }</Button>
        </Form.Item>
      </StyledForm>
    );
  }
}


Login.propTypes = {
  intl: intlShape.isRequired
}
export default Form.create()(injectIntl(Login));

Муравей.дизайн

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

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

Стилизованные компоненты

Визуальные примитивы для возраста компонентов.
Используйте лучшие элементы ES6 и CSS, чтобы стилизовать свои приложения без стресса.

Даже мы используем Ant.design компоненты, нам все еще нужно получить некоторые пользовательские стили, чтобы придать нашему MVP приятный вид. В этом случае styled-components — лучший способ установить пользовательскую блокировку для компонентов.

стилизованный.png

Нетлайф

Создавайте, развертывайте и управляйте современными веб-проектами

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

Каждый раз, когда вы открываете запрос на вытягивание или отправляете новые изменения в ветку, Netlify автоматически создает предварительный просмотр с уникальным URL-адресом. Как и промежуточная среда для каждого PR или филиала, предварительные версии идеально подходят для тестирования и совместной работы.

С помощью инструментов и библиотек, перечисленных выше, с командой из 3 разработчиков нам удалось создать сложный продукт MVP. AMZ Kungfu — Платформа автоматизации рекламы продавцов Amazon
Из чего сделан;
16 Таблицы DynamoDB
28 лямбда
6 АМС SNS Тема
4 АМС SQS Очередь

  • Полностью автоматизированный и реактивный конвейер данных с бессерверной обработкой через AWS Lambda. Более 500 тысяч записей синхронизируются с DynamoDB за считанные минуты. Также по чрезвычайно низкой цене 0 долларов за всю вычислительную мощность.
  • Полная автоматизация, реагирующая на изменение данных. Как только данные обновляются, мы оптимизируем стратегию ставок для рекламы продавца Amazon.
  • Быстрое прототипирование с помощью AWS AppSync GraphQL и React. Данные синхронизируются с внешним интерфейсом и отображаются в виде графиков, чтобы продавцы могли получить представление о них.
    менее чем за 2 месяца.
    ppc_screenshot_05.png
    ppc_screenshot_06.png

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *