Краткая дискуссия по выбору технических решений на базе фреймворка Express.

Node.js внешний интерфейс

предисловие

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

  • Инструменты
  • Плагин статьи
  • Сервисные статьи

ИнструментыПростое руководство по публикации интерфейса командной строки с помощью NPM.Плагин статьиВ основном рассказывается, как разработать интересный плагин Webpack (то же самое верно и для плагина Vue CLI/Babel).Сервисные статьиВ нем будут объяснены некоторые технические схемы выбора, основанные на структуре приложений Express.Такая технология часто очень полезна для некоторых интерфейсных инструментальных платформ (таких как платформа Mock, многоязычная платформа и т. д., которые часто можно разработать с помощью команды линейный интерфейс). Из-за большого объема статьи в этой статье обсуждаются толькоСервисные статьисодержание.

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

каркас веб-приложений

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

  • Express: он стал стандартным фреймворком для разработки веб-приложений Node.js, и большинство инженеров знакомы с его дизайнерскими идеями (минималистическое ядро, но позволяющее использовать различное промежуточное ПО для расширения его функций).
  • Koa: Концепция дизайна очень похожа на экспресс, за исключением того, что он написан с использованием ES6 генератора, такой подход к решению проблемы обратного вызова ада, известного всем
  • Feathers: гибкое решение для реализации сервис-ориентированных архитектур, идеально подходящее для создания микросервисов Node.js.
  • Sails: это универсальная среда MVC, в основном вдохновленная Ruby on Rails, которая существует уже давно и поддерживает различные базы данных, будь то SQL или No-SQL.
  • Egg: создан для корпоративных платформ и приложений
  • Modal: создание распределенных сервисов без сохранения состояния на основе PostgreSQL.
  • Keystone: лучшее решение для быстрого создания фона управления на основе MongoDB, фоновый интерфейс может быть создан автоматически на основе определения модели данных и поддерживает стандартные операции добавления, удаления, изменения и запроса, а также гибкую фильтрацию данных.
  • Loopback: зрелая платформа с множеством встроенных функций, поддерживает аутентификацию на основе токенов и поддерживает различные базы данных. «Убойная» функция loopback — это API-браузер, который позволяет разработчикам просматривать все API-интерфейсы очень интуитивно понятным способом.Если вам нужно создавать API-сервисы, это, несомненно, хороший выбор.

Вот звездная ситуация Node.js Frameworks 2019 года (для справки):

В этой статье в основном объясняется структура приложений Express.Хотя возможности, которые она предоставляет, очень просты, она вполне компетентна для разработки некоторых инструментальных платформ и может писать всевозможные странные шаблоны MVC (если MVC на стороне сервера не очень понятен , вы можете прочитать этоВывод Model2 серверного MVC). Вот краткое введение в несколько ранее разработанных технических опций, основанных на расширениях Express, которые охватывают три интерфейсных веб-фреймворка: React, Angular и Vue.

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

Подбор технического решения React

С июля по октябрь 2016 года я изучил React с нуля и использовал React для разработки серверного экспресс-приложения (родился 25 октября того же года).Next.js), общий технический выбор следующий:

  • Bootstrap
  • React
  • Mongoose
  • Webpack
  • Karma/Chai

Поскольку я не очень хорошо знаком с React, я сначала реализовал одностраничное приложение, а затем реализовал приложение для рендеринга на стороне сервера.

Реализация одностраничного приложения React (SPA)

React процесс обучения и проектирования

До использования React я просто использовал Bootstrap Процесс обучения React в то время был примерно следующим:

  • Изучите синтаксис React
  • Изучите синтаксис ES6/ES7
  • Изучите Babel/Webpack, код пакета для поддержки синтаксиса ES6/ES7/JSX
  • Изучите webpack-dev-server/Hot Module Replacement, запустите экспресс-сервис среды разработки и реализуйте функцию горячей загрузки
  • изучить поток/реагировать-редукс
  • изучить реактивный маршрутизатор
  • узнать мокко / карму

Итоговый документ обучения выглядит следующим образом:

Вышеупомянутый процесс обучения записывается вreact-demoиreact-start-kit(Небольшое и полное концептуальное справочное значение), это всего лишь простой процесс разработки одностраничного приложения React. Общая структура выглядит следующим образом:

enter image description here

Советы: в режиме разработки, где передняя и задняя части разделены, если передняя часть сети реализует SPA (одностраничное приложение), серверная часть может выбирать разные языки дизайна, такие как Node.js, Java или Golang. Веб-интерфейс может бытьЭкспресс сервер рендерингаВыполнить переадресацию прокси-сервера внутренних запросов. Если вам нужен интерфейс в первую очередь, вы можете использовать Easy Mock или свои собственные данные JSON для имитации спецификации интерфейса, предоставляемой серверной частью.

Процесс экспресс-проектирования сервера

В дизайне серверной части используется Express framework Node.js, общие этапы реализации следующие:

  • Создание серверной части Express и разработка серверной структуры каталогов MVC.
  • Установите каталог статических ресурсов Express и установите каталог сборки Webpack веб-интерфейса в каталог статических ресурсов Express.
  • Настройка маршрутизации и сервисов маршрутизации для одностраничных приложений
  • Запустите службу, чтобы увидеть, может ли страница быть успешно отображена.

Описанный выше процесс реализации задокументирован на простом примере.rewatch, входной файлapp.js. В настоящее время внешний и внутренний интерфейсы разделены, и вы можете одновременно запустить службу Express на стороне сервера и службу страницы отладки React в состоянии разработки (webpack-dev-server), а также использовать возможности разработки. -state для отправки запросов в службу Express для получения данных интерфейса (в то время с использованием JQuery).$.ajaxпослать запрос). После завершения проектирования страница разработки упаковывается и создается с помощью Webpack, а каталог сборки является каталогом статических ресурсов сервера Express. Работа по рендерингу первого экрана передается механизму шаблонов Ejs (на самом деле, его также можно напрямую рендерить с помощью строк HTML). Общая структура выглядит следующим образом:

enter image description here

Реализовать рендеринг на стороне сервера React (SSR)

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

  • Первый экран загружается медленно, что приводит к эффекту белого экрана.
  • Плохо для SEO

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

  • Чтобы достичь изоморфизма внешнего и внутреннего кода, код на стороне сервера должен быть упакован и настроен с помощью Webpack.
  • Используйте теги сценария и глобальные переменные для реализации внешнего и внутреннего интерфейса.react-reduxданныеstoreЕдинство (это впечатляет, я долго об этом думал)

После использования схемы рендеринга на стороне сервера предыдущий шаблонизатор Ejs можно удалить.Общая структура дизайна на тот момент выглядит следующим образом:

enter image description here

Когда страница отправляет запрос маршрутизации, сервер Express используетreact-routerСопоставьте экземпляр компонента React, соответствующий соответствующему маршруту и ​​вызовуrenderToStringМетод выполняет рендеринг страницы на стороне сервера (реализуя частичное обновление страницы). Когда рендеринг страницы будет завершен, статические ресурсы, упакованные React, будут выполнять обработку на странице.hydrateиметь дело с. Код React на данный момент изоморфен, поэтому вам нужно обратить внимание на то, что будет работать на сервере, а что на клиенте. В то же время серверу необходимо упаковать изоморфный код с помощью Webpack.

Вышеупомянутая реализация задокументирована в примереrewatch, входной файлserver.js, так как файлы путаются (примеры рендеринга на стороне клиента и рендеринга на стороне сервера находятся в одном файловом проекте), вот еще один очень простой примерrewatch-server-render, структура каталогов проекта выглядит следующим образом:

.
├── public                      # 静态资源目录
│   └── js
│      ├── bundle.js            # react 目录打包文件
│      ├── common.js            # react 目录打包公共文件
│      ├── react-dom.min.js     # react 库文件
│      └── react.min.js			# react 库文件
├── react                       # react 同构代码目录(没有 react-router，可以查看 rewatch 示例)
│   ├── actions                 
│   ├── components        
│   ├── containers
│   ├── reducers
│   ├── store                
│   └── index.js
├── server                      # 服务端
│   └── routes                  # 服务端路由（没有使用 react-router 同构，可以查看 rewatch 示例）
├── server.js                   # 开发态服务入口文件
├── server.bundle.js            # 生产态服务入口文件
├── webpack.browser.config.js   # 静态资源打包的 webpack 配置(目标文件 bundle.js、common.js)
└── webpack.node.config.js      # 服务端打包的 webpack 配置(目标文件 server.bundle.js)

Угловой выбор технического решения

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

  • Ejs
  • Bootstrap
  • Angular-Chart
  • Mongoose
  • Redis
  • Sokect.io

Это простой серверПример многостраничного приложения, используйте механизм шаблонов Ejs для рендеринга страницы и передайте Anguar для ответа на страницу после завершения рендеринга (отправляйте запросы, используя встроенный в Angular$httpСлужить). Этот пример не требует дополнительной настройки Webpack, просто запускает сам сервис Express и отображает дизайн. Структура каталогов следующая:

.
├── client                      # 静态资源目录
│   ├── css/                    # 样式
│   ├── imgs/                   # 图片
│   ├── js/                     # 脚本
│   │  ├── angular/             # angular应用
│   │  │  ├── controllers/   	# angular控制器
│   │  │  ├── services/	        # angular服务
│   │  │  └── webapp.js/		# angular自动引导应用程序
│   │  └── sockets/			  	# sockets应用
│   └── lib                     # 插件(包括angualr、bootstrap/bootstrap-table、chart等)
├── config                      # 配置（包括Redis、Mongoose配置）
│   ├── config.js               # 参数配置
│   └── index.config.js         # 导出配置
├── server                      # 服务端
│   ├── constants/              # 常量
│   ├── controllers/            # 控制器
│   ├── events/                 # 事件
│   ├── models/                 # 模型
│   ├── routes/                 # 路由
│   ├── sockets/                # socket.io
│   ├── pubs/                   # Redis发布
│   └── subs/                   # Redis订阅
├── views                       # 视图(使用Ejs模板引擎)
└── app.js                      # 服务入口文件

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

Выбор технического решения Vue

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

  • Mongoose
  • Nuxt
  • Vue
  • lokka
  • Muse-UI
  • Конфигурация Webpack для клиентского и серверного изоморфного кода, обернутого Nuxt
  • Конфигурация серверного рюкзака

Основные особенности выбора данной технологии заключаются в следующем:

  • Поддержка рендеринга на стороне сервера
  • служба поддержкиGraphqlязык запросов
  • Единый перед и задTypeScriptграмматика

Подробное описание выбора модели

  • Для поддержки языка запросов Graphql сервер выбирает сервер, который поддерживает расширения промежуточного программного обеспечения Express.graphql-yoga.
  • HTTP-запрос клиента должен соответствовать формату запроса Graphql.Один из способов — использовать axios для имитации формата запроса Graphql, а другой — использовать библиотеку запросов, поддерживающую формат запроса Graphql.lokkaБиблиотека запросов в качестве клиента Graphql.
  • Для быстрого оформления страницы выбрана библиотека компонентов UI Material Design на базе Vue 2.0Muse-UI.
  • выбранNuxtВ качестве промежуточного программного обеспечения для рендеринга на стороне сервера (общая структура приложений на основе Vue.js, предустановлены различные конфигурации, необходимые для приложений рендеринга на стороне сервера).
  • Для поддержки синтаксиса TypeScript на стороне клиента необходимо расширить конфигурацию веб-пакета Nuxt по умолчанию, используя возможности Nuxt.модули/зарегистрировать пользовательские загрузчикиНастройте ts-loader для работы сnuxt-property-decoratorРеализует синтаксис TypeScript на стороне клиента.

Структура каталогов проекта

В структуре каталогов Nuxt изоморфный код, введенный сервером, размещается в.nuxtВ каталоге есть файлы кода, упакованные Webpack, поэтому, если сервер не использует специальный синтаксис, настройка Backpack вообще не требуется. Для поддержки серверного синтаксиса TypeScript в этом проекте используется Backpack для сборки серверного кода (это не влияет на построение изоморфной части кода, изоморфный код получается при чтении файлов в Nuxt).

.
├── .nuxt                       # Nuxt构建目录（Nuxt预设目录）
├── assets                      # 资源目录（Nuxt预设目录）
│   ├── img               		# 图片
│   ├── icon               		# 图标
│   └── style         			# 样式
├── build                      	# 配置（包括Redis、Mongoose配置）
│   └── main.js                 # 服务端Backpack构建的目标启动入口文件
├── common                      # 前后端通用
│   ├── constants/              # 常量
│   └── types/                  # TypeScript接口
├── components                  # 组件目录（Nuxt预设目录）
├── constants                   # 前端常量目录
├── docs                        # 文档目录（渲染.md文件）
├── graphql                     # 前端Graphql请求接口
├── layouts              		# 布局目录（Nuxt预设目录）
├── middleware					# 中间件目录（Nuxt预设目录）
├── mixins					    # 全局mixins
├── modules					    # Nuxt模块（TypeScrpt的Webpack配置扩展）
├── pages					    # 页面目录（Nuxt预设目录）
├── plugins					    # 插件目录（Nuxt预设目录）
├── server					    # 服务端目录
│   ├── constants/              # 常量
│   ├── database/               # 数据库模型
│   ├── express/                # 服务对外的公共API接口
│   │   ├── controllers/   		# 控制器
│   │   ├── routes/   			# 路由
│   │   └── services/			# 服务
│   ├── graphql/                # 服务内部的Graphql查询接口
│   │   ├── middlewares/   		# Graphql中间件
│   │   ├── resolvers/   		# Graphql Resolver
│   │   ├── schemas/   			# Graphql Schema
│   │   └── index.ts			# graphql接口入口文件
│   ├── types/                  # TypeScript接口
│   ├── utils/                  # 工具方法
│   └── index.ts                # 服务端入口文件（Backpack构建入口地址）
├── static                      # 静态文件目录（Nuxt预设目录）
├── store                       # Vuex目录（Nuxt预设目录）
├── utils                       # 客户端工具方法
├── .cz-config.js               # cz提交配置文件
├── .env               			# 环境变量
├── .gitignore               	# Git忽视文件
├── .huskyrc               		# Git钩子配置文件
├── .vcmrc						# cz校验配置
├── app.html					# html文件
├── backpack.config.js			# Backpack配置文件
├── CHANGELOG.md				# 升级日志
├── ecosystem.config.js			# PM2启动配置文件
├── index.d.ts					# TypeScript声明文件
├── nuxt.config.js				# Nuxt配置文件
├── package.json				# 项目描述文件
├── README.md					# 说明
├── tag.bat						# 项目打Tag脚本
└── tsconfig_node.json          # TypeScript配置文件

запустить дизайн скрипта

существуетpackage.jsonСценарий конфигурации выглядит следующим образом:

"build": "cross-env NODE_ENV=production nuxt build && backpack build",
"pm2": "pm2 start ecosystem.config.js",
"pm2:stop": "pm2 stop ecosystem.config.js",
"dev:client": "cross-env NODE_ENV=development DEV_TYPE=nuxt ts-node --compiler ntypescript --project tsconfig_node.json ./server",
"dev:server": "cross-env NODE_ENV=development DEV_TYPE=server ts-node-dev --compiler ntypescript --project tsconfig_node.json ./server"
  • build: Используйте Webpack для создания пакетов ресурсов Nuxt и используйте Backpack для создания файлов входа на стороне сервера (избегая TypeScript).
  • pm2: запустить веб-сервер, демонизируемый процессом, в производственном режиме.
  • pm2:stop: остановить веб-сервер
  • dev:client: Запустите службу рендеринга внешнего интерфейса для горячего развертывания.
  • dev:server: Запустите службу горячего запуска сервера в режиме разработки.

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

Настройте Nuxt на стороне сервераBuilderЭто приведет к тому, что горячая загрузка на стороне сервера будет слишком медленной, поэтому Nuxt на стороне сервераBuilderотфильтровать, использоватьts-node-devСделайте теплый старт сервера. использовать на стороне клиентаts-nodeЗапустите службу, идентифицируяDEV_TYPEПеременные среды для загрузки NuxtBuilder, чтобы реализовать функцию горячей загрузки веб-интерфейса. Следует отметить, что запрос, отправляемый клиентом на сервер, является междоменным, поэтому среду разработки на сервере необходимо настроить для разрешения междоменного взаимодействия.

Советы: Фреймворк рендеринга на стороне сервера — это шаблон фреймворка, который разделяет для меня фронтенд и бэкэнд разработку.

Наконец

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

  • Выбор базы данных (MongoDB/MySql и т.д.)
  • Нужен ли вам механизм шаблонов и выбор механизма шаблонов (Ejs / Jade и т. д.)
  • Выбор front-end фреймворка (JQuery/Angular/React/Vue и т.д.)
  • Выбор библиотеки HTTP-запросов (axios/request/superagent и т.д.)
  • Вам нужна библиотека компонентов пользовательского интерфейса и выбор библиотеки компонентов пользовательского интерфейса
  • Требует ли клиент сборки Webpack
  • Требует ли сервер сборки Webpack / Backpack
  • Другие (сессия, Redis, socket.io и т. д.)
  • производительность, мониторинг и т.

простой старт

  • MongoDB
  • Шаблонизатор EJS
  • JQuery
  • JQuery встроенный$.ajax
  • Начальная загрузка (необязательно)
  • Ни клиент, ни сервер не нуждаются в настройке Webpack

Для тех, кто новичок в Express, можно сначала попробовать схему подбора многостраничное приложение + MongoDB + шаблонизатор + JQuery:

  • Использование механизма шаблонов Ejs требует дополнительных знаний о синтаксисе Ejs, но синтаксис относительно прост, а затраты на обучение невелики.
  • Использование JQuery не требует выбора библиотеки HTTP-запросов, JQuery имеет встроенный API HTTP-запросов.
  • Если вы не знакомы с макетом страницы и дизайном стилей, вы можете рассмотреть возможность использования интерфейсной среды Bootstrap.
  • Не требуется глубоких знаний синтаксиса ES6/ES7/JSX и т. д., поэтому нет необходимости изучать и использовать конфигурацию Webpack.
  • Экспресс-приложения, визуализируемые с использованием механизма шаблонов Ejs, являются естественными приложениями для визуализации на стороне сервера.

Дизайн приложений основных фреймворков

  • MongoDB
  • Шаблонизатор не требуется
  • Реагировать/Вью и т.д.
  • axios/запрос/суперагент и т. д.
  • Ant Design / Ant Design Vue / Element / Muse-UI и т. д.
  • Конфигурация клиентского веб-пакета
  • Нужна ли серверу конфигурация Webpack/Backpack, зависит от ситуации

Если выбрана платформа интерфейса React или Vue (обычно дизайн одностраничного приложения), и вам необходимо использовать формат SFC ES6/ES7/JSX и Vue и другой синтаксис, тогда веб-интерфейс привязан к разработке сборки Webpack. На данный момент вы можете использовать что-то вроде Atwebpack-dev-serverСервер рендеринга экспресс-разработки для проектирования и отладки интерфейсных страниц разработки. Конечно, в текущей веб-интерфейсной разработке есть собственные шаблоны, предназначенные для различных интерфейсных фреймворков, поэтому вы можете напрямую использовать шаблоны для проектирования разработки и создания статических ресурсов. В то же время, если в фреймворке нет встроенной библиотеки HTTP-запросов, вы можете инкапсулировать ее самостоятельно или использовать некоторые зрелые HTTP-библиотеки, такие какaxios,requestа такжеsuperagentЖдать. Если вам нужно использовать библиотеку компонентов пользовательского интерфейса для дизайна страницы, вы можете выбрать библиотеку компонентов пользовательского интерфейса в соответствии с используемой структурой, например React.Ant Design, ВьюElementЖдать. В конструкции сервера Express используются возможности динамического рендеринга основных фреймворков, поэтому функцию рендеринга механизма шаблонов можно удалить. Если вы хотите поддерживать синтаксис ES6/ES7/TypeScript и т. д., который Node.js не поддерживает, вам необходимоBackpackДелайте сборки на стороне сервера.

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

Набор небольшой рекламы (телефонный столб серии о бесплодии)

Привет всем, мы являемся недавно созданным бизнес-отделом DingTalk BU по связям с государственными органами Alibaba (код здоровья, используемый студентами в Ханчжоу, является совместным проектом моего BU и других BU), и все еще существует большое количество вакансий в веб-интерфейсе. . Студенты, которые хотят найти меня для внутреннего продвижения по службе или хотят узнать больше информации о наборе, могут добавить меня в WeChat: 18768107826

Категории