json.xml

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>JSON//BCHS: an introduction</title>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400italic,500" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="highlight.css" />
		<link rel="stylesheet" href="json.css" />
		<link rel="shortcut icon" type="image/png" href="/favicon-196x196.png" />
		<link rel="shortcut icon" sizes="196x196" href="/favicon-196x196.png" />
		<link rel="apple-touch-icon" href="/favicon-196x196.png" />
		<meta property="og:title" content="JSON and BCHS" />
		<meta property="og:image" content="https://learnbchs.org/logo-blue.png" />
		<meta property="og:url" content="https://learnbchs.org/json.html" />
		<meta property="og:type" content="website" />
		<meta property="og:description" content="How and why to use JSON for serving BCHS content." />
		<meta name="description" content="How and why to use JSON for serving BCHS content." />
	</head>
	<body>
		<section itemscope="itemscope" itemtype="http://schema.org/WebPage">
			<header>
				<img itemprop="image" src="logo-white.png" alt="BCHS Logo" />
				<h1>
					<a href="index.html" itemprop="name">BCHS</a>
				</h1>
				<nav>
					<a href="tools.html"><span>tools</span></a>
					<a href="easy.html"><span>example</span></a>
					<a href="https://github.com/kristapsdz/bchs"><i class="fa fa-github"></i></a>
				</nav>
			</header>
			<article>
				<input type="radio" name="steps" id="slider1" value="step1" checked="checked" />
				<input type="radio" name="steps" id="slider2" value="step2" />
				<input type="radio" name="steps" id="slider3" value="step3" />
				<header>
					<h2>JSON</h2>
					<div>
						<img src="arrow-up.png" />
						<img src="arrow-down.png" />
					</div>
					<h3>BSD, C, httpd, SQLite</h3>
				</header>
				<p>
					BCHS works especially well for JSON web applications, which is the <i>de jure</i> method for building
					dynamic web sites.
					These applications have a well-defined split between back-end (BCHS), transport protocol (<a
						href="http://www.json.org/">JSON</a>), and front-end (<a
						href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a>, <a
						href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>, and <a
						href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>).
					And there are plenty of tools available to build, document, and deploy your work.
					Why is this an improvement over simply emitting HTML?
				</p>
				<div>
					<ul>
						<li>
							server load: your user's browser is handling one request at a time&#8212;you're handling
							many, and the extra processing adds up
						</li>
						<li>
							updates to site design don't require redeploying your application
						</li>
						<li>
							reduced code-bloat from hard-coding complicated HTML trees
						</li>
						<li>
							less work-flow dependency between back-end developer and front-end developer/designer
						</li>
						<li>
							JSON is natively understood by JavaScript, which itself is a standard component of the
							web browser
						</li>
					</ul>
				</div>
				<p>
					Most (all?) complaints of JSON web applications fall to poor front-end decisions: using enormous
					<q>frameworks</q>, <a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP">CSP</a>
					violations, and really just plain shitty code.
					In this short document, I'll sketch out how to set up your BCHS environment for JSON applications.
					For a full working system using this method, see <a href="https://github.com/kristapsdz/dblg">dblg</a>.
				</p>
				<nav>
					<label for="slider1">
						puts(<span>c</span>);
					</label>
					<label for="slider2">
						{<span>json</span>}
					</label>
					<label for="slider3">
						&lt;<span>html</span>&gt;
					</label>
				</nav>
				<div class="slides">
					<div class="overflow">
						<div class="slidesinner">
							<section>
								<p>
									Begin with the actual web application source.
									I use <a href="https://kristaps.bsd.lv/kcgi">kcgi(3)</a> and use <a
										href="https://man.openbsd.org/pledge.2">pledge(2)</a> (so it
									requires OpenBSD, of course) to safeguard our operating system.
									In this example, I just emit a simple greeting in a JSON container.
								</p>
								<figure>
									<article data-sblg-permlink="0" data-sblg-article="1"></article>
								</figure>
							</section>
							<section>
								<p>
									In most large systems, seperate people work the front-end (HTML5, CSS,
									JS, etc.) and the back-end (BCHS).
									We can document the interface between this by using <a
										href="http://swagger.io/">Swagger</a>, which hooks into <a
										href="http://json-schema.org/">JSON Schema</a> to document the
									input and output of each resource.
								</p>
								<figure>
									<article data-sblg-permlink="0" data-sblg-article="1"></article>
								</figure>
							</section>
							<section>
								<p>
									Front-end work!  In this incredibly simple example, we use <a
										href="https://developer.mozilla.org/en-US/docs/AJAX">AJAX</a> to
									asynchronously invoke our web application and put the result into an
									identified element.
									We use <a href="http://vanilla-js.com/">vanilla JS</a> and pay deference
									to <a
										href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP">CSP</a>
									by processing fully in the script.
									You'll obviously need to put your own application URL in the loader.
								</p>
								<figure>
									<article data-sblg-permlink="0" data-sblg-article="1"></article>
								</figure>
							</section>
						</div>
					</div>
				</div>
			</article>
			<footer>
				<div>
					<a href="https://creativecommons.org/licenses/by/4.0/"><i class="fa fa-creative-commons"></i></a> 
					<a rel="author" href="https://kristaps.bsd.lv">Kristaps Dzonsons</a>
				</div>
			</footer>
		</section>
	</body>
</html>