Skip to content

Commit 43db467

Browse files
sdirixsdirix
committed
feat: explain the refactoring on the demo-all landing page
- landing page: 'JSON Forms 4 Demo' with a pitch for the presentation model rewrite and a showcase section (presentation model, pluggable schema sources, pluggable validation, server-side forms) rendered below the renderer-set cards and visually distinct from them - dev.js: serve the landing page per request instead of caching it at startup, so edits show up on refresh during development
1 parent 5e73b4c commit 43db467

2 files changed

Lines changed: 118 additions & 32 deletions

File tree

‎apps/demo-all/dev.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@ const servers = await Promise.all(
3636
}),
3737
);
3838

39-
const landingPage = readFileSync(join(root, 'index.html'));
40-
4139
const httpServer = createHttpServer((request, response) => {
4240
const url = request.url ?? '/';
4341
for (const { id, vite } of servers) {
@@ -56,7 +54,8 @@ const httpServer = createHttpServer((request, response) => {
5654
}
5755
if (url === '/' || url === '/index.html') {
5856
response.writeHead(200, { 'content-type': 'text/html' });
59-
response.end(landingPage);
57+
// Read per request so landing-page edits show up on refresh.
58+
response.end(readFileSync(join(root, 'index.html')));
6059
return;
6160
}
6261
response.statusCode = 404;

‎apps/demo-all/index.html‎

Lines changed: 116 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>JSON Forms 4 — Examples</title>
6+
<title>JSON Forms 4 Demo</title>
77
<style>
88
* {
99
box-sizing: border-box;
@@ -19,25 +19,52 @@
1919
header {
2020
background: #1f2937;
2121
color: #fff;
22-
padding: 2.5rem 1.5rem;
22+
padding: 3rem 1.5rem 2.5rem;
2323
text-align: center;
2424
}
2525
header h1 {
26-
margin: 0 0 0.25rem;
27-
font-size: 1.6rem;
26+
margin: 0 0 0.5rem;
27+
font-size: 2rem;
2828
}
2929
header p {
30-
margin: 0;
31-
opacity: 0.75;
32-
font-size: 0.95rem;
30+
margin: 0 auto;
31+
max-width: 46rem;
32+
opacity: 0.8;
33+
font-size: 1rem;
3334
}
3435
main {
35-
max-width: 900px;
36+
max-width: 980px;
3637
margin: 0 auto;
37-
padding: 2.5rem 1.5rem;
38+
padding: 2.5rem 1.5rem 3rem;
39+
}
40+
h2 {
41+
margin: 0 0 1rem;
42+
font-size: 1.2rem;
43+
}
44+
.features {
45+
display: grid;
46+
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
47+
gap: 1.5rem 2.5rem;
48+
}
49+
.feature {
50+
border-left: 3px solid #1565c0;
51+
padding-left: 1rem;
52+
}
53+
.feature h3 {
54+
margin: 0 0 0.25rem;
55+
font-size: 0.95rem;
56+
color: #1f2328;
57+
}
58+
.feature p {
59+
margin: 0;
60+
font-size: 0.85rem;
61+
color: #59636e;
62+
}
63+
.apps {
3864
display: grid;
3965
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
4066
gap: 1.25rem;
67+
margin-bottom: 3rem;
4168
}
4269
a.card {
4370
display: block;
@@ -55,7 +82,7 @@
5582
border-color: #1565c0;
5683
box-shadow: 0 2px 10px rgba(21, 101, 192, 0.15);
5784
}
58-
.card h2 {
85+
.card h3 {
5986
margin: 0 0 0.35rem;
6087
font-size: 1.05rem;
6188
color: #1565c0;
@@ -69,33 +96,93 @@
6996
opacity: 0.55;
7097
pointer-events: none;
7198
}
72-
.card.soon h2 {
99+
.card.soon h3 {
73100
color: #59636e;
74101
}
102+
footer {
103+
text-align: center;
104+
padding: 0 1.5rem 2.5rem;
105+
font-size: 0.85rem;
106+
color: #59636e;
107+
}
108+
footer a {
109+
color: #1565c0;
110+
}
75111
</style>
76112
</head>
77113
<body>
78114
<header>
79-
<h1>JSON Forms 4 — Examples</h1>
80-
<p>Pick a renderer set. All apps render the same shared examples.</p>
115+
<h1>JSON Forms 4 Demo</h1>
116+
<p>
117+
A ground-up refactoring of JSON Forms around a
118+
<strong>presentation model</strong>: the core computes everything a form
119+
needs — labels, values, validation issues, constraints — into one
120+
serializable model. This decouples rendering from the core, and the core
121+
from its schema input.
122+
</p>
81123
</header>
82124
<main>
83-
<a class="card" href="./react-material/">
84-
<h2>React Material</h2>
85-
<p>Material UI v9 renderer set (@jsonforms/react-material)</p>
86-
</a>
87-
<a class="card" href="./react-vanilla/">
88-
<h2>React Vanilla</h2>
89-
<p>Plain-HTML renderer set (@jsonforms/react-vanilla)</p>
90-
</a>
91-
<a class="card soon" href="#" aria-disabled="true">
92-
<h2>Vue</h2>
93-
<p>Coming with a later milestone</p>
94-
</a>
95-
<a class="card soon" href="#" aria-disabled="true">
96-
<h2>Angular</h2>
97-
<p>Coming with a later milestone</p>
98-
</a>
125+
<h2>Pick a renderer set</h2>
126+
<div class="apps">
127+
<a class="card" href="./react-material/">
128+
<h3>React Material</h3>
129+
<p>Material UI v9 renderer set (@jsonforms/react-material)</p>
130+
</a>
131+
<a class="card" href="./react-vanilla/">
132+
<h3>React Vanilla</h3>
133+
<p>Plain-HTML renderer set (@jsonforms/react-vanilla)</p>
134+
</a>
135+
<a class="card soon" href="#" aria-disabled="true">
136+
<h3>Vue</h3>
137+
<p>Coming with a later milestone</p>
138+
</a>
139+
<a class="card soon" href="#" aria-disabled="true">
140+
<h3>Angular</h3>
141+
<p>Coming with a later milestone</p>
142+
</a>
143+
</div>
144+
145+
<h2>What this demo showcases</h2>
146+
<div class="features">
147+
<div class="feature">
148+
<h3>Presentation model</h3>
149+
<p>
150+
Renderers are thin views over precomputed nodes — no schema logic in
151+
the UI layer, and only changed nodes re-render. Inspect the live
152+
model in every demo.
153+
</p>
154+
</div>
155+
<div class="feature">
156+
<h3>Pluggable schema sources</h3>
157+
<p>
158+
The same forms, layouts and renderers driven by JSON Schema or by
159+
zod — the schema format is an exchangeable input to the core.
160+
</p>
161+
</div>
162+
<div class="feature">
163+
<h3>Pluggable validation</h3>
164+
<p>
165+
AJV with selectable builds (draft-07, 2019-09, 2020-12), arbitrary
166+
handwritten validators without any framework, or zod itself —
167+
synchronous or asynchronous.
168+
</p>
169+
</div>
170+
<div class="feature">
171+
<h3>Server-side forms</h3>
172+
<p>
173+
The form engine can run outside the browser's UI thread: a Web
174+
Worker stands in for a server, exchanging serialized commands and
175+
model deltas — including simulated latency and rejected changes.
176+
</p>
177+
</div>
178+
</div>
99179
</main>
180+
<footer>
181+
All apps render the same shared examples, so renderer sets can be compared
182+
side by side. Tracking issue:
183+
<a href="https://github.com/eclipsesource/jsonforms/issues/2571"
184+
>eclipsesource/jsonforms#2571</a
185+
>
186+
</footer>
100187
</body>
101188
</html>

0 commit comments

Comments
 (0)