We started with a flat CSV file. Then broke it up into normalized tables. And after that, wrote a script to move that data from the file to a relational database.
Now what?
Well we’re gonna build an application on top of it that’s what.
First we’re gonna start with the CLI. We’re developers the terminal should not be scary.
It lets us think in clear inputs and outputs.
I want to run deno run this-script.js -input "some input" and get a deterministic output. That’s a fancy way to say the same input gives the same output.
We can write scripts to do a lot of things. Search for data. Insert records. Update them. And even delete.
Once we have a lot of scripts. We can take that logic and expose it with a cleaner interface, a very basic TUI.
Boom! Now we have a complete application.
But we’re not stopping there, next we’re adding one more layer. Standardizing the inputs and outputs with something called a REST API.
We use HTTP verbs like GET, POST, PUT, and DELETE to define the kind of action we want to perform. And then expose it in what’s called an endpoint.
Then we can send a request payload in JSON format to the endpoint, run the code to process it, and return a response in JSON. (We can use other formats, JSON is the widely used one, and no, I am not teaching y’all SOAP).
What’s after an API?
Well in the 90s, we had this wonderful piece of technology making its way to the general public. The web browser.
Building one is well beyond the scope of this course, but it is a wonderful abstraction to build on top of.
The web is optimized for sending stylized virtual documents, HTML and CSS; more importantly rendering it to a screen.
The browser, client, talks to computers, servers, over HTTP.
So to wrap it up. We have a REST API that runs code. Said code interacts with the database, and returns some result to the user.
First we need to actually build a basic UI to allow for user input and a button kick off the call to the endpoint.
Right now we’re getting JSON, we’re going to modify it to return JSX.
That JSX will then update the browser.
And would you look at that, we’ve now built an application thrice.
A note on the stack we will use
I’ll address it here before the lessons, we are using HTMX and Tailwind, no React, Solid, Svelte, whatever the framework du jour is. I think HTMX is a clean abstraction that reinforces the fundamentals, we are making AJAX requests to a server and updating the document, DOM. We’re using Tailwind because I believe it involves less context switching that vanilla CSS; this is a course and I want to optimize around maintaining a flow while drilling fundamentals.
So far in my career, I’ve heard Knockout, Ember, Meteor, AngularJS, Angular, React, Vue, Svelte, and Solid. I’m tired of JavaScript bloating my web pages, making them slower to load and harder to debug. Quite frankly, the only one that excited me was Astro, shipping no JS to the client by default is the first step to a better internet.