Jump to content
szabesz

workflow with "HTML Imports": frontend design first, ProcessWire next...

Recommended Posts

Warning: it's going to be TL;DR so proceed with caution :P

In an effort to come up with an optimized development workflow, I have come up with the idea of implementing most of the required template files in the form of static HTML files first (based on a "CSS framework" which will also serve as the CSS base of the site).

Basically I want to implement most of the frontend without touching ProcessWire in the first place. The advantage of this approach is that it is a lot faster to work with only HTML/CSS/JS during the frontend design phase of the project, and the end result of the design phase can be "similar" to a wireframe/mockup which can be presented to a client, but this "mockup" actually represents (say) 80% of the final design, so it is something that is rather good to work with when the backend development with ProcessWire begins.

This also means that my ProcessWire template files will be mostly implemented with <?php echo ... ?> and alternative syntax control structures that can be "just injected" into the above mentioned static HTML template files to turn them into ProcessWire template files later on.

So far so good, but my ProcessWire template files are going to be separated into "template file partials", and I also want to implement the static HTML template files in the same way, so that they are also separated into "template file partials", and ideally organized in the very same structure.

E.g. I will include the site's navigation in the ProcessWire template file like this:
<?php echo $navigation ?>
So I want to do the same in the corresponding static HTML template file, something like this:
<div data-template="partials_navigation"></div>

If it can be done recursively, then I can implement the same in both cases. With ProcessWire, I use wireRenderFile() to render partials recursively, so I just had to figure out what to use in the case of the static HTML template files.

What else to use if not JavaScript? :) I started off by googling around, looking for some pre-made solutions... I did not find too much that could help me, the only thing useful I could dig up is "HTML Imports", for example:
http://blog.teamtreehouse.com/introduction-html-imports

Note, that currently this technique only works in Chrome(-ium), but that is my choice in frontend development anyway. I've read somewhere that other browsers might never implement "HTML Imports", but that is to be seen...

I have found a lot of articles explaining the basics of "HTML Imports", but I could not find any libraries or frameworks nor even something similar to what I need, so I implemented a proof of concept version of mine:

Spoiler

/* Loads template partials form files.
 *
 * Recommended browser: Google Chrome
 * Only works if Chrome is launched with --allow-file-access-from-files
 * Alternatively use Brackets' live preview feature.
 *
 */
var linkedTemplates_o = document.querySelectorAll('link[rel="import"]'); // collects all the <link rel="import"> elements

for (var i = 0; i < linkedTemplates_o.length; ++i) { // loops through the <link rel="import"> elements

    var linkedTemplate_o = linkedTemplates_o[i]; // a template file partial to work with
    var template_o = linkedTemplate_o.import.querySelector('template'); // importing the template file partial

    /* we turn (e.g.) partials/article-lead-button.html into partials_article-lead-button
     * this way we can identify all the "data-template" div elements 
     * which will be replaced with their associated template file partials
     */
    var templatePath_str = linkedTemplate_o.attributes['href'].value; // geting the path to the template file partial
    var dataAttributeValue_a = templatePath_str.split("/"); // splits it up like PHP's explode
    var dataAttributeValue_str = dataAttributeValue_a.join("_"); // joins them again like PHP's implode
    dataAttributeValue_str = dataAttributeValue_str.split(".").slice(0, -1).join("."); // removes the extension

    var selector_str = "[data-template='" + dataAttributeValue_str + "']"; // we will look for this data-template attribute value(s)
    var templateNodes_o = document.querySelectorAll(selector_str); // collects all the data-template divs in question

    for (var j = 0; j < templateNodes_o.length; ++j) { // loops through the data-template divs we found
        var templateNode_o = templateNodes_o[j]; // a data-template div to replace with its associated template file partial
        var templateContent_o = document.importNode(template_o.content, true); // represents the HTML code of the template file partial
        templateNode_o.parentElement.replaceChild(templateContent_o, templateNode_o); // time to replace
    }
}

 

I'm quite happy with the result so far. The JavaScript code needs some additional error handling, but otherwise it seems to do what I need.

Here it is in action (Chrome(-ium) only!!!): [...no longer live...]

And here is the source code for those who want to take a closer look: [...old stuff, I removed it to save space...]

However, I'm pretty sure that someone must have already come up with this idea, so I'm asking the ProcessWire community if anyone can point me to similar solutions, something that I can study and/or use.

So any piece of advice that might help me to take it to the next level, or any objections to this "HTML Imports" technique, any disadvantages? Thank you in advance :)

  • Like 2

Share this post


Link to post
Share on other sites

Since the introduction of the delayed output strategy by Ryan this has been discussed in many posts and I have used it ever since and I have fine tuned it until perfection.

https://processwire.com/talk/topic/8767-regarding-delayed-output/

https://processwire.com/talk/topic/11199-mainphp-inflexibility/

using wireRenderFile() in the delayed output strategy
https://processwire.com/blog/posts/processwire-2.5.2/

https://processwire.com/talk/topic/11836-wirerenderfile-on-child-pages/

Here Camilo Castro explains how his wire render pattern works:

https://medium.com/@clsource/the-wire-render-pattern-806bf6d6097a#.jquhbxejn
https://github.com/NinjasCL/wire-render-pattern

Horst came up with the idea to use $Layout for using different layouts for any given page on the front

https://processwire.com/talk/topic/8767-regarding-delayed-output/

https://processwire.com/talk/topic/11769-delayed-output-and-another-layout/

with this I call html files in a folder "views" for front pages who need a different layout

Then I used your own former mentioned strategies here:

https://processwire.com/talk/topic/2311-processwire-on-the-web/page-21#entry109766
https://processwire.com/talk/topic/11809-pw-site-profiles-are-like-wp-themes/#entry109848

https://processwire.com/talk/topic/2311-processwire-on-the-web/page-21#entry109851

 

Together I am using this here as an example set up in my _main.php file: (the variables shown here are not always the same but depending on what a web site needs)

<?php include("./banner/{$banner}.php"); ?>
<?php include("./topnav/{$topnav}.php"); ?>
<?php include("./subnav/{$subnav}.php"); ?>
<?php include("./slider/{$slider}.php"); ?>
<?php echo $layout; ?>
<?php include("./footer/{$footer}.php"); ?>

Any value for css, js, values, etc for a specific page on the front can be over rided, switched on or off as desired on each associated template file. Further I use separate css files for the main part of a web site and individual css files for front pages where needed and call for them between <head> and </head> with $variables on the associated template files. Output happens with the $Layout as mentioned before. Values used site wide are set in the _init.php file and can be changed or switched on or off as needed on the associated template files. This makes it all highly organized and fast maintainable.

Reading through your proposed workflow looks like I am already are applying that. Would be interesting to find out how and where your proposed workflow would improve on my current workflow.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

I always wonder why u guys don't use a template engine instead. Most things you try to achieve are already there and on a more sophisticated/bulletproof level, and there are many more goodies. Ok, it takes some time to get familiar with them but the productivity boost they give is worth the effort imo.

  • Like 1

Share this post


Link to post
Share on other sites
Quote

I always wonder why u guys don't use a template engine instead.

That is something that pops up every now and then and certainly is something to think about. However Processwire's API does already just the same, but offers more flexibility and possibilities.

https://processwire.com/talk/topic/1403-template-engine/?do=findComment&comment=12626

 

  • Like 2

Share this post


Link to post
Share on other sites

@LostKobrakai and @pwired Thanks for directions. I'm going to have a busy day this Monday, but will definetally take a closer look of the posts you provided. Note, that I've already adopted @clsource's (Camilo Castro's) wire render pattern thanks to his recently released Processwire Ghost Writer profile which I am currently refactoring to my needs.

@tpr Well, there are various reasons for not taking the template engine path, at least not yet. You have almost converted me and I was about to jump the Latte bandwagon, but  currently I want to work with the least amount of dependencies and a template engine is just another framework to add to he system which is not really needed for standard, basic websites which I'm currently interested in.

  • Like 3

Share this post


Link to post
Share on other sites

I think ditching template engines for what you're trying to do is probably not a good idea. You want to fill in html templates with various data. Static in the first place and dynamic in a second step. That's exactly what templating engines are made for and you'll probably not come far without at least implementing something like a small templating engine on your own. But a own implementation does also need own maintenance and documentation and so on and it's probably not as powerful as existing solutions. They may be a  additional dependency, but really a own library is a dependency, too, which is just harder to maintain.

  • Like 1

Share this post


Link to post
Share on other sites

Some years ago, (maybe 10 ?), I worked with a nice and useful tool: Tiny But Strong. It is a OneFileTemplatingEngine in PHP, with 1 PHP-class, 6 methods and 5 properties. If I recall right, I was able to do every thing with it. Besides Tiny But Strong, it also was Simple And Easy To Use. :)

It is under constant development / maintenance since 2004!

  • Like 2

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By ksymmons
      Hey guys,
      As the question says, I'd really like to learn about your initial client communication workflows. In other words, what's your process like from the moment you get a request to provide a quote for a website to the moment you actually send the quote?
      My current workflow:
      A client fills out the contact form on my site to request a quote. I review the information provided and send them a Word document questionnaire with a list of questions. I ask for things like project scope, features needed, desired timeline, allocated budget, etc. They fill out the document and send it back to me. I review the information provided and make sure I've got everything I need. I write and send the quote to the client. Client accepts the quote. I send them a contract, get it signed and collect 50% of total payment. I gather some extra information from them, usually just by asking questions via email or by sending them another Word document questionnaire. I start building their site. Lately, I've been thinking about changing this workflow a bit. Currently, my online contact form has three fields: name, email and message. What I'm thinking is, what if I provide a select toggle above my form so that clients can choose between a simple, general enquiries form and a larger form (with all the questions I've got in my Word document) to request a quote? This would allow me to do away with the Word document, and would make this a one-step process.
      The reason why I haven't done this so far is because I'm not sure how good of an idea it is to have a long contact form with say, 10-15 questions. What's your take on this?
      Another thing I'm not entirely happy with is having to send them two questionnaires (steps 2 and 8). The reason why I do this is because I don't want to overwhelm them with lots of questions at the beginning, and also because, to be honest, the questions I ask in the 2nd questionnaire do not really influence pricing, as they have more to do with the nature of their business, their goals with the new site, possible corporate colours they may have, things like that.
      What do you guys think? Does my workflow seem sensible to you? Is it similar to what you do? What would you change?
      Thanks, and sorry for the brick!
      P.S. If some of you guys are willing to share your client questionnaires I would certainly appreciate it.
    • By thmsnhl
      Hi everybody,
      we started our first Processwire driven project in my new company and for the first time, I was working on one site with more than 2 colleagues on the same site.
      It didn't take long for us to stumble across some problems when multiple developers work at the same time, conflicts with updating the database on vagrant machines, like duplicate entries for page IDs, errors when setting up fields and stuff like this. We ended up working on a dedicated database server, that we linked to our vagrant machines and most of the problems were gone, but the performance of this constellation is really bad compared to our first approach with database running on vagrant machines.
      I already tried to find a solution in the forums but I couldn't find anyone with problems like this.
      So I was wondering: how do you manage projects with multiple developers on vagrant machines in a git-based workflow?
    • By Hector Nguyen
      Hello everyone,
      I didn't play much with ProcessWire, my project has just started and I have no experience about how ProcessWire will be when go live. I'm using a tool to deploy my code automatically to production server after build passed (Magallanes).
      Please give me the answers for the questions below:
      Which folders/files will be created by the application after installed ? Which folders/files usually be overwritten? Which folders/files using as cache, as session, as temporary? Do ProcessWire supports logs? If so, where is it? Which files are using as configuration files? Should I concern about template configuration files? Any help would be appreciated.
      Thank you!
    • By clsource
      Hello folks,
      I was working on different projects and needed to have a better way to organize my code
      and a workflow.
      And I came across this methodology
      https://about.gitlab.com/2014/09/29/gitlab-flow/
      Here's a video explaining the workflow

      Hope it helps
×
×
  • Create New...