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

Node.js
Как правильно выбрать фреймворк Node-SSR: Next, Nuxt, Nest?

Введение

В прошлой статье я исследовал различия, преимущества и недостатки трех самых популярных фреймворков 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.

    Это следующая базовая программа HelloWorld. Он может обрабатывать 550,87 запросов в секунду. Среднее время, затраченное на запрос, составило 18,153 мс.

    В отчете о тестировании маяка вы можете видеть, что Preformance, Accessibility, Best Practices и SEO выше 70. Хотя это ниже, чем у двух других фреймворков, следует сказать, что это уже относительно хорошие данные. Оценка передового опыта 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 здесь.

Источник статьи

Колумбийское развитие красоты Лиз

Twitter: @lizparody23

Liz is a self-taught Software Engineer focused on JavaScript, and Developer Relations Manager at NodeSource. She organizes different community events such as JSConf Colombia, Pioneras Developers, Startup Weekend and has been a speaker at EmpireJS, MedellinJS, PionerasDev, and GDG. She loves sharing knowledge, promoting JavaScript and Node.js ecosystem and participating in key tech events and conferences to enhance her knowledge and network

оригинальная ссылка

Пожалуйста, укажите источник

Категории