HMVC and HTML Component

8

I've read several articles on HMVC, both in PHP and other languages, and in all of them the implementation of the standard revolved around having a "Controller-master" which requested the Response Body in> one or more resources, internal or external, via cURL or Stream Contexts , in order to mount your own, directly on an object responsible for the response, or through a View Engine itself, creating variables of template with the obtained HTML (s).

However, all these articles were very much in line with the technical concept and sometimes did not cover all the relevant points. So the conclusion I could get was that the basic concept of HMVC is, in a nutshell, MVCs within MVCs, which work both hierarchically and in isolation, always in the same way.

But how exactly would the HTML componentization of this "Master Controller" occur if, for each subsystem to work in the same way in every way would require any scripts, style sheets or even additional markings ?

With an example it is easier to understand:

Considering an application whose GUI would be developed with Bootstrap and composed of N components, all also developed with the same framework (so that they work in isolation from the main application), with a figuratively created HMVC by pseudo-code below:

// Make the Requests

$projects = new Request( 'management/projects', 'GET' );
$clients  = new Request( 'management/clients',  'GET' );

// Creates the Template Variables with Response Bodies HTML

$this -> view -> assign(

    array(

        'projects' => $projects -> send(),
        'clients'  =>  $clients -> send()
    )
);
  

To clarify this fragment, Request :: send () would be returning HTML

It would result in an HTML similar to:

<html lang="en">

    <head>

    <meta charset="utf-8">

    <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    </head>

    <body>

        <div class="container-fluid">

            <!-- Sidebar -->

            <div class="row">

                <div class="col-sm-3 col-md-2 sidebar" id="sidebar" role="navigation">

                    <ul>
                        <li>Sidebar Item</li>
                        <li>Sidebar Item</li>
                        <li>Sidebar Item</li>
                    </ul>

                </div>

            </div>

            <!-- Main Content -->

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

                <html lang="en">

                    <head>

                        <meta charset="utf-8">

                        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

                    </head>

                    <body>

                        <div class="container-fluid">Component HTML</div>

                    </body>

                </html>

            </div>

        </div>

    </body>

</html>

What in this simple example is "just" incorrect, after all, in an actual application we might have script conflict, or CSS rules that make use of ! important cluttering with existing HTML after of the section designated for the component (a footer, for example) and etc.

So, how should HTML componentization take place in an HMVC?

The least idea I could think of would be for the "Master Controller" to parse the return HTML and get only what was within <body></body> , but I did not see anything even remotely similar to that in what I researched .

    
asked by anonymous 15.12.2014 / 18:15

1 answer

1

Bruno Augusto , HTML components can be organized in separate HMVC frameworks in separate scripts. That is, separate the template from your application from the content HTML scripts.

Based on the example you mentioned, you would have something like:

A file for the layout, which as in its example would be the equivalent issues in all subsystems.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <!-- Sidebar -->
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar" id="sidebar" role="navigation">
                <ul>
                    <li>Sidebar Item</li>
                    <li>Sidebar Item</li>
                    <li>Sidebar Item</li>
                </ul>
            </div>
        </div>
        <!-- Main Content -->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <?php 
                /* Exemplo de renderização do conteúdo da página requisitada
                *  Irá variar de acordo com o framework ou componentes que você está utilizando na sua aplicação.
                */
                echo $this->content; 
            ?>
        </div>
    </div>
</body>
</html>

A file with only the contents of the page projects :

<h1>Página Projects</h1>
<div class="container-fluid">Component HTML</div>

A file with only the contents of the page clients :

<h1>Página Clients</h1>
<div class="container-fluid">Component HTML</div>
    
29.12.2014 / 16:25