We always know less than we should. Creating products is a constant movement into a better understanding of our business needs, market demand, and technology constraints. We embark on a new project adventure to understand and solve a problem. We are so full of ambition and oh so naïve!

Our clients come in full of excitement, too. And maybe even bring some pain and baggage from previous (or current) experiences with technology and the creation of it and their ideas of how products are made. We bring to the table all of our ideas of how the client works, or how their industry operates.

But here’s the thing: we have an incomplete and inaccurate view of what we’re trying to express in very detailed instructions for a computer to execute. We work in languages and systems that are frought with side effects. Even if documentation was complete and perfect, our understanding is not. It is our understanding that is required to author the code and move the bits around to build these products.

The tools and processes and patterns we employ should embrace naïvety, changing requirements, and evolving understanding.

Declarative and Imperative UIs

I’m speaking primarily to the user interface of products because this is where I spend the majority of my time. I can’t speak with confidence to domain models and distributed systems, though I suspect that anyone with some expertise in these other worlds would echo these sentiments.

Imperative User Interfaces

Imperative programming—which is the most likely kind of programming that you do—does not generally take misjudgements with much grace. Imperative programming is when you painstakingly write each step of the process for the computer. In browser-UI land this might look something like the following:

  1. Render each of these email messages with this exact DOM structure.
  2. Stick that structure into a DOM node with the id email-messages
    (2b. Hope there aren’t more than one DOM nodes with that id.)
  3. When you hear a click event on an email message, replace the DOM node with id email-messages with the DOM structure for an email message that looks like this (pretend there is a complex HTML template here)
  4. Decrement the unread count on the sidebar.

Cake, right? Now at any given point in time—could be the same general time by another developer, or by yourself in a week when you return to this code—the backend now has an API to get the unread count that you use to populate that data. Without changing the previous code at all—maybe even completely unaware of its existence—the following instructions are added to the codebase:

  1. Every 10 seconds fetch the unread count from https://website.com/api/unread-count
  2. Grab the unread count from the response and render it in the sidebar.

We could keep going with evolving requirements like showing the unread count in the favicon, or show the unread count alongside the username in the header bar, but all of these situations are only more examples of the current bugs in our simple system.

What guarantee do you have that the unread count in the left navigation is correct?

None. At all. The source of truth for this application is non-existent and arbitrary pieces of our application code can touch anything else. You may argue this problem is confined to hostile runtimes like the browser, but I would open up your bug tracker and point out the many scenarios where you have issues due to similar practices.

Declarative User Interfaces

Using a declarative programming model, the UI becomes a projection of the app state. I am of the opinion that a UI is the expression of your product, which is all of the business logic that culminates in a given application state.

Twitter’s core product is not twitter.com, or the Twitter iOS application. Their product is the network of connections and conversations you have and are able to tap into. Twitter.com, Twitter for iOS, etc. are interface expressions to their product.

Last year at feops conf, Seth Walker made a comment about the throwawayability of UI code. Etsy is a heavily data driven company that is running numerous experiments at all times. The ability to write a local UI experiment that doesn’t bleed into other aspects of the application are extremely important.

A global and stateful environment like the DOM and CSS actively work against you attempting to do this at scale. At Skookum, we found that React helps us tackle concerns at the appropriate level of abstraction. This is a topic you will see us talking about more in the future, and much has been written by others on the subject already.

With a declarative paradigm, the previous example becomes something more akin to this:

  1. App state -> UI
  2. Change app state due to that 10 second interval AJAX call -> UI

All state should flow through the same pipeline to generate a predictable result. React and Flux are not the first to these ideas, but they are modern implementations of these ideas; implementations that operate well in stateful environments and at scale.

Componentization

The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application. Justin Meyer, author JavaScriptMVC

Service-oriented architecture (SOA) is the approach we’ve (we referring to our industry, not only us at Skookum) been taking to build our back-end services that power our businesses. Marrying ourselves to one technology or one codebase has not panned out on the server, and it hasn’t worked out on the client, either.

So let’s take a moment to talk about the browser world. We have an unknown number of user-agents currently active in the world. (Maybe it’s knowable, but it’s not grokable. It is past the number that a human can understand, comprehend and hold in their head.) The screen size, capabilities, and power of these devices are all unknowns. The segregation of HTML, CSS, and JavaScript are not our concerns. It’s these interactive expressions of our data and how they compose together. It’s how those strings of HTML and CSS get to the browser and how they are updated in the browser.

Are the tools we’re creating and choosing to implement helping or hindering us from the goals we are aiming to achieve? While some frameworks and tools help us write less, do more, and move faster, other frameworks help us think more, consider more, and comprehend more.

Time and again React.js and kin have provided sane evolutionary paths forward from poor judgements, whereas every other tool I’ve used did nothing to protect me from myself.

For Humans, By Humans.

We create for humans. Our creations manifest themselves through computers. But we don’t write code for computers. We write code for humans. The humans who come after us to maintain systems. To evolve systems to new business requirements. To evolve systems to new technology requirements.

Let’s create and use tools that make us better, stronger, safer. Let’s not simply continue to make the same buggy software faster.