6 Core Principles of Bug Free UI
Over my career I’ve written a lot of UI code. What has always interested me is figuring out how to most efficiently create UIs that are bug-free first time.
Even after working with multiple frameworks (backbone, knockout, angular, ember, react, vue), I always come back to six core principles. These principles transcend libraries or frameworks and apply to both UI applications and full-stack web applications.
Using these principles bugs are caught in the development phase, as you discover, test and iterate. These principles lead you to bug-free UI development and ensures good understanding of what is being built by reducing complexity
As there are no bugs, there is no need to revisit what you’re building every sprint whilst providing excellent documentation for yourself and the next engineer that visits the code.
What is more, if everyone on the team shares the same principles, then team productivity increases.
Finally, engineering principles are a way to see past the current frameworks as they come and go. They provide stability in a rapidly evolving world of software. Frameworks will be replaced, but principles endure.
Here are the 6 principles that create Bug Free UI:
- One single source of truth
Data should be held in one location, duplicates of that data should be by reference only. - Test models thoroughly, test everything else less
- Separate core logic from the framework
Core logic that is related to solving a business or domain problem should exist outside of a framework. - Model all state in an application
Create a structured representation of the system's state - Ensure UI components can be loaded separately from an application
- Compute properties when possible