What is Client-Side

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.

Client-Side Application Architecture

A typical client-side application consists of the following main components:

User Interface

All visual elements like buttons, different color backgrounds, images, etc, and most of the interactions between them are your user interface. At this level, you’ll work primarily with the layout frameworks like UIKit / Swift UI for iOS, your favorite Javascript and CSS framework for your web application like React, Vue.js, Svelte, etc.

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.

Networking Layer

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.

Data Store

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.

CoreData on iOS, Vuex for Vue.js, Redux for React, are all examples of a data store for your client-side application.

Focus areas

Because your client-side applications’ main function is to interact directly with the user, the primary focus is on the following areas.

Look and Feel

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.

Performance

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.

Resiliency

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.

Automated Testing and CI/CD

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.

Conclusion

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.