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

MastermindCMS2 vs Next.js

Время на прочтение5 мин
Количество просмотров3K

Вступление

Подходит к концу 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 этот путь еще не пройден, кто знает что будет завтра…

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
На какой технолгии написан фронтенд на текущем проекте
33.33% React16
10.42% Angular5
12.5% Vue.js6
16.67% Next.js8
0% TypeScript0
6.25% Vanilla JS3
0% Flutter0
0% Remix0
20.83% Другое10
Проголосовали 48 пользователей. Воздержались 7 пользователей.
Теги:
Хабы:
Всего голосов 4: ↑2 и ↓2+2
Комментарии7

Публикации

Истории

Работа

Java разработчик
442 вакансии
React разработчик
88 вакансий

Ближайшие события

19 августа – 20 октября
RuCode.Финал. Чемпионат по алгоритмическому программированию и ИИ
МоскваНижний НовгородЕкатеринбургСтавропольНовосибрискКалининградПермьВладивостокЧитаКраснорскТомскИжевскПетрозаводскКазаньКурскТюменьВолгоградУфаМурманскБишкекСочиУльяновскСаратовИркутскДолгопрудныйОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн
24 – 25 октября
One Day Offer для AQA Engineer и Developers
Онлайн
25 октября
Конференция по росту продуктов EGC’24
МоскваОнлайн
26 октября
ProIT Network Fest
Санкт-Петербург
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань