How Visual Workflows Improve Developer Experience
Understanding the Developer's Journey
Imagine you owned a business selling cookies. You would need to preheat the oven, make the cookie dough mix, scoop the dough onto the baking tray, etc. Every day you follow the same sequence of steps in order to make the cookies. Software development is similar. Developers follow a specific series of steps, called a workflow, in order to deliver software to end-users.
Think of a workflow as a recipe for building software. It outlines the steps needed to take an idea and turn it into reality. This might involve tasks like writing code, testing it, collaborating with other developers, and finally, releasing the new feature to the world. As a workflow becomes repetitive, it can be automated in order to standardize across other developer workflows.
Why Visual Workflows Matter
Just like how recipes can be tweaked or changed, workflows also evolve overtime. As a workflow becomes automated, it’s a shared process that many developers use. It’s important that all developers understand the workflow so that they can collaborate on improving it over time, adapting to the unique needs of each developer, and gain a sense of its effectiveness.
To achieve workflow comprehension, it must be clear to developers what it is, how it works and where it fits within the software development lifecycle. Traditionally, developer workflows were communicated in two ways:
Code: This is the most accurate way to understand the workflow, but it requires contextual knowledge and can take more time depending on the complexity.
Whiteboard Diagrams: These can be helpful for visually representing the flow, but still require knowledge to create and quickly become outdated as the workflow changes.
Enter Visual Workflows
Visual workflows bridge the gap between code and whiteboards. They offer a clear and concise way to represent developer workflows using visual elements like flowcharts and diagrams. Because they leverage configuration files, the workflows can stay in sync while maintaining a single source of truth. Visualizing a workflow also makes them accessible for less technical stakeholders to understand the steps involved in the development process.
Practices like Continuous Integration have established ways in which workflows can be programmatically built and sequenced. Likewise, workflows are codified in configuration files so that they can be version controlled and synced with the visual representation.
One thing to be mindful of is as a workflow evolves overtime, so might it’s complexity. Like a map, there are limitations of the usefulness of a visual representation. Be mindful of these limits, and consider whether collapsing or simplifying information is needed in order to better communicate the workflow.
Balancing Visual & Text Interfaces
Some developer tools take visual workflows a step further. Some visual workflow tools will still require you to make changes within your configuration files and then provide a visual representation. Tools like CircleCI provide a more interactive way to build and make changes to the workflow, displaying both the visual and configuration in concert. The ability to drag-and-drop gives a more tangible feeling for how developers can interact with the workflows they create and maintain.
Another example is Retool Workflows. They’ve made it easy to define a trigger to start the workflow, ways to make queries and pass data from one step to the next. They also ensure there’s a way to test and provide a console to view the logs before it gets deployed for other people to use. In essence, this is the same process as running a script locally and piping the inputs and outputs together.
It’s important to keep in mind that developers will likely not want to be constricted in solely a visual interface to create and manage their workflows. While a visual view might be better for creating and getting an initial understanding of the workflow, CLIs might be better suited for executing and running workflows quickly.
Similar to a cookie recipe guiding a baker, visual workflows empower developers to understand and collaborate on the software development process. These intuitive representations bridge the gap between complex code and traditional diagrams. While code remains crucial for keeping things up to date, visual workflows provide a valuable tool for both developers and non-technical stakeholders to grasp the flow of development, ultimately leading to better developer experience.
Further Reading and Examples
https://maggieappleton.com/programming-portals
https://docs.retool.com/workflows
https://aws.amazon.com/blogs/aws/aws-step-functions-workflow-studio-is-now-available-in-aws-application-composer/
https://www.twilio.com/en-us/serverless/studio
https://resend.com/changelog/email-events-timeline
https://knock.app/
https://slack.com/help/articles/360041352714-Create-workflows-that-start-with-a-webhook
https://temporal.io/blog/lets-visualize-a-workflow
https://codesee.com