Полная стека 101 с реакцией, Node.js и безвесочны! (3 часть серии)
Теперь, когда мы установили все, что нам нужно для того, чтобы создать сервис и развернуть его онлайн, мы собираемся разработать и создать основной проект, который научит вас всему, что я обещал научить вас.
Давайте перейдем на то, что мы на самом деле будем строить. Потому что я сыт по горло вопросам кодирования интервью, в классном примерах и кодирующих заданиях, которые не имеют никакого смысла, я не буду расти для вас проектом. Вместо этого мы собираемся создавать что-то на самом деле полезное (то есть мне нужно было использовать его): веб-приложение, которое показывает пользователю «контактную форму» и по электронной почте тому, что они заполнили на электронную почту компании. (Хорошо, это немного надумано, но в моем случае у меня на самом деле была компания, за которую я сделал)
Вот что это будет выглядеть:
Это скриншот из моей компании Сайт (Есть веб-проект? Связаться с нами!). Любой, кто заинтересован в связи с нами, идеально заполнит эту форму, не будь роботом, нажмите «Отправить» и увидеть сообщение подтверждения, которое было отправлено их сообщение. Затем мы видим это сообщение в нашем почтовом ящике.
Почему бы не просто поставить письмо для них, чтобы связаться с вами?
Потому что тогда наша электронная почта получает скребки Web, и мы получаем спам. Это скрывает электронное письмо, и позволяет нам изменять его внутри.
Я был действительно в архитектуре актуальных домов и вещей в старшей школе, прежде чем я перешел на код. Но это не имеет значения.
Чтобы начать с создания такого приложения, нам нужны несколько движущихся компонентов. Давайте подумаем о том, что они есть, а затем переведут это в план для нашего программного обеспечения.
Передний конец
Для начала, самая очевидная вещь, которую нам нужен, это пользовательский интерфейс. Это то, что пользователь сможет увидеть и взаимодействовать, и нам нужно убедиться, что это приятно, красиво и полезно. Это часть приложения, которую мы называем интерфейс. Это на «фронте» приложения, потому что это то, что пользователь видит и взаимодействует. Этот интерфейс — это приложение само по себе, развернуто в Интернете и, как правило, доступно на внешнем мире, собираясь на URL.
Если приложение было автомобилем, то интерфейс будет рулевым колесом, педалями, кнопками, датчиками, детализацией интерьера, кожа на сиденьях и т. Д. Это красивая часть, которая работает хорошо, и реагирует на требования пользователей.
Кроме того: Не слишком сложно простое прототип чего-то и заставить его выглядеть немного приятно с CSS. Мы сделаем немного в этом проекте, но предлагаю читать некоторые статьи на CSS и проектированию сайтов с ним. Вот отличная отправная точка: Узнайте CSS через 5 минут
Много раз, маленькие CSS в вашем прототипе могут означать разницу между клиентом/боссом, принимающим вашу идею или отвергая ее на основе безобразиемости и «никто не понравится».
Конец спины
Следующее, что нам нужно, это способ отправить то, что они заполнили на наш адрес электронной почты. К счастью, решение этой проблемы в основном это все учебное пособие. Вот план: мы собираемся отправить данные, которые они заполнили в контактной форме через трубы, которые составляют Интернет, к приложению, которое мы пишем в Node.js. Это приложение должно быть вжимашению, чтобы мы могли получить доступ к этому приложению на URL. Наш интерфейсный код может отправлять запросы на этот URL и данные вместе с этими запросами. (Следовательно, предыдущая часть учебника).
Наше Back-End App примет данные через Интернет, убедитесь, что все хорошо и безопасно (по большей части), а затем на самом деле отправить электронную почту. Поскольку отправка и получение электронных писем — это совершенно большая задача сама по себе, мы будем использовать услугу, называемую SendGrid, чтобы отправить нам электронное письмо.
Это намеренно, потому что я не хочу писать службу электронной почты, а использование этого позволит мне показать, как использовать стороннюю библиотеку в нашем коде.
Я на самом деле ужасно, что он берет студентов (по крайней мере, в наборе классов, которые я взял) до тех пор, пока их третий год находящиеся в верхних уровнях, чтобы узнать, что люди в порядке, чтобы люди использовали код других народов, не получайте точек, снятых для использования библиотеки. SMH.
SENDGRID — это услуга, которая гарантирует, что электронные письма поставлены, предоставляет отслеживание электронных писем, отслеживает, были ли они доставлены и многое другое. Наш Back-End будет говорить с службой SendGrid аналогичным образом, как на наши переходные переговоры на нашем спине. (Отправка данных через Интернет).
Вы потеряли меня
Глядя на эту огромную стену текста, я тоже потерял. Поэтому я собираюсь рисовать фотографию для вас. Потому что никакая архитектура действительно не спроектирована, пока не будет рисунок с коробками и линиями.
+------------+
| |
+-------------------------+ | SendGrid |
| <----------------+ (External) |
| Node.js Backend +----------------> +-----------+
| | +------------+ |
+-------^-----------------+ |
|| +------v------+
|| | |
|| | Our Inbox |
|| | |
|| +-------------+
||
||
||
||
||
|| +-----------------------+
|-----------> |
+-----------+ React Frontend |
| |
+----------^------------+
||
||
||
+----------v----------+
| |
| User's Computer |
| |
+---------------------+
(ASCII ART, потому что мы C O L)
Каждая коробка является его собственным приложением/услугами, и каждый разъем является трубопроводом связи, вдоль которых отправляется данные. Эти коробки являются «движущимися частями», которые составляют наше приложение.
Обобщить:
- Пользователь использует свой компьютер для отправки запросов на интерфейс, заполняя форму.
- Фронтальный интерфейс отправляет данные в запросе на задний конец, и если вход безопасен, задний конец принимает и отправляет запрос на SenseGrid.
- Если письмо было отправлено, SendGrid отправляет ответ «Успех» (помните, что
200с ранее?). - Задний конец видит этот успех и отправляет ответ «успех» на интерфейс.
- В свою очередь передний конец уведомляет пользователя, что их сообщение было отправлено в компанию. Если что-то пойдет не так, задний конец будет отправлять сообщения о отсутствие успеха (из многих возможных разновидностей, таких как 401, 404, 500, и т. Д.), и пользователь увидит сообщение об ошибке, который позволяет им попробовать.
Как мы должны знать, чтобы настроить это?
Это аспект работы, с которым я действительно изо всех сил боролся, когда я изучал все это впервые. Ответ — это ты не, и вы, вероятно, никогда не будете правиться от летучей мыши. Я назвал этот раздел «Проектирование нашей архитектуры веб-приложения», потому что это именно то, что мы делаем. Проектирование решения, которое делает то, что нам нужно. Как и любой дизайн, мы подумали о нем, изучаем наши варианты, измените аспекты, поскольку мы получаем дополнительную информацию и как мы планируем для непредвиденных обстоятельств и будущих функций.
Некоторые общие шаблоны архитектуры
Тем не менее, есть несколько отправных точек. Существует несколько шаблонов архитектуры, которые используются в промышленности, и мы поговорим о двух из них здесь. Для одного, архитектура, которую мы используем здесь с одним интерфейсом, один затылок, и это все, что нам нужно. В конце концов, изменяя код бэкэнда, мы можем сделать гораздо больше, чем единственная задача отправки электронных писем. Мы могли бы добавить логин/выйти, чтобы пользователи должны были войти в систему, чтобы отправить сообщения. Мы могли бы добавить функцию блога, чтобы пользователи могли публиковать сообщения и у вас есть другие. Внезапно у нас есть платформа для блога с технической поддержкой контактной системой.
Монолиты
Архитектура, которую мы разработали, следует за Монолит шаблон. Это потому, что задний конец — это «монолит», так как в нем все наше приложение необходимо в одном месте, в одной кодовой базе. Все функциональные возможности мы можем построить, будут встроены в этот задний конец.
Долгого, долгое время, вот как были построены приложения. Это было просто, это может быть масштабируемо, и было легко следовать, а разум. Тем не менее, есть некоторые проблемы с этим, что вы уже можете видеть.
Если все в одной кодовой базе, добавление или изменение чего-то в одном месте в коде, например логика аутентификации входа в систему/выхода в систему, может непреднамеренно сломать что-то совершенно неактуальное, что каким-то образом зависит от логики аутентификации.
Чтобы привести пример, наше гипотетическое ведение блогов можно использовать переменную, объявленную в системе auth, чтобы выяснить, кто для установки в качестве автор публикации в блоге POST, и эта переменная, возможно, была набросана в эфир в последнем слиянии кода Отказ Теперь система блогов сломана, а команда платформы блога должна провести время, исправляя то, что можно было избежать. Чтобы избежать этого приводит к следующей структуре архитектуры:
Микросервисы (важно !!)
Если вы читаете блоги для разработчиков, глядя на заголовки программного обеспечения, или находились на встрече с кем-то, одержимым Buzzwords, вы могли бы услышать о микросервисах. А микросервис это просто, небольшой сервис. Наш задний конец, который мы только что спроектировали в нашем приложении, делает одно задание: принять контактную форму содержимого и вызвать отправку электронной почты. Теперь представьте, что все функциональные возможности в нашем приложении разбиваются на такие компоненты, на основании задачи, которую они достигают, и записываются на отдельные кодовые базы и развернуты отдельно, и вы прибыли на Архитектура микросервиса.
Ваша система аутентификации может быть ее собственным приложением, развернутым на большом, мощном сервере на AWS, потому что он должен обрабатывать трафик от многих людей, входящих в систему.
Ваша система блога будет на его собственном обслуживании, развернута и масштабирована на еще более мощном сервере, с несколькими копиями приложения, работающих, чтобы обрабатывать мегаформу от всех, включая пробные пользователи, которые не нужно войти в систему.
Ваша контактная форма (из этого учебника) была бы собственной вещью, развернутой на меньший, менее дорогой сервер, поскольку он едва видит любой трафик по сравнению с другими компонентами.
Каждое приложение имеет свои проблемы с тем, что оно беспокоит, и, пока команда работает, чтобы сохранить данные, отправленные между услугами, согласованными, команда может полностью переписать один компонент и перераспределить его, даже в совершенно другом языке и системе как целое все равно будет работать бесперебойным.
Это идеал, во всяком случае, но, как во всем, реальный мир (читал: настоящие команды) не идеально, поэтому акция общение и знания остаются ключом в сохранении всего работающих.
Минервисты являются новым более и более распространенным методом для этого, и многие компании совершают переход от своих устаревших систем в это. (Это обычно также совпадает с перемещением от мэйнфреймов и центров обработки данных на поставщиков облачных услуг, таких как Amazon Web Services или платформа Google Cloud. Эти поставщики делают такие вещи, как микросервисы легко управлять.)
В сторону: микросервисы, их различия и сходства к монолитам и как дизайна один, отличные знания, чтобы иметь и очень впечатляет для рекрутеров, если вы ищете стажировку в колледже.
Вот необходимый разговор на микросервисах (на мой взгляд).
Ваша домашняя работа, чтобы закрыть эту часть учебника, — это посмотреть это видео. Я даже смел это, так что вы увидите это.
Другие варианты?
Монолиты и микросервисы не единственный способ сделать вещи. Не стесняйтесь придумать свою совершенно новую и лучшую парадигму, а затем напишите сообщение в блоге и отправьте его мне, чтобы я мог узнать об этом.
Другие шаблоны архитектуры включают архитектура, управляемая событием , что довольно круто, Сагас , который я не знаю о. Я снова предложил гуглами, чтобы учиться.
Концепция MVP
При разработке нового приложения, скрипта или чего-либо, приятно начать с «MVP» или «Минимального жизнеспособного продукта». (Примечание: это все о том, как я лично использую «MVP» как в смысле, так и практике, и компания или «официальная» Конвенция, могут быть немного разными)
Минимальный жизнеспособный продукт просто это. Небольшое, элементарное доказательство концепции или первоначальный набор объектов того, что вы строите. Это видно, как правило, как первый шаг и занимает меньше дня, чтобы завершить, оставив время для обсуждения с вашей командой. На практике я обычно использую его как термин для определения того, что значит «начать» работу над приложением. Для этого проекта это означало бы создание пустого проекта реагирования, что сделало развертывание, которое мы сделали в части 1, и достижение связи между двумя.
Вы можете начать с MVP, а затем работать в итеративный способ добраться до того, где вы хотите быть. Вы разбиваете свои цели на небольшие шаги, затем кипятите эти шаги в легко усваиваемые задачи, затем разделите эти задачи в отдельные элементы действий, которые вы можете назначить людям для завершения. Завершивание каждого медленно добавляет к продукту, медленно, но наверняка выполнение приложения, так как каждая задача реализована и объединена в начальную кодовую базу из MVP.
Это отличный способ получить некоторую область и потерять страх начать, когда вы столкнулись с созданием чего-то сложного или «большой». В конце концов, внедряя MVP, у вас уже есть код нажатой, и вы просто добавляете вещи один за другим.
Непрерывное развертывание
Этот узор наличия MVP, на котором добавляются все будущие функции, также помогут нам практиковать постоянное развертывание. Возможно, вы видели термин «CI/CD», плавающие вокруг, что означает непрерывную интеграцию и непрерывное развертывание. В совокупности, это практика слияния кода разработчиков изменяется в мастеру несколько раз в течение дня (интеграция), а также развертывание новых версий кода в реальном времени, поскольку эти изменения сделаны (развертывание).
Это полезная практика для нас, потому что, поскольку мы завершили функции один за другим, мы можем протолкнуть каждый вживую, как они завершены. По сути, это означает, что на любой стадии во время разработки существует живая рабочая версия приложения, и она (теоретически) никогда не сломана. Это обычная практика в настоящее время, и есть много инструментов для автоматического запуска тестов, развертывания и уведомления разработчиков на ошибках, поскольку изменения нажаты в кодовую базу. Здесь Это в глубине статьи от Атласса, объясняя концепцию более подробно.
Часть 3 этого учебника будет создавать MVP для нашего приложения, а также небольшой (длительный) в сторону, чтобы объяснить еще несколько фундаменталов, которые помогут сделать части 4 и 5 иметь больше смысла. Затем мы пойдем в частей 4 и 5, создавая задний и интерфейс соответственно.
Полная стека 101 с реакцией, Node.js и безвесочны! (3 часть серии)
Оригинал: «https://dev.to/almadireddy/full-stack-101-2-designing-our-web-app-architecture-l6a»