How to easily call JavaScript modules from PHP?
Tags: php, laravel, tutorial, opensource
Published: 2022-07-13 16:22:49

You have surely solved it many times, but the solution was not very attractive. This tutorial is about generating _JavaScript_ code in _PHP_ using the **BigPipe** library, which is inspired by the Facebook architecture.

> The purpose of this library is to rapidly reduce the continuously repetitive code to work with the DOM and improve the communication barrier between PHP and JavaScript.

### Requirements
- PHP 7.1 or higher
- Node 8, 10+.
- Webpack

## Installation

### 1. Install composer package:
```
$ composer require richarddobron/bigpipe
```

### 2. Install npm package:
```
$ npm install bigpipe-util
```

### 3. Add this lines to /path/to/resources/js/app.js:
{% embed https://gist.github.com/richardDobron/177b97405cec7b08498f84ab2d1dd752 %}

### 4. Create file /path/to/resources/js/ServerJS.js

- this step is optional, but if you skip it, use this in next step: `require("bigpipe-util/ServerJS")`

{% embed https://gist.github.com/richardDobron/06e63b170c879f60f3dc6fe509297274 %}

### 5. Add this lines to page footer:
{% embed https://gist.github.com/richardDobron/b7d41745df25c507292ef03260ff8674 %}

## What all can be Ajaxifed?

### Links
```html
<a href="#"
   ajaxify="/ajax/remove.php"
   rel="async">Remove Item</a>
```

### Forms
```html
<form action="/submit.php"
      method="POST"
      rel="async">
    <input name="user">
    <input type="submit" name="Done">
</form>
```

### Dialogs
```html
<a href="#"
   ajaxify="/ajax/modal.php"
   rel="dialog">Open Modal</a>
```

## DOMOPS API
- **setContent**: Sets the content of an element.
- **appendContent**: Insert content as the last child of specified element.
- **prependContent**: Insert content as the first child of specified element.
- **insertAfter**: Insert content after specified element.
- **insertBefore**: Insert content before specified element.
- **remove**: Remove specified element and its children.
- **replace**: Replace specified element with content.
- **eval**: Evaluates JavaScript code represented as a string.

## DIALOGS API
- **setController**: Sets the JavaScript class controller - if you need to register an extra event listeners (show, shown, hide, hidden) or logic.

- **setTitle**: Sets the title of a dialog.
- **setBody**: Sets the body of a dialog.
- **setFooter**: Sets the footer of a dialog.
- **setDialog**: Sets the whole content of a dialog.
- **closeDialogs**: Close all opened dialogs.
- **closeDialog**: Close only current dialog.
- **dialog**: Render defined dialog.

{% embed https://gist.github.com/richardDobron/8e2ec42d28b2e418fbf56d2ecf893b9d %}

## Refresh & Redirecting

{% embed https://gist.github.com/richardDobron/2ce44220c0205933122fc8e5df801f2a %}

## Payload

{% embed https://gist.github.com/richardDobron/65948a6a369e3615ce40071f7eec3444 %}

## BigPipe API
- **require**: Call JavaScript module method. You can call a specific class method or a regular function with the custom arguments.

Example PHP code:
{% embed https://gist.github.com/richardDobron/777a8d861baca5a0c96cd4e1a0463001 %}

Example JavaScript code:
```javascript
export default class SecretModule {
    run(first, second) {
        // ...
    }
}
```

- **dialog**: Opens a dialog but can work with multiple dialogs at once.

Example PHP code:
{% embed https://gist.github.com/richardDobron/06f072fcc7e8d1250a86ed8ab38a8c8d %}

- **transport**: Through transport markers you can send HTML content but also transform the content into JavaScript objects (such as Map, Set or Element).

Example PHP code:
{% embed https://gist.github.com/richardDobron/4063e0401cece30ca96e54958951e467 %}

## Demo app with examples

 - The demo application is written in Laravel, but this library is framework-agnostic.
 - ⚠️ The demo server does not support **HTTPS**, so you may need to confirm a security exception.


* [http://bigpipe.xf.cz](http://bigpipe.xf.cz)
* [https://github.com/richardDobron/bigpipe-php](https://github.com/richardDobron/bigpipe-php)
* [https://github.com/richardDobron/bigpipe-util](https://github.com/richardDobron/bigpipe-util)


![](https://i.ibb.co/MVSS9wh/bigpipe.gif)
![](https://i.ibb.co/grj9gw9/bigpipe.gif)
![](https://i.ibb.co/VDQ6039/bigpipe.gif)
![](https://i.ibb.co/0ZrNDNJ/bigpipe.gif)
![](https://i.ibb.co/k8BQ8DY/bigpipe.gif)