Frontend and Backend and beyond
There is a lot of talk going around in programming circles about the fabled full-stack developers. What are full-stack developers ? What do they do, and why is everyone talking about them? Let’s try and find out what full stack developer does, and what skills they need in their day-to-day job.
To put it simply, a full-stack developer, is a developer who can work on both the frontend and the backend of an application. The term started to gain notoriety recently as JavaScript matured and has become more widely accepted (and is used for both frontend and backend).
The frontend vs backend distinction is separation of concerns put into practice. The frontend presents data to the user and collects data front the user (through interactions the user is allowed to have with the app) and the backend processes the data, adds more data from various data sources (a database or other services), applies some transformations and returns some form of result to the frontend to update the view.
In the old days, frontend and backend used to be closer together. They often used to be part of the same project (Model View Controller style). Nowadays, it’s common to have a backend API that servers lots of frontends: maybe a public website, an admin interface and a mobile app.
Table of Contents
Frontend
The frontend is the bit of the app / website / code the user interacts with. It’s responsible for presenting data to the user and collecting data from the user and forward it to the backend.
As the frontend is the part of your project that gets surfaced to the user you should make sure the users gets the best and experience possible. Nothing takes a user off your site faster than poor user experience. This can be in part caused by slowness to respond (from your backend) or by poorly designed interfaces.
Some principles that you can use to guide your UI design:
- The user should know where they are in your app and what they can do next.
- The user should find what they are looking for in your app (read this as: important bits should be easiest to access)
- The user should find using your app intuitive (things should be where they are expected)
Although not exhaustive, a series of skills usually associated with frontend development are:
- Web based languages: HTML / CSS / JavaScript / TypeScript
- Frameworks: React / Angular/ VueJS
- Testing: Jest, Mocha, Selenium, Karma, Puppeteer, BrowserStack, Webdriver.
- Non-technical skills: Design, Attention to details
Backend
The backend is the bit of the app that does all the heavy-lifting. It’s the part that encapsulates the bulk of the app logic. It’s generally hidden from the public and provides access through a controlled set o primitives (mostly an API of some sort)
As the important computing happens on the backend performance is really important when building the backend.
Usually the backend runs on a small set of powerful machines. Access is controlled and there is usually more logging and monitoring put in place.
Skill associated with backend development:
- Programming languages (these can work on frontend as well): PHP, Java, Scala, Rust, Go, JavaScript (to some extent)
- Frameworks: Spring (Java), Akka (Scala), NodeJS (JavaScript), express (JavaScript)
- Testing: JUnit, Mockito, Jest, Sinon
- Additional skills: Data Structure and Algorithms.
Middleware
The middleware is usually the bit of code that sits in front of the backend. It provides additional functionality to the backend. Middleware usually provides a set of features that are shared between most projects. The features are common enough it’s easier to configure some ready-made solution rather than implement them from scratch in your backend.
Some features provided by middleware:
- Load balancing
- Caching
- Access Control Policies
- Logging
- Alerting
Plumbing
In addition to frontend / middleware / backend, there is more needed for a project to succeed, stay around and prosper.
- CI / CD – building and deploying a project is a complicated process, better let a computer do it for you. Build it once and deploying becomes as simple as pressing a button. Just make sure you have a way to roll back a deployment just in case something goes wrong.
- Automated tests – The best way to make sure the tests run is to make them run automatically. You can even integrate running the tests as part of your CI/CD process.
- Scaling – Sometime a single machine is not enough. But running servers is expensive, so you want to run them when you need. You can save some trouble (and cash) and build in an automated process that spins up more machines when your servers are under heavy load.
- Monitoring – Systems break, and they break all the time. It’s a good idea to set up some form of monitoring so that you can have some information to dig through in case something bad happens.
- Database management – Although the database is part of the backend I am putting it here twice because of slightly different sets of skills necessary. Beyond just running a database needs to be able to run fast and support future growth. This can start a very interesting discussion about database design, optimization and maintenance, but we’re saving that for some other time.
Now go out there and build something nice!