The structural design of a PHP application using Javascript and CSS in an MVC framework

Question

The structural design of a PHP application using Javascript and CSS in an MVC framework

My team and I are about to revamp the frontend of a large CakePHP 2 application. Our main aim, apart from giving it a fresh look, is to create more reusable SCSS/Javascript code, establish a logical structure in our frontend code as well as the third-party assets we utilize.

Currently, our CSS modifications are haphazardly added to one file without considering reusability or structure. Similarly, most of our Javascript is embedded within views, lacking organization and reusability.

We do have some functions that are shared across multiple views, but they are all consolidated into one file. Here lies the problem of scalability and maintainability.

Question

So, my question is, what would be an effective structure or architecture for managing Javascript and CSS/SCSS in a CakePHP application? Where should one start?

My ideas

Currently, we do not utilize tools like CSS preprocessors or frontend package managers such as Bower. Implementing a CSS preprocessor like SCSS and exploring the use of Bower for managing third-party assets are on our agenda.

Regarding Javascript, automatically loading a Javascript file based on the CakePHP Controller and action name could help introduce some structure. But how should the code within these files be structured? Should we consider extending a 'master' Javascript object with ready-to-use functions? And for common scripts used across pages, should we opt for separate functions or consolidate them into one reusable object?

Found resources:

How to structure Javascript architecture to complement a PHP MVC web app? => No definitive answer applicable to our scenario was found here.

https://www.sitepoint.com/architecture-in-sass/ => Provided valuable insights on organizing SASS.

JS MV* Frameworks like https://angularjs.org/ => Due to the size of our existing application, adopting a JS MVC framework like AngularJS seems daunting with our current constraints. Further research may be necessary, as these frameworks appear intricate for our project.

javascript css cakephp frontend

Answer 1

Answer №1

Our team utilizes this solution in our workplace and it has proven to be quite effective for us.

Answer 2

Our team utilizes this solution in our workplace and it has proven to be quite effective for us.

Answer 3

Answer №2

To effectively handle the JavaScript needed for the current page, a smart strategy is required. Allow me to present a simplified version of our approach.

Begin by creating a JavaScript file structured like this (Note This is Pseudocode!):

MyApp = {
    init: function(controller, action) {
        // Verify if MyApp.actions.<ControllerName>.<actionName> is defined and execute it.
    }
    actions: {
        ControllerName: {
            actionName: function() {
                // Place any action-specific code here
                $('foo').bar();
            }
        }
    }
}

This concept is essentially "namespacing in the world of JavaScript". You could also opt to create one file per controller/action and append the function/object to the actions property. This method aids in organizing your JS code efficiently. We consolidate and compress all the files into a single JS file that is loaded within your application. To streamline frontend asset management, we utilize npm, bower, and gulp.

In the JS section of your applications' layout.ctp files, call it like this:

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

By doing this, the JS related to the specific controller action you've invoked will be automatically triggered if there is a corresponding object in MyApp.actions. The structure of your init method can vary according to your preference.

One vital aspect to keep in mind is avoiding including extensive JS codes that are seldom utilized in your unified minified JS file. For instance, I would refrain from embedding a large script like CkEditor unless it's necessary on most app pages.

Answer 4

To effectively handle the JavaScript needed for the current page, a smart strategy is required. Allow me to present a simplified version of our approach.

Begin by creating a JavaScript file structured like this (Note This is Pseudocode!):

MyApp = {
    init: function(controller, action) {
        // Verify if MyApp.actions.<ControllerName>.<actionName> is defined and execute it.
    }
    actions: {
        ControllerName: {
            actionName: function() {
                // Place any action-specific code here
                $('foo').bar();
            }
        }
    }
}

This concept is essentially "namespacing in the world of JavaScript". You could also opt to create one file per controller/action and append the function/object to the actions property. This method aids in organizing your JS code efficiently. We consolidate and compress all the files into a single JS file that is loaded within your application. To streamline frontend asset management, we utilize npm, bower, and gulp.

In the JS section of your applications' layout.ctp files, call it like this:

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

By doing this, the JS related to the specific controller action you've invoked will be automatically triggered if there is a corresponding object in MyApp.actions. The structure of your init method can vary according to your preference.

One vital aspect to keep in mind is avoiding including extensive JS codes that are seldom utilized in your unified minified JS file. For instance, I would refrain from embedding a large script like CkEditor unless it's necessary on most app pages.

The structural design of a PHP application using Javascript and CSS in an MVC framework

Question

My ideas

Found resources:

Answer №1

Answer №2

Similar questions

Change a function to disregard clicks initiated within the last cell of every row within a table

What is the best way to display the output of my Sudoku generator as an HTML table in Django?

Struggling with z-index or float issues on Chrome and Safari with CSS styling

Deploying static files with Django in a production environment

Using JavaScript to Filter JSON Objects

tracking the number of new buttons pressed (HTML/Javascript)

Effortlessly retrieving the id attribute from an HTML tag using jQuery

Incorporating Mediainfo.js into Angular 8: A Seamless Integration

What could possibly be causing this object parse function to return undefined?

Ways to emphasize a specific row within a table for special occasions

Switch Image on Hover in Panel Group

Looking to transform this PHP function into a jQuery function that generates all the possible combinations of values in an array?

Transitioning from Jquery to vanilla JavaScript or transforming Jquery code into pseudo code

Unveil the content of a string by applying Base64 decoding in AngularJS

Experiencing Strange Issues with Jquery Image Carousel... Assistance Needed!

The act of binding is not functioning

Looking to transfer data between files in Nodejs

the status of the XMLHttpRequest Object within the realm of jQuery AJAX

Angular - How child components can communicate with their parent components

Having trouble with Ajax retrieving the updated JSON file version