Templating Questions

In notebook:
FrontEndMasters Organising Javascript functionality
Created at:
2016-10-10
Updated:
2016-10-10
Tags:
libraries React JavaScript
You can ignore files with the watch.

Now shows how he does the rendering on the browser. 
/web/js/Pages.jsM  around line 42:
  // ajaxify links
// use it with any links that is NOT data-ignore
		$body.on("click","a:not([data-ignore])",function click(evt){
			var href = evt.currentTarget.getAttribute("href");

			// disable JS-only (or just empty) links
			if (evt.currentTarget.getAttribute("href") === "#") {
				evt.preventDefault();
				evt.stopImmediatePropagation();
			}
			// recognized page?
		// 	get the href as an internal page
			else if (recognize(href) !== false) {
				evt.preventDefault();
				evt.stopImmediatePropagation();
// run gotoPage
				gotoPage(href);
			}
		});
Then gotoPage:
  	function gotoPage(url,suppressHistory,initData) {
		var content_html, page_url;

		page_url = recognize(url);

		if (page_url !== false) {
			if (page_url !== current_page_url) {
				// teardown the existing page
				pageScriptAPI(current_page_url).teardown();

				context.Events.emit("notify.reset");

				current_page_url = page_url;

// magic happens here
// use the same getPageContentHTML
// as getPageHTML on the server
				context.View.getPageContentHTML(url,null,{
					suppressHistory: suppressHistory,
					initData: initData
				})
				.val(pageContentHTML)
				.or(pageContentHTMLError);

				return;
			}
		}

		if (url !== context.document.location.href.toString()) {
			context.document.location.href = url;
			current_page_url = getPageURL(url);
		}
	}

React is awesome. But it's a much bigger hammer than what most people need.

Ember: One of the big three front-end, rendering frameworks. Ember is overkill for what he does. 
Ember recently updated it's rendering engine, called Glimmer. It figures out the minimal template partial that needs to be re-rendered. That's exactly why he built Grips five years ago. to do the same thing. 
Now Ember has a server-side tool, where you can run their rendering on Node. It's based on the same ideas that Kyle presents in this workshop. 

Initial rendering on the server, then progressively letting the browser take over.