Quick Look – Block Protocol

As an agile organisation, we are constantly on the lookout for tools and technologies that bring improvements to the customer and developer experience. Building small applications to test a new concept idea is something we do frequently, and the promise of accelerating this process is something we care about a lot.

Optimising the speed at which we can prototype ideas and concepts, greatly reduces the time to market for a product. More importantly it reduces the time to getting a proof-of-concept in front of a customer, to get the all-important initial feedback that can steer the direction of a project.

We recently took a look at a new technology that focuses on building and using data-driven blocks. Enter the Block Protocol.

TL; DR

It is a way of building and sharing components for web applications, with a focus on the data side of things.

Looks promising, but not very usable currently. Needs clearer documentation and more examples on how to use it. Worth a revisit.

What is the Block Protocol?

The Block Protocol is an open-source specification for building data-driven components for use in web applications. The emphasis here is on the data input to a given component, or ‘block’ to make the process of handling data less complicated and error prone.

The idea is that any developer can build and publish blocks for others to use and these can be easily integrated in web applications.

What problem does the Block Protocol solve?

The Block Protocol aims to make it easier to pass data between applications. It does this by introducing a data-driven approach to constructing components.

This concept shares some similarities to Object-Oriented-Programming, in that objects can contain data and code.

Getting hands on with the Block Protocol

Let’s start with the documentation. The website is very attractive with many useful images that help illustrate the concepts spoken about. In particular, the example of a ‘person’ data item is useful for explaining the core functionality. On the other hand, the terminology can be a little vague in places, even a little repetitious. You can find yourself having to re-read a section several times to work out what is being said.

The usage documentation could really use some more work. There is a fair amount of information explaining what a block is and how it can be used, but not nearly enough on how to use it. It was a struggle to find any actual examples of how to embed a block within your own application. The guides available essentially just point you at an example project in Github, which requires a considerable amount of reading through before you can even work out where the embed example is.

The process of creating a block was more straightforward. The walkthrough was a little more helpful, with a small example app you can get setup with. Still, this could be improved by having more example code segments within the guide itself for quick reference.

Overall, the developer experience getting hands on with the Block Protocol is currently less than ideal. There simply is not enough information in the documentation on usage to make it easy to get set up with. Each step in the process is an uphill struggle, having to look through code repositories to find example usage. This is far from desirable when you are new to the framework. Ultimately the goal of this technology is to make life easier, and currently it does not achieve this. If it is not easy to use, developers simply will not use it.

Final Thoughts

From a front-end developer’s point of view, there currently is not enough reason to use this in real world projects. With flexible, well established component libraries already out there, such as Material-UI and Bootstrap, the only reason to consider this is as an option is its data-driven approach.

It looks to have potential in the future, but for now it just seems to be another way of writing and shipping components, just a lot less developer friendly. It seems that currently the protocol is geared more towards frameworks like WordPress and Medium, rather than web applications written in React, Vue or Angular.

Hopefully some clear examples of implementation will be added in the future. Something along the lines of “So you have just seen a cool block component on the block hub, here is how you can quickly add it to your existing React App”.