TheLazy.Dev
Portfolio GitHub

Blog

php |laravel |tutorial |opensource

How to easily call JavaScript modules from PHP?

dobron

Richard Dobroň

Posted on July 13, 2022

How to easily call JavaScript modules from PHP?

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
Enter fullscreen mode Exit fullscreen mode

2. Install npm package: 



$ npm install bigpipe-util
Enter fullscreen mode Exit fullscreen mode

3. Add this lines to /path/to/resources/js/app.js:

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")

5. Add this lines to page footer:

What all can be Ajaxifed?

Links 



<a href="#"
   ajaxify="/ajax/remove.php"
   rel="async">Remove Item</a>
Enter fullscreen mode Exit fullscreen mode

Forms 



<form action="/submit.php"
      method="POST"
      rel="async">
    <input name="user">
    <input type="submit" name="Done">
</form>
Enter fullscreen mode Exit fullscreen mode

Dialogs 



<a href="#"
   ajaxify="/ajax/modal.php"
   rel="dialog">Open Modal</a>
Enter fullscreen mode Exit fullscreen mode

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.

Refresh & Redirecting

Payload

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:

Example JavaScript code:



export default class SecretModule {
    run(first, second) {
        // ...
    }
}
Enter fullscreen mode Exit fullscreen mode
  • dialog: Opens a dialog but can work with multiple dialogs at once.

Example PHP code:

  • 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:

Demo app with examples





💖 💪 🙅 🚩
dobron
Richard Dobroň

Posted on July 13, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to easily call JavaScript modules from PHP?
php How to easily call JavaScript modules from PHP?

July 13, 2022