Combine Backend and Frontend Development with Laravel, Patternlab, Atomic Design and Vue.js

Question

I am going to launch a new project with these two frameworks (I like it):

• Laravel 5
• Vue.js

Frontend developer is preparing HTML in atomic design created using patternlab.io.

Now I am looking at how I can integrate the patternlab.io project so that I do not need to rewrite all the elements in the blade template.

I found some implementations combining Patternlab and Laravel using TwigBridge , Laratash Laravel Laratash .

But I have some thoughts:

• The blade templates have: logic, conditions, loops, .... If I combine patternlab and laravel , then I need to put all this into a patternlab project.
• Due to the use of vue.js I need to add these tags to patternlab templates patternlab

Therefore, I believe that this is not the best choice for integrating patternlab.io templates into a laravel project.

My idea:

• Frontend DEV uses patternlab to create patterns
• Laravel automatically generates and imports the CSS stylesheet generated by patternlab
• Backend developers copy patternlab - molecules manually in blade server templates and add their own logic
• If Frontend DEV makes changes to CSS, that’s good - we won’t run any problems; after restarting the laravel gulp process to update css files, we have new updates.
• If Frontend DEV makes some changes to the html structure, we need to manually adjust them.

Is there a better solution combining Atomic Design, Vuejs and Laravel? How do you deploy atomic design in your CMS?

Answer 1

In the last three Vue / Laravel projects that we created, we stopped using PHP as a rendering engine and used Vue exclusively. Laravel is still a great platform for writing business logic and apis in a clean test way - but we decided never to use a blade server again.

Typically, the problem you encounter when trying to create a JS rendering application using a PHP server is the lack of server-side rendering. To solve this problem, I switched to a new project from the Vue community, Nuxt.js (I have no connection with them, just a happy developer). Nuxt allows you to write vue components and display them on the server side and display them in the browser after the page loads.

This allows you to completely separate all provision responsibilities from Laravel and keep it in one place, so you do not need to make a blade and Vue - all this is Vue.

The only drawback is that you will need 2 Node.js and PHP servers.