HMVC and HTML Componentization

Asked

Viewed 662 times

8

I have read several articles on HMVC, both in PHP and in other languages, and in all of them the implementation of the standard revolved around having a "Master Controller" which requested the Response Body of one or more internal or external resources via Curl or Stream Contexts, in order to assemble its own, directly into an object responsible for the Response, or through its own View Engine, creating template variables with the obtained HTML(s)).

However, all these articles were very attached to the technical concept and sometimes did not cover all the relevant points. With this the conclusion that I was able to reach was that the basic concept of HMVC is, roughly, Mvcs within Mvcs, which work both hierarchically and separately, always in the same way.

But how exactly would the HTML componentization of this "Master Controller" if, so that each subsystem works the same way in every way any additional scripts, style sheets or even markup would be required?

With an example it becomes 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 (to function as the main application alone), with a HMVC figuratively created by the 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()
    )
);

By way of clarification of that fragment, Request:() 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 a real application we could have script conflict, or CSS rules that make use of the !Important messing with existing HTML afterward of the section designated for the component (a footer, for example) and etc.

Therefore, how should HTML componentization occur in a HMVC?

The least idea I can think of would be for the "Master Controller" to analyze the return HTML and only take what was inside the <body></body>, but I didn’t see anything remotely similar to that in what I researched.

  • Kohana has a HMVC model. That link has some considerations about HMVC.

  • But did you see that at any time it touches on the problem of doubt that I raised? In the article the construction of such Gazouillement only demonstrates the technique of composition, but does not cover how the final HTML would look. A View that it builds with the received data does not specify these Response Bodies already come clean of any unnecessary markings for Main Application or if something else is being done.

  • Why HMVC and DON’T SOUND ?

  • Maybe because I don’t know much more than just the definition of SOA. u.u'

1 answer

1

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

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

A file for the layout, which as in your 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 content of the page projects:

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

A file with only the content of the page clients:

<h1>Página Clients</h1>
<div class="container-fluid">Component HTML</div>
  • Your answer ends where I am struggling. In your example the HTML of each component does not have the other tags (<html>, <head> and so on). A component written in these templates would only work exactly as part of the main application, following the example given, if we broke the semantics and inserted the CSS/JS of Bootstrap directly into the <body> instead of in the <head>. In addition, specific cases, such as those involving scripts that need to be loaded into <head>might not work as expected alone as the component would not have its own tag.

  • Components must not have tags (<html>, <head> etc), because the idea is that each component is injected, according to the request, in a standard layout of your application. If you want to add other libraries depending on the requested component, you can think of a solution that loads the libraries into your HTML according to the request or, in some cases, create a layout that includes the required libraries.

  • But this I know, after all is the least notion about modularization of HTML learned while working with querystrings. The question itself is not about creating a component but about keeping the HTML of the main application valid, semantic, when "plugging" the modules to it unhindered that such components function in isolation, which as far as I could find information, is the basis of the HMVC. If I remove the "superfluous" tags from the components, part of their feature in the HMVC medium is lost, as they will not be alone what is combined with the consumer Application.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.