1

Is it a standard practice to develop a HTML project using partial views.
Consider a project where the design team will develop the HTMLs based on the requirement & then the backend team will work on that.

For example:

index.html:

<html>
<head>
    //reference to jQuery
</head>
<body>
    <div class="main">
       //all the page content will load here
    </div>
    
    <script>
        $(document).ready(function(){           
            $.get("header.html", function(html_string)
            {
                $(".main").append(html_string);
            },'html');  
            $.get("banner.html", function(html_string)
            {
                $(".main").append(html_string);
            },'html'); 
            $.get("intro.html", function(html_string)
            {
                $(".main").append(html_string);
            },'html');
            $.get("footer.html", function(html_string)
            {
                $(".main").append(html_string);
            },'html');          
        });
    </script>
</body>
</html>

header.html

<header>
...
</header>

banner.html

<section>
  <img src="" />
  <h1>hello</h1>
</section>

intro.html

<section>
  <h2>heading/h2>
  <p>description</p>
</section>

footer.html

<footer>
...
</footer>

The reasons for this approach:

  1. A change request, say in the header menu, will be made only in one place & it will reflect in all other pages, unlike the regular approach, where the designer has to update the header markup in all the pages.

  2. Re-usability & also easy to change the order of a section in a page, as & when required.

  3. If a particular section's markup is updated by the design team, it will be easier for the back-end developer to just pick that view instead of going through the entire html markup.

    and now my questions:

    1. Is this a standard design approach and is there a specific name for this kind of HTML development.

    2. What are the challenges if anyone has tried this.

    3. I'm unable to find any material online that will help a designer better understand & practice this approach. Please share any pointers.

3
  • Oh..Why a down vote. Please state the reason so that the question can be improved. – Qwerty Mar 13 '20 at 12:24
  • 2
    I just experienced the same thing on my post.. I'm starting to suspect this SE just has serial downvoters going unchecked, as, on SO, whenever a downvote occurs, it's usually swiftly followed by constructive commentary (no matter how brusque it may be ;) ). Anyways, counter +1 – gabriel.hayes Mar 13 '20 at 15:21
  • 1
    You can use angular for that ,it will provide kind of same approach and you can re-use components as well – Ishan Shah May 26 '20 at 9:35
3

Short of it: Yes and No

This is a pattern used, but you probably should not try to write your own framework to do this.

Existing Patterns

Instead, look at existing technologies that do this.

Some examples that have a similar concept include Microsoft MVC. You write various views and partial views which are compiled to HTML and delivered to the client as HTML to be inserted into the page.

Better yet: Angular / React. These are Single Page Applications designed around re-usable components. Additionally things like static menus are not redrawn on navigation.

 ... design team will develop the HTMLs based on the requirement 
 & then the backend team will work on that.

This part gets fuzzy. If you mean a UI/UX team, then they should probably work on the design / UX aspects, and let the developers figure out the specifics. Unless it's just defining some CSS. Unless they plan on writing for the stack.

CSS for Angular, React, Pure HTML, or libraries like Kendo means that unless they are writing directly against the stack, there will likely be defects when rendered later.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.