Как правильно выбрать бэкенд-фреймворк для рендеринга: Next, Nuxt, Nest?

Резюме:3 основных фреймворка для бэкенд-рендеринга.

• оригинал:Как правильно выбрать Node framework: Next, Nuxt, Nest?
• автор:Random

Введение

В прошлой статье я исследовал различия, преимущества и недостатки трех самых популярных фреймворков Node: Express, Koa и Hapi. В этом посте мы рассмотрим различия между тремя другими очень популярными фреймворками: Next, Nuxt и Nest. Все три фреймворка предназначены для рендеринга на стороне сервера и тесно связаны с React, Vue и Angular (тремя самыми популярными фреймворками на данный момент) соответственно.

Наше сравнение будет основано на следующих моментах:

• GitHub Stars и загрузки npm
• Установить
• Базовое приложение Hello World
• выгода
• недостаток
• представление
• общественная деятельность

Next

Далее идет платформа React, которая позволяет создавать SSR и статические веб-приложения с использованием React.

• start

  • GitHub Stars: +36,000
  • npm weekly downloads: +300,000

• Установить

  следующая реакция

  npm install --save next react react-dom
  

  Добавьте скрипт в package.json следующим образом:

      {
        "scripts": {
          "dev": "next",
          "build": "next build",
          "start": "next start"
        }
      }
  

  затем прочитает файл js в каталоге страницы и проанализирует его в маршрут страницы

• Hello World

  Создайте файл каталога в проекте ./pages/index.js

      function Home() {
        return <div>Hello world!</div>;
      }
      
      export default Home;
      
      // npm run dev
      // 然后访问 http://localhost:3000
  

• выгода

  • По умолчанию каждый компонент обрабатывается сервером.
  • Автоматическое разделение кода для более быстрой загрузки страницы
  • Не загружайте ненужный код
  • Простая маршрутизация на стороне клиента (постраничная)
  • Среда разработки на основе Webpack, поддерживающая горячее обновление модулей (HMR)
  • Получить данные легко
  • Поддерживает любую реализацию HTTP-сервера Node, такую ​​как Express
  • Поддержка настройки Babel и Webpack
  • Может быть развернут на любой платформе, которая может запускать Node.
  • Встроенная обработка поисковой оптимизации (SEO) на странице

• недостаток

  • Next не является серверной службой и должен открываться независимо от фоновой операции.
  • Если вы просто хотите создать простое веб-приложение, то это может оказаться тупиком.
  • Данные будут многократно загружаться на клиенте и сервере
  • Без реализации проекта с прямым разделением переход на Next будет болезненным и может потребовать вдвое больше работы.

• представление

  Производительность основана на двух пунктах

  • 1. Используйте Apache Bench для тестирования пропускной способности.
  • 2. Используйте маяк для тестирования производительности, доступности, лучших практик, SEO.

这是Next基本HelloWorld程序。每秒能处理550.87个请求。每个请求花费的平均时间为18.153ms

В отчете о тестировании маяка вы можете видеть, что Preformance, Accessibility, Best Practices и SEO выше 70. Хотя это ниже, чем у двух других фреймворков, следует сказать, что это уже относительно хорошие данные. Оценка Best Practices nuxt выше, чем у двух других частей.

• общественная деятельность
  • Количество участников: 678
  • Pull Requests: 3,029
  • Сообщество достаточно активно

Nuxt

Nuxt – это универсальная платформа приложений, основанная на Vue. В нем задаются различные конфигурации, необходимые для разработки приложений, отображаемых на стороне сервера, с использованием Vue. Основное внимание уделяется рендерингу пользовательского интерфейса приложений.

• star

  • Звезды GitHub: +19 000
  • npm weekly downloads: +100,000

• Установить

  Чтобы быстро приступить к работе, команда Nuxt.js создала инструмент создания шаблонов create-nuxt-app.

      // 确保安装了npx（npx在NPM版本5.2.0默认安装了）
      npx create-nuxt-app <项目名>
  

  Это позволит вам сделать выбор: в интегрированных серверных фреймворках, таких как: Express, Koa, Hapi, Feathers, Micro, Adonis (WIP); выбрать свой любимый UI-фреймворк: Bootstrap, Vuetify, Bulma, Buefy и т. д.

• Hello World

  Nuxt автоматически генерирует конфигурацию маршрутизации модуля vue-router на основе структуры каталогов страниц.

      // ./pages/index.vue
      <template>
        <div>
          <h1>Hello world!</h1>
          <NLink to="/about">
            About Page
          </NLink>
        </div>
      </template>
  

• выгода

  • Его основная область применения — рендеринг пользовательского интерфейса при абстрагировании от распределения клиент/сервер.
  • Статический рендеринг, разделение спереди и сзади
  • Автоматическое наслоение кода
  • Можно настроить как сервисы, так и шаблоны
  • четкая структура проекта
  • Плавное переключение между компонентами и страницами
  • ES6/ES7 поддерживается по умолчанию
  • Горячее обновление поддержки разработки
  • Асинхронная выборка данных на уровне маршрута
  • Поддержка статического обслуживания файлов
  • Подготовка стилей: Sass, Less, Stylus и т. д.

• недостаток

  • Меньше окружающих ресурсов
  • Разработка сложных компонентов может быть обременительной
  • Пользовательская конфигурация громоздка
  • Множество операций с данными с побочными эффектами. this.Items [key] = Value
  • Высокий трафик может вызвать нагрузку на сервер
  • DOM можно запрашивать и манипулировать только в определенных хуках.

• представление

  Базовое приложение HelloWorld в Nuxt. Может обрабатывать 190,05 запросов в секунду. Среднее время запроса составляет 52,619 миллисекунды. Nuxt показывает худшие результаты по сравнению с двумя другими фреймворками по этому показателю.

Отчет о тестировании Lighthouse имеет самые высокие оценки по трем пунктам: производительность, доступность и SEO.

• активное сообщество
  • Количество участников: 191
  • Запросы на вытягивание: 1385

Nest

Nest — это прогрессивный фреймворк Node, сильно вдохновленный Angular. Фреймворк для создания эффективных, масштабируемых серверных приложений Node. Построенный на TypeScript, он сохраняет совместимость с чистым JS и объединяет ООП (объектно-ориентированное программирование), FP (функциональное программирование) и FRP (адаптивное программирование). Service hood использует Express по умолчанию, но также обеспечивает совместимость с различными другими библиотеками, такими как Fastify, что позволяет легко использовать множество доступных сторонних плагинов.

• Установить

  Nest предоставляет cli использовать эту команду cli для установки Nest и создания нового проекта.

      npm i @nestjs/cli
      nest new project-name
  

  В качестве альтернативы используйте Git для установки начального проекта TypeScript:

      git clone https://github.com/nestjs/typescript-starter.git project
      cd project
      npm install
      npm run start
  

• Hello World

  После использования команды npm cli для создания нового проекта в каталоге src появится несколько основных файлов, а main.ts — наша точка входа.

      // 创建一个服务然后监听3000端口
      import { NestFactory } from '@nestjs/core';
      import { ApplicationModule } from './app.module';
      
      async function bootstrap() {
        const app = await NestFactory.create(ApplicationModule);
        await app.listen(3000);
      }
      bootstrap();
      
      // 启动起来 
      npm start
  
  

• выгода

  • В качестве веб-фреймворка на основе TypeScript возможны строгие определения типов.
  • Автоматически генерировать документацию Swagger
  • Структура папок в Nest в основном основана на Angular.
  • Фреймворк на основе модулей, повторно используемый код
  • Структура проекта понятна, нужно только сосредоточиться на бизнесе, а не на архитектуре
  • Использование последней версии TypeScript означает, что функции JS в основном доступны.
  • Меньше переключений контекста для разработчиков. Переход с кода Angular на Nest относительно прост.
  • Подобно Angular, Nest также имеет хороший инструмент командной строки.

• недостаток

  • Отсутствие документации. Фреймворк имеет хорошую интеграцию с другими фреймворками, но документация скудна.
  • За спиной нет поддержки со стороны крупных предприятий
  • В целом, Nest имеет меньшее сообщество по сравнению с другими фреймворками.

• представление

  Базовое приложение HelloWorld в Nest. Он может обрабатывать 928,18 запросов в секунду. Среднее время на запрос составило 10,774 мс. По этому показателю Nest показала лучшие результаты среди трех сравнимых фреймворков.

  

  В отчете, предоставленном Lighthouse, у Nest очень высокая производительность, но низкие показатели доступности, лучших практик и SEO.

  

  Nest — не самый популярный фреймворк, но попробовать стоит!

• Участие сообщества

  • Количество участников: 81
  • Запросы на вытягивание: 469

Сравнение Next, Nuxt, Nest здесь.

** Оригинал: [Выбор правильной платформы Node.js: Next, Nuxt, Nest?