Home » Php » php – Laravel decoupled administration as a SPA

php – Laravel decoupled administration as a SPA

Posted by: admin February 25, 2020 Leave a comment

Questions:

I’m in the process of deciding how to go about rewriting a huge platform from a homebrewed framework to utilize Laravel in every manner to make onboarding new developer a breeze. In this regard i would like to decouple the application logic from the view. So here I’ve decided to go with VueJS as a single page application. In the old homebrewed framework that i work with it’s really neat how pages work. They’re basically just a infinite array of UI elements that all tied together in a form instance. This form instance then have a renderer, a update state and a save sate. This was to solve the need for a frontend developer adding JavaScript logic to to show / hide elements depending on actions taken in the form before actually saving it. All this boiled down to us being a small company and with a need to move fast without too much friction between developers. Currently a developer can take a backend task a-z without even touching any HTML, CSS or JavaScript. This i would very much like to replicate. Being able to build views and forms that is then exported as JSON to be represented in a VueJS SPA.

My question goes.. Is there anything out there similar for Laravel? I’ve done quite a bit of research and found all sort of libraries. But all of these libraries build on top of blade. Causing developers to have to create views and structure their HTML for every page they need doing. The ideal outcome would be that a developer could just create a new controller, register the routes for GET&POST and within this controller return the blueprint of the form(or view) for the VueJS SPA to render. With the capability of any updates being made within this form shot back to Laravel and then reprocessed in the same controller method as a ‘update’ handler.

I’m really trying to stick with what has already been implemented, tested and generally accepted by the community than creating my own thing.

Edit:

Thought I’d give some more context.Take this example from our existing framework:

class Page extends Modules {
  public function beforeAction () {
    $this->uiModify = new Build(array(), array('view' => 'modify', 'update' => 'modify', 'save' => 'modify'));
  }

  public function modify(array &$config) {
    if ($this->uiModify->isSave()) {
      $config['message']['type'] = 'success';
      $config['message']['title'] = 'Success!';
      $config['message']['description'] = 'Successfully created/updated page';

      $config['redirect'] = array('url' => '....', 'delay' => 1200);

      return;
    }

    $config['build']['submit'] = 'Save';
    $config['build']['elements'] = array(
      array(
        'type' => 'section',
        'title' => 'Modify',
        'elements' => array(
          '[name]' => array('type' => 'text', 'label' => 'Name'),
          '[main_page]' => array('type' => 'checkbox', 'label' => 'Is main page?', 'onchange' => array('reload')),
          '[main_page_title]' => (!empty($config['data']['main_page']) ? array('type' => 'text', 'label' => 'Main page title') : FALSE),
        ),
      ), 
    );
  }
}

The above class would render a section on to the page with a title. This section then have nested elements. One of these elements is conditional. Because the constructor of the form was told where to fetch form updates from it then know based on the onchange attribute that once the checkbox changes it will refetch the form keeping the data from post available in $config[‘data’]. This enables for a bunch of trivial tasks to be done directly in PHP rather than in the frontend hand crafted each time.

This is the kind of developer experience I’m looking to have in the new and improved Laravel / VueJS SPA rewrite.

How to&Answers: