{% extends "templates/base.nunj" %}

{% block head %}
	
	<!-- Header content can go here -->

	<link rel="stylesheet" href="/index.css" />	<!-- Root index.css -->
	<link rel="stylesheet" href="./index.css" /> <!-- Demo JS App index.jss -->
{% endblock %}


{% block body %}
	
	<div class="card">
		<h1> Demo Javascript Client Application </h1>
		<a href="/"><p>go back Home</p></a>
	</div>

	<div class="card">
		<h2>Share code on both the server and client side</h2>
		<p> 
			This page imports am ES6 javascript template found at:
		</p>

		<code>./app/precompiled/js-demo/index.js</code>

		<p> 
			The compiled ES5 javascript is rendered at:
		</p>

		<code>./_compiled/precompiled/js-demo/index.html</code>

		<p> 
			The ES6 template imports a shared JS library with the following command:
		</p>

		<code>import RandomNumberGenerator from "random/RandomNumberGenerator.js"</code>

		<p> 
			And the search path finds that file here:
		</p>

		<code>./app/source/random/RandomNumberGenerator.js</code>

		<p>
			The server can also use the same library by issuing the same import statment: 
		</p> 

		<code>import RandomNumberGenerator from "random/RandomNumberGenerator.js"</code>

		<p> 
			And the search path finds that file here (just like the client code!):
		</p>

		<code>./app/source/random/RandomNumberGenerator.js</code>

		<p> 
			Both the server and the client code compile an ES5 copy of the library into their own entry-point js files.
		</p>		
	</div>

	<div class="card">
		<h2>This is client rendered by the browser javascript engine</h2>
		<div class="js-demo-frame">
			<div id="js-demo-space"></div>
		</div>
		<p>
			I'm using the same code the js server is using!
		</p>
	</div>

	<div class="card">
		<h2>This is server rendered by the nodejs server</h2>
		<iframe class="js-demo-frame" src="/js-demo/dynamic-page"></iframe>
		<p>
			I'm using the same code the js client is using!
		</p>
	</div>

	<!-- Here I bring in the JS entry point -->
	<script src="./index.js"></script>

{% endblock %}