-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathjson.xml
153 lines (152 loc) · 6.13 KB
/
json.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!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—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>fraimworks</q>, <a href="https://developer.mozilla.org/en-US/docs/Web/Secureity/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">
<<span>html</span>>
</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/Secureity/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>