This is going to be one of those once upon a time articles so buckle up and prepare for a story.
When I wrote my first lines of code I wasn’t quite convinced that I would be able to do that for a living. For me it was something that people with extraordinary math and logical abilities could handle. Nevertheless I pressed on. I went through a bootcamp, got some projects in my portfolio and managed to land an internship at a small digital agency.
At this point I found everything in the software world amazing so I was more than eager to face any challenge that came my way. However, nothing grabbed my interest as much as AJAX and Single Page Applications did. This was way back when the first version of Angular (AngularJS) was the framework to use. This tool revealed the true power of the web to me.
To UI Engineering...
I could create shapes, forms, animations and interactions with code. The ability to add and remove elements from the DOM dynamically, to send and receive data in real-time based on user input - it blew me away.
Ever since I started programming professionally I’ve loved the connection with the people on the receiving end of the product. I love to see how they use the tool, how they interact with it and how we can make it even better. There are a lot of constraints that are outside of our hands so we need to do everything we can to provide good UX.
But "With great power comes great responsibility" - as uncle Ben says. This complexity introduces a lot of potential problems which we need to deeply consider when building rich front-end applications.
The Challenges of UI Engineering
Being an UI engineer comes with its own set of problems. Working on the first thing that the user sees about a product means that you don't have much room for mistakes. Your work is what the users interact with. Even though they are using the whole technical stack under the hood - the UI is the gateway through which they are acting. Let's discuss some of the challenges that UI engineers face.
It's Not Just About Style
Yes, working on the UI you need to have an understanding of what looks good and what doesn't. However, having a pretty interface doesn't make it usable. It's not just about having the proper colours, animations and shades but about providing consistency and intuitiveness. There are numerous applications that look stunning but are hard to navigate. As UI engineers we don't want to be in this boat.
We need to provide a seamless and consistent user experience. Every person that uses our product goes through a subconscious phase of exploration. The way that we position elements on the screen teaches the user what they can expect. In other words - if we put a primary button on the right we need to stick to that decision throughout the app. Often times we work in unreliable conditions.
Give Feedback to the User
We need to fetch and send data across the network - there are countless possibilities for something to go wrong. The user needn't know about all the complexity that is going on under the hood. We can use techniques like optimistic updates or loading screens to hide the inner workings of the app. It's about what the user perceives, not what is actually happening.
As UI engineers we have the option to bend time and space a a bit. We can show data before it is actually persisted. There are some subtle tricks that we can use to have users think that things happen faster than they actually do
Guiding the Experience
We need to guide our users through the different actions that they can take. We can't just put a giant form on the field - we need to make the process interactive, enjoyable and safe. Maybe we can split that form in multiple logical steps that get stored in local storage in case they leave the site halfway through.
We can also give them immediate feedback when they are filling the fields so they know that the data they've put is valid. We can prompt them when they are closing the tab to make sure that they don't close the app on accident. Those are just the basic considerations for a simple form.
Data and Consistency
Many applications are about some form of data presentation. It's critical to provide consistency when someone is reading or updating the data that they are storing with us. Imagine updating some record, then going to another screen and seeing old data.
This is incredibly confusing. Another example would be showing stale data somewhere due to incorrect cache busting. All this could cause a lot of trouble and frustration to the people using our tools.
I truly love working on the front-end because I feel that my work provides immediate value for the users. Dan Abramov also has a really good article on the Elements of UI Engineering.
... and Back Again
As time went on I understood that while the UI was the closest part of the application to the user, this didn’t mean that the other pieces in the puzzle produced less value. If the interface creates the main part of the user’s impression no program can be complete if a single piece is not working properly.
I decided to take everything I’ve learned so far in the software industry and all the product knowledge I’ve acquired while working for startups and once again move to a more full-stack role. A position in which I’d be able to touch multiple parts of the stack at once and make sure that our users get the best experience possible.
While I still hold affinity for polished user interfaces, I now deeply admire well designed distributed systems. Highly Available services that make sure that even if there is a missing piece from the picture our users will still be able to reach their data. Secure systems that protect the users from harming themselves. Scalable products that can seamlessly scale and potentially serve millions of people without breaking a sweat.
A good UI is just the start. In order to create a truly amazing product you need to apply the same principles and responsibilities all across the stack. The whole organisation, every team should look at their work this way.