Optimistic vs Pessimistic Rendering
While going through the ups and downs of learning Javascript, I started to notice the terms “Render optimistically” and “Render pessimistically” and I personally had a very pessimistic approach to what any of that meant. It sounded really important as information was being rendered to our User Interface , but was curious to the fact of when and why a developer would render one way over the other.
While reading deeper into understanding the use of Optimistic and Pessimistic rendering i quickly realized it all comes down to user interaction and user experience with the specific web application. I also realized as a developer it is very important to distinguish the difference between the two, to create the best experience for the user which goes hand in hand with determining success of your web application.
Optimistic Rendering
Optimistically rendering information means said information will render on the DOM, BEFORE actually being added to the database. When we think about the user interaction, we can use the example of a LIKE button on any of your favorite social media apps. When you click on a LIKE button, you as the user would like to see that LIKE update right away but that does not always mean that it will be added to the database right away ,as the user in that very moment, you most likely could care less if that information was added to a database or not. This Optimistic approach takes that user mindset into consideration and renders that LIKE update regardless of having a successful status.There is always a slight chance that the number of likes might not persist in a case where the user might have a faulty internet connection. Here is a step by step break down of what is behind the scenes of an optimistic rendering
- a user clicks a Like button to Like a Tweet
- Twitter renders user’s Like on User Interface
- a call is sent to the server with the user’s Like
- the server saves the user’s Like and usually will return an error message in case of a failure.
Pessimistic Rendering
Pessimistic rendering makes no assumptions ,we have to wait for a response from the server for our event to take place. The entire flow of our web application is based on the servers response . An example of pessimistic rendering is, the user submits an application online ,a call is sent to the server for a response, based on the servers response ,that will be the determining factor if the updated application will render on the user’s interface or if a failure message will be rendered . Here is a step by step break down of what is happening behind the scenes of a pessimistic rendering.
- a user clicks a submit button to apply for a job
- a call is sent to the server with the user’s job application
- the server saves the user’s application and returns a success message if that call to the server was successful , or an error message in case of a failure.
As a developer, it is important to think about user experience when it comes down to making the choice of using an Optimistic vs Pessimistic approach. It is also important to make the realization that one approach is not better than the other. It truly all comes down on how you want your application to flow, as well as the significance of said information being rendered. In our examples above, to most people, liking a tweet and submitting a job application hold a different significance, seeing the number of likes on a tweet not change when you go back to that tweet is a tiny speed bump in our user experience, your dream job not receiving your application could be a life altering speed bump. Once again this choice all comes down to user experience.
Happy Coding!
