tooling.html

#Coding

tldr;

This is an outline of the tools that I have picked up in the last couple of years that have finally made sophisticated web development feel right; they allow a single person / small team to make quick progress in an increasing complex domain.

Programming language → Elixir
Web framework → Phoenix (w/ LiveView)
Database → Postgres
Web components → Surface UI
CSS → Daisy UI (Tailwind)
Deployment → Fly.io

Why develop web apps?

Why even write web-apps? In many ways web apps are the platform with the least sophistication in developing UI’s, have to worry about all sorts of browser weirdness, a plethora of display formats, from massive wide screens to mobile phones, and a fragmented programming model. If you look at native app development, you can throw out some of these worries and most common problems are handled in a prescribed manner (I am being glib, but there is a recognised way of dealing with things in Android / iOS world). In the world of embedded engineering, often things like user interface never come up, and you have very detailed knowledge of the hardware you are using, giving a sense of control and enjoyment to mastering a particular technology. The simple reason to write for the web is one of open-ness and audience. The promise that I can send a string to anyone in the world and they can load it instantly with no gate keepers in the way. (A few asterisks apply) as long as that site returns some valid response you have made some magic happen. That there are infinite ways to return that string is the joy and pain of working on the web.

Drawbacks

When the web was young, you could create a single html file served by some free space provided by your internet supplier. The basics of text, images and simple styling could all be edited in a text editor (or image editor) and copied to the internet. You could manually create links to your pages and very quickly update and change. From a fringe hobby that was open to beginners, the web has come to impact almost every aspect of our lives, and with it the complexity has mushroomed. The plethora of tools, for deployment, bundling, testing, front-end back-end etc and an unclear consensus on the right approach, has made making even simple site a challenge that has painfully slow iteration time and tools crammed together that were never designed as a whole. The goal of this post is to highlight the tools that I have found after much experimentation that I feel can offer a somewhat complete toolbox that can make web programming fun again.

Audience

A solo developer or small team who has the opportunity to choose their tooling and wants a productive future proof set of choices to get going quickly and easily. It is very opinionated, but as I go through I will attempt to justify these decisions. I also think it has something to offer for existing devs who are either side of the front/back end divide.
For FE devs, the backend can look like a very foreign world and very different skill set. This is not helped by what can often be slower feedback cycles and less visual results. Having to think about persistance, project structure and perhaps more object orientated approach can be a steep hill to climb.
For BE devs, who look at the FE world with its myriad of libraries and approaches that seem to change every few days. Not wanting to deal with a FE build pipeline and having to attack Javascript for the first time. Getting to HelloWorld can be a challenge, getting to something that looks reasonable even harder.

What I look for in tooling?

Programming language → Elixir

Web framework → Phoenix (w/ LiveView)

Web components → Surface UI [TODO]

CSS → Daisy UI (Tailwind) [TODO]

Deployment → Fly.io [TODO]