Что такое стек MERN, и как с ним работать?
Давным-давно мы выпускали пилотный проект о стеке MEAN (Mongo, Express, Angular, Node), который нас в целом не разочаровал, однако, допечаток и обновлений мы в свое время решили не делать — в отличие от издательства Manning, которое эту книгу обновило. Тем не менее, мы продолжаем поиски в данном направлении и сегодня хотели бы поговорить с вами о родственном стеке MERN, где на клиенте располагается не Angular, а React. Слово предоставляется Тиму Смиту.
Преуведомление: весь код к этой статье находится здесь.
В этом руководстве по стеку MERN мы напишем простой блог, воспользовавшись React.js, Node.js, Express.js и MongoDB, чтобы расширить наш фулстек-арсенал.
Что такое «стек»?
Пожалуй, первым делом следует обсудить идею «стека» как таковую. Существует множество разных стеков, и все они – просто разные пути для достижения одной и той же цели. Создавая фулстек-приложение, мы предусматриваем в нем клиентскую часть, с которой будет взаимодействовать пользователь, и эта же клиентская часть будет опосредовать работу с сервером и базой данных – делая весь этот процесс как можно более простым и управляемым.
Можно сказать, что стек – это некоторый набор технологий, используемых для решения этой задачи.
Хотя, существует немало стеков, о которых стоило бы поговорить, некоторые из них сегодня популярнее других. Один из таких востребованных стеков называется MEAN, и он состоит из:
Как ведется разработка при помощи этого стека?
Прежде, чем перейти ко всяким тонкостям, давайте в общем виде рассмотрим, как сочетаются при работе все эти элементы. Лично мне потребовалось некоторое время, чтобы вникнуть в это, поскольку мой бэкграунд связан с PHP, где клиентская и серверная часть несколько перемешиваются.
1. Серверная часть (Node и Express.js) и клиентская часть (React.js)
Первым делом нужно понять, что серверная часть и клиентская часть – это отдельные сущности. Клиентская часть может находиться в одном репозитории с серверной, а может – в совершенно другом.
2. Для коммуникации используются терминалы API
Если вы уже задумываетесь, как подружить клиентскую и серверную часть – отвечу: это делается через API. API (интерфейс прикладных программ) создается на сервере, где у нас будут выведены «терминалы», через которые расположенное в клиентской части приложение сможет взаимодействовать с сервером.
Объясню на пальцах: представьте, что ваша левая рука – это серверная часть, а правая рука – клиентская часть.
Теперь сложите руки и переплетите пальцы так, словно пожимаете руку сами себе. Именно так и работают языки-шаблонизаторы. Они позволяют попросту отобразить некоторую разметку вместе с данными, сброшенными с серверами – и в них клиентская и серверная составляющая в значительной степени перекрывают друг друга.
Теперь разомкните руки. Растопырьте пальцы как можно шире и сделайте так, чтобы левая и правая рука соприкасались лишь кончиками пальцев. Вот так работает стек MERN. Серверная часть предоставляет терминалы (кончики пальцев с левой руки) для доступа к серверу, к которому клиентская часть направляет вызовы (через кончики пальцев правой руки) и через эти точки соприкосновения обменивается информацией с сервером (левой рукой).
Надеюсь, стало немного понятнее, а если нет – забудьте всю эту метафору, как будто я о ней и не упоминал.
Наша серверная часть из Node.js и Express.js
Хотя, я и не собираюсь давать здесь пошаговых инструкций о сборке этого стека (это тема для отдельной статьи), я хотел бы рассмотреть различные элементы стека, которые в нем обычно используются или могут использоваться. Сам читал несколько руководств, где рассказывалось, как настроить сервер, но не объяснялось, почему для этого используются именно данные конкретные библиотеки.
После того, как мы создадим файл app.js, потребуется установить ряд пакетов. Ниже перечислены наиболее распространенные пакеты, которые мне ранее доводилось применять в моих проектах с Express.js – возможно, они пригодятся и вам.
Итак, разобравшись с некоторыми наиболее активно используемыми пакетами, давайте рассмотрим код. Для начала – наш сервер:
Это простой API-сервер. Как видите, он оснащен базовым функционалом CRUD (Создать-Прочитать-Обновить-Удалить) – ничего сверхъестественного. Присмотревшись к нему внимательнее, увидим, что здесь используется res.json() для предоставления данных вывода по конкретному URL – то есть, для вывода не применяется HTML или другой шаблон. Именно так мы строим наши API, открывая доступ к данным для React.js.
Также вы могли заметить, что я только что указал mongoose на мой собственный сервер mongodb, установленный у меня на компьютере. Чтобы такой механизм работал правильно, MongoDB должна быть установлена у вас на компьютере и работать. Если она не работает – просто откройте окно консоли и введите следующую команду:
Она запустит сервер MongoDB на вашей локальной машине. Поскольку все это делается локально, вы не сможете увидеть моих постов, если запустите код из репозитория. Придется самим писать новый контент. Если вам нужен контент-заглушка, рекомендую отличный генератор Fillerama.io, нарезающий текст из некоторых моих любимых фильмов и телешоу.
Если вам интересно самим протестировать сервер, то можете запустить его следующей командой:
После того, как сервер запустится и сообщит нам, что работает на порту 3333, а также что он подключился к MongoDB, можно будет открыть Postman и протестировать там наши маршруты. Что касается вариантов GET, можно просто вставить маршрут и нажать «Send» (отправить). В случае с POST придется выбрать «Body» (Тело) и заполнить поля для заголовка и основного содержимого.
Замечание о клиентской части
Теперь, когда мы настроили и запустили наш сервер, можно приступать к работе над клиентом, с которым будут взаимодействовать наши пользователи. Клиент будет написан на React.js, и это можно сделать несколькими различными способами.
Как именно будет спроектировано ваше фулстек-приложение – зависит исключительно от вас. Просто мне кажется, что, если вести отдельные репозитории для клиентской и серверной части, структура приложения будет чуть более аккуратной.
Создаем клиентскую часть на React.js
Теперь, разобравшись с организацией проекта, поговорим, собственно, о клиентском коде. Ниже приведен мой файл app.js для приложения на React.js, и я не стану вставлять в этот пост код для каждого компонента, а просто оставлю ссылку на репозиторий и объясню, что делает каждый из компонентов React.
А вот как будет выглядеть скриншот главной страницы нашего приложения:
Давайте убедимся, что поисковые роботы нормально читают наше приложение React.js.
Закругляясь, я бы хотел вкратце поговорить о рендеринге. Если запустить наш сайт и перейти непосредственно к какому-нибудь посту в блоге, то возможны некоторые проблемы с отображением контента. В таком случае просматривать сайт будет неудобно не только пользователям, но и поисковым роботам, индексирующим контент. Чтобы обойти данную проблему, рекомендую воспользоваться инструментами вроде Gatsby js или Next js. Два этих решения отличаются друг от друга, но оба могут пригодиться, в зависимости от того, что именно вам требуется.
Gatsby js – это генератор статических сайтов. Можете написать сайт на React.js, а затем Gatsby превратит его в статические файлы во время сборки, в результате чего сайт станет супербыстрым. К Gatsby прилагается множество полезных плагинов, благодаря которым инструмент становится практически универсальным. Кстати, мой сайт сделан именно при помощи Gatsby.js! Поскольку статические файлы создаются во время сборки, сайт необходимо пересобирать всякий раз, когда исходный контент изменяется.
Next.js, в свою очередь – это серверный компонент для отображения сайтов React.js. В него встроено множество полезных возможностей, в частности, маршрутизация, разделение кода (code splitting), оформленные компоненты и многое другое. Серверный рендеринг означает, что данные будут обновляться автоматически, как это делается на сервере, но, перед выводом в окне браузера будут проходить этап рендеринга. Именно поэтому никаких проблем с отображением данных пользователю быть не должно, и поисковые роботы также выполнят свою работу без проблем.
Существует и множество других решений такого рода, но об этих двух мне приходилось слышать больше всего, и при работе над этим проектом я использовал именно их. Оба превосходно документированы, поэтому не составляет труда быстро разобраться с обоими и приступать к делу.
Все, что нужно знать о стеке MERN
Дата публикации Oct 3, 2019
Стек MERN становится все более популярным и является мощным стеком для работы. Если вы сможете создавать и развертывать хорошие приложения MERN, это очень поможет вашей карьере разработчика.
Что такое стек MERN?
Пристальный взгляд на компоненты стека MERN
MongoDBNoSQL (нереляционная) документно-ориентированная база данных
В то время как традиционные реляционные базы данных имеют типичный дизайн схемы, основанный на столбцах и таблицах, MongoDB не требует схем. Данные хранятся в гибких документах с помощью языка запросов на основе JSON (JavaScript Object Notation). Содержание, размер и количество полей в документах могут отличаться от одного к другому. Это означает, что структура данных будет меняться со временем.
MongoDB известен своей гибкостью и простотой масштабирования. Вы можете увидеть несколько примеровреальные приложения MongoDB здесь,
Экспрессявляется структурой веб-приложения для Node.js, другого компонента MERN. Вместо того, чтобы писать полный код веб-сервера вручную на Node.js, разработчики используют Express, чтобы упростить задачу написания кода сервера. Нет необходимости повторять один и тот же код снова и снова, как это было бы с HTTP-модулем Node.js.
Платформа Express предназначена для создания надежных веб-приложений и API. Он известен своей быстрой скоростью и минималистской структурой, а многие функции доступны в виде плагинов.
реагироватьПервоначально был создан инженером-программистом в Facebook, а позже был открыт. Он поддерживается Facebook, а также сообществом разработчиков и отдельных разработчиков.
Библиотека React может использоваться для создания представлений, отображаемых в HTML. Реактивные взгляды носят декларативный характер. Это означает, что разработчикам не нужно беспокоиться об управлении последствиями изменений состояния представления (объекта, определяющего поведение компонентов) или изменений в данных.
Вместо того чтобы полагаться на шаблоны для автоматизации создания повторяющихся элементов HTML или DOM (объектная модель документа), React использует полнофункциональный язык программирования (JavaScript) для создания повторяющихся или условных элементов DOM.
С React один и тот же код может выполняться как на сервере, так и в браузере.
Реагируйте якоря стека MERN. В каком-то смысле это определяющая особенность стека. Это один из компонентов, который отличает MERN от MEAN, другого популярного стека JavaScript, в котором вместо библиотеки React используется AngularJS (среда интерфейсного веб-приложения).
Node.jsПервоначально он был создан для Google Chrome, а позже был открыт Google в 2008 году. Он построен на движке Chrome V8 JavaScript. Он предназначен для создания масштабируемых сетевых приложений и может выполнять код JavaScript вне браузера.
Node.js работает без вложенной HTML-страницы, а не использует собственную систему модулей, основанную на CommonJS, для объединения нескольких файлов JavaScript.
Преимущества стека MERN
Основным преимуществом для разработчиков, использующих стек MERN, является то, что каждая строка кода написана на JavaScript. Это язык программирования, который используется везде, как для кода на стороне клиента, так и для кода на стороне сервера. С одним языком между уровнями нет необходимости в переключении контекста.
Для технического стека с несколькими языками программирования разработчики должны выяснить, как их объединить. С помощью стека JavaScript разработчики должны владеть только JavaScript и JSON.
В целом, использование стека MERN позволяет разработчикам создавать высокоэффективные веб-приложения.
Узнайте MERN стека развития онлайн сегодня
Этот учебный план с неполным рабочим днем - идеальный способ освоить стек MERN и соответствовать будущей карьере веб-разработчика.
Введение в разработку полного стека на JavaScript
Что в веб-разработке означает слово «полный стек»?
Короче говоря, представьте, что веб-сайт состоит из разных слоев: внутреннего и внешнего. Эти слои, когда сгруппированы вместе, составляют стек технологий.
Изначально JavaScript был языком только для веб-клиента (браузера). Но затем с Node.js появилась возможность использовать JavaScript на веб-сервере, что дало нам возможность полнофункциональной разработки на JavaScript.
С полным стеком JS каждая часть веб-приложения, как на стороне клиента, так и на стороне сервера, написана с помощью инструментов JavaScript и JavaScript. В настоящее время компании активно нанимают разработчиков.
Итак, сегодня мы узнаем больше о полнофункциональном JavaScript и покажем вам, с чего начать.
Что такое full stack разработка на JavaScript?
Полный стек охватывает все уровни веб-приложения, от технологии, на которой оно работает, до базы данных, пользовательского интерфейса и бизнес-логики для внешнего интерфейса.
Разработчик полного стека JavaScript может работать с кодом в бэкэнде и во фронтенде для создания веб-приложения, причем все с использованием JavaScript. Они так же компетентны в создании баз данных и API, как и в создании того, что видит пользователь.
Компании, которые нанимают полный стек
Полный стек JavaScript сейчас очень популярен. Есть несколько компаний, которые пользуются соглашением о полном стеке JavaScript и нанимают инженеров-программистов полного стека. Вот несколько:
Макет приложения JavaScript
Как правило, сервер создается, который работает на Node.js. Express.js или аналогичный фреймворк используется для быстрого запуска и запуска сервера. База данных SQL или NoSQL также создается с использованием JavaScript.
Наконец, интерфейс создается с помощью JavaScript, HTML и CSS. Этот интерфейс может состоять из библиотек или фреймворков JavaScript, препроцессоров CSS или других технологий в дополнение к основам.
Плюсы и минусы полнофункционального JavaScript
У использования JavaScript в полном стеке приложения определенно есть свои плюсы и минусы. Вот некоторые из них, которые помогут вам подумать о том, подходит ли технический стек JavaScript вам или вашей команде.
Плюсы
Минусы
Итак, теперь, когда мы знаем, что такое full stack JavaScript и что он может предложить, давайте узнаем, что нужно знать программисту, чтобы считаться веб-разработчиком full stack JavaScript.
Как стать разработчиком полного стека
Очевидно, что программисту полного стека на JavaScript требуются серьезные навыки работы с JavaScript. Но есть много технологий, которые было бы полезно знать, когда дело доходит до создания полнофункционального JavaScript-приложения с расширенными функциями. Давайте разберем его по различным аспектам полного стека.
Технология полного стека
Клиентская технология
Серверные технологии
Это не исчерпывающий список, и вам, конечно, не нужно знать все в этом списке, чтобы начать становиться разработчиком полного стека. Начни с малого!
Наиболее распространенные технические стеки JavaScript
Есть несколько разных стеков, которые включают JavaScript как во фронтенде, так и в бэкэнде.
MEAN Stack
Стек MEAN использует
MongoDB — это база данных на основе документов NoSQL. Express.js — это среда веб-сервера Node.js. Angular — это JavaScript-фреймворк, который помогает создавать производительные интерфейсные приложения.
MEAN несколько новее, и многие пользователи пренебрегают его гибкостью, интерфейсом командной строки и документацией. Его используют такие компании, как Accenture, UNIQLO и Fiverr.
MEEN Stack
Единственное различие между стеком MEAN и стеком MEEN — это используемая библиотека JavaScript. Ember — это то, что здесь означает вторая буква «E». Ember использует шаблон «компонент-сервис» для создания веб-приложений.
MERN Stack
Еще раз, единственное, что изменяется в стеке MERN, — это тип используемой инфраструктуры JavaScript. В данном случае это библиотека JavaScript под названием React.
Существует большая дискуссия о том, в чем разница между библиотекой и фреймворком, но в целом библиотека имеет больше свободы.
Вы можете выбрать то, что вы хотели бы использовать из библиотеки React для реализации и повторного использования, тогда как с фреймворком у вас нет выбора в этом вопросе.
MEVN Stack
Как и в случае со всеми предыдущими перечисленными стеками, единственное изменение здесь — это тип используемой инфраструктуры JavaScript. Это один использует структуру под названием Vue.js.
Это структура модель-представление-представление-модель (MVVM), которая отделяет пользовательский интерфейс от бизнес-логики, которая делает приложение функциональным.
PERN Stack
Стек PERN использует ту же структуру, что и стек MERN, но изменяет базу данных. Вместо базы данных на основе NoSQL мы используем базу данных PostgreSQL на основе SQL.
Вы могли бы использовать базу данных на основе SQL, когда хотите быть более совместимыми с ACID при проведении транзакций. MySQL будет работать и здесь.
MERN Stack
Каждая из этих 4-х мощных технологий обеспечивает комплексную среду для работы разработчиков, и каждая из этих технологий играет большую роль в разработке веб-приложений.
Начало работы: Сначала создайте новую папку проекта. Затем перейдите в папку проекта в командной строке / терминал и введите команду ниже, чтобы инициализировать файл package.json. (Убедитесь, что npm установлен)
Обычный файл package.json выглядит так:
Примечание. Исходя из ваших требований, вы можете установить модули (набрав npm install module_name –save ), который появится в файле package.json.
Знакомство с компонентами MERN Stack:
Зачем использовать MongoDB?
Пример:
Зачем использовать Экспресс?
Пример: выполните следующие шаги:
const express = require( ‘express’ ),
http = require( ‘http’ );
const hostname = ‘localhost’ ;
const port = 8080;
const app = express();
MERN Stack Explained
MERN is one of several variations of the MEAN stack (MongoDB Express Angular Node), where the traditional Angular.js frontend framework is replaced with React.js. Other variants include MEVN (MongoDB, Express, Vue, Node), and really any frontend JavaScript framework can work.
Ready to take the next step? Setup your free Atlas account by clicking below and try our MERN Stack Tutorial to create a full-stack MERN application in no time.
What is the MERN Stack?
MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.
Express and Node make up the middle (application) tier. Express.js is a server-side web framework, and Node.js the popular and powerful JavaScript server platform. Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through.
How does the MERN stack work?
The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON.
React.js Front End
The top tier of the MERN stack is React.js, the declarative JavaScript framework for creating dynamic client-side applications in HTML. React lets you build up complex interfaces through simple Components, connect them to data on your backend server, and render them as HTML.
React’s strong suit is handling stateful, data-driven interfaces with minimal code and minimal pain, and it has all the bells and whistles you’d expect from a modern web framework: great support for forms, error handling, events, lists, and more.
Express.js and Node.js Server Tier
The next level down is the Express.js server-side framework, running inside a Node.js server. Express.js bills itself as a “fast, unopinionated, minimalist web framework for Node.js,” and that is indeed exactly what it is. Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses.
By making XML HTTP Requests (XHRs) or GETs or POSTs from your React.js front-end, you can connect to Express.js functions that power your application. Those functions in turn use MongoDB’s Node.js drivers, either via callbacks for using Promises, to access and update data in your MongoDB database.
MongoDB Database Tier
If your application stores any data (user profiles, content, comments, uploads, events, etc.), then you’re going to want a database that’s just as easy to work with as React, Express, and Node.
That’s where MongoDB comes in: JSON documents created in your React.js front end can be sent to the Express.js server, where they can be processed and (assuming they’re valid) stored directly in MongoDB for later retrieval. Again, if you’re building in the cloud, you’ll want to look at Atlas. If you’re looking to set up your own MERN stack, read on!
Is MERN a full-stack solution?
Yes, MERN is a full-stack, following the traditional 3-tier architectural pattern, including the front-end display tier (React.js), application tier (Express.js and Node.js), and database tier (MongoDB).
Why choose the MERN stack?
Let’s start with MongoDB, the document database at the root of the MERN stack. MongoDB was designed to store JSON data natively (it technically uses a binary version of JSON called BSON), and everything from its command line interface to its query language (MQL, or MongoDB Query Language) is built on JSON and JavaScript.
MongoDB works extremely well with Node.js, and makes storing, manipulating, and representing JSON data at every tier of your application incredibly easy. For cloud-native applications, MongoDB Atlas makes it even easier, by giving you an auto-scaling MongoDB cluster on the cloud provider of your choice, as easy as a few button clicks.
Express.js (running on Node.js) and React.js make the JavaScript/JSON application MERN full stack, well, full. Express.js is a server-side application framework that wraps HTTP requests and responses, and makes it easy to map URLs to server-side functions. React.js is a frontend JavaScript framework for building interactive user interfaces in HTML, and communicating with a remote server.
The combination means that JSON data flows naturally from front to back, making it fast to build on and reasonably simple to debug. Plus, you only have to know one programming language, and the JSON document structure, to understand the whole system!
MERN is the stack of choice for today’s web developers looking to move quickly, particularly for those with React.js experience.
