Native Javascript Templating |

Contents

Javascript Frameworks & Libraries

My first experience of Javascript libraries was with Knockout and I loved it. It became a major part of the main SAAS software project I worked on at the time.

My second experience was with (ReactJs)[https://legacy.reactjs.org/] - I tried it out on a handful of data maintenance screens in an internal web app. These screens would not be used by many people apart from IT, so they provided a good testing area. I enjoyed learning a new technology (who doesn’t), and appreciated the itch it was scratching.

However, the learning curve was steep. The Babel requirement for transpiling the React code caused me some issues when I returned later to the codebase to find that the version of Babel needed to be upgraded.

The inconvenience caused by using React was enough for me to decide to rip it out.

In my search for an alternative, I came across this article - which described exactly the pain I felt from using React. And Jim presented a brilliant, lightweight, easy to understand solution - plain old, native Javascript template literals.

At its simplest:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Native Javascript Templating</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <link rel="manifest" href="/app.webmanifest">
    <link rel="stylesheet" type="text/css" href="/public/css/site.css" />
</head>
<body>
    <section id="app">
        <app-header></app-header>
        <main style="text-align: center;">
			<input id="POnumber"/>
            <section id="PurchaseOrderLines">

            </section>
        </main>
        <app-footer></app-footer>
    </section>
	<script>
		//Listen for user inputting a PO Number
		document.getElementById("POnumber").addEventListener("change", evt => {
			var poNumber = evt.target.value;

			//Request PO information from web server,
			var poLines = StockSystem.getPurchaseOrder(poNumber);

			//Pass PO JSON data to function that returns a string of HTML
			var htmlString = DisplayPoLines(poLines);

			//"Inject" the HTML into the DOM
			document.getElementById("PurchaseOrderLines").innerHTML = htmlString;
		});
		
		function DisplayPoLines(items) {
			var header = `
					<section class="records">
						<label>Supp Code</label>
						<label>Our Code</label>
						<label>Rec'd</label>
					</section>
					`;

			var html = items.map(item =>
				`
				<section class="records zebraStripe" data-line-id="${item.LineID}">
					<span>${item.SuppCode}</span>
					<span class="itemCode">${item.ItemCode}</span>
					<input class="qtyRecd" type='number' value='${item.Qty}' min="0" />
				</section>
				`
			).join("");
			return header + html;
		}
	</script>
</body>

Javascript