Випущено Fusion Developer Preview: пишіть PHP у своїх компонентах Vue та React

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.