Что такое стек MERN? Обзор с примерами

Время на прочтение статьи
На чтение28 мин
Дата обновления статьи
Обновлено
Просмотров статьи
Просмотров

Стек MERN - MongoDB, Express.js, React и Node.js - представляет собой набор инструментов JavaScript, которые позволяют разработчикам создавать динамичные, производительные и современные веб-сайты и приложения.

Эти четыре технологии являются одними из самых популярных инструментов в сфере веб-разработки. Такие компании, как Databricks, AWS, Netflix, Shutterstock и Meta, используют один или несколько из этих инструментов для своих веб-сайтов и других цифровых платформ.

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

Если вы предпочитаете работать на практике, ознакомьтесь с нашим руководством по MERN stack, в котором рассказывается о создании CRUD-приложения с нуля.

Что такое стек MERN?

MERN stack - это стек JavaScript, состоящий из четырех технологий:

  • MongoDB...” База данных документов на основе NoSQL, которая хранит данные в гибком формате BSON, подобном JSON, идеально подходящем для современных приложений, которым требуется масштабируемость и скорость
  • Express.JS - Это легкий Node.js фреймворк, который упрощает разработку серверной части за счет эффективной обработки запросов маршрутизации, промежуточного программного обеспечения и API
  • Реагировать...” Популярная интерфейсная библиотека для создания динамических пользовательских интерфейсов, позволяющая разработчикам создавать быстрые, интерактивные и повторно используемые компоненты пользовательского интерфейса
  • Node.js * Среда выполнения JavaScript, которая обеспечивает выполнение JavaScript на стороне сервера, позволяя разработчикам создавать масштабируемые серверные сервисы с использованием единого языка программирования.

Components and architecture of the MERN stack

React (интерфейсный фреймворк)

React - популярный JavaScript-фреймворк для управления интерфейсом веб-сайтов и веб-приложений. Он был выпущен 29 мая 2013 года и стал одним из ведущих интерфейсных решений в веб-разработке. Это также привело к созданию мета-фреймворков, таких как Next.js, Remix и Preact, которые используют React в качестве основы.

Согласно опросу разработчиков Stack Overflow 2024, React занимает второе место по популярности среди веб-фреймворков, в то время как в отчете State of JavaScript 2024 он назван наиболее часто используемым веб-фреймворком.

React используется различными ведущими брендами, включая Dropbox, Yahoo, Airbnb и Netflix. Основной причиной широкого распространения React являются предоставляемые им функции. Последняя версия React, React 19, включает в себя следующие функции:

  1. useOptimistic hook Позволяет выполнять оптимистичные обновления пользовательского интерфейса, которые автоматически отменяются в случае сбоя операции
  2. useActionState hook - Упрощает отправку форм и выполнение действий за счет автоматизации обновления состояния и управления ошибками с помощью одного хука
  3. Функция useFormStatus Позволяет получать информацию о статусе формы с момента последней отправки в режиме реального времени
  4. Серверные компоненты Позволяет предварительно отрисовывать компоненты на сервере для повышения эффективности и оптимизации производительности
  5. Поддержка метаданных документов. Позволяет определять SEO-метаданные в компонентах и управлять ими.

MongoDB (управление базами данных)

MongoDB - это база данных документов NoSQL с открытым исходным кодом. С момента своего выпуска в 2009 году MongoDB стала самой популярной базой данных NoSQL.

Такие компании, как Microsoft, Adobe, Delivery Hero и Forbes, используют MongoDB для удовлетворения своих потребностей в хранении данных.

Несмотря на то, что MongoDB имеет несколько приложений, он в основном используется для хранения структурированных, полуструктурированных и неструктурированных данных. Его функции включают:

  • Модель документа Документно-ориентированная структура, позволяющая создавать гибкие схемы
  • Сегментирование обеспечивает горизонтальную масштабируемость за счет распределения больших наборов данных по нескольким серверам. Сегментирование повышает производительность запросов и управление нагрузкой в крупномасштабных приложениях
  • База данных запускает - код, который запускается при возникновении события в базе данных.
  • Индексация - возможности индексации MongoDB повышают производительность запросов, позволяя эффективно извлекать данные без сканирования каждого документа

MongoDB хранит данные в формате, подобном JSON, который называется BSON (двоичный JSON). Этот формат допускает вложенные объекты, массивы и гибкие типы данных, что делает его идеальным для обработки сложных данных в современных приложениях.

Вот пример данных о сотрудниках в формате BSON:

{
  "_id": ObjectId("650d2b7e8c9b3f001e3f4a2d"),
  "name": "John Doe",
  "age": 30,
  "position": "Software Engineer",
  "hire_date": "2022-06-15",
  "skills": ["JavaScript", "React", "Node.js"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": "10001"
  },
  "is_active": true
}

Node.js (среда выполнения)

Node.js это среда выполнения с открытым исходным кодом, которая работает на различных платформах, включая Windows, Unix, Mac OS X, Linux и т.д. Создана в мае 2009 года. Node.js по данным Statista и Stack Overflow, она стала самой популярной веб-платформой в мире.

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

Распространенные варианты использования Node.js включают создание микросервисов, приложений реального времени и инструментов для совместной работы. Вы также можете использовать Node.js для создания внутренних сервисов, RESTful API и GraphQL-серверов.

Node.js поддерживает приложения для таких компаний, как WhatsApp, Slack, LinkedIn и GitLab. Его функции включают:

  • Асинхронный и управляемый событиями интерфейс Node.js предназначен для одновременного управления различными операциями. Это делает его отличным решением для приложений, которым необходимо обрабатывать несколько запросов, таких как чат-приложения или обновления в режиме реального времени
  • Однопоточный с возможностью масштабирования. Несмотря на то, что он однопоточный, Node.js он обрабатывает множество одновременных подключений через цикл обработки событий и рабочие потоки
  • NPM (Node Package Manager) Node.js включает в себя npm, обширную библиотеку из более чем 2,1 миллиона пакетов JavaScript, которые разработчики могут интегрировать в свои проекты
  • Создан на движке JavaScript версии 8. Node.js работает на быстром движке V8, который обеспечивает высокую производительность за счет компиляции JavaScript непосредственно в машинный код.
  • Универсальный JavaScript... Node.js поддерживает универсальный JavaScript, который позволяет использовать JavaScript-код как на сервере, так и на клиенте

Express (серверная платформа)

Express.js это легкий продукт с открытым исходным кодом Node.js фреймворк для создания серверных приложений. Выпущенный в 2010 году, Express стал самым популярным Node.js фреймворк среди других альтернатив, таких как Nest и Koa.

В чем смысл использования фреймворка, подобного Express.js, вместо простого использования Node.js? Хотя Node.js позволяет запускать JavaScript вне браузера и управлять веб-серверами, в нем нет встроенных инструментов для эффективного управления такими вещами, как маршрутизация или обработка запросов. Именно здесь на помощь приходит Express.

Вместо написания повторяющегося кода для обработки запросов, маршрутов и ответов Express упрощает процесс с помощью минимального и гибкого API. Он также поддерживает промежуточное программное обеспечение, которое позволяет добавлять такие функции, как аутентификация, ведение журнала и обработка ошибок, не загромождая основную логику приложения.

Давайте рассмотрим пример формы входа в систему, чтобы увидеть, насколько Express.js улучшает поддерживаемый код. Вот логика формы входа в систему, записанная в Node.js:

const http = require('http'); // Import the built-in HTTP module
const querystring = require('querystring'); // Import module to parse form data

// Create a basic HTTP server
const server = http.createServer((req, res) => {
    if (req.method === 'POST' && req.url === '/login') {
        let body = '';

        // Collect incoming data chunks
        req.on('data', chunk => {
            body += chunk.toString();
        });

        // Once all data is received, process it
        req.on('end', () => {
            const { username, password } = querystring.parse(body); // Parse form data

            // Simple authentication check (Replace this with database logic)
            if (username === 'admin' && password === 'password123') {
                res.writeHead(200, { 'Content-Type': 'text/plain' });
                res.end('Login successful');
            } else {
                res.writeHead(401, { 'Content-Type': 'text/plain' });
                res.end('Invalid credentials');
            }
        });
    } else {
        // Handle other routes
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('Not Found');
    }
});

// Start the server on port 3000
server.listen(3000, () => console.log('Server running on http://localhost:3000'));

Итак, вот версия Express.js, которая короче и проще в написании и чтении:

const express = require('express'); // Import Express framework
const bodyParser = require('body-parser'); // Middleware to parse request body

const app = express();

// Middleware to parse form data (application/x-www-form-urlencoded)
app.use(bodyParser.urlencoded({ extended: true }));

// Define a login route
app.post('/login', (req, res) => {
    const { username, password } = req.body; // Extract username and password from request

    // Simple authentication check (Replace this with database logic)
    if (username === 'admin' && password === 'password123') {
        res.status(200).send('Login successful');
    } else {
        res.status(401).send('Invalid credentials');
    }
});

// Start the Express server on port 3000
app.listen(3000, () => console.log('Express server running on http://localhost:3000'));

Таким образом, хотя вы могли бы создать все с нуля, просто используя Node.js, Express экономит время, улучшает организацию кода и помогает быстрее создавать масштабируемые приложения. Именно поэтому такие компании, как ChatGPT, Substack, Salesforce и Codesandbox, используют Express.js для своих приложений.

Интеграция интерфейса, серверной части и баз данных

Мы узнали о компонентах стека MERN и о том, что они делают. Теперь давайте разберемся, как они работают вместе, рассмотрев реальный сценарий веб-разработки: пользователь регистрируется в приложении.

Каждая технология в стеке MERN играет определенную роль в этом процессе:

  • React обрабатывает пользовательский интерфейс, собирает пользовательские данные и отправляет их на серверную часть
  • Express управляет маршрутами API и обрабатывает запросы между клиентом и сервером
  • Узел запускает сервер и обрабатывает логику аутентификации
  • MongoDB надежно хранит пользовательскую информацию

Поток регистрации в MERN stack

Шаг 1: React собирает данные, введенные пользователем

Пользователь заполняет регистрационную форму, указывая свое имя, адрес электронной почты и пароль. Существуют различные способы перехвата пользовательских данных, в том числе useState hook, Context API или сторонние решения для управления состоянием.

Когда они нажимают "Зарегистрироваться", React отправляет эти данные серверной части с помощью POST-запроса.

Шаг 2: Express.js и Node.js обрабатывает запрос

Express.js получает POST-запрос от React, обрабатывает его и анализирует входящие данные в формате JSON. Промежуточное программное обеспечение, такое как express.json() (встроенное в Express 4.16+) или body-parser, помогает обрабатывать тела запросов.

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

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

Шаг 3: MongoDB сохраняет данные

MongoDB хранит данные пользователя, включая хэшированный пароль, в "коллекции пользователей". Вы можете использовать Mongoose, популярную библиотеку ODM, чтобы определить схему для пользовательских данных и обеспечить постоянное наличие необходимых полей, таких как адрес электронной почты и пароль.

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

Шаг 4: Ответ отправлен в React

Если регистрация прошла успешно, Express отправляет React ответ, подтверждающий создание учетной записи. Затем React обновляет пользовательский интерфейс и перенаправляет пользователя на его панель управления.

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

Примеры использования стека MERN

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

  • Инструменты управления продуктами - Для интерфейса вы можете создать эффект перетаскивания, который можно наблюдать в таких инструментах, как Trello и Asana, с помощью сторонних библиотек, таких как React DnD. Express.js и Node.js обрабатывает запросы API для функций совместной работы, в то время как MongoDB хранит данные проекта, роли пользователей и данные о ходе выполнения задач. Узнайте, как создать клон Trello с нуля.
  • Приложения для общения в режиме реального времени - React управляет интерфейсом чата во внешнем интерфейсе. Вы можете использовать Node.js и Socket.IO для общения в режиме реального времени, в то время как Express.js управляет аутентификацией, а MongoDB хранит историю чатов и пользовательские данные. Узнайте, как реализовать WebSockets с помощью Node.js и React, а также как создать приложение для общения в режиме реального времени.
  • Торговые площадки электронной коммерции - React обеспечивает пользователям быстрый и интерактивный процесс совершения покупок; Express.js и Node.js управляет платежами и аутентификацией, в то время как MongoDB хранит каталоги товаров, пользовательские заказы и платежи. Узнайте, как создать высокопроизводительный веб-сайт электронной коммерции.

Реальные истории успеха MERN stack

Экспедиция

Вот как Expedia использует MERN stack для предоставления персонализированных рекомендаций по путешествиям:

  • MongoDB: Управляет данными о путешествиях, предпочтениями пользователей и информацией о бронировании, обеспечивая путешественникам получение индивидуальных рекомендаций.
  • Node.js и Express.js выполняют различные внутренние операции. Они предоставляют информацию о ценах в режиме реального времени и обеспечивают быструю и безопасную связь по API между системой бронирования Expedia и внешними поставщиками туристических услуг
  • React обрабатывает все аспекты интерфейса, включая обеспечение бесперебойного интерактивного поиска

Сега

Sega использует MERN stack для персонализации игрового процесса:

  • MongoDB обрабатывает динамические игровые данные, позволяя Sega повышать вовлеченность игроков, предоставляя персонализированную статистику в режиме реального времени, которую пользователи могут отслеживать и делиться ею
  • Node.js и Express.js включите мгновенное обновление достижений игроков и таблиц лидеров и обеспечьте бесперебойный поток данных между игровыми серверами и базой данных
  • React создает интерактивный пользовательский интерфейс, основанный на данных, позволяющий игрокам видеть свою статистику в режиме реального времени

Verizon (Веризон)

Verizon использует стек MERN для передачи данных 5G и Интернета вещей:

  • С развитием 5G и Интернета вещей Verizon потребовался надежный конвейер передачи данных для обработки миллиардов точек данных с подключенных устройств. MongoDB стал основой для хранения и обработки данных в режиме реального времени
  • Node.js и Express.js поддержка миллионов одновременных подключений устройств позволяет Verizon масштабировать свою инфраструктуру 5G без проблем.
  • React предоставляет аналитические панели мониторинга в режиме реального времени, с помощью которых клиенты могут отслеживать использование своих данных

Монетная база

Coinbase использует стек MERN для масштабирования торговли криптовалютами:

  • Чтобы справиться с непредсказуемыми скачками в торговле, Coinbase обратилась к MongoDB за своей масштабируемой и гибкой базой данных
  • Они используют Node.js и Express.js для обеспечения безопасности и оптимизации вызовов API, обработки заказов на покупку/продажу в режиме реального времени и предотвращения задержек с обновлением цен и исполнением ордеров
  • React поддерживает интерактивную торговую панель, предоставляя пользователям самую свежую рыночную информацию.

ebay

eBay использует стек MERN для обработки транзакций большого объема:

  • MongoDB выступает в качестве масштабируемой базы данных, которая поддерживает критически важные многопользовательские приложения. Это помогает им управлять миллионами ежедневных транзакций.
  • Node.js обеспечивает быструю реакцию API, позволяя пользователям просматривать, делать ставки и совершать покупки в режиме реального времени.
  • React.js обеспечивает плавный, отзывчивый пользовательский интерфейс, облегчающий покупателям и продавцам навигацию по объявлениям.
  • Express.js упрощает взаимодействие API между MongoDB и интерфейсом, обеспечивая эффективную работу всего процесса.

Преимущества стека MERN

Преимущества работы со стеком MERN включают в себя:

  • Разработка на JavaScript с использованием полного стека - Стек MERN позволяет разработчикам использовать единый язык - JavaScript - для всего интерфейса и серверной части приложения. Такая согласованность означает, что разработчикам не нужно переключаться между разными языками, что повышает производительность
  • Разработка на основе компонентов с помощью React Вместо того, чтобы переписывать код для одних и тех же элементов пользовательского интерфейса, React позволяет создавать повторно используемые компоненты, которые сами управляют своим состоянием, стилем и логикой. Это помогает сохранить ваш код сухим и организованным
  • Эффективный обмен данными в формате JSON - MongoDB хранит данные в формате BSON, подобном JSON, что делает его наиболее подходящим для приложений на JavaScript. Это упрощает взаимодействие API между интерфейсом и серверной частью и устраняет необходимость в сложных процессах преобразования данных
  • Проверенный в бою - MERN получил широкое распространение и используется во многих готовых к производству приложениях в различных отраслях промышленности. Его доказанная надежность делает его отличным выбором как для стартапов, так и для предприятий
  • Мощная поддержка сообщества и экосистема - У каждого инструмента в стеке MERN есть большое и активное сообщество, которое предоставляет вам доступ к большому количеству документации, руководств, библиотек с открытым исходным кодом и сторонних инструментов

Недостатки стека MERN

Как и любой технологический подход, стек MERN имеет свои ограничения и недостатки, в том числе:

  • Более высокий уровень обучения - Для освоения всего стека MERN требуется знакомство с несколькими технологиями. Это может оказаться сложной задачей для новичков, особенно когда дело доходит до изучения расширенных функций.
  • Отсутствие встроенной структуры - MERN не обеспечивает жесткой структуры проекта, что означает, что вы должны определить свою собственную архитектуру. Это может привести к несогласованности, особенно при масштабировании и обслуживании больших приложений. Однако вы можете решить эту проблему, следуя общепринятым рекомендациям и приняв согласованную структуру папок
  • Обслуживание и обновления - Управление приложением с полным стеком MERN означает постоянное обновление четырех отдельных технологий. Каждая технология активно разрабатывается, поэтому обновления или кардинальные изменения в любой из них могут повлиять на все приложение в целом.

Как создать приложение с использованием стека MERN

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

Чтобы следовать этому пошаговому руководству, вам понадобится:

  • Node.js установлена версия 14 или выше
  • MongoDB установлен локально или с учетной записью MongoDB Atlas
  • npm или менеджер пакетов yarn
  • Базовые знания всех технологий MERN stack
  • Новое приложение React

Вы можете структурировать приложение в соответствии со своими предпочтениями. Однако, если вы хотите использовать мою структуру папок, используйте изображение ниже в качестве ссылки:

Folder structure for MERN to-do app

Вот репозиторий полного приложения на GitHub, если вы хотите сразу перейти к коду.

Шаг 1: Настройка схемы MongoDB

Сначала нам нужно определить структуру наших задач. Создайте файл todoSchema.js и обновите его с помощью приведенного ниже кода:

const mongoose = require('mongoose');

// Define the Todo schema with a label and status field
const todoSchema = new mongoose.Schema({
  label: { type: String, required: true },
  status: { type: String, enum: ['pending', 'completed'], default: 'pending' },
});

// Create and export the Todo model
const Todo = mongoose.model('Todo', todoSchema);
module.exports = Todo;

Приведенный выше код выполняет следующие действия:

  • Определяет схему с использованием Mongoose для MongoDB
  • Создает модель на основе схемы
  • Экспортирует модель, чтобы ее могли использовать другие части приложения

Шаг 2: Настройте сервер с помощью Express.js и MongoDB

Теперь давайте настроим наш внутренний сервер, используя Node.js, Express и MongoDB.

Запустите следующую команду, чтобы установить необходимые пакеты:

npm install express mongoose cors body-parser

Создайте экспресс-сервер

Создайте файл server.js и добавьте следующее:

const mongoose = require('mongoose');
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const Todo = require('./models/todoSchema');

const app = express();

// Middleware setup
app.use(cors());
app.use(bodyParser.json());

// Connect to MongoDB
const dbURI = 'your-mongodb-uri-here';
mongoose
  .connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => {
    app.listen(3001, () => {
      console.log('Server is running on port 3001 and connected to MongoDB');
    });
  })
  .catch((error) => {
    console.error('Failed to connect to MongoDB:', error);
  });

// Routes for CRUD operations

// Get all todos
app.get('/todos', async (req, res) => {
  try {
    const todos = await Todo.find();
    res.json(todos);
  } catch (error) {
    res.status(500).json({ message: 'Unable to retrieve todos', error });
  }
});

// Create a new todo
app.post('/todos', async (req, res) => {
  try {
    const { label, status } = req.body;
    const todo = new Todo({ label, status });
    const savedTodo = await todo.save();
    res.status(201).json({ message: 'Todo successfully created', todo: savedTodo });
  } catch (error) {
    res.status(500).json({ message: 'Unable to create todo', error });
  }
});

// Update an existing todo
app.put('/todos/:id', async (req, res) => {
  try {
    const { id } = req.params;
    const { label, status } = req.body;
    const updatedTodo = await Todo.findByIdAndUpdate(
      id,
      { label, status },
      { new: true, runValidators: true }
    );
    if (!updatedTodo) {
      return res.status(404).json({ message: 'Todo not found' });
    }
    res.json({ message: 'Todo successfully updated', todo: updatedTodo });
  } catch (error) {
    res.status(500).json({ message: 'Unable to update todo', error });
  }
});

// Delete a todo
app.delete('/todos/:id', async (req, res) => {
  try {
    const { id } = req.params;
    const deletedTodo = await Todo.findByIdAndDelete(id);
    if (!deletedTodo) {
      return res.status(404).json({ message: 'Todo not found' });
    }
    res.json({ message: 'Todo successfully deleted', todo: deletedTodo });
  } catch (error) {
    res.status(500).json({ message: 'Unable to delete todo', error });
  }
});

module.exports = app;

На этом этапе настраивается внутренний сервер и конечные точки API для обработки текущих задач. Оно:

  • Инициализирует экспресс-сервер для обработки HTTP-запросов
  • Использует промежуточное программное обеспечение CORS для разрешения запросов внешнего интерфейса из разных источников
  • Подключается к базе данных MongoDB с помощью Mongoose
  • Определяет маршруты API
  • Запускает сервер на указанном порту (в данном случае 3001).

Шаг 3: Создайте интерфейс с помощью React

Создайте файл TodoApp.js и обновите его следующим кодом:

<div className="min-h-screen bg-gray-100 flex items-center justify-center">
  <div className="bg-white p-6 rounded-lg shadow-md w-full max-w-md">
    <h1 className="text-2xl font-bold mb-4 text-center text-orange-500">Todo App</h1>
    <form onSubmit={handleSubmit} className="flex mb-4">
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Type todo here..."
        className="flex-1 px-3 py-2 border rounded-l-md focus:outline-none"
      />
      <button type="submit" className="bg-orange-500 text-white px-4 py-2 rounded-r-md hover:bg-orange-600 focus:outline-none">
        Add
      </button>
    </form>
    <ul>
      {tasks.map((task) => (
        <li
          key={task._id}
          className={
            \`flex items-center justify-between p-2 mb-2 rounded-md \${task.status === 'completed' ? 'bg-orange-100' : 'bg-gray-50'}\`
          }
        >
          <input
            type="checkbox"
            checked={task.status === 'completed'}
            onChange={() => toggleCompletion(task._id, task.status)}
            className="form-checkbox h-5 w-5 text-orange-500"
          />
          <span
            className={
              \`flex-1 ml-2 cursor-pointer \${task.status === 'completed' ? 'line-through text-gray-500' : ''}\`
            }
            onClick={() => toggleCompletion(task._id, task.status)}
          >
            {task.label}
          </span>
          <button
            onClick={() => handleDelete(task._id)}
            className="text-red-500 hover:text-red-700 focus:outline-none"
            aria-label="Delete"
          >
            X
          </button>
        </li>
      ))}
    </ul>
  </div>
</div>

Приведенный выше код выполняет следующие действия:

  • Использует состояние реакции (useState) для хранения списка задач и ввода новой задачи
  • Извлекает задачи из серверной части с помощью useEffect
  • Реализует четыре функции для обработки текущих операций
  • Визуализирует пользовательский интерфейс, который включает в себя форму для добавления новых задач и список текущих дел

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

Для более глубокого погружения ознакомьтесь с нашим подробным руководством по разработке простого CRUD-приложения с нуля с использованием стека MERN.

Стек MERN в сравнении с другими стеками JavaScript

Стек MERN является популярным выбором для разработки на JavaScript с полным стеком. Однако это не единственный альтернативный стек JavaScript. Давайте посмотрим, как они "сочетаются" друг с другом - каламбур:

Comparing technology stacks for web development

СРЕДНИЙ стек против СРЕДНЕГО стека

Первое и наиболее очевидное различие между стеками MERN и MEAN заключается в их интерфейсной платформе. MERN использует React в качестве своей интерфейсной платформы, в то время как Angular обрабатывает интерфейс MEAN. Хотя оба инструмента обрабатывают пользовательский интерфейс, у них есть свои различия.

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

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

MERN stack против MEVN

MERN и MEVN похожи, за исключением их интерфейсной платформы, которую использует MEVN Vue.js. Vue.js по сравнению с React, MEVN известен своей простотой и удобством в освоении, что делает его отличным выбором для небольших проектов.

У React более обширная экосистема и больше сторонних компонентов, чем у Vue.js. Однако, Vue.js его проще освоить и он более удобен для начинающих.

ОБЫЧНЫЙ стек против JAMstack

Основное различие между стеком MERN и JAMstack (JavaScript, API и разметка) заключается в их назначении. В то время как MERN ориентирован на создание веб-приложений с интенсивным использованием данных, подход JAMstack используется для создания статичных сайтов или сайтов с большим количеством контента - практически без динамических взаимодействий - таких как блоги, сайты документации и магазины электронной коммерции, где скорость и SEO являются основными приоритетами.

В отличие от MERN stack, который представляет собой набор инструментов, с которыми вам следует работать, JAMstack не предлагает никаких технологий. Вместо этого, это архитектурный подход, который заключается в обслуживании предварительно созданных статических файлов через CDN для снижения нагрузки на сервер и повышения производительности.

JAMstack использует JavaScript для интерактивности, API-интерфейсы для внутренних сервисов и Markdown или безголовые CMS-решения для управления контентом.

Стек MERN против стека PERN

Когда речь заходит о MERN и PERN, отличительной чертой является база данных, поскольку стек PERN использует PostgreSQL в качестве своей базы данных. PostgreSQL - это реляционная база данных с открытым исходным кодом, которая использует SQL для запросов. В настоящее время это самая популярная база данных в мире, которая существует уже второй год подряд.

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

ОБЫЧНЫЙ стек против Стек T3

Стек T3 использует подход, совершенно отличный от других рассмотренных нами стеков. В нем представлен совершенно новый набор инструментов, основанный на TypeScript, Next.js, tRPC, Tailwind CSS и Prisma. Такие компании, как Zoom, уже используют этот стек в производстве.

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

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

Вот краткое изложение в виде таблицы того, как стек MERN сравнивается с другими стеками JavaScript:

Как развернуть приложения MERN stack

Для развертывания приложения MERN stack требуется размещение интерфейса (React), серверной части (Node.js и Express) и базы данных (MongoDB), что может усложнить задачу. Однако это не невозможно. Давайте рассмотрим несколько маршрутов развертывания, которые вы можете использовать.

Облачные платформы (PaaS)

Облачные платформы, такие как Vercel, AWS, Heroku, Azure и Render, являются одними из самых простых методов развертывания. Они управляют большей частью инфраструктуры и обеспечивают автоматическое масштабирование, конвейеры CI/CD и управляемые базы данных с минимальной конфигурацией.

Виртуальный частный сервер (VPS)

Если вам нужен больший контроль, то вам подойдет VPS-хостинг на таких платформах, как DigitalOcean, AWS EC2 или Linode. Он требует ручной настройки, но offers обеспечивает большую гибкость и контроль затрат, что делает его хорошим выбором для растущих приложений с особыми требованиями к серверной части.

Docker и Kubernetes

Docker позволяет упаковывать интерфейс, серверную часть и базу данных в контейнеры, а Kubernetes помогает эффективно организовывать, масштабировать и управлять этими контейнерами. Узнайте больше о Docker для разработчиков интерфейсов и о том, как развернуть приложение React в Kubernetes с помощью Docker.

Когда использовать (и не использовать) стек MERN

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

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

Стек MERN отлично подходит для создания:

  • Одностраничные приложения (SPA) React - отличный инструмент для создания SPA-приложений, таких как информационные панели, поскольку он позволяет пользователям взаимодействовать с веб-приложением без полной перезагрузки страницы
  • Полнофункциональные JavaScript-приложения - Как упоминалось ранее, MERN stack позволяет использовать полнофункциональный JavaScript-подход, который уменьшает необходимость переключения контекста и устраняет необходимость изучения различных серверных языков, таких как Python или PHP
  • Приложения реального времени... Вы можете использовать Node.js и Express.js для создания приложений реального времени, комбинируя их с такими инструментами, как Socket.io
  • Быстрое создание прототипов и MVP” Стек MERN отлично подходит для стартапов и продуктов на ранних стадиях разработки, которые нуждаются в быстрой разработке и повторении.

Стек MERN менее пригоден для строительства:

  • Приложения со сложными транзакциями (соответствие ACID) - MERN может оказаться не лучшим выбором, если вашему приложению требуется строгая целостность реляционных данных, поскольку MongoDB не обрабатывает сложные транзакции так же хорошо, как реляционные базы данных, такие как PostgreSQL
  • Приложения корпоративного уровня со сложными запросами - приложения, требующие сложных объединений, отчетов или аналитики, могут испытывать трудности с MongoDB, поскольку это база данных NoSQL, оптимизированная для обеспечения гибкости, а не для выполнения сложных запросов. В таких случаях лучше использовать PostgreSQL
  • Серверные приложения (статические веб-сайты и веб-сайты, ориентированные на SEO) - MERN не подходит для приложений, которым требуется серверный рендеринг (SSR) для целей SEO. Лучше использовать фреймворки SSR, такие как Next.js, которые отображают веб-сайты на сервере и предоставляют встроенные компоненты, такие как изображения и скрипты, которые еще больше улучшают SEO и производительность

Ресурсы MERN stack: шаблоны, сертификаты и дорожная карта

Если вы продвинулись так далеко, поздравляем! Вы узнали, почему MERN stack так популярен и какие преимущества он предоставляет.

Теперь давайте рассмотрим ответ на вопрос, который задают многие разработчики: "Как мне стать разработчиком MERN stack?"

Дорожная карта разработчика MERN stack

Первым шагом к тому, чтобы стать разработчиком MERN stack, является получение необходимых знаний, которые включают в себя изучение следующих технологий - предпочтительно в порядке убывания, поскольку ваше понимание одной из них послужит основой для дальнейшего обучения:

  1. Изучайте HTML, CSS и JavaScript - ”большую тройку" веб-разработок
  2. Изучите Git, GitHub и команды терминала. Git - это большой злой волк, которого боятся многие разработчики, включая меня, но вам он определенно понадобится
  3. Освоите интерфейс с React. Это включает в себя изучение управления состоянием, перехватчиков React, маршрутизатора React и Next.js других
  4. После этого настанет время перейти к серверной части. Здесь вы узнаете о Node.js и Express.js
  5. Далее вы узнаете о MongoDB, его функциях и способах навигации по платформе

Примечание: На самом деле, это всего лишь краткий обзор дорожной карты разработчика MERN stack. Более подробное руководство смотрите в разделе Roadmap.sh дорожная карта разработчика full-stack.

Сертификаты разработчика MERN stack

В сфере технологий существуют разные мнения о сертификатах. Одни считают, что они не нужны, другие - что нужны.

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

  • Профессиональный сертификат IBM Full-stack разработчика программного обеспечения
  • Магистерская программа для разработчиков Simplilearn Full-stack (MERN Stack)
  • Сертификат Noble Desktop Full-stack для веб-разработки

Роли и навыки разработчика MERN stack

Многие роли требуют опыта работы с MERN stack, но наиболее распространенные из них включают:

  • Разработчик полного цикла - ожидается, что он будет работать как с интерфейсом (React), так и с серверной частью (Node.js/Express) при управлении базами данных (MongoDB).
  • Frontend разработчик (React) Хотя приоритетным является опыт работы с React, многие работодатели предпочитают кандидатов, которые разбираются в интерфейсе Node.js для интеграции API
  • Серверный разработчик (Node.js) - Компании, принимающие на работу на должности Node.js, часто ожидают опыта работы с Express.js и MongoDB (или каким-либо решением для баз данных).
  • Разработчик JavaScript” Широкая роль, которая предполагает работу с технологиями, основанными на JavaScript, такими как MERN stack, в различных проектах.
  • Разработчик-фрилансер/контрактник - Многие стартапы и агентства ищут опытных разработчиков для быстрого создания MVP, веб-приложений или SaaS-продуктов

Потенциальные работодатели ожидают, что разработчики MERN stack будут обладать множеством навыков. Некоторые из них включают создание адаптивных пользовательских интерфейсов с помощью React, обработку RESTful API с помощью Express.js , управление аутентификацией и авторизацией с помощью Nodejs, понимание структуры MongoDB на основе документов, защита баз данных, использование Git для контроля версий и развертывание приложений на таких платформах, как Vercel, Netlify, Heroku или DigitalOcean.

Проекты и шаблоны MERN stack

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

  • Веб-приложение для социальных сетей
  • Проект платформы электронной коммерции
  • Поток чата
  • Программное обеспечение ERP CRM
  • Полноценный веб-сайт для записи на прием к врачу
  • Веб-приложение для выполнения текущих задач

Изучите раздел mern-project на GitHub, чтобы увидеть больше отличных проектов и шаблонов.

Курсы и учебные пособия для разработчиков MERN stack

Всемирная паутина изобилует множеством ресурсов для изучения стека MERN - и вообще всего, что угодно, - но для начала стоит ознакомиться с некоторыми из них:

  • Как создать CRUD-приложение MERN stack с нуля
  • Проект книжного магазина от freeCodeCamp
  • Ускоренный курс MERN stack от Net Ninja
  • Создайте и разверните полноценное приложение для социальных сетей MERN с авторизацией, разбивкой на страницы и комментариями с помощью JavaScript Mastery
  • Полноценная программа для разработчиков CareerFoundry

Востребованы ли сегодня разработчики MERN stack?

Хотя важно знать план действий для того, чтобы стать разработчиком MERN stack, не менее важно понимать спрос на рынке труда. Многие люди занимаются разработкой MERN stack не только для личных проектов, но и для того, чтобы получить работу в полевых условиях. Итак, насколько востребованы разработчики MERN stack сегодня?

Нет никакой свежей статистики, конкретно отслеживающей спрос на разработчиков MERN stack. Однако, после поиска на различных досках объявлений о вакансиях...” Glassdoor, Himalayas, Indeed, LinkedIn и Y Combinator работают в стартапе с такими терминами, как ”Современный разработчик стека", "Разработчик полного стека" и ""Веб-разработчик", Я заметил, что менее чем в 25 процентах объявлений о вакансиях запрашивался пакет MERN, и это скромные цифры.

Это говорит о том, что спрос на стек MERN в целом снизился по сравнению с тем, что было несколько лет или десять лет назад.

Информация, которую я почерпнул на досках объявлений о вакансиях, соответствует тенденциям поиска Google, которые показывают, что объем поиска для "современных разработчиков стека" намного превышает объем поиска для "разработчиков полного стека".:

Google search trends for MERN stack vs full stack developer

Почему спрос падает? Сфера веб-разработки постоянно развивается по мере появления новых инструментов. Некоторые технологии набирают популярность, в то время как другие теряют ее. Например, jQuery когда-то был отраслевым стандартом для библиотек JavaScript, но это уже не так.

Очевидно одно: класть все яйца в одну корзину рискованно. Возможно, MERN stack в целом не соответствует требованиям, но отдельные технологии в нем по-прежнему очень актуальны.

Например, одной компании может потребоваться опыт работы с MongoDB или NoSQL, а другой - с React и Node.js но вместо MongoDB они используют PostgreSQL.

Таким образом, хотя вы, возможно, и не рассматриваете "современный стек" как требование к работе, вы обнаружите, что React, Node или MongoDB встречаются в разных комбинациях в описаниях должностных обязанностей.

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

  • Приобретение опыта работы с различными фреймворками и инструментами для работы с интерфейсом и серверной частью
  • Учимся быстро адаптироваться к новым фреймворкам по мере того, как они становятся популярными
  • Понимание основ упрощает переключение между инструментами

В конечном счете, стартапам и компаниям среднего размера всегда будут нужны базы данных, интерфейсные платформы и серверные библиотеки - но они не всегда будут выбирать инструменты из стека MERN. Кто-то предпочтет PostgreSQL, Vue, Next.js или что-то совершенно новое. Главное - стать универсальным разработчиком, способным быстро адаптироваться и осваивать новые технологии, чтобы не отставать от тенденций.

Заключительные соображения: кто нанимает разработчиков MERN stack?

Хотя стек MERN, возможно, уже не так востребован, как раньше, некоторые компании по-прежнему нанимают разработчиков MERN. Стартапы и технологические компании среднего размера, особенно те, которые создают MVP и масштабируемые веб-приложения, скорее всего, выберут MERN stack из-за его экосистемы, работающей только на JavaScript, что ускоряет разработку.

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

#JavaScript#React