Did you know you can create Single Page Applications (SPAs) without Javascript?
Try SimpleUI for a for a smoother, more productive workflow. SimpleUI is based on Clojure, take a quick look if you have not used Clojure before.
DocsThe key idea of SimpleUI is to expose UI components as endpoints. Each one can update on its own, just as if it was a frontend component. Unlike with frontend frameworks there is no js bundle because everything is rendered server side.
Fix the code so that 'Goodbye' becomes 'Hello'.
Good effort! Next problem
let greetInput = $('#greet');
assert(exists(greetInput))
greetInput.value = 'Fred';
assert(exists('#submit-greeting'))
await click('#submit-greeting');
let responseDiv = $('#response');
assert(exists(responseDiv))
assert(responseDiv.innerText === 'Hello Fred')
Source
Code Output
Htmx is what gives SimpleUI its superpowers. In particular you can use htmx attributes which start with hx-* to control UI.
By default each defcomponent updates itself.
Set hx-target so that it updates the adjacent div instead.
Tests will start when you click the button under Code Output
.
Good effort! Next problem
let subcomponents = $$('.subcomponent');
assert(subcomponents.length === 2)
By default SimpleUI submits http parameters with regular url encoding so that they appear
as strings on the server. It can be convenient to
cast to other forms such as ^:long
or ^:boolean
when needed.
Update the code so that the button increments the counter instead of decrementing it.
for (let i = 0; i < 5; i++) {
await click($('#change-number'));
}
const finalValue = $('#curr-value').innerText;
assert(finalValue === '10')
The Doors of Durin, Lord of Moria. Speak, friend, and enter.
Good effort! Enter the mines
assert(exists('#password'))
$('#password').value = 'Edro, edro!';
assert(exists('#speak'))
await click('#speak');
assert(src('.door') === '/moria_closed.jpg')
$('#password').value = 'Mellon!'
await click('#speak');
assert(src('.door') === '/moria_open.gif')
Source
Code Output
Try setting up your own project! The Kit framework provides an excellent starting point, follow the instructions here.
SimpleUI advertises as Javascript free, however this tutorial makes a small exception to safely execute unknown code. Read the details in the source.
Lastly, don't forget the video that started it all (and gave SimpleUI its name). See below.
A great talk.