comment on

G'day Bod,

[Note: Your question is very generic, which is fine. Accordingly, my suggestions are also generic: you'll need to adapt these to your requirements.]

"... written entirely in Perl ... HTML, CSS, JavaScript, etc hard coded along with the functional logic."

Before doing anything else, you should separate all of these concerns. There should be no "HTML, CSS, JavaScript, etc" in your Perl code. You probably want: (templated) HTML in *.tt; CSS in *.css; JavaScript in *.js; and so on.

As with any sort of strict rule, there will be exceptions; for instance, you may need to toggle a CSS display property in JavaScript to handle a "show/hide" function.

Here's a few general pointers:

Start a new project. Copy parts of existing code where necessary but don't try to modify the current application on the fly.
Make decisions regarding software versions at the outset. Consider what's available to all end-users.
Don't try to retrofit partial changes into existing code.
Hard-code as little as possible: templates can reference other templates.
Avoid anything that may require subsequent changes to core code: prefer config changes.
Give careful consideration to specific and generic elements; e.g. id and class HTML attributes which may be referenced by CSS and/or JavaScript.
Test extensively. This pays obvious dividends up front. It's also the gift that keeps giving (as you'll find out when an apparently innocuous change to one thing completely breaks something else that appeared to be quite unrelated).
Be patient. Avoid the urge to deploy early. Eagerness to show off your new creation is perfectly understandable; just make sure you're ready and avoid egg-on-face syndrome.

Your template would look something like this:

<html>
    <head>
        <title>[% title %]</title>
        <link ... [% base_url %]/css/[% css %] ...
        <script ... [% base_url %]/js/[% js %] ...
    </head>
    <body>
        [% header %]
        [% page_specific %]
        [% footer %]
    </body>
</html>
[download]

"What are the hidden pitfalls that could trip me up and suck up vast amounts of time?"

Following my pointers above should mostly avoid these; I wrote them with this question in the back of my mind.

In my (not inconsiderable) experience, one of the biggest pitfalls in any software project is: "I'll just leave that for now and fix it later."; which is often followed by the famous last words: "That should be quick and easy to do.". If it is indeed quick and easy, do it now; however, that often turns out not to be the case and shortcomings, or even bugs, plague many subsequent production versions. Get it right once, then spend your subsequent time on things vastly more interesting than tracking down bugs or trying to refactor your refactorings to get what you wanted in the first place.

In closing, this sounds like an interesting project and I wish you good luck with it.

— Ken

In reply to Re: Refactoring webcode to use templates by kcott
in thread Refactoring webcode to use templates by Bod

Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!

Titles consisting of a single word are discouraged, and in most cases are disallowed outright.

Read Where should I post X? if you're not absolutely sure you're posting in the right place.

Please read these before you post! —

Posts may use any of the Perl Monks Approved HTML tags:

a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr

You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)

	For:		Use:
	&		`&`
	<		`<`
	>		`>`
	[		`[`
	]		`]`

Link using PerlMonks shortcuts! What shortcuts can I use for linking?

See Writeup Formatting Tips and other pages linked from there for more info.