In search of a web do-hickey

Build a simple site

Building web sites the old fashioned way was tedious; lots and lots of tags. Attempts to make them interactive then means dealing with javascript or some layer transpiled to javascript. Basically I was looking for something that display results from a CRUD or REST API and is easy to understand. I looked at React, Vue.js and Svelte.

React

I started with React as it was one of the more widely used and popular frameworks. From the outset it appeared to work quite well. Building simple things was easy and enjoyable. I then tried to have the componenets talk to one another and that is where I lost patience. Either my mind was not congruent with the ways of React or what I was doing was wrong.

Vue.js

I then tried Vue.js and thought it was somewhat better than React. The documentat was great and things seemed to work well. Then I got caught in doing things incrementally and was stuck. As in React, messages and communication needed to go up and down the component chain from child to parent back down to child. This all seemed like an extra layer of unnecessary complexity.

Svelte

Next was Svelte. This appears quite similar to Vue.js and React, but things appear simpler; for now. Components are encapsulated in individual files and "compiled" together. (This might have been my problem with React and Vue.js; who knows). The connection between the components data and view are quite straight forward using a bind.

Here is a simple example. I need to take data from a form that contained strings and numbers. This form data then gets send to the RESP/CRUD API using a PUT action and JSON data. This is all ok, but the software interpreting the data on the server side expects strings to the strings and numbers to be numbers within the JSON data. All of the answers online suggest doing somethinkg like

// Get the form id
var id   = document.querySelector('#form');
// Create a new FormData from `the form`
var fd   = new FormData( id );
// Turn the form data into an object
var obj  = Object.fromEntries( fd );
// Convert object into json data
var data = JSON.stringify( obj )

Sadly, this does not work; it turns all of the entries into strings, even the numbers. My inital thought was I needed to write a function which walked the form grabbing the values and converting them to the correct types; not too hard, but it was need to be correct. But wait, we can bind the data of the form data to the underlying data using Svelte. It was as easy as changing

<input type="number" name="Rocks" value=data[name] />
// to
<input type="number" name="Rocks" bind:value=data[name] />

This small change eliminates an entire function of data conversion into

var json = JSON.stringify( data );