UI Development Workflow Proposition

Kumar Bhot
webf
Published in
3 min readAug 6, 2018

--

It is that time when the server-side APIs start integrating with the newly developed User Interface, all hell breaks loose.

Harshal was experimenting with Elixir to write Functional Tests for the backend APIs. During this experiment, which is complete in its essence but will need further meaningful enhancements, he also ended up creating automated API Docs through the Test Specs.

A mocked sample of (HTML) API documentation generated from Functional API Test Specs

There is a small utility for Elixir Phoenix which helped him achieve this.

I think, this is brilliant. If the Functional Tests for the APIs — which validate the output for a given range of inputs — can generate the API Docs, it would be the most optimal version of the API Documentation — the one that will precisely get consumed by the end-to-end user workflows. And if so, then the best guys to write these Functional API Tests are ‘UI Developers’. Since they are the actual consumers of those APIs, they can precisely write the request ranges to expect corresponding responses.

The best guys to write Functional API Tests are UI Developers

Imagine a development workflow that the UI can follow and become extremely efficient with the delivery; on the way, also addressing the biggest pain of UI Development— the API Integration.

UI Development Workflow Proposal

After the user interaction (UI) workflows are visualized and agreed upon, the UI developer will usually start breaking down the User Story into their tasks. Along with that, they should also write the API specifications (expected request/response) for each of the server-side calls the UI would intend to make. But it would be an inconsequential effort if the delivery from API Development cannot be validated against this specification. To solve this, the UI developer must write the Functional API Tests to support their API Specification; these tests will obviously be failing at creation. They can then go back to the UI development with mocked APIs while the API Development progresses in parallel. Only when the entire set of Functional API Tests pass, the UI and the backend APIs can be assumed to be ready for integration.

Summary

  • UI Developers should add the Functional API Tests, as they are the ones who consume the APIs
  • The API Development can be called complete, only when these tests pass
  • If the API Documentation is generated from Functional API Tests, it can serve its best purpose towards UI/API Integration

--

--