JavaScript. Using Handlebars

Rendering in the Browser
Applications are starting to use JSON “back end” services and construct the View HTML in JavaScript
www.backbonejs.org
www.emberjs.com
www.angular.net
www.reactjs.net
...
The only correct way to write JavaScript is whatever you were not doing last week.
@ThePracticalDev

Web Server
Database Server
Time
Apache
PHP
MySql
Browser
JavaScript
DOM
Parse
Response
Send
Request
http://www.wa4e.com/code/rrc/
JQuery

Model-View-Controller
A model that defines the elements of a web application and how they interact
View – Produce output
Model – Handle data
Controller – Orchestration / Routing
https://en.wikipedia.org/wiki/Model-view-controller

guess.php
$oldguess = '';
$message = false;
if ( isset($_POST['guess']) ) { // Trick for integer / numeric parameters
$oldguess = $_POST['guess'] + 0;
if ( $oldguess == 42 ) {
$message = "Great job!";
} else if ( $oldguess < 42 ) {
$message = "Too low";
} else {
$message = "Too high...";
}
}
?>
A Guessing game
Guessing game...
if ( $message !== false ) {
echo("
$message
\n");
}
?>
Input Guess
value="
"/>
Model
View
Controller
Context

Web Server
Database Server
Time
Apache
PHP
MySql
Browser
JavaScript
DOM
Parse
Response
Send
Request
MVC in PHP
P
DO
View
Controller
Context
Model

handlebars.js
Templates with curly braces
Adapted from Django / AppEngine
Hot spots accept data from the context
{{title}}
{{body}}
Context
Equations
guess < 42
+
=

<br> <div class="entry"><br> <h1>{{title}}</h1><br> <div class="body"><br> {{body}}<br> </div><br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="{{title}} {{body}} var raw_tempate = $(&quot;#entry-template&quot;).html(); var template = Handlebars.compile(raw_template); var context" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/886158/slide-7.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/886158/slide-7.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/886158/slide-7.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/886158/slide-7.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/886158/slide-7.jpg" class="slides-image"><!----><div class="slides-content"></div><br>
<br>var raw_tempate = $("#entry-template").html();<br>var template = Handlebars.compile(raw_template);<br>var context = {title: "Equations", body: "guess < 42"};<br>var rendered = template(context);<br>alert('Check out the sweet spinner..:)');<br>$('#stuff').html(rendered);<br>
hand-01.htm

Web Server
Database Server
Time
Apache
PHP
MySql
Browser
JavaScript
DOM
Parse
Response
Send
Request
MVC in PHP
P
DO
View
Controller
Context
Model

Web Server
Database Server
Time
Apache
PHP
MySql
Browser
JavaScript
DOM
Parse
Response
Send
Request
View in JavaScript
P
DO
View
Controller
Context
Model
Context

<br> <div class="entry"><br> <h1>{{title}}</h1><br> <div class="body"><br> {{body}}<br> </div><br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="{{title}} {{body}} var raw_tempate = $(&quot;#entry-template&quot;).html(); var template = Handlebars.compile(raw_template); $.getJSON(&#39;hand-02-json.php&#39;, function" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/886158/slide-10.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/886158/slide-10.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/886158/slide-10.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/886158/slide-10.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/886158/slide-10.jpg" class="slides-image"><!----><div class="slides-content"></div><br>
<br>var raw_tempate = $("#entry-template").html();<br>var template = Handlebars.compile(raw_template);<br>$.getJSON('hand-02-json.php', function (context) {<br> var rendered = template(context);<br> $('#stuff').replaceWith(rendered);<br>});<br>
hand-02.htm
header('Content-Type: ...');
$stuff = array(
'title' => 'Mathematics',
'body' => 'guess > 42');
echo(json_encode($stuff));
{ "title":"Mathematics",
"body":"guess > 42" }

Handlebars Application

<br> {{#if profiles.length}}<br> <p><table border="1"><br> <tr><th>Name</th><th>Headline</th><br> {{#if loggedin}}<th>Action</th>{{/if}}</tr><br> {{#each profiles}}<br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="{{#if profiles.length}} Name Headline {{#if loggedin}} Action {{/if}} {{#each profiles}} {{first_name}} {{last_name}}" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/886158/slide-12.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/886158/slide-12.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/886158/slide-12.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/886158/slide-12.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/886158/slide-12.jpg" class="slides-image"><!----><div class="slides-content"><tr><td><a href="view.php?profile_id={{profile_id}}"><br> {{first_name}} {{last_name}}</a><br> </td><td>{{headline}}</td><br> {{#if ../loggedin}}<br> <td><br> <a href="form.php?profile_id={{profile_id}}">Edit</a> <br> <a href="delete.php?profile_id={{profile_id}}">Delete</a><br> </td><br> {{/if}}<br> </tr><br> {{/each}}<br> </table></p><br> {{/if}}<br>
index.php
res-handlebars

....
<br>$(document).ready(function(){<br> $.getJSON('profiles.php', function(profiles) {<br> window.console && console.log(profiles);<br> var source =</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt=".... $(document).ready(function(){ $.getJSON(&#39;profiles.php&#39;, function(profiles) { window.console &amp;&amp; console.log(profiles); var source = $(&quot;#list-template&quot;).html();" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/886158/slide-13.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/886158/slide-13.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/886158/slide-13.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/886158/slide-13.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/886158/slide-13.jpg" class="slides-image"><!----><div class="slides-content">$("#list-template").html();<br> var template = Handlebars.compile(source);<br> var context = {};<br> context.loggedin = <br> <?= isset($_SESSION['user_id']) ? 'true' : 'false' ?>;<br> context.profiles = profiles;<br> $('#list-area').replaceWith(template(context));<br> }).fail( function() { alert('getJSON fail'); } );<br>});<br>
index.php

// This script works even if you are not logged in
require_once 'pdo.php';
header("Content-type: application/json; charset=utf-8");
$stmt = $pdo->query('SELECT * FROM Profile');
$profiles = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo(json_encode($profiles, JSON_PRETTY_PRINT));
profiles.php

profiles.php
[
{
"profile_id": "5",
"user_id": "1",
"first_name": "Chuck",
"last_name": "Severance",
"email": "
[email protected]
", "headline": "Python Rulez",
"summary": "Python",
"updated_at": "2016-04-04 21:15:27"
},
{
"profile_id": "6",
"user_id": "1",
"first_name": "Colleen",
"last_name": "van Lent",
"email": "
[email protected]
",
"headline": "Responsive Design Rulez",
"summary": "HTML5!",
"updated_at": "2016-04-04 21:16:12"
}
]

Web Server
Database Server
Time
Apache
MySql
Browser
JavaScript
DOM
Parse
Response
Send
Request
Single Page Application - Angular
P
DO
View
Controller
Model
Context
Model
Model

Summary
With JavaScript ES6 on the way and significant browser improvements on the horizon, it is likely that the “best practice” both on the server and the client will continue to evolve.
It will continue to be important to understand how web applications work “all the way down” so you can work with these new innovations.
The only correct way to write JavaScript is whatever you were not doing last week.
@ThePracticalDev