HTML Driven Development - Values

In this post we are going to discuss about the values of HTML Driven Development, which is kind of a methodology I have coined in this previous post.

HTML Driven Development, or simply called HDD is like an old wine in a new bottle. A set of core values, principles and practices which promote HTML-centric web applications with rich, modern and interactive experiences, which could serve as an alternative to the existing Single Page Application (SPA) architecture.

Why values are important?

Values are the roots of the things we like and don't like in a situation. They are the large scale criteria we use to judge what we see, think, and do. Making values explicit is important because without values, practices quickly become repetitive, activities performed for their own sake but lacking any purpose or direction.

So when you are following HDD, simply keep these values in mind. Consider them as a guidance mechanism in all the practices you do as part of HDD. Let's have a look at the values of HDD one by one.

Simplicity

Simplicity is not only a value but a virtue to be followed in any kind of task in life. Every intention we perceive and every action we do in our day-to-day activities of web development should ultimately strive towards simplicity. It is the ultimate form of sophistication, but following it or achieving it is not a simple thing. Things get out of hand often, if we did not consciously think about doing them in a simple way.

Performance

Performance is the key driver for HDD. It is the ultimate value for which we are questioning or doubting our existing practices of building web applications. We are responsible for fast-page loads and snappy experiences for our users through our applications, and what if we are unable to give them a performant site or app if we don't consider performance as a value in our development methodologies.

Productivity and Developer Experience

Another important value HDD promotes is productivity of developers working in building complex and experience rich web applications. Do the development activities like bundling, compiling, configuring slow down the developers, or does it serve as a blocker for doing faster iterations? Then we should really rethink those practices whether they actually make sense in a particular context or environment.

Do developers really need bundling during development? Or do our apps really need compiled JavaScript to be sent down to the browser? Why can't we just ship modern JavaScript since most of the browsers now support them through ES Modules via script tag? We should be asking these questions because these activities involving complex tools and configurations are the ones which forms a larger part of our development activities.

I am not recommending to strip down all the bundling, compiling and configurations from our build pipelines or development environments for just making the iterations faster. But what I want is that, we should honestly question the utility and consider the trade-offs of using these systems in the first place.

One Codebase

Maintaining more than one codebase for a single application is always a pain. The amount of work needed to build, configure and maintain the integration and deployment pipelines is huge. And we need more time, money and resources to keep it in a working condition and to quickly fix any issues arising from them on a periodic basis.

But what if we had only one codebase for both our back-end and front-end. We can leverage the existing build pipelines or systems within the framework we are using and save loads of time in integrations and deployments.

Monoliths have always been considered an anti-pattern with the advent of micro-services architecture. But what experience has taught us that, having multiple codebases is simply not the answer to all of our problems. That's why most of the modern frameworks which were HTML-centric recommends one codebase for both your back-end and front-end.

Single Source of State

Try to keep your application state in one place, like on the server, to avoid state synchronization issues and keep your view layers light and fast. Your view layer should only manipulate the state it requires to render the view, not anything else. You should avoid storing large amounts of application data in the browser or the client side.

Search Friendly Routing

Almost every website or web-application uses routing. Discovering a website by changing its URL is a very powerful feature that comes standard with the web. How all of this is handled can vary a lot between different websites and web-applications. By having a search friendly routing system or one with supports SEO out of the box, our websites and web apps are more discoverable and search friendly for our users.

So, if we use server-side routing, SEO works by default and it also embraces the simplicity value which we saw earlier as the primary and fundamental value of HDD.

Accessibility

Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.

Building accessible websites is the core tenet of HTML Driven Development. The web offers freedom and independence that is not available through any other medium. Websites that ignore accessibility, accidentally exclude a segment of the population that stands to gain the most from the internet. Once you become aware of accessibility and make it part of the core value of HDD, you can do your part to ensure the web can be accessed by a broader population.

Energy Efficiency

The internet consumes a lot of electricity. 416.2TWh per year to be precise. To give you some perspective, that’s more than the entire United Kingdom. From data centers to transmission networks to the devices that we hold in our hands, it is all consuming electricity, and in turn producing carbon emissions.

This really came in as a surprise for me when I started exploring about website carbon footprint and how our websites are killing the planet. With so much JavaScript we are using nowadays in our web apps and websites, there is a huge cost we are paying in terms of our environment.

Hence I decided that Energy Efficiency should be part of the core values of HDD, so that we can make more greener websites and contribute a little to the preservation of our environment and the planet.

Also, if you are interested in creating a greener web, please do read and sign the Sustainable Web Manifesto.

HTML Driven Development methodology is still in the nascent stages of development, and I am still figuring out a lot of things with respect to the core values, principles and practices. If you want to make some suggestions or feedback, please feel free to join our Discord server, follow us on Twitter and checkout our website for more in-depth information and resources for the values, principles, practices and tools.