Apart from being simple, HTML is declarative: we describe what we want to see or happen, and not how that happens. That reduces the chance of making an error. On top of that, HTML has another remarkable feature: when an error does occur, it is not followed by catastrophic failure.
When a browser comes upon a HTML error1, for example an unknown element, it will ignore it and render the document anyway. If we instead chose XHTML, the evil twin of HTML, we would only get an error message. That’s why nobody sane uses it. But why is HTML relevant? Because we can use it to build the foundation of our web service, one that is resilient and reliable. In the world of front-end development, that is a remarkable thing.
Links and forms
From a browser’s point of view, most websites stand on two pillars: navigation and communication. We navigate using hyperlinks, a declarative method of linking two documents together that we know as the humble, but powerful, links. The second pillar is communication between a browser and a remote server. Links can be used for that, too. However, if we want to send more than a simple data, we use a different method: forms2.
Form has a simple and declarative interface. First, there is the attribute
action, which specifies the address where a remote server receives our data. Content belongs to
pattern attributes limit what can be sent. The last necessary element is the
type — unless stated otherwise — is
submit. It is used to, well, submit the form.
button. By calling
ev.preventDefault(), we stop the browser from following the standard procedure. What happens next is completely in our hands. At the very least, we have to manually extract data from the form, send it to the server and handle the response. Since it’s an AJAX call and not a normal request, we expect the response to be in JSON format, not HTML, which we indicate using the HTTP header
However, if we leave the example as it is, we lose data validation. The browser would normally take care of it on its own based on our declarations on the
input elements, but since we got cocky, we have to do it ourselves. In case of an error, we need to show some kind of message, too. That’s when we start longing for the magic of simple and declarative code, because all of a sudden, we not only have to take care of what should happen, but also how that happens.
„Minimum Viable Experience”
Let’s try the principle on a service like Google Docs. The elements
form are our foundation. They allow us to send data to a remote server which then saves it in a database, thus providing an access to the data from anywhere. With the basics built, nothing holds us from enhancing the basic experience. By sending the form automatically using AJAX when the content changes, the user doesn’t have to submit it manually every time. In the next round of enhancement, we save the data in
localStorage so that it won’t get lost if the remote server is not available, and send it only after it’s back online. To finish, we could use WebSocket to allow for more users work with one document at the same time.
div elements that are by design without meaning and function.