Backend-разработка: введение для Frontend-разработчиков

Первые шаги в Node.js и Express.js

Несколько месяцев назад я обнаружил, что гуглил: «Бэкэнд-разработка сложнее, чем фронтенд-разработка?» Я достиг точки с фронтенд-разработкой, когда я смог решить большинство проблем, с которыми я столкнулся, - с небольшим исследованием. Но для разработчика-самоучки бэкэнд-программирование оставалось загадкой!

Я с облегчением обнаружил, что проблема шла в обе стороны: на каждого фронтенд-разработчика, запуганного Node.js, Python или Ruby, есть бэкэнд-разработчик, запуганный CSS, Vue или React. Часто это просто зависит от того, что вы узнали в первую очередь.

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

Фронтенд

У интерфейса есть преимущество немедленной визуальной обратной связи. Но у него также есть множество связанных соображений, таких как дизайн пользовательского интерфейса и UX, которые могут заставить некоторых backend-разработчиков работать.

Начать работу с HTML и CSS легко, но гораздо сложнее освоить весь спектр технологий, которые стали стандартными в современном интерфейсном программировании. Добавьте сюда дополнительные сложности, такие как кроссбраузерная совместимость, и вы поймете, почему некоторые люди предпочитают использовать код на стороне сервера.

Бэкэнд

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

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

Для кого эта статья?

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

Мы сосредоточимся на Node.js и Express.js: буквах E и N в популярных технических стеках MEAN и MERN. Но обсуждаемые концепции должны быть полезны любому, кто имеет некоторые знания о внешнем интерфейсе, независимо от того, хочет ли он разобраться в бэкэнд-разработке на JavaScript, Ruby или Python.

Бэкэнд-жаргон

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

Для меня ключевое различие между первым приобретением навыков фронтенда и бэкэнда заключалось в том, что бэкэнд требовал гораздо большего количества жаргона, чтобы начать работу. Хотя вы, несомненно, встречали такие термины, как сервер, HTTP, GET и POST - использование этих концепций в бэкэнд-коде требует большего, чем поверхностное понимание. Итак, вот краткий обзор некоторых терминов, которые вам необходимо знать.

Что такое сервер?

Сервер - это компьютерная программа или устройство, которое обеспечивает функции для других программ или устройств, известных как «клиенты». В веб-разработке этот сервер использует HTTP для обслуживания файлов для пользователей, отображающих веб-страницы. Это происходит в ответ на запросы, которые пересылаются от HTTP-клиентов компьютеров пользователей: когда вы вводите URL-адрес в адресную строку браузера, вы отправляете HTTP-запрос.

Что такое HTTP?

HTTP означает «протокол передачи гипертекста», и это система правил, которая лежит в основе взаимодействия между клиентами и серверами в Интернете. Возможно, вы столкнулись с двумя методами HTTP, запросами GET и POST, в коде внешнего интерфейса при программировании форм, но их использование во внутреннем коде гораздо шире. В Node.js также есть встроенный HTTP-модуль, который мы вскоре будем использовать для создания нашего сервера.

Запросы и ответы

Два наиболее распространенных аргумента для http.createServer() метода узла и многих других внутренних методов известны как req и res, что означает «запрос» и «ответ»). Это объекты со свойствами и методами, которые мы можем редактировать, чтобы настроить наши HTTP-запросы.

Проще говоря, req - это то, что мы отправляем, а res - это то, что мы получаем обратно:

• req - это объект, который содержит информацию о клиентском HTTP-запросе, который вызвал событие.
• res используется для отправки желаемого HTTP-ответа сервера.

В Express.js функции, предоставляющие доступ к req и res, известны как функции промежуточного программного обеспечения, и вы можете прочитать о них здесь.

HTTP-методы

Также существует несколько методов HTTP, и будет полезно понять два наиболее распространенных типа:

• Запросы GET используются для запроса данных из указанного ресурса. Их можно добавить в закладки и кэшировать, и они останутся в истории браузера. Если они используются для отправки формы, все данные формы отображаются в URL-адресе, поэтому их никогда не следует использовать для конфиденциальных данных.
• Запросы POST используются для отправки данных на сервер, позволяя создавать или обновлять ресурсы. Их нельзя добавить в закладки или кэшировать, и они не будут отображаться в истории браузера.

Коды состояния ответа HTTP

Для простого сервера нам также нужно немного знать о кодах состояния HTTP. Это сообщения, используемые для указания того, был ли успешно выполнен конкретный HTTP-запрос.

Даже большинство людей, не являющихся разработчиками, сталкивались с ошибкой 404 «Not Found», которая появляется, когда вы пытаетесь получить доступ к несуществующему URL. И если вы когда-либо занимались поисковой оптимизацией, вам могут быть известны коды вроде 308 «Постоянная переадресация», когда страница была навсегда перемещена на другой URL.

Для нашего сервера мы хотим использовать 200 «ОК», указывающее, что HTTP-запрос выполнен успешно.

Что такое имя хоста и порт?

Наконец, мы также выберем имя хоста и порт, поэтому будет полезно узнать о них немного больше.

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

В этом примере мы будем использовать специальный IP-адрес 127.0.0.1, также известный как localhost. Локальный хост конкретно описывает хост-компьютер, который обращается к нему: каждый компьютер использует этот адрес как свой, и, в отличие от обычных IP-адресов, он не позволяет компьютеру связываться с другими устройствами. Он считается «кольцевым» адресом, потому что отправляемая на него информация направляется обратно на локальный компьютер.

Порт - это конечная точка связи. Это число от 0 до 65535 (диапазон от 0 до 1024 зарезервирован для системных портов). Вы можете часто использовать localhost:3000 для доступа к серверу разработки веб-приложений, а число 3000 представляет порт. Порты можно использовать для прослушивания запросов на обслуживание от клиентов: в нашем примере порт будет прослушивать подключения к серверу.

Настройка вашего первого сервера

Чтобы настроить свой первый сервер Node.js, сначала убедитесь, что вы установили его на свой компьютер. Создайте новый каталог для вашего проекта и внутри него пустой файл JavaScript с именем index.js. Наконец, перейдите в этот каталог в своем терминале и запустите npm init.

Вы можете принять все значения по умолчанию, но убедитесь, что точка входа index.js. Это создаст файл package.json в корневом каталоге вашего проекта. Теперь мы готовы приступить к написанию JavaScript!

Использование Node.js

Во-первых, нам нужно потребовать в модуле HTTP использовать const http = require('http'). Затем мы можем установить имя хоста на '127.0.0.1', выбрать порт и создать наш сервер, используя метод http.createServer().

В этой функции мы установим для свойства statusCode результата значение 200 (что означает «ОК»). Мы также сообщим серверу, что наш результат представляет собой обычный текст, используя метод setHeader, и предоставим желаемый текст с помощью метода end.

Наконец, мы настроим наш сервер на прослушивание выбранного порта и имени хоста и запишем сообщение в консоль, чтобы мы знали, что все работает правильно.

const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Чтобы активировать сервер, перейдите в каталог проекта в терминале и введите node .. Затем вы можете открыть http://127.0.0.1:3000 в браузере, и вы должны увидеть слова «Hello World». Успех!

Использование Express.js

В приведенном выше примере показано, как настроить простой сервер, используя только встроенный HTTP-модуль Node.js, но чаще всего Express.js используется для основных внутренних задач.

Express.js предлагает ряд преимуществ по сравнению с Node.js сам по себе, включая обслуживание статических файлов, кэширование представлений, простую интеграцию с рядом популярных шаблонизаторов (например, Pug) и многочисленные полезные функции маршрутизации. Шаблонный код, необходимый для настройки простого сервера, также немного более лаконичен, чем альтернатива HTTP.

Чтобы начать работу с Express, перейдите в каталог своего проекта в терминале: введите npm init, чтобы инициализировать проект с помощью package.json файла, затем введите npm i express, чтобы установить Express. Вы можете скопировать и вставить следующий код в index.js, и у вас будет работающий сервер:

const express = require('express');
const app = express();
const hostname = '127.0.0.1';
const port = 3000;
app.get('/', (req, res) => res.send('Hello World!'));
app.listen(port, hostname, () => console.log(`Server running at http://${hostname}:${port}/`));

Методы hostname, port и listen идентичны предыдущему примеру, но метод get является функцией Express. Одним из преимуществ Express перед обычным Node.js является то, что в Express есть отдельные HTTP-методы обработчиков, такие как get, post, put и т. Д. Он обеспечивает простой способ маршрутизации HTTP-запросов GET по указанному пути: в данном случае в корень.

Nodemon

Наконец, для серверного кода очень часто используется модуль nodemon (произносится как node-mon), который автоматически перезапускает ваш сервер при каждом изменении исходного кода. Чтобы установить его, введите npm i -g nodemon, а затем вместо node index для запуска вашего сервера вы можете использовать nodemon index.

Следующие шаги

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

Если вы хотите узнать больше, я рекомендую перейти в официальный раздел« Начало работы на сайте Express.js». Или, чтобы получить чрезвычайно полезное и исчерпывающее введение в Node.js и Express, посмотрите статью MDN по этой теме.

Если вы хотите узнать больше о шаблонах HTML, я расскажу о Pug (обычно используется с Express) и о некоторых других вариантах в другой статье. А если вам интересно узнать о других способах использования Node.js, ознакомьтесь с моим руководством по созданию парсера. Если у вас есть вопросы или отзывы, оставьте, пожалуйста, комментарий!