[Define New Theme] 14. Template files need re-broken out into more modular codebase

Post by **hanakin** » Tue Jun 10, 2014 6:48 pm

*Note This is part 14 of a series found here

Warning is going to be a very lengthy post so get some coffee!

In order to provide for a more modular and cleaner CodeBase we need to break our template files up in a more thoughtful manner.

we need to instead break our files into global elements, block level elements, and component-based elements.

How we do this is a matter for discussion but by doing this we allow for the code to be more modular and more maintainable overtime.

For example:

Viewforum.html would be a global level template file.

The different blocks or sections of this would be their own block level template files.

So header, primary-navigation, actionbar, forum, stats, footer

Then if further separation is needed you can have smaller component based template files to re-create those reusable pieces of code. This comes in handy when working with looping through elements such as the form rows.

As far as how to break these out naming wise and folder structure wise I'm open to suggestions however I had a few different ideas

The easiest way would be to define a master template for all the header and footer includes. Then establish global template files to extend the master layout. These would keep the current names such as viewforum, UCP, MCP etc.

We would then break these files up into individual blocks and prepend the word block into the front of them to provide separation from the global template files.

We could then further break these down into reusable pieces of code that we call components that could be prepended with the word component or partial however we want to label it.

This is just one example of how we can better organize the template directory. We can of course do the same thing with folders so you have a master layout and all of your global files in the main template directory. Then you have a separate directory for blocks and components.

Thoughts and suggestions

keith10456 · Post by **keith10456** » Wed Jun 11, 2014 6:59 pm

The overall concept sounds like it makes sense. However, I look forward to the comments of others that are more experienced/advanced in website design.

PayBas · Post by **PayBas** » Wed Jun 11, 2014 7:20 pm

Sounds good. I've actually tried this, but it can be tricky. Take this code for example, which is a tools include template:

Code: Select all

<!-- IF S_VIEWFORUM -->
<form method="post" action="{S_FORUM_ACTION}">
<!-- ELSEIF S_VIEWTOPIC -->
<form id="viewtopic" method="post" action="{S_TOPIC_ACTION}">
<!-- ELSEIF S_IN_SEARCH -->
<form method="post" action="{S_SEARCH_ACTION}">
<!-- ENDIF -->

<fieldset class="display-options">
	<label for="sk">{BLABLA} </label>
	<input class="button2" type="submit" name="sort" value="{BLABLA2}" />
</fieldset>

<!-- IF S_VIEWFORUM or S_VIEWTOPIC or S_IN_SEARCH -->
</form>
<!-- ENDIF -->

You could argue that this will not be a problem if the templates are harmonized better, but still...

Second point is that I'm not exactly sure how the twig caching system works with loop includes.

wilkinsocks · Post by **wilkinsocks** » Tue May 05, 2015 8:03 am

I've been using Laravel (a somewhat new mvc framework) recently to build some PHP applications, and it's got this templating system part of it that I personally find quite effective. I'll admit, I've not really looked into twig yet, sorry if it already does the same thing.

You make a master file. Example below.

Code: Select all

<html>
<head>
	<title>@yield('title')</title>
</head>
<body>
	<div class="content">
		@yield('content')
	</div>
</body>
</html>

All other files extend a master such as the one above. Example Below.

Code: Select all

@extends('master')

@section('title')
	Page title
@endsection

@section('content')
	Some HTML
	{{ Some php }}
	
	@foreach ($users as $user)
    		<p>This is user {{ $user->id }}</p>
	@endforeach
	
@endsection

Laravel call these template files 'blades', so the files are like: 'FileName.blade.php'

If you consider WordPress' and phpbb's current method is much more basic, just including the header and a footer within each file. The cool thing about this method is that you can place 'yield tags' wherever you want or need. A good example is within the header and towards the bottom of the page to include JS scripts on a page by page basis as opposed to including them on every single page. Do we really need to load scripts required for the registration on every single page for instance?

I've dug out a class that controls it for their framework from the source if anyone is interested https://github.com/laravel/framework/bl ... mpiler.php

Post by **Nicofuma** » Tue May 05, 2015 8:19 am

It's perfectly possible to do that with twig and it's even the preferred way

We don't use it yet in phpbb because prosilver is old but it shouldn't be the case for the new theme

Khaos-Rage · Post by **Khaos-Rage** » Tue May 05, 2015 4:37 pm

wilkinsocks wrote:I've been using Laravel (a somewhat new mvc framework) recently to build some PHP applications, and it's got this templating system part of it that I personally find quite effective.

Yeah phpBB is built using some of the Symfony components. Laravel also uses some of the Symfony components eg. (routing). And Twig is basically what your describing. Currently phpBB uses a lexer for twig.

Taken from Twig site. This is a example of basic twig.

Code: Select all

{% extends "layout.html" %}

{% block content %}
    Content of the page...
{% endblock %}

Development Discussion Board

[Define New Theme] 14. Template files need re-broken out into more modular codebase

[Define New Theme] 14. Template files need re-broken out into more modular codebase

Re: [Define New Theme] 14. Template files need re-broken out into more modular codebase

Re: [Define New Theme] 14. Template files need re-broken out into more modular codebase

Re: [Define New Theme] 14. Template files need re-broken out into more modular codebase

Re: [Define New Theme] 14. Template files need re-broken out into more modular codebase

Re: [Define New Theme] 14. Template files need re-broken out into more modular codebase