Client-Side Development: Enlighten Your Users With the Best User Experience
Regardless of your rap music preference of the East Side vs the West Side, Client Side development is an important aspect of your engineering organization. Client-side development is centered around developing client-side applications. Mobile applications, websites, desktop apps are all examples of a client-side application. When your users interact with your product, the only thing they see is your client-side user interface. That’s why building your client-side applications right is crucial to deliver an enlightening user experience.
A typical client-side application consists of the following main components:
All code powering your UI runs in the main thread of the application. The main thread is the thread responsible for rendering your UI. You want to be mindful of the operations you perform on the main thread. Heavy work should be offloaded to the background thread instead. This way the UI stays responsive and the users have some great user experience even if there is some heavy work happening in the background at the same time.
The networking layer’s main purpose is to fetch and save the data to the Backend API. This layer performs the actual network requests, parses the data coming from the API. Last but not least, it saves the parsed data into the Data Store Layer in the shape the application expects it.
The datastore layer is responsible for storing and persisting the data on the client (either in memory or on disk). UI layer gets its data from the store as it changes. The networking layer updates the data in the store as it comes from the API. This way both the UI layer and the networking layer are abstracted and decoupled from each other and can be developed independently.
Because your client-side applications’ main function is to interact directly with the user, the primary focus is on the following areas.
Your users will be using your UI every single time they interact with your product. That’s why it’s important to have a beautiful, aesthetically pleasing design for your app. When you hold the phone with your application in your hands, or when you have it on the screen of your desktop computer, you should wow over how great the look and feel is. The elements should be clearly positioned on the screen, the user should be able to navigate to each part of the app effortlessly. Adding subtle animations to some UI elements where needed makes the application UI really pop.
Your client-side application runs on a device with some limited resources. That’s why the performance is so important because you don’t have the infinitely scalable capacity like you have on the backend. The key here is to offload all heavy work from the main thread to the background thread. Being mindful of your memory usage and your disk usage goes a long way.
Your backend server is always plugged into the outlet and has access to the Internet. Unfortunately, it’s not the case with client-side devices. Your user's phone or a laptop can lose Internet connectivity at any time, run out of a battery, or even run out of memory since the capacity is limited. Client-side operating systems are very aggressive with freeing up precious resources. On Android or iOS, your app can be just killed by the operating system at any time when your app is in the background. In addition to it, your app should never crash at all costs. An app crash has a massively negative impact on your user growth and retention. While implementing your features on the client, lean on the safe side, write a lot of safeguards and null checks. Save your data locally or on the server so you can pick up where you left off in case the user quits the app and opens it at a later time.
Writing tests on the client is very straightforward at the networking level. You’ll be able to write some good unit tests which are fast to execute. On another hand, UI testing is more complicated, less flexible, and that’s where you get the most coverage and benefit. That’s why we recommend writing most of the unit tests at the networking level and writing a few UI tests for the major flows in the app. While writing UI tests, it’s important to keep in mind that some elements can appear on the screen with some delays. In addition to it, it’s best to mock the network calls to avoid some unexpected test failures due to network latency.
Another thing to keep in mind is that there are many variations of client devices, browsers, and operating systems. We recommend running your automated and manual tests on the farm of devices. AWS Device Farm, Firebase Test Lab, Cross Browser Testing, or Browser Stack are all great solutions you can use to solve this problem.
Your CI/CD pipeline should be capable of testing and building your apps for testing and distribution. We recommend TestFlight for iOS, Firebase for Android. For your web and desktop applications, you can use your internal test environment.
As you can see, client-side development is a different beast from your backend or infrastructure development. With the main focus on look and feel, your app’s mission is to deliver the best user experience possible for the user while using the limited resources efficiently on the device. Due to the wide number of combinations of client devices and operating systems, it’s best to equip yourself with some cross-platform testing tools. Your CI/CD pipeline should be capable of building and distributing apps for testing and production use for all platforms.
Diving into the client-side development can be overwhelming at first, especially coming from the backend side of things. If you need some help with getting things set up, don’t hesitate to reach out. We’ve done it right many times for some great companies.