Node JS и React - как создать фулстек приложение. Полное руководство
2 года назад·3 мин. на чтение
React приложение и бэкенд на NodeJS это хорошее сочетание, которое подойдет для реализации практически любых сервисов. Эта статья поможет вам быстро создать фулстек приложение.
Необходимые инструменты
Перед началом нужно убедиться, что на компьютере установлены все необходимые библиотеки, IDE и ПО, а именно:- NodeJS и npm. Их можно скачать с официального сайта nodejs.org. npm установится автоматически вместе с NodeJS.
- Предпочитаемый IDE, например, Visual Studio Code.
- Опционально, установить git для удобной работы с кодом.
О приложении
В этой статье напишем приложение, которое будет получать и отображать список дел. Структура папок будет выглядеть следующим образом.app/ frontend/ backend/
Создание бэкэнда на NodeJS
Запустим команду в папкеapp/backend
для инициализации проекта:
Эта команда создаст файлnpm init -y
package.json
. Этот файл содержит как общую информацию о проекте (название, версия, описание и т.д.), так и информацию о зависимостях, скрипты для запуска, сборки и тестирования.
Для создания сервера будем использовать express. Установим его с помощью команды:
Создадим файлnpm i express
index.js
, который будет содержать код для запуска сервера. Этот код запускает веб сервер на порту 3010
, если он не задан в переменных среды.
// backend/index.js const express = require('express'); const PORT = process.env.PORT || 3010; const app = express(); app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); next(); }); app.listen(PORT, () => { console.log(`Server listening on ${PORT}`); });
package.json
. В результате сможем запускать наш сервер с помощью команды npm start
.
Из директории// backend/package.json ... "scripts": { "start": "node ./index.js" }, ...
app/backend
запустим команду npm start
. Если ошибок нет, получим сообщение, что сервер прослушивает порт 3010.
PS C:\tutorials-coding\nodejs-react-app\backend> npm start > backend@1.0.0 start > node ./index.js Server listening on 3010
Создание API
API это интерфейс, с помощью которого React приложение будет общаться с веб-сервером, т.е. запрашивать, изменять или удалять данные. В нашем случае мы создадим API для получения списка дел в формате JSON. Создадим файлtodo-items.json
c объектами todo. Этот массив будем отдавать по запросу /api/todo-items
.
[ { "id": 1, "text": "Изучить NodeJS", "done": true }, { "id": 2, "text": "Изучить ReactJS", "done": true }, { "id": 3, "text": "Написать приложение", "done": false } ]
/api/todo-items
. React приложение будет отправлять GET
запрос на этот эндпоинт.
Для того чтобы изменения вступили в силу, нужно перезапустить NodeJS сервер. Для остановки скрипта - в терминале, в котором запущен// backend/index.js // ... const todoItems = require('./todo-items.json'); app.get('/api/todo-items', (req, res) => { res.json({ data: todoItems }); }); app.listen(PORT, () => { console.log(`Server listening on ${PORT}`); });
npm start
, нужно нажать Ctrl + C
(Command + C
). Далее снова запускаем npm start
.
Для проверки эндпоинта, в браузере перейдем по адресу http://localhost:3010/api/todo-items
. В результате получим, такой ответ.
![Ответ от Node JS сервера](https://it-dev-journal.ru/api/proxy/uploads/Otvet_ot_Node_JS_servera_eb09f94ead.jpg)
Создание фронтенда на React
В папкеapp/
откроем новый терминал и запустим команду для создания React приложения, где frontend
имя нашего приложения.
Дождемся установки всех зависимостей. В терминале перейдем в папкуnpx create-react-app@latest frontend
frontend
.
Установим библиотеку bootstrap для дальнейшего использования готовых компонентов.cd ./frontend
Заимпортируемnpm install react-bootstrap bootstrap
bootstrap.min.css
в файле frontend/src/index.js
.
Запустим приложение командойimport 'bootstrap/dist/css/bootstrap.min.css';
npm start
.
Получим следующее сообщение. Перейдем по указанному адресу в браузере.npm start
Compiled successfully! You can now view frontend in the browser. Local: http://localhost:3003 On Your Network: http://192.168.99.1:3003 Note that the development build is not optimized. To create a production build, use npm run build.
Отправка HTTP запроса из React в NodeJS
К этому моменту у нас уже есть рабочий сервер, который умеет принимать запросы и отдавать данные. Сделаем запрос на/api/todo-items
из React приложения. Для этого вызовем функцию fetch
из хука useEffect
в файле App.js
.
Открыв приложение в браузере, получим такой результат.// frontend/src/App.js import { useState, useEffect } from 'react'; import Form from 'react-bootstrap/Form'; import './App.css'; function App() { const [todoItems, setTodoItems] = useState([]); useEffect(() => { fetch('http://localhost:3010/api/todo-items') .then((res) => res.json()) .then((result) => setTodoItems(result.data)); }, []); return ( <div> {todoItems.map((item) => ( <Form.Group key={item.id} className="app__todo-item"> <Form.Check type="checkbox" checked={item.done} /> <Form.Control type="text" value={item.text} /> </Form.Group> ))} </div> ); } export default App;
![React приложение со списком дел](https://it-dev-journal.ru/api/proxy/uploads/React_prilozhenie_so_spiskom_del_6de9660054.jpg)
Чистая архитектура в Node.js
год назад·10 мин. на чтение
Чистая архитектура (Clean Architecture) — это концепция разработки программного обеспечения, которая фокусируется на создании модульного и поддерживаемого кода. Архитектура позволяет разработчику создавать кодовую базу, которую легко понять, протестировать и расширить.
Основное внимание в чистой архитектуре уделяется отделению основной бизнес-логики приложения от деталей инфраструктуры. В этой статье мы обсудим чистую архитектуру в Node.js и рассмотрим, как реализовать ее в проектах Node.js примерами кода и как применять к ним концепции.
Вот как мы можем применить разделение ответственности к этому коду:
Вот как мы можем применить инверсию зависимостей к этому коду:
Чтобы следовать принципу SRP, мы можем разделить эти обязанности на отдельные классы:
Выявление и решение проблем
При разработке приложений Node.js мы часто сталкиваемся с некоторыми проблемами, такими как дублирование кода, неорганизованная кодовая база и тесная связь (tight coupling). В следующем разделе мы используем простой пример приложения Node.js, которое извлекает данные из базы данных и возвращает их в качестве ответа JSON. Чистая архитектура предлагает решения этих проблем, делая упор на следующие принципы:Разделение ответственности (Separation of Concerns, SoC)
Фундаментальный принцип разработки программного обеспечения, который подчеркивает важность разделения системы на отдельные модули или компоненты, каждый из которых несет определенную и независимую ответственность. В Node.js SoC часто реализуется с использованием модульной архитектуры, где каждый модуль отвечает за одну задачу или функциональность. Вот пример того, как разделение ответственности может быть применено к этому коду:В этом коде мы смешали задачи маршрутизации, извлечения данных и обработки ошибок в одном файле. Это может затруднить обслуживание и масштабирование кода по мере роста приложения.// index.js - Плохой код! const express = require('express') const app = express() const database = require('./database') app.get('/users', async (req, res) => { try { const users = await database.getUsers() res.json(users) } catch (error) { res.status(500).send('Internal Server Error') } }) app.listen(3000, () => { console.log('Server is listening on port 3000') })
// index.js const express = require('express') const app = express() const usersRouter = require('./routes/users') app.use('/users', usersRouter) app.listen(3000, () => { console.log('Server is listening on port 3000') })
// routes/users.js const express = require('express') const router = express.Router() const usersController = require('../controllers/users') router.get('/', usersController.getUsers) module.exports = router
В этом переработанном коде мы разделили задачи маршрутизации, контроллера и извлечения данных на три отдельных файла. Файл// controllers/users.js const database = require('../database') async function getUsers(req, res) { try { const users = await database.getUsers() res.json(users) } catch (error) { res.status(500).send('Internal Server Error') } } module.exports = { getUsers, }
index.js
отвечает за создание приложения Express и регистрацию маршрутов, файл routes/users.js
отвечает за обработку маршрута /users
и делегирование запроса usersController
, а файл controllers/users.js
отвечает за извлечение данных из базы данных и возврат ответа клиенту.
Разделив эти задачи, мы можем достичь лучшей модульности и удобства сопровождения кода. Например, если мы хотим добавить больше маршрутов, мы можем создать новый файл в routes
и зарегистрировать его в index.js
без изменения существующего кода. Аналогичным образом, если мы хотим изменить способ извлечения данных из базы данных, мы можем изменить database.js
файл без изменения маршрута или кода контроллера.
Инверсия зависимостей (Dependency Inversion, DI)
В Clean Architecture зависимости инвертируются, что означает, что модули более высокого уровня должны зависеть от модулей более низкого уровня. Это гарантирует, что бизнес-логика не будет связана с деталями инфраструктуры. Вот пример того, как инверсия зависимостей может быть применена к этому коду:// index.js - Плохой код! const express = require('express') const app = express() const usersController = require('./controllers/users') app.get('/users', async (req, res) => { try { const users = await usersController.getUsers() res.json(users) } catch (error) { res.status(500).send('Internal Server Error') } }) app.listen(3000, () => { console.log('Server is listening on port 3000') })
В этом коде// controllers/users.js const database = require('../database') async function getUsers() { try { const users = await database.getUsers() return users } catch (error) { throw new Error('Error retrieving users') } } module.exports = { getUsers, }
index.js
напрямую зависит от модуля usersController
, который в свою очередь напрямую зависит от модуля database
. Это нарушает принцип инверсии зависимостей, поскольку высокоуровневые модули не должны зависеть от низкоуровневых модулей.
// index.js const express = require('express') const app = express() const usersController = require('./controllers/users') const database = require('./database') app.get('/users', async (req, res) => { try { const users = await usersController.getUsers(database) res.json(users) } catch (error) { res.status(500).send('Internal Server Error') } }) app.listen(3000, () => { console.log('Server is listening on port 3000') })
В этом переработанном коде мы применили Dependency Inversion, передав модуль// controllers/users.js async function getUsers(database) { try { const users = await database.getUsers() return users } catch (error) { throw new Error('Error retrieving users') } } module.exports = { getUsers, }
database
в качестве параметра функции getUsers
в модуле usersController
. Таким образом, высокоуровневый модуль index.js
не зависит напрямую от низкоуровневого модуля database
, но оба зависят от абстракции функции getUsers
.
Применяя инверсию зависимостей, мы можем добиться большей модульности, гибкости и тестируемости кода. Например, если мы хотим переключиться на другую реализацию базы данных, мы можем создать новый модуль, реализующий функцию getUsers
, и передать ее в качестве getUsers
в модуле usersController
без изменения существующего кода. Точно так же мы можем легко имитировать модуль database
для целей модульного тестирования.
Принцип единой ответственности (Single Responsibility Principle, SRP)
Каждый модуль или функция должны нести единую ответственность. Это помогает в создании кодовой базы, которую легко понять и поддерживать. Вот пример в Node.js который иллюстрирует принцип SRP:В этом примере у нас есть класс// user.js - Плохой код! class User { constructor(name, email, password) { this.name = name; this.email = email; this.password = password; } saveToDatabase() { await database.saveUser(user) .then(() => { res.status(200).send() }) .catch(err => { res.status(400).send('Email Error') }); } sendWelcomeEmail() { await mailService.send(user, 'Welcome') .then(() => { res.status(200).send() }) .catch(err => { res.status(400).send('Email Error') }); } }
User
, который имеет две обязанности:
- Сохранение пользовательских данных в базе данных
- Отправка приветственного электронного письма пользователю
User
имеет несколько причин для изменения. Например, если мы решим изменить способ сохранения пользовательских данных в базе данных, нам также придется изменить класс User
, даже если это не связано с отправкой приветственного электронного письма.
Теперь у нас есть три класса, каждый из которых несет единую ответственность:class User { constructor(name, email, password) { this.name = name; this.email = email; this.password = password; } } class UserRepository { saveToDatabase(user) { await database.saveUser(user) .then(() => { res.status(200).send() }) .catch(err => { res.status(400).send('Email Error') }); } } class EmailService { sendWelcomeEmail(user) { await mailService.send(user, 'Welcome') .then(() => { res.status(200).send() }) .catch(err => { res.status(400).send('Email Error') }); } } }
User
: отвечает за представление пользователя.UserRepository
: отвечает за сохранение пользовательских данных в базе данных.EmailService
: отвечает за отправку приветственного электронного письма пользователю.
UserRepository
. Класс User
и класс EmailService
остаются неизменными.
Концепции и детальное проектирование
Чистая архитектура в Node.js основана на принципах чистой архитектуры, введенных Робертом С. Мартином (он же дядя Боб). В нем подчеркивается разделение ответственности, разъединение зависимостей и модульность. Цель состоит в том, чтобы создать кодовую базу, которую легко понять, протестировать и поддерживать. Основная идея Clean Architecture заключается в разделении приложения на разные слои, где каждый уровень несет определенную ответственность. Слои взаимодействуют друг с другом через четко определенные интерфейсы. Это позволяет легко модифицировать и тестировать приложение, не затрагивая другие части кодовой базы. Node.js — это популярная среда выполнения для создания веб-приложений. Он имеет обширную экосистему библиотек и фреймворков, которые можно использовать для реализации Clean Architecture. Вот некоторые из ключевых концепций чистой архитектуры в Node.js:Уровень инфраструктуры (Infrastructure Layer)
Уровень инфраструктуры отвечает за обработку внешних зависимостей, таких как базы данных, API или файловая система. Он должен быть отделен от уровня домена, чтобы обеспечить легкое тестирование и модификацию. Уровень инфраструктуры должен реализовывать интерфейсы, определенные уровнем домена. В Node.js уровень инфраструктуры может быть реализован с помощью пакетов или модулей. Например, можно использовать популярный пакет Knex.js для обработки запросов к базе данных. Уровень инфраструктуры должен быть спроектирован так, чтобы быть подключаемым, что позволяет легко заменять внешние зависимости. Вот пример модуля инфраструктуры, реализующего адаптер базы данных:Этот модуль предоставляет методы для получения пользователя по идентификатору и сохранения пользователя в базе данных с помощью библиотеки Knex.js.const knex = require('knex'); class UserDatabase { constructor(config) { this.db = knex(config); } async getById(id) { const data = await this.db('users').where({ id }).first(); return data ? User.create(data) : null; } async save(user) { const data = User.toData(user); const { id } = user; if (id) { await this.db('users').where({ id }).update(data); } else { const [newId] = await this.db('users').insert(data); user.id = newId; } } }
Уровень представления (Presentation Layer)
Уровень представления отвечает за отображение выходных данных приложения для пользователя и обработку вводимых пользователем данных. Он должен быть отделен от прикладного уровня и уровня инфраструктуры. Уровень представления может быть реализован с помощью веб-фреймворков, таких как Express.js или Hapi.js. В Node.js уровень представления может быть реализован с помощью веб-фреймворков или модулей. Веб-фреймворки предоставляют мощный и гибкий способ реализации уровня представления и размещения всей логики вместе. Вот пример модуля презентации, реализующего REST API с помощью веб-платформы Express.js:Этот модуль создает приложение Express.js, настраивает пользовательскую службу и базу данных, а также предоставляет конечные точки REST API для получения и обновления пользовательских данных.const express = require('express'); const bodyParser = require('body-parser'); const UserService = require('./services/user-service'); const UserDatabase = require('./infra/user-database'); const app = express(); app.use(bodyParser.json()); const userDatabase = new UserDatabase(config); const userService = new UserService(userDatabase); app.get('/users/:id', async (req, res) => { const { id } = req.params; try { const user = await userService.getUserById(id); res.json(user); } catch (error) { res.status(404).json({ error: error.message }); } }); app.put('/users/:id', async (req, res) => { const { id } = req.params; const { userData } = req.body; try { let user = await userService.getUserById(id); user = User.create({ ...user, ...userData }); await userService.saveUser(user); res.json(user); } catch (error) { res.status(404).json({ error: error.message }); } });
Прикладной уровень (Application Layer)
Прикладной уровень отвечает за оркестрацию взаимодействия между доменным уровнем и уровнем инфраструктуры. Он содержит варианты использования приложения, которые представляют взаимодействия между пользователем и системой. Прикладной уровень должен быть отделен от уровня домена и уровня инфраструктуры. В Node.js прикладной уровень может быть реализован с помощью классов или модулей. Классы обеспечивают четкое разделение ответственности и инкапсуляцию. Модули обеспечивают более простой подход к реализации прикладного уровня. Вот пример класса приложения, представляющего пользовательскую службу:Этот класс предоставляет методы для получения пользователя по идентификатору и сохранения пользователя с помощью модуля инфраструктуры UserDatabase.class UserService { constructor(userDatabase) { this.userDatabase = userDatabase; } async getUserById(id) { const user = await this.userDatabase.getById(id); if (!user) { throw new Error(`User not found with ID ${id}`); } return user; } async saveUser(user) { await this.userDatabase.save(user); } }
Уровень домена (Domain (Enterprise) Layer)
Доменный уровень является сердцем приложения, содержащим бизнес-логику и правила. Он должен быть независим от каких-либо внешних библиотек или фреймворков, что упрощает его тестирование и изменение. Доменный уровень является наиболее важной частью приложения, и любые изменения должны вноситься с большой осторожностью. В Node.js, уровень домена может быть реализован с помощью классов или модулей. Классы обеспечивают четкое разделение ответственности, инкапсуляцию и возможность повторного использования. Модули, с другой стороны, обеспечивают более простой подход к реализации доменного уровня. Вот пример класса домена, представляющего сущность пользователя:Этот класс инкапсулирует пользовательские данные и предоставляет методы для изменения имени и адреса электронной почты пользователя.class User { constructor(id, name, email) { this.id = id; this.name = name; this.email = email; } changeName(name) { this.name = name; } changeEmail(email) { this.email = email; } static create(data) { const { id, name, email } = data; return new User(id, name, email); } static toData(user) { const { id, name, email } = user; return { id, name, email }; } }
Использование сторонних npm пакетов
Использование сторонних пакетов — отличный способ повысить чистоту кода. Существует множество пакетов, которые могут помочь вам организовать кодовую базу и сделать ее более модульной. Например, можно использовать пакет, например Express.js для обработки маршрутизации и промежуточного ПО. Вы также можете использовать пакет, такой как Knex.js для обработки запросов к базе данных. Использование этих пакетов может помочь уменьшить дублирование кода и сделать базу кода более организованной. Вот еще несколько примеров использования сторонних пакетов:Lodash
Lodash — это служебная библиотека, предоставляющая широкий спектр функций для работы с массивами, объектами и другими структурами данных. Используя Lodash, можно избежать написания повторяющегося кода для таких задач, как фильтрация, сортировка и преобразование данных. Например, рассмотрим следующий код для фильтрации массива пользователей по возрасту:Используя Lodash, вы можете вместо этого написать следующий код:const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }, ]; const filteredUsers = users.filter(user => user.age >= 30);
Этот код более лаконичный и легкий для чтения, а использование функцииconst _ = require('lodash'); const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }, ]; const filteredUsers = _.filter(users, user => user.age >= 30);
filter
от Lodash дает понять, что делает код.
Moment.js или date-fns
Moment.js — это библиотека для синтаксического анализа, манипулирования и форматирования даты и времени. Используя Moment.js, можно избежать написания сложного кода манипуляции с датой и снизить вероятность ошибок. Например, рассмотрим следующий код для форматирования даты в виде строки:Используя Moment.js, вы можете вместо этого написать следующий код:const date = new Date(); const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
Этот код легче читать и поддерживать, а использование функции format от Moment.js дает понять, что делает код.const moment = require('moment'); const date = new Date(); const formattedDate = moment(date).format('YYYY-MM-DD');
Winston
Winston — это библиотека логирования (журналирования), которая предоставляет множество функций для ведения журнала сообщений, включая различные уровни логов и настраиваемое форматирование. Используя Winston, вы можете избежать написания пользовательского кода ведения журнала и убедиться, что ваши журналы согласованы и легко читаются. Например, рассмотрим следующий код для регистрации сообщения:Используя Winston, вы можете вместо этого написать следующий кодconsole.log(`[${new Date().toISOString()}] INFO: User logged in`);
Этот код более настраиваемый и легко читаемый, а использование Winston дает понять, что делает код.const winston = require('winston'); const logger = winston.createLogger({ level: 'info', format: winston.format.combine( winston.format.timestamp(), winston.format.printf(info => `[${info.timestamp}] ${info.level}: ${info.message}`) ), transports: [ new winston.transports.Console(), new winston.transports.File({ filename: 'app.log' }), ], }); logger.info('User logged in');