Fusion: Seamlessly Integrate Laravel Backend with JavaScript Frontend | Vue.js, React, Svelte

In the ever-evolving world of web development, finding tools that streamline the integration of backend and frontend technologies is crucial. Fusion emerges as a powerful solution, designed to seamlessly combine your Laravel backend with a JavaScript frontend. Currently, Fusion supports Vue.js, with plans to extend support to React and Svelte in the near future.

Caution: Fusion is in its early development preview stage. It is not yet recommended for production use due to potential bugs and ongoing improvements.

What Fusion Does and Doesn’t Do

Fusion is not about transpiling PHP to WebAssembly (WASM) or converting JavaScript into PHP/Blade. Instead, it leverages Vite to extract PHP blocks from JavaScript files, injects necessary information during transpilation, and runs PHP on the backend while JavaScript operates on the frontend. Fusion transforms PHP blocks into controllers, utilizing Laravel’s standard request/response lifecycle, router, authentication, and middleware.

Key Features:

• State Management: Fusion allows you to sync frontend and backend state effortlessly. You can define props in PHP and use them directly in your Vue templates.
• Routing: Fusion supports both file-based and manual routing, offering flexibility in how you structure your application.
• Actions: Define backend methods that can be called from the frontend, enabling seamless interaction between the two.
• Procedural and Class-based PHP: Choose your coding style, whether procedural or class-based, depending on your preference and project requirements.

Installation:

To get started with Fusion, you need a Laravel application that uses Inertia. Install Fusion via Composer and run the installation command to set up the necessary configurations and dependencies.

composer require fusionphp/fusion
php artisan fusion:install

Getting Started:

Once installed, you can run Vite using npm run dev. Fusion integrates with Vite, extracting PHP blocks from your Vue single file components (SFCs) and handling the necessary backend processes.

Routing:

Fusion offers two routing options: file-based routing and manual routing. File-based routing mirrors your file structure, while manual routing allows you to define routes individually. You can also leverage Laravel’s route model binding within Fusion.

Writing PHP:

Fusion allows you to write PHP within <php> blocks in your Vue files. This PHP code runs within the Laravel request context, giving you access to the full Laravel ecosystem.

Best Practices:

Treat your PHP blocks as thin controllers, deferring business logic to actions or service objects. This approach keeps your PHP blocks focused on routing and state management, enhancing maintainability and scalability.

State Management:

Fusion excels in state management, allowing you to define and sync state between the frontend and backend. You can mark state as readonly, sync it with the query string, and manage it procedurally or class-based.

Actions:

Define backend methods that can be called from the frontend, enabling seamless interaction between the two. Fusion provides a status object for each action, allowing you to track the request’s state.

Syncing State:

Fusion does not automatically sync state back to the server. Instead, it syncs state when you call an action, ensuring that your backend always has the latest state.

How Fusion Works:

Fusion integrates with Vite, extracting PHP blocks and conforming them to the Fusion standard. It then shims the necessary JavaScript files, injecting state and actions into your Vue components. At runtime, Fusion operates within the Laravel request/response lifecycle, routing requests to the appropriate PHP classes.

Contributing:

Fusion is an open-source project, and contributions are welcome. Whether you’re interested in improving the Vue support, adding React or Svelte compatibility, or enhancing the JavaScript/TypeScript aspects, your contributions can help shape the future of Fusion.

Conclusion:

Fusion is a promising tool for developers looking to streamline the integration of Laravel backend with JavaScript frontend. With its robust state management, flexible routing, and support for both procedural and class-based PHP, Fusion is poised to become an essential part of the modern web development toolkit. While still in early development, Fusion’s potential is undeniable, and its future looks bright as it continues to evolve and expand its capabilities.