Aaron Francis та Try Hard Studios офіційно представили Fusion, і ви можете знайти його на GitHub!
Fusion — це найпростіший спосіб об’єднати ваш сучасний JavaScript фронтенд з Laravel бекендом. Ви можете передавати дані з бекенду на фронтенд, оголошувати методи на бекенді, які можна викликати без API-кілець з фронтенду. Fusion спрощує роботу з JavaScript у Laravel, надаючи при цьому повний контроль та можливості потужного бекенду.
Кілька днів тому Aaron записав подкаст про Fusion, його ідею та багато іншого. Слухайте:
# Вступ до Fusion
Aaron також випустив відео, в якому розкриває основи Fusion та деякі його можливості:
Основні моменти:
- Пишіть PHP та JavaScript в одному файлі.
- Викликайте функції бекенду безпосередньо з фронтенду.
- Автоматично синхронізуйте дані між бекендом і фронтендом.
Зверніть увагу: Fusion знаходиться на дуже ранній стадії розробки. Не використовуйте його в продакшені, оскільки можуть бути помилки.
# Концепції Fusion
У документації зазначається, що важливо розуміти, чого Fusion не робить:
- Fusion не трансформує ваш PHP у WASM.
- Fusion не перетворює ваш JavaScript на PHP/Blade.
- Fusion не використовує "PHP для шаблонізації".
- Fusion не автоматично синхронізує стани фронтенду та бекенду.
Що Fusion робить:
- Fusion використовує Vite для вилучення PHP-блоків з ваших JavaScript-файлів і запису PHP на диск.
- Fusion впроваджує інформацію у ваш JavaScript-файл під час його трансформації за допомогою Vite.
- Fusion виконує PHP на бекенді та JavaScript на фронтенді.
- Fusion перетворює ваш PHP-блок на свого роду контролер.
- Fusion використовує стандартний цикл запиту/відомості Laravel, роутер, автентифікацію, проміжне програмне забезпечення тощо.
- Fusion дозволяє вам синхронізувати стани фронтенду та бекенду.
Ви можете уявити блок <php> у вашому файлі як контролер, з деяким авто-налаштуванням для впровадження стану і виклику методів.
# Основний приклад Fusion
<php>
// Визначте властивість у PHP
$name = prop(Auth::user()->name);
</php>
<template>
<!-- Використовуйте це у Vue! -->
Привіт {{ name }}!
</template>Це відкриває змінну $name у вашому шаблоні Vue як name. Вона буде передана на фронтенд під час першого завантаження. Вам не потрібно визначати жодних властивостей на стороні Vue — ми подбаємо про це.
Ви також можете використовувати класичний стиль:
<php>
new class {
public string $name;
public function mount()
{
$this->name = Auth::user()->name;
}
}
</php>
<template>
Привіт {{ name }}!
</template>Для повних деталей перегляньте проект на GitHub.
# Backstage Pass
Ще одна нова функція — це Backstage pass, який надає доступ до приватної групи Slack.