Автор оригинала: Necmettin Karakaya.
Бесконечная независимость + Эффективность затрат + безграничные стартапы везде!
Что такое MVP?
Нет, мы не говорим о «самым ценным игрокам», хотя этот термин может подать заявку. Мы говорим о минимальном жизнеспособном продукте. И ваш минимальный жизнеспособный продукт может стать вашим самым ценным игроком, если вы сделаете свой продукт Road-Mapping Prange.
Разработка нового продукта является дорогостоящее предложение. Это достаточно легко, чтобы понять. С большой стоимостью приходит большой риск того, что возвращение инвестиций будет слишком мало, чтобы оправдать цену цен на разработку продукта. Отрезавшись от особенностей, которые входят в продукт, является большой частью снижения риска с любой новой идеей. Философия MVP состоит в том, чтобы вырезать все, что за исключением того, что основные функции будут требовать раннего клиента. Продукт все еще ценен, потому что он позволяет клиенту решить некоторые проблемы. Итак, продукт жизнеспособный, но только минимально так.
Помимо снижения риска, меньше функций также означают более короткую взлетно-посадочную полосу к запуску продукта. MVP позволяет разработчикам и владельцу продукта получить обратную связь намного раньше. Это почти как новое измерение Agile, итеративного развития – расширение цикла развития на рынок для реальной реакции на идею продукта, чтобы помочь команде разработки знать, направляется ли они в правильном направлении. Допущения дизайна и разработки ставятся под суровым освещением общественности, конечного пользователя.
Подумайте о MVP в качестве первого мега-спринта в цикле развития.
Так что вам нужно для вычисления, хранения данных, хостинга, доставку контента. И т. Д. Когда он придет к облачным провайдерам, я предпочитаю работать с AWS из-за их зрелости в поле и их свободный уровень.
Что такое неверная архитектура?
Serverless не означает, что нет серверов! Я согласен, термин сервера не вводит в заблуждение. Есть серверы определенно, но вам не нужно беспокоиться о их масштабировании, обслуживании и т. Д., Поскольку вычислительные ресурсы используются в качестве обслуживания. Он может быть классифицирован как архитектура приложения третьего поколения после монолита и микросервисов.
Это в основном облачная модель, где вы платите только за время, когда ваш код выполнен на облачной инфраструктуре.
Другими словами, неверная архитектура позволяет разработчикам развернуть свой код в виде небольших функциональных пакетов. Платформа, на которой выполняется кодовые прогоны, управляются облачными поставщиками.
Эти функции выполняются в контейнерах без серверов без регистрации и срабатываемых событиями, которые управляются сторонними поставщиками. Эти функции вызываются различными внешними источниками, такими как контейнеры, база данных, хранение и т. Д.
Благодаря использованию таких продуктов, как AWS Lambda, вам не нужно управлять открытием службы, масштабирование экземпляров контейнера и величину контейнера, которое было важно в архитектуре микросервисных конструкций.
Это исключительно полезно для разработчиков, работающих в стартапе, как Они могут сосредоточиться больше на развертывании, а не на обслуживание Отказ
Преимущества неверной архитектуры
Там есть куча статей, почему серверы не хватает, вместо того, чтобы рассказывать то же самое снова, я хотел бы дать более большой картин для того, как все это соединяет друг друга, чтобы сделать MVP.
Настройка потрясающего MVP
Большая часть MVP требует, чтобы основные требования были называться MVP. такие как сервер, хранение, поток аутента и т. Д.
– AWS Appsync для сервера GraphQL
Создание приложенных данных приложений с возможностью реального времени и автономных возможностей Appsync будет заменить традиционные API отдыха с Graphql Отказ
Халявы Свободный уровень предлагает следующие ежемесячные уровни использования бесплатно в течение 12 месяцев после регистрации для учетной записи AWS. 250 000 операций по модификации запросов или данных 250 000 обновлений в режиме реального времени 600 000 минут подключения
– AWS Cognito для потока авторизации
Простой и безопасный регистрационный сигнал, вход и контроль доступа
Халявы AWS Cognito обвинения на MAU (ежемесячный активный пользователь) и первые 50 000 Mau – Бесплатно Отказ
– AWS Lambda для пользовательской бизнес-логики.
Запустите код, не думая о серверах. Оплатить только за вычисление времени, которое вы потребляете.
Халявы Lambda Free Wier включает 1M бесплатные запросы в месяц и ** 400 000 ГБ-секунды вычисления времени ** в месяц.
– AWS Dynamodb для хранения.
Быстрая и гибкая служба базы данных NoSQL для любой масштабы
Халявы 25 ГБ в месяц хранения данных 200 миллионов запросов в месяц 2,5 миллиона поток запросов в месяц
Реагировать
Библиотека JavaScript для построения пользовательских интерфейсов
React – это самая распространенная библиотека пользовательского интерфейса и имеет огромное сообщество.
Apollo Client.
Client Apollo – лучший способ использовать GraphQL для создания клиентских приложений.
Который приходит с кучей вкусностей, таких как,
– Декларативные данные
Если у вас есть опыт работы с React-redux Вы, вероятно, видели уродливую обработку запроса Ajax в действиях Redux, которые выглядят.
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"
};
}
с Apollo-Client Вы можете сопоставлять эту логику внутри компонента.
const JobFeed = () => ({({ loading, error, data }) => { if (error) return )if (loading || !data) return ; return }}
с тем более приятнее работать.
– кэширование с нулевым конфигурацией
Просто настроив клиент Apollo, вы получаете интеллектуальный кэш из коробки без необходимой дополнительной конфигурации.
– Объедините локальные и удаленные данные
Благодаря плагину клиента Apollo Apollo-Link-State Вы можете обрабатывать состояние приложения без Redux.
const GET_JOB = gql`
query GetJobById($Id: String!) {
Job(Id: $Id) {
images {
url
id
}
isLiked @client
}
}
`;
И вы можете получить это состояние, какой компонент вам нужен в приложении.
AWS усиливается
Фонд для вашего облачного мобильного и веб-приложений
Appsync Client с AWS усиливает для упрощения рабочих процессов аутентификации пользователя в вашем приложении. AppSync предоставляет аутентификацию с использованием ключа API, пулы пользователей Cognito или AWS IAM Policies и AWS Amplify дополняет одинаковую с методами, предусмотренными в классе аутентификации для регистрации пользователя, входа в систему, подтверждение пароля и регистрации.
Как вы подключаетесь к 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: 'https://xxxx.appsync-api.us-east-1.amazonaws.com/graphql',
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 = () => (
);
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.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 (
{
getFieldDecorator('email')
()
}
{
getFieldDecorator('password', {
rules: [
{required: true, message: 'Please input your password!'},
]
})()
}
);
}
}
Login.propTypes = {
intl: intlShape.isRequired
}
export default Form.create()(injectIntl(Login));
Ant.design
Система дизайна со значениями природы и определения для лучшего пользовательского опыта приложений предприятия
Возможность быстрого увеличения UI приложения и хорошего взгляда имеет решающее значение для продуктов MVP. Вот почему вы не хотите тратить время, чтобы построить часто используемые компоненты с земли до нуля. Вот почему Andd Библиотека пользовательской интерфейсы дает вам быстрое повышение на это.
Стильные компоненты
Визуальные примитивы для составляющего возраста. Используйте лучшие биты ES6 и CSS для стиля ваших приложений без стресса
Даже мы используем Ant.design Компоненты, которые мы все еще должны получить какое-то таможенное укладку, чтобы дать нашему MVP приятное прикосновение и чувствовать. Для этого в этом случае стилизованные компоненты являются самым красивым способом, чтобы дать пользовательский замок для компонентов.
Нечто
Создание, развертывание и управление современными веб-проектами
NetLify приходит действительно удобно для развертываний MVP. С помощью быстрой установки вы можете добавить git крючки для автоматического создания вашего кода и развертывать.
Каждый раз, когда вы открываете запрос на тягу, или выталкивайте новые изменения в ветку, NetLify автоматически создает предварительный просмотр с уникальным URL. Как и промежуточная среда для каждого PR или ветки, превью идеально подходит для тестирования и сотрудничества.
С помощью инструментов и библиотек, перечисленных выше с командой из 3 разработчиков, нам удалось выделить сложный продукт MVP AMZ KUNGFU – Amazon Personal Ads Automation Platform Который изготовлен из; 16 Таблицы dynamodb 28 Лямбда 6 AWS SNS Тема 4 AWS SQS Очередь
- Полностью автоматизированный и реактивный трубопровод с серверу с сервесом через AWS Lambda. Более 500 тысяч записей синхронизируются в Dynamodb за считанные минуты. Также с чрезвычайно низкой стоимостью $ 0 для всех вычислительной мощности.
- Безшовная автоматизация, которая реагирует на изменение данных. Как только данные обновляются, мы оптимизируем стратегию торгов для рекламы продавца Amazon.
Быстрый прототип с AWS Appsync GraphQL и реагирует. Данные синхронизируются и отображаются на графики, чтобы дать представление о продавцах. менее чем за 2 месяца.
Оставайтесь настроиться, если вы хотите подробно услышать, как мы достигаем этого.