Дополнительные разделы

Лыкошин Александр

2022-24

## Стиль кодирования - Проблема Инструменты: - Lint, ESLint, JSHint - `.editorconfig` - Prettier

## Сборка - Проблема Задачи - Сборка в один (или несколько) файлов - Трансляция (при необходимости) - Минификация - Компрессия изображений - Удаление неиспользуемого кода Инструменты: - Grunt, Gulp, Browserify, Webpack

## Типизация - Проблема

## Валидация исходного кода - Typescript - Flow - Lint, ESLint, JSHint, (Prettier)

## Typescript

## Typescript - Строго типизированный язык, основанный на JavaScript - https://www.typescriptlang.org/

## Валидация данных во время выполнения

## JSON Schema - Декларативный язык для аннотирования и валидации JSON-документов. - https://json-schema.org/

## Веб-сокеты - https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API - https://learn.javascript.ru/websocket

## Веб-сокеты - упражнения - Простейший чат - https://socket.io/get-started/chat - Использование в CRUD приложениях для уведомления клиентских приложений - https://socket.io/get-started/basic-crud-application/

## Курсы по веб-технологиям Платные (рус) - https://htmlacademy.ru/courses Бесплатные/частично бесплатные (англ) - https://www.codecademy.com/catalog

## Express https://expressjs.com/

## Минимальный пример ```js const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening on port ${port}`) }) ```

## Основы маршрутизации Маршрутизация определяет, как приложение отвечает на клиентский запрос к конкретному адресу (конечной точке), которым является URI (или путь), и определенному методу запроса HTTP (GET, POST и т.д.). Каждый маршрут может иметь одну или несколько функций обработки, которые выполняются при сопоставлении маршрута.

## Основы маршрутизации Простейший пример ```js app.get('/', function (req, res) { res.send('Hello World!'); }); app.post('/', function (req, res) { res.send('Got a POST request'); }); app.put('/user', function (req, res) { res.send('Got a PUT request at /user'); }); app.delete('/user', function (req, res) { res.send('Got a DELETE request at /user'); }); ```

## Промежуточные обработчики

- Функции промежуточной обработки (middleware) - это функции, имеющие доступ к объекту запроса (req), объекту ответа (res) и к следующей функции промежуточной обработки в цикле “запрос-ответ” приложения. - Следующая функция промежуточной обработки, как правило, обозначается переменной next.

#### Простой пример промежуточного обработчика Выводит в консоль слово `"LOGGED"` при прохождении запроса через промежуточный обработчик ```js var loggerMw = function (req, res, next) { console.log('LOGGED'); next(); }; ``` Подключение промежуточного обработчика ```js app.use(loggerMw); app.get('/', function (req, res) { res.send('Hello World!'); }); ``` Каждый раз при получении запроса приложение выводит в консоль сообщение `"LOGGED"`.

Промежуточные обработчики выполняются в порядке их подключения. Если `loggerMw` загружается после маршрута к корневому расположению, запрос никогда не достигнет его, и сообщение `"LOGGED"` не будет выведено, поскольку обработчик маршрута корневого пути завершает цикл “запрос-ответ” (функция `next` не вызывается). Промежуточный обработчик `loggerMw` - выводит сообщение, - затем передает запрос далее, следующему промежуточному обработчику в стеке, вызовом функции `next()`.

#### Добавление свойств в объект запроса Добавление свойства `requestTime` в объект запроса ```js var requestTime = function (req, res, next) { req.requestTime = Date.now(); next(); }; ``` Использование промежуточного обработчика ```js app.use(requestTime); app.get('/', function (req, res) { var responseText = 'Hello World!'; responseText += 'Requested at: ' + req.requestTime + ''; res.send(responseText); }); ```

#### Промежуточный обработчик для обработки ошибок Промежуточный обработчик ошибок всегда содержит четыре аргумента. Для определения данной функции как обработчика ошибок необходимо указать четыре аргумента. Даже если вам не нужно использовать объект `next`, необходимо указать его, чтобы сохранить сигнатуру. В противном случае, объект `next` будет интерпретирован как обычный промежуточный обработчик, который не будет обрабатывать ошибки. Определите функции промежуточного обработчика для обработки ошибок так же, как другие функции промежуточной обработки, но с указанием не трех, а четырех аргументов в сигнатуре `(err, req, res, next)`: ```js app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); ```

#### Встроенные промежуточные обработчики <small> - express.static(root, [options]) - body-parser - производит парсинг тела запроса (JSON, raw, text, URL-encoded) - compression - HTTP-сжатие - connect-timeout - таймаут для запроса - cookie-parser - парсинг cookie - cookie-session - сохранение сессии с помощью cookie - csurf - валидация CSRF-токена - errorhandler - обработчик ошибок (только на этапе разработки) - express-session - сохранение сессии - method-override - переопределение методов - morgan - модуль логирования - response-time - previously response-time - serve-favicon - `favicon.ico` - serve-index - отображение списка файлов в директории - **serve-static** - доступ к статическим файлам - vhost - поддержка виртуальных хостов </small>

#### Ключевые функции и объекты - express() - Application - Request - Response - Router

#### Упражнения - Глава 4 - Express - https://metanit.com/web/nodejs/4.1.php

## Спасибо за внимание #### Вопросы..? [Следующая часть >>](./02-index.html)