Вступление

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

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

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

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

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

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

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

Next.js

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

MastermindCMS2

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

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

Next.js

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

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

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

MastermindCMS2

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

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

Пример:

Пояснение:

Пример:

То есть 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, и уже вам не нужно будет думать какую БД интегрировать.

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

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

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