Javascript/CSS architecture of a MVC PHP application

Question

Me and my team are on the break of rebuilding the frontend of a large CakePHP 2 application. The main goal, other than a new look, is to have more reusable SCSS/Javascript, to have a logical structure in our own frontend code and 3rd party assets we use.

Right now we have 1 CSS file where we 'patch' whatever CSS we need to the bottom of it, not looking at other classes that we can re-use, there is no structure to it.

Most of the Javascript goes 'inline' into the views, which does mean that all functionality of that view can be found inside the view file itself, but other than that, no structure either, nothing becomes re-usable and everything either has to be re-made or copied. We do have functions that are used in more places, but all of those are also in 1 file (you know how it goes, the general.js or the common.js included on every page).

Question

So my question is, what is a good structure or architecture for things like Javascript and CSS/SCSS in a CakePHP application. Where can one begin?

My ideas

Currently we don't use things like a CSS preprocessor or a frontend package manager like bower. Preprocessing CSS (in our case SCSS) is definitely one we are going to implement and I'm going to look into using bower for our project, making it easier to manage the 3rd party assets we use.

On the Javascript side, I guess auto-loading a Javascript file with the same name as the CakePHP Controller and the action, if exists, can already bring some structure to it, but what about the code in those files? Does it perhaps extend a 'master' Javascript object so it has a lot of ready-to-go functions? And what about the common scripts that are used on every page? Do I go for seperate functions or perhaps 1 big object with a single instance which can then be used on all pages?

Found resources:

How to structure Javascript architecture to complement a PHP MVC web app? => There is no real answer that applies to me in this question

https://www.sitepoint.com/architecture-in-sass/ => Gave me some insights in how to structure SASS.

JS MV* Frameworks like https://angularjs.org/ => Because the application is fairly large already, we simply don't have the time and resources needed to rebuild the backend to support a JS MVC framework like AngularJS. Perhaps I need to read up more on these, but they seem over-complicated for my application.

I will suggest you to rebuild using application based on angular/backbone with following front end feature. Routing,It should be reusable components like fields,table using model value,Only data should be manipulate from PHP side using ajax and all results should be JSON data. — mymotherland
– mymotherland, Commented Jun 1, 2016 at 8:35
This question is not really suitable for StackOverflow as answers will be opinionated rather than factual. However, personally I'd look to make your CSS and JS DRY and deliver the assets as a file each as this reduces the number of requests and will improve performance. To aid development you can manage these as multiple files you concatenate using a tool like Gulp (andy-carter.com/blog/a-beginners-guide-to-the-task-runner-gulp). Also definitely take a look at using Bower (andy-carter.com/blog/…). — drmonkeyninja
– drmonkeyninja, Commented Jun 1, 2016 at 8:37
@mymotherland and should JavaScript not exist or go out of style, then what? — Anthony Rutledge
– Anthony Rutledge, Commented Jun 1, 2016 at 8:38
I would go with github.com/markstory/asset_compress - and bower to manage the assets. The rest/details is up to you. — mark
– mark, Commented Jun 1, 2016 at 9:43
@mark, the rest/details is exactly why I asked my question, compressing the assets and bower is not the 'problem' — Milanzor
– Milanzor, Commented Jun 1, 2016 at 10:49

TSlegaitis · Accepted Answer · 2016-06-01 08:26:46Z

1

This is what we use at work. Seems to work pretty well for us.

https://addyosmani.com/largescalejavascript/

answered Jun 1, 2016 at 8:26

TSlegaitis

1,3202 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

floriank · Accepted Answer · 2016-06-01 10:36:52Z

The trick is to somehow dispatch the JS required for the current page. Let me give you a simplified version of what we do.

Create a JS file like this (Attention Pseudocode!):

MyApp = {
    init: function(controller, action) {
        // Check here if MyApp.actions.<ControllerName>.<actionName> is set and call it.
    }
    actions: {
        ControllerName: {
            actionName: function() {
                // Any action specific code goes here
                $('foo').bar();
            }
        }
    }
}

This is basically "namespacing done the JS way". You can as well create one file per controller / action and just add the function / object to the actions property. This way you can keep the usual JS mess under control. We concat and minify all the files to a single JS file that we load in your app. To build and manage our frontend assets we use npm, bower and gulp.

In your applications layout.ctp files JS section call it:

MyApp.init(\'' . $this->request->controller. '\',' . $this->request->action'\');

This will automatically execute the JS for whatever controller action you've called if it has a matching object in MyApp.actions. How exactly you write your init method is up to you.

There is one thing you want to consider: You should not put large amounts of JS that are rarely used into your single minified JS file. For example I would never include a monster script like CkEditor in that file except it would be used on nearly all pages of the app.

Collectives™ on Stack Overflow

Javascript/CSS architecture of a MVC PHP application

Question

My ideas

Found resources:

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Question

My ideas

Found resources:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related