[Define New Theme] 13. All JS needs to be completely abstracted from the template files.

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[Define New Theme] 13. All JS needs to be completely abstracted from the template files.

Post by hanakin »

*Note This is part 13 of a series found here

We need to ensure that their are no JS calls from within the html. A simple search for click=" returns "81 matches across 38 files"

Through the proper use of jQuery and the INCLUDEJS feature we should be able to ensure that all the JS is completely abstracted.

I would take a step further and ensure that we are shipping a linted/minified/compressed version as well thats linked to by default.

Thoughts and suggestions

****UPDATE****

Created a Ticket to address one of the separation issues somewhat by transitioning to js- appended for all hooks that will not have css applied to them for better clarity when making changes to the HTML and CSS

Ticket: https://tracker.phpbb.com/browse/PHPBB3-12806
Last edited by hanakin on Fri Jul 04, 2014 11:13 am, edited 3 times in total.
Donations welcome via Paypal Image

keith10456
Registered User
Posts: 523
Joined: Sat Apr 22, 2006 10:29 pm
Contact:

Re: [Define New Theme] 13. All JS needs to be completely abstracted from the template files.

Post by keith10456 »

For those of us that doesn't know the benefit of what you're proposing, please explain ;-)

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 13. All JS needs to be completely abstracted from the template files.

Post by hanakin »

their are a number of benefits to this.
  1. complete division of labor. That is js/css/html all should have their own development lane that does not influence the other.
  2. keeps the html clean and semantic
  3. speed up page loads due to minified and compress code utilizing as few of server requests as possible
  4. consistency. we are using the proper method in some places but not in others :(
Donations welcome via Paypal Image

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 13. All JS needs to be completely abstracted from the template files.

Post by brunoais »

I agree fully on removing all instances of the "on*" attributes in the HTML and to use the events interface only.

I do not get, however, is what do you really mean of doing the js separated from the HTML. They are all interconnected! A piece of js is made for a piece of HTML, there's no real way around it.


User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 13. All JS needs to be completely abstracted from the template files.

Post by hanakin »

brunoais wrote:I agree fully on removing all instances of the "on*" attributes in the HTML and to use the events interface only.

I do not get, however, is what do you really mean of doing the js separated from the HTML. They are all interconnected! A piece of js is made for a piece of HTML, there's no real way around it.
I mean that it does not rely on a call in the html it should be event driven as you said. I should not have to worry about all three at the same time as most teams will have a designer who will do the html and css and a developer do the js.

when coding html I should be focused on content and not interactivity
when i code css I should be worried about look and feeling
when i code js I focus on interactivity, I develop the functionality based on the content and the design.
I then add the necessary event hooks followed by any css to render it
Donations welcome via Paypal Image

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [Define New Theme] 13. All JS needs to be completely abstracted from the template files.

Post by callumacrae »

brunoais wrote:I do not get, however, is what do you really mean of doing the js separated from the HTML. They are all interconnected! A piece of js is made for a piece of HTML, there's no real way around it.
Same reason you don't mix PHP and HTML.
Made by developers, for developers!
My blog

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 13. All JS needs to be completely abstracted from the template files.

Post by brunoais »

(considering PHP as the seelcted server side language) You need to mix PHP and HTML in the same file in order to produce dynamic output in a reasonable amount of time. Otherwise, how do you expect to work with that?
Placing files on the side, load the files, replace a huge amount of data in them using PHP for the logic and then outputting to the browser? That's dead slow!

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [Define New Theme] 13. All JS needs to be completely abstracted from the template files.

Post by callumacrae »

brunoais wrote:(considering PHP as the seelcted server side language) You need to mix PHP and HTML in the same file in order to produce dynamic output in a reasonable amount of time. Otherwise, how do you expect to work with that?
Placing files on the side, load the files, replace a huge amount of data in them using PHP for the logic and then outputting to the browser? That's dead slow!
With a templating engine? 0_o

Maybe I should have said you should keep the logic of the PHP separate from the HTML.
Made by developers, for developers!
My blog

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [Define New Theme] 13. All JS needs to be completely abstracted from the template files.

Post by brunoais »

Ah yes. I seriously agree with you on that. When I develop anything in PHP I take that into account. There still needs to be some logic in the "output files" but it is quite minor, only the parts that are required such that there's no HTML output from outside those files (mostly the same as the logic in phpBB's template .html files).
Yeah, now I understand what you meant.

I still don't really know about the usage of templating engines unless you really want to make something with plug&play templates (such as phpBB) but I definitely agree that it needs to be organized otherwise, it's a mess to find whatever one wants something. Placing loads of logic in the files responsible for the output just makes it harder to find what matters when changing HTML is required.

Post Reply