What’s those differences between frontend development and backend development

I have worked for many web projects, like static web pages, Node.js web server, hybrid web app and React Native. I can see there is some miscommunication between backend developers and frontend developers.

As I am more familiar with frontend development, I want to list some obvious differences between frontend development and backend development. And this article can help developers of bot sides can understand each other better.

What I mean “frontend development” includes:

1. develop static web pages, for PC and mobile
2. develop applications by React Native or other cross platform technology

Frontend code need to be downloaded

First at all, frontend code including javascript and css needs to be downloaded by user’s device. And the downloading might happen every time when user access our application. It’s true especially when it comes to web pages. Even there are many ways like long-term caching or service worker to optimize the downloading, it’s unavoidable.

So we will need to consider those factors that will impact the loading performance, like:

1. Code size. This even will affect our technology selection. For example, people might choose preact over react, zepto over jQuery.
2. Network. People usually use CDN to let users download their code more faster. We even needs to consider the concurrent limit of tcp connections. And we should not upgrade your application near the start of a campaign, which will bring such huge traffic to CDN servers that it might crash them.
3. Sometimes we cannot guarantee 100% upgrade rate. When it comes to React Native with code-push, we cannot guarantee all users will get the latest version of our code. We have to consider this in some cases like we want to deprecate some backend APIs

Optimizations

1. We can reduce the possibility of downloading our code by reusing caching as much as possible.
2. We might consider make the downloading task run at background

Frontend code’s runtime is undetermined

Unlike backend that they can choose what kind of machines they want to deploy on, we need to support various devices of users. They come from different platform with different versions. Our code might run on different browsers or different versions of our app when it comes to hybrid web development.

We might depends on some runtime APIs so that we need to do some fallback when the runtime doesn’t support those APIs. This kind of handling will play a significant part in our daily development.

Frontend code runs on user’s device

Obviously, this doesn’t need to be told.

The good things are:

1. We don’t need to consider concurrent bottleneck when huge traffic comes
2. We don’t need to consider those well-known problems coming along with distributed services like data consistency
3. We care less about memory leak since we just need to manage one user’s data. How big is the chance of memory leak if you aren’t developing something like collaboration production tools, figma or google docs for example.

The bad things are:

1. Local cache is untrusted
2. We need to prevent XSS attacks leveraging local cache like localstorage
3. Even the whole user device is untrusted
4. We might consider using our custom keyboard to let user proceed payment
5. Users might use out-of-date devices with poor performance

Frontend focuses on user interaction

Let user stay aware of what’s going on.

If we have been waiting for a considerably long time for the response of a http request or native bridge or runtime api, we must show a loading popup or something to tell user that we are processing.

It’s same to running long-term jobs.

It’s hard to define when user exits.

Unlike backend that it knows when user’s request comes and when we send its response back, it’s difficult to define what events should be considered as user exits current procedure. Beside clicking on close/cancel button, does it counts when user switches to another browser tab? Or when user switches to another app and our app is running background? Or when user just kills our app?

It’s important because we might want to do some clearing before shutdown or exiting even though we might not be given time to do that. If so, we might need to do some checking every time our app bootstraps

One of our important inputs is user actions

It needs some work to define what is scrolling to top or down, long-pressing on a button, zooming in or out, etc.

The definitions are vague and sometimes error-prone since there might be something wrong with our code or user’s device.