Front-end design to Cake app

Need Help
1

This question is not as much on CakePHP as it is on a workflow.
If this goes too far out of the scope of this forum, then please let me know.

So here’s the deal.
We have 3 teams in our company:

  • designers
  • front-end developers
  • full-stack developers (yes, oddly enough, we do not have specialized back-end developers).

Now let’s say ACMECorp comes in and wants a website.
Our project managers go sit around the table with them and work out the site (the first version).
Project managers inform all the teams, and they get to work.
The designers build a design (in something like Photoshop) and hand this the front-end developers.
The front-end developers turn the design into HTML, CSS and Javascript.
One they are done, they hand it over to the full-stack developers…

And this is where we lose a lot of our time.
We don’t really have a decent hand-over procedure for this.
Currently it’s just that the front-end developers hand it over and the full-stack developers copy paste everything into the CakePHP app and integrate it with the back-end code they have written.

To make matters worse, once the first version has finished, we hand it over to the customer, and often, the customer wants something extra.
Designers go design, front-end developers turn the changed design into the HTML, CSS and Javascript and hand it over to the full-stack developers…
who now have to look for everything that has changed and manually copy-paste this into the CakePHP app again, which is highly inefficient!

My question is, how can we do this better, without using stuff like Angular or React combined RESTful API’s…
The designs the full-stack developers get are in the following structure (roughly):

/
├── css/
│   ├── bootstrap.min.css
│   └── acmecorp.min.css
├── js/
│   ├── bootstrap.min.js
│   └── acmecorp.min.js
├── img/
│   └── whatever.png
├── index.html
├── about.html
└── blog.html

This ofc has to be turned into CakePHP workable-views… which is currently done by hand since this can’t really be done using a simple git pull request…

I hope someone here can enlighten me

2

Hi,
I am asking the same question for a while and looking for a good solution.
I am doing front-end design with Bootstrap Studio and I am very happy with it. It produces a file structure very similar to what you’ve mentioned above.
I do form handling, activate a php file and pass user input to this php file easily.
Furthermore with BSS it is possible to include and maintain custom php code (or others like python) and change the index.html to index.php automatically with a simple script.
With php’s autoload feature it is also very easy to include and use php packages.
On the other side I discovered the Composer php package (library) manager and Packagist php package repository, it is also easy to load the packages from here with the Composer’s vendor/autoload.php feature.
All is fine at this point if I don’t use a php framework between BSS and Composer.
My question is (if I use a framework);

  1. How can/should I connect the html/css/js/bootstrap front-end design to a MVC (model-view-controller) back-end for both static and dynamic (blog) pages.
  2. Which is the most suitable ( easy to use, well documented, supported, …) php framework for this purpose.

Till now I tested symfony, laravel, codeigniter, zend and while I was testing cakephp I had the intl extension problem in installation and looking for a solution.
So, keep in touch.

3

My Team resolved this way with Vue since its like pure html/css/js. The fullstack devs do the back and help with rest api in the client.

Shouldn’t twig help in your case? Its more html friendly

4

Vue would still require a rest api, which we don’t want (as a rest api would add an insane amount of complexity)

I have taken a look at Twig, but it seems like it still would require a file structure we can’t just pop into CakePHP.
Also, Twig relies on Composer and PHP (or on our case, just Docker, since we run CakePHP in Docker), which are not really things we want the front-end devs to be bothered with.

So to sum it up, we are being faced with an odd challenge:

  • Can’t use a REST api
  • Can’t use “back-end” dependencies (like Composer, PHP etc.)
  • Has to be “drag&drop” (or click&merge) for use with CakePHP
5

Could you please explain this? Do you see Composer and PHP as dependency?

6

Yes, Composer is used to download Twig, but Composer requires PHP (and PHP also is needed to use Twig).

7

We use crud before and after the usage of rest api and the move was done flawlessly.

But CakePHP also requires php!

How do you build your docker images? Do you copy the project folder?
I download composer inside the container and run composer install.

8

CakePHP does require PHP, but that’s the whole point, the front-end devs don’t have to touch CakePHP.
All they do it turn the design into the HTML, CSS and Javascript, add some fancy animations etc. etc.
They don’t touch CakePHP at all.

We can look into it for sure, but it would also be kinda odd to only use CakePHP just for an API since it’s an MVC.
Also, it would require to re-train our front-end devs as they haven’t touched anything else but Bootstrap 4, Jquery and Sass (no Angular, Vue, React and all those frameworks)

9

Of course, In my team every front-end after update the repo runs a single shell to:

  • update composer dependencies
  • run migrations
  • launch cakephp server
  • launch frontend watcher (gulp/webpack/etc)

They don’t touch (almost, only template variables) php, only frontend. I guess twig maybe easier than ctp files

AFAIK Vue is the most easier to learn, also its not mandatory to build a SPA, you can include it only in the main parts of the projects (eg: main module, reporting/dashboards). Simply add the scripts tags and done

10

Ok, so what you are saying is to teach them to get CakePHP up and running (clone the repo, update the dependencies, run the migrations etc.) and have them build the views directly (without having to touch PHP itself)?

But then one last thing remains…
They can’t see what they have build until they run it, which require the proper controllers (which might not be in place at the time they finish).
Or?

11

Yes.

You can just make empty actions in the controller. Or use the pagesController, it could be easier for them. Then you move the file to where it should be. This is only for new actions/controller. For existing, it should be modify the proper template files

12

@FinlayDaG33k frontend knowledge can be limited to git pull and composer deploy commands
in composer.json you can put any subcommand you want in scripts section ie. i have:

"deploy": "composer install && composer dumpautoload -o && php bin/cake.php migrations migrate && php bin/cake.php cache clear_all",
13

Internally, we have a little script that interacts with composer and bake, we could modify this to run the composer stuff + the migrations for them.

I’ve been looking at it some more but I think using the pagesController might be “doable”, any other suggestions?