Extract JavaScript code inside PHP scripts

[jaragunde]

We have PHP files that contain sizeable chunks of JavaScript inside them. This is suboptimal because that JS cannot be minified, or cached by the browser. Unless the JS must be dynamically generated, there is no reason to do it like that.

There are some examples of this task already in the project history. This is when we extracted the JS code from tasks.php:

commit eb7fc43a2669280e0b3ceba2c5664e5eb5747f77
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Tue Apr 7 17:05:59 2015 +0200

    Extract JS code from tasks.php (1/2)
    
    In this step, we rename tasks.php to tasks.js to preserve the history.

commit 252847832e72e42b9c7c94e085e5c9849d1d72f7
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Tue Apr 7 17:07:44 2015 +0200

    Extract JS code from tasks.php (2/2)
    
    In this step, we extract the php code from tasks.js to a new file.
    This new file will not have history, but it's a small part of the
    code in the tasks page.

Commits 8b5136f and 78eb6d1 do the same thing for tasksFilter.php. The key to preserve history of the .js file is explained in the comments; we have to choose if we want to preserve the history of the php or the js code for every case, we often want the latter because JS code in the front-end is usually bigger and more complex.

[jaragunde]

We are progressing on this topic. We have applied this treatment to a number of PHP pages:

commit 182de5291f9cb31068ef1418895dd0a347a03234
Merge: 9ed6ea5f 26700a06
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Wed May 30 14:05:22 2018 +0200

    [#401] Extract JS code in a number of PHP files.
    
    (Merge branch 'i401-split-js-in-php-files')

commit 26700a06c88489c700e724355fa21f97cc49bcc7
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Mon May 14 10:05:21 2018 +0200

    [#401] Extract JS code from viewWorkingHoursResultsReport.php (2/2)
    
    In this step, we extract the php code from the .js file we just
    renamed to a new file. The history of that file will be empty.

commit bf2df1c1ebe4a914809e1495421b824a7ed34d8e
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Mon May 14 09:59:03 2018 +0200

    [#401] Extract JS code from viewWorkingHoursResultsReport.php (1/2)
    
    In this step, we rename the .php file as .js to preserve the history
    of the JS code, which accounts for most of the file.

commit 0d6c7e2ec62fb3513a5f63688512c1c353bf5683
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Mon May 14 09:56:33 2018 +0200

    [#401] Remove explicit session id management in acc hours report.

commit 73c295a58b328efe7d9c47448994c93d55fa093a
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Mon May 14 09:46:28 2018 +0200

    [#401] Extract JS code from viewAreas.php (2/2)
    
    In this step, we extract the php code from the .js file we just
    renamed to a new file. The history of that file will be empty.
    
    We also take advantage to rename the page with a better name.

commit 1acd8edb53dd8434064dfe66a499f84e96e397bb
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Mon May 14 09:38:49 2018 +0200

    [#401] Extract JS code from viewAreas.php (1/2)
    
    In this step, we rename the .php file as .js to preserve the history
    of the JS code, which accounts for most of the file.
    
    We also take advantage to rename the page with a better name.

commit 815cdb9fd29faa63b8e917e13a5e18c2ae12b88b
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Fri May 11 13:48:25 2018 +0200

    [#401] Extract JS code from viewCustomers.php (2/2)
    
    In this step, we extract the php code from the .js file we just
    renamed to a new file. The history of that file will be empty.
    
    We also take advantage to rename the page with a better name.

commit 514c60e1fb655c484d005f1fbfde17c8d65ef13f
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Fri May 11 13:42:49 2018 +0200

    [#401] Extract JS code from viewCustomers.php (1/2)
    
    In this step, we rename the .php file as .js to preserve the history
    of the JS code, which accounts for most of the file.
    
    We also take advantage to rename the page with a better name.

commit 251aa9927ed1c0e24cbd9f9cae2df5efd63d2036
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Fri May 11 13:24:42 2018 +0200

    [#401] Extract JS code from viewProjects.php (2/2)
    
    In this step, we extract the php code from the .js file we just
    renamed to a new file. The history of that file will be empty.
    
    We also take advantage to rename the page with a better name.

commit 23f3d25e2049599fa1163026181cd918fab6a52c
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Fri May 11 13:13:42 2018 +0200

    [#401] Extract JS code from viewProjects.php (1/2)
    
    In this step, we rename the .php file as .js to preserve the history
    of the JS code, which accounts for most of the file.
    
    We also take advantage to rename the page with a better name.

commit b181615db5011d2725ef4ef73ddf38106b54ebb9
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Mon May 7 19:39:31 2018 +0200

    [#401] Remove explicit session id management in front-end.
    
    Some inline PHP inside JS code took care of explicitly sending the
    session id to web services. This is unnecessary, the browser already
    sends the PHP session id via cookies.
    
    This removes a bunch of ugly inline PHP, which is necessary to achieve
    the separation of JS and PHP sources.

commit 3db697300f51635c68d28f24f4afd88d05ca35e3
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Mon May 7 19:19:57 2018 +0200

    [#401] Remove inline PHP code inside JS at viewProjects.php.
    
    Put all the PHP-generated JavaScript code at the beginning of the
    file.

[jaragunde]

Applied to project details report. Reviewed at PR #437:

commit 060e65bb615321ee4969b7f76a7e53c4c07d6ef6
Merge: 9317a620 cb134941
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Sun Feb 24 22:44:03 2019 -0800

    [#401] Extract JS code from viewProjectDetails.php.
    
    (Merge pull request #437 from Igalia/i401-project-details)

commit cb1349413eabf0203b0639903d5da4070f65622d
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Fri Jan 11 08:31:49 2019 +0100

    [#401] Extract JS code from viewProjectDetails.php.
    
    Original .php file was renamed to .js, to preserve history of the JS
    code, which accounts for most of the file. The PHP code was moved to
    a newly created .php file, some unused includes were removed but it's
    otherwise unchanged.
    
    We also take the chance to rename the report following current
    conventions. New name is "projectDetailsReport".

commit d93e36fef2a437b6dab837a765e4564fe865aae4
Author: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date:   Fri Jan 4 16:32:55 2019 +0100

    [#401] Remove inline PHP code inside JS at viewProjectDetails.php.
    
    Any JS code that has to be generated by PHP has been moved to the
    beginning of the file.

[jaragunde]

Some pages with JS code embedded in the PHP page:

• web/viewUserDetails.php
• web/projectsEvaluation.php
• web/viewUsers.php
• web/settings.php