Нативный SSR для Laravel / Хабр

Привет, Хабр!

Недавно выпустил технологию BayLang и сделал интеграцию с Laravel. BayLang позволяет компилировать фронтенд и делать Server Sider Render используя PHP, без необходимости в NodeJS.

Эта технология сейчас находится в бета тестировании.

Я публикую ее с целью получить обратную связь и комментарии, что можно улучшить и как ее доработать. BayLang можно установить на тестовый проект и его попробовать. В проде можно будет использовать после бета тестирования.

Для кого предназначена технология

Так как технология находится на стадии бета тестирования, то она предназначена для исследователей и энтузиастов.

BayLang предлагает новую схему реализации Server Side Render.

Он позволяет разрабатывать Frontend и компилировать его в PHP и JS. Так как компоненты скомпилированы, их можно запустить нативно на PHP. Таким образом и происходит SSR без необходимости в NodeJS. Компилятор также работает на PHP.

Сейчас на Laravel для SSR нужно устанавливать NodeJS, использовать Inertia либо Livewire.

Inertia это не полноценный SSR, а удобный wraper для React и Vue компонентов. Но она умеет работать с сервером NodeJS и реализует рендер.

Livewire предполагает, что каждое изменение на фронтенде будет отправлять аякс запрос на сервер для рендера страницы. Это может повлиять на производительность.

BayLang предлагает альтернативный нативный способ рендера через компилирование компонентов.

Для каких проектов это может быть полезно? В основном это проекты, для которых важно SEO и которые не хотят использовать NodeJS.

Что такое BayLang

BayLang - это OpenSource технология разработки программного обеспечения.

Экосистема BayLang состоит из:

языка программирования,
фреймворка,
базового набора виджетов,
конструктора,
искусственного интеллекта.

Все эти блоки уже разработаны. Сейчас происходит работа по рефакторингу и сборку всех частей в единое целое. Также я делаю интеграцию с разными технологиями.

Основная идея этой технологии, сделать разработку ПО качественной и высокоскоростной, за счет применения конструктора и ИИ.

Про NodeJS

С появлением BayLang использование NodeJS для современных фронтенд приложений становится необязательным.

Что не так с нодой?

Первое, это то что она тянет 100500 пакетов, из-за этого проект становится тяжелым.
Второе, это последние атаки на npm. Что общего между NodeJS и Дюной?

От этого в принципе можно защититься через lock файл, либо использовать старые пакеты. Но меня беспокоит, что мы не может контролировать зависимости пакетов и что они автоматически устанавливаются. А также, что автоматически выполняется скрипт post install, который может скомпрометировать систему.

Я иногда задаюсь вопросом, а как мы пришли к такому, что в PHP проекте нужна еще и Node? Раньше во времена jQuery такого не было. Мы контролировали, что скачиваем и устанавливаем. Так было безопаснее.

Установка проекта на Laravel

Полная инструкция доступна по адресу https://github.com/bayrell/baylang-laravel

Для того, чтобы начать работу, нужно установить компилятор. Компилятор работает на PHP. Я рекомендую ставить его глобально.

cd ~
composer global require baylang/compiler

Создание проекта

Для начала нужно установить Laravel

composer create-project laravel/laravel project

После установки нужно добавить в проект интеграцию с BayLang. Это Runtime ядро и базовые компоненты, которые выполняют SSR

composer require baylang/laravel

Далее в файле bootstrap/providers.php нужно добавить сервис

<?php

return [
    App\Providers\AppServiceProvider::class,
    Runtime\Laravel\ServiceProvider::class,
];

После этого нужно инициализировать проект

php artisan baylang:init

Эта команда выполняет настройку проекта, создает необходимые файлы project.json, module.json, компоненты, css файлы, а также скачивает vue

Добавьте в composer.json путь к файлам app.

"psr-4": {
    "App\\": ["app/", "resources/php"]
}

Компилятор будет компилировать файлы в папку resources. Поэтому нужно добавить путь поиска этих файлов для composer.

Выполните команду обновить кэш composer

composer dump-autoload

В файле routes/web.php добавьте маршрут

<?php

use Illuminate\Support\Facades\Route;
use Runtime\RenderContainer;

/* Main page */
Route::get('/', function () {
    
    /* Get render container */
    $container = app(RenderContainer::class);
    
    /* Setup page */
    $page = $container->layout->setPageModel("App.Components.Pages.IndexPage.IndexPageModel");
    $page->username = "User";
    
    /* Render app */
    return $container->renderApp();
});

Скомпилируйте проект

~/.composer/vendor/bin/baylang-php make_all

Доступна возможность отслеживать изменения файлов

~/.composer/vendor/bin/baylang-php watch

Пример проекта

Более подробная документация доступна по адресу https://github.com/bayrell/baylang-docs/blob/main/ru/baylang/about.md

Пример главной страницы

<class name="App.Components.Pages.IndexPage.IndexPage">

<use name="Runtime.Widget.Button" component="true" />

<style>
.index_page{
	text-align: center;
	padding-top: 100px;
}
</style>

<template>
	<div class="index_page">
		<div>Hello {{ this.model.username }}!</div>
		<Button @event:click="this.onClick()">Click</Button>
	</div>
</template>

<script>

void onClick()
{
	this.model.setUserName(this.model.username ~ "!");
}

</script>

</class>

Пример модели

namespace App.Components.Pages.IndexPage;

use Runtime.BaseModel;
use App.Components.Pages.IndexPage.IndexPage;


class IndexPageModel extends BaseModel
{
	string component = classof IndexPage;
	string username = "User";
	
	
	/**
	 * Set user name
	 */
	void setUserName(string value)
	{
		this.username = value;
	}
}

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

Выводы

Я очень много проводил экспериментов с этой т��хнологией, и вот к каким выводам я пришел.

ИИ умеет разрабатывать код

Правда за ним нужно следить. И желательно заранее сказать ему какая будет структура проекта, и какой стиль программирования.

Это очень важный момент. Я думаю большая часть проблем с вайбкодингом является в том, что существует множество способов разработать программу. И из-за этого большого количества ИИ начинает путаться.

Логично детерменировать структуру проекта и способ разработки типовых задач. Этим и занимается BayLang. Он задает структуру как должен работать проект. Как происходит роутинг, где хранить модели и компоненты, как работать с api и базой данных.

Чем лучше будет определена структура, лучше ее делать частью стандарта, тем проще будет ИИ разрабатывать код программы.

ООП недооценено

В современных фреймворках Vue и React предпочитают функциональный стиль. Я при разработке BayLang решил вернуться к классическому ООП.

Причина очень простая. Разработка программы должна начинаться с модели данных.

Модель, структура данных и бизнес логика это ядро всего проекта. А компоненты это способ отображения этих данных. Удобно хранить данные в объектах. И лучше если это будет не JSON, а классы с основными принципами ООП.

Это основная мысль данные нужно хранить в моделях используя ООП

Неизменяемые типы данных

У меня они раньше были. Я их убрал. Из всего опыта использования, я пришел к выводу, что они не нужны. Они всего лишь замедляют работу программы.

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

Я думал зачем нужны вообще неизменяемые данные. Есть несколько вариантов, где это может быть использовано:

Многопоточные системы. А JavaScript однопоточный. Вообще, я думаю, в многопоточных системах нужно использовать обмен сообщениями и сериализацию данных. Использование неизменяемых данных здесь неуместно.
Данные, когда никогда не меняются. Например JWT токен авторизации. Он действительно, один раз создается и не меняется. Если подумать, можно еще придумать, где можно использовать неизменяемые типы данных. Но суть в том, что их мало и редко где используется. А зачем вводить новую сущность, если она мало где будет использоваться?

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

Я работаю в IT консалтинге, делаю веб приложения для клиентов. И очень часто клиенты просят разработать им систему и указывают конкретный фреймворк.

Меня всегда волновал вопрос. А как перенести код с одного фреймворка в другой?

Например, есть личный кабинет на Laravel, а теперь другой клиент просит сделать тоже самое, но на FastApi. И возникает вопрос. А как сделать общую библиотеку, чтобы каждый раз не разрабатывать с нуля один и тот же функционал?

Для классических компилируемых языков есть формат DLL. Но для веб, такого еще не придумали. Есть конечно вариант через FFI, но это такое себе.

BayLang может переносить код между разными платформами. Достаточно разработать библиотеку на языке BayLang и скомпилировать ее. Единственное, важно, чтобы BayLang эту платформу поддерживал.

Сейчас поддерживается WordPress и Laravel. Это значит, что можно будет переносить код и компоненты между двумя этими системами.

Язык программирования BayLang

Позволяет конвертирует программу во фронтенд и бэкенд. Сейчас поддерживается PHP и Javascript. Есть интеграция с Laravel и WordPress, что позволяет создавать реактивные сайты.

Зачем нужен новый язык?

Изначально я искал варианты запустить Angular или React компоненты на PHP, для того чтобы сделать Server Side Render. Решения на тот момент были либо запускать v8 модуль для PHP, или использовать микросервисы. Ни один вариант мне не понравился, и я решил сделать шаблонизатор. Очень быстро это превратилось в новый язык программирования.

Сейчас BayLang это полноценная FullStack технология, на которой можно создать современное веб приложение, и оно будет скомпилировано для PHP и JS.

Для Laravel, думаю, это будет полезно. Я разработал несколько проектов на нем, и там очень сильно не хватает веб компонентов.

Что дальше?

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

Репозиторий

Документация

Нативный SSR для Laravel