Как стать автором
Обновить

MastermindCMS2 vs Next.js

CMS *Разработка веб-сайтов™ *Java *ReactJS *Подготовка технической документации *

Вступление

Подходит к концу 2021 г. и я думаю сейчас™ самое время подвести итоги как продвигалась веб разработка в условиях пандемии в мире и какие технологии сейчас™ используются для веб-программирования. 

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

Платформы с предложениями о работе™ в IT-сфере, просто™ кишат вакансиями фронтенд разработчиков имеющих опыт разработки на фреймворке React.

С одной стороны React нам дал возможность частями программировать интерфейс пользователя, разбирая его на части. А с другой™ стороны мы получили «молоток и гвозди™» с помощью которых нам придется построить дом. И получилось так что сообщество программистов использует фреймворк React, чтобы написать свой фреймворк. И поэтому на рынке появляются новые фреймворки, основанные на React, которые уже решают™ конкретные задачи™ на реальных проектах. Одним из таких фреймворков является Next.js

Меня подтолкнуло к написанию данной™ статьи™, огромное количество статей™ и обучающих видео в интернет пространстве о возможностях Next.js. А конкретнее сказать, я начал разбираться в чем же всё-таки преимущество этого Next.js. И к моему удивлению, я понял, что MastermindCMS2, которую я успешно использую на множестве проектов, решает™ те же проблемы, что и пытались решить™ разработчики Next.js.

А вот что конкретно сделали разработчики Next.js мы рассмотрим и сравним в этой статье™ с технологией MastermindCMS2. Поехали!

Фичи и их сравнение

Ключевые фичи фреймворка Next.js
Ключевые фичи фреймворка Next.js

Next.js

Первая™ фича о которой заявляют разработчики Next.js это роутинг основанный на файловой системе. Это дает возможность создавать папки и вкладывая в них страницы так что это будет будущим адресом на вашем сайте. Это очень удобно™, и таким образом становится очень прозрачно разрабатывать ваше приложение. Что собственно еще очень хорошо™ влияет™ на SEO.

MastermindCMS2

В MastermindCMS2 реализовано ровно также, и разница только™ в реализации динамических страниц. Сейчас™ покажу™ в чем разница, а судить™ уже вам, где удобнее или прозрачнее.

Динамический роутинг страниц

Next.js

Для динамических страниц в Next.js есть специальный синтаксис в названии страниц, следующего вида [pageId™].js, вместо™ pageId™ можно использовать разные™ названия переменных которые вы впоследствии сможете использовать для извлечения необходимой сущности из БД.

Во входящем объекте router™ из библиотеки Next.js,который должен™ быть импортирован на страницу, где будет лежать™ ваше значение в переменной которая будет считана из названия файла. Ниже пример™ как это должно™ быть реализовано:

Пример реализации динамических страниц в Next.js
Пример™ реализации динамических страниц в Next.js

В этом видео ниже вы можете™ подробнее ознакомиться.

MastermindCMS2

С MastermindCMS2 реализация динамических страниц выглядит иначе. Поскольку основной принцип технологии MastermindCMS2 лежит в том чтобы четко разделить логику™ шаблона, от визуальных манипуляций с DOM, и вся логика™ динамической страницы будет внутри™ HTML-документа. 

Для реализации динамической страницы нам понадобиться MSM-тег <msm:fragment/>.

Пример™:

Пояснение:

Для передачи значения из адресной строки используется специальный синтаксис @url|id, вместо id нужно указать значение переменной из адресной строки
Для передачи значения из адресной строки™ используется специальный синтаксис @url|id, вместо™ id нужно указать значение переменной из адресной строки™

Пример™:

То есть our-domain™.com/site/pages/rest-api/shipId™/9.html, shipId™ в данном™ примере является названием переменной, а число 9 её значением.

Узловая страница находится в папке pages под названием rest-api.html. Узловая страница является точкой™ входа для парсинга динамических значений.

Путь на файловой системе где находится узловая страница
Путь на файловой системе где находится узловая страница

Отличие от Next.js:

В MastermindCMS2 в отличии от Next.js существует возможность передать не только™ строку™, а даже целый JSON объект™. В этом видео ниже показан пример™ как это сделать:

Server™-side Rendering

Next.js

Здесь я думаю не стоит сильно™ объяснять что это такое, напишу™ кратко™. Это означает что при первом™ запросе страницы браузер получит все содержимое страницы уже от веб-сервера. Все React-подобные фреймворки грешат™ тем, что они имеют пустой™ элемент на странице, тот что им вернул™ веб-сервер™ и уже когда браузер загружает страницу, React начинает выполнять инструкции для отрисовки внешности сайта, что как бы для SEO не приветствуется. Но разработчики Next.js решили™ эту проблему реализовав SSR в своем фреймворке. В видео про Next.js, которое я скинул™ выше вы можете™ также подробнее ознакомиться.

MastermindCMS2

В MastermindCMS2 также реализован серверный рендеринг, в этом вы можете™ убедиться посмотрев исходный код страницы на официальном сайте MastermindCMS2. Он также запущен на моей технологии.

Интеграции и backend-разработка

Next.js

В Next.js как и в любой другой™ React-библиотеке есть огромный набор инструментов который поможет вам построить быстро™ клиента для получения данных™ с внешних веб-ресурсов.

MastrermindCMS2

В MastrermindCMS2 у вас также руки развязаны в использовании различных JavaScript-библиотек и вы также можете™ можете™ писать™ клиентскую логику™ которая будет получать данных™ с внешних источников.

У MastermindCMS2 есть также возможность работать с данными на JavaScript, получать JSON-объект™, а затем выполнять рендеринг на клиенте различными фреймворками.

Системные зависимости

Next.js

Как технология имеющая бекенд™-логику™ должна™ быть запущена на сервере-приложений Node.js.

MastermindCMS2

MastermindCMS2 полностью построен на Java. Поэтому для его установки вам потребуется Java 11. Посколько MastermindCMS2 это еще и headless cms, то вы можете™ легко подключить MongoDB, и уже вам не нужно будет думать™ какую БД интегрировать.

Резюме™ и таблица сравнения

Список™ возможностей из «коробки»

Next.js

MastermindCMS2

Роутинг на основе™ файловой системы

+

+

Серверный рендеринг

+

+

Клиентский рендеринг

С помощью React

+

JavaScript библиотека с функциями

+

+

Роутинг на клиенте

С помощью React

+

Интеграция с внешними сервисами

+

+

Интеграции с другими фреймворками

+

+

Интеграция с базой-данных™ MongoDB

В разработке

+

Привязка к данным™

С помощью React

+

Протокол взаимодействия с данными на WebSockets

-

+

Ленивая загрузка блоков™ HTML

С помощью React

+

Компилируемый бекенд™

-

+

Инфраструктура серверов

+

-

Возможность контейнеризации

+

+

Установочные пакеты™ DEB/RPM

-

+

Пакет на NPM

+

-

Open-Source™

+

-

Что мы имеем в итоге, две схожих™ технологии по своей сути, с разными реализациями на разных™ технологических стеках™. Да сейчас™ эра React, и вся веб-разработка «завязана» на использовании этой инфраструктуры с множеством различных решений построенных на фреймворке React. С одной стороны сайты стали сложнее и с другой™ стороны есть жесткие требования к оптимизации страниц со стороны Google™. Из-за этого фронтенд разработка сейчас™ превратилась в нечто комплексное, и громоздкое. Конечно на эту тенденцию еще повлиял Node.js. Сейчас™ трудно™ представить фронтенд приложение без использования npm.

Также многие™ разработчики фреймворков и «безголовых» CMS строят™ облачные решения на основе™ своих технологий, собственно Next.js тому пример™. Компания Vercel™ получила инвестиции в размере 163 млн. долларов и успешно закрепилась на рынке, построив облачные решения. Для MastermindCMS2 этот путь еще не пройден, кто знает что будет завтра™…

Только™ зарегистрированные пользователи могут участвовать в опросе™. Войдите, пожалуйста.
На какой технолгии написан фронтенд на текущем проекте
35.56% React 16
11.11% Angular 5
13.33% Vue.js 6
11.11% Next.js 5
0% TypeScript 0
6.67% Vanilla JS 3
0% Flutter 0
0% Remix 0
22.22% Другое™ 10
Проголосовали 45 пользователей. Воздержались 7 пользователей.
Теги:
Хабы:
Всего голосов 6: ↑4 и ↓2 +2
Просмотры 1.7K
Комментарии Комментарии 7