The three kinds of web development are front-end, back-end and full-stack. Each of these arenas have their own specific priorities, but all must work together effectively to produce functional, optimally performing websites that fulfill certain goals. Each works towards its own goals while exchanging the information over an agreed upon set of rules, also known as a data contract.
What is a web development data contract?
To understand how the web development data contract works, it’s important to review everyone’s priorities.
- Front-end web development is concerned with two major things: user interface (UI) and user experience (UX). Essentially, what the person interacting with the website sees and why. This includes visual aspects, like colors, shapes, background, buttons, navigation elements and imagery. It is also focused on how video, sound, animations, form fields, and other interactive elements will enable a user to accomplish different tasks on the site. A simple analogy that works here is an automobile. Front-end development thinks about the steering wheel, the intuitive layout and function of all the buttons and controls within your arm’s reach, plus the flow and ease of use for you as a driver. A lot boils down to user focused interaction.
- Back-end web development is alternatively concerned with the three s’s: security, storage, and speed. There is major focus on data organization, so that it can be delivered to the front end reliably, safely, and efficiently as possible. The back end doesn’t want to keep the front end waiting… whether there are 10 users or 10,000 users. Back to the automobile analogy: when you accelerate, then turn the steering wheel, the back end is the engine, transmission, and suspension that respond to those controls and deliver the performance you expect. I.E., going faster and moving in the right or left direction safely.
The data contract usually starts with the front-end web development team saying that it wants:
- THIS information
- delivered THIS way
The back-end web development team says we will send THIS information, delivered THIS way, but:
- we need information sent THIS way
- and the output needs to return THIS way
This data contract negotiation continues on an ongoing basis for everything that the user interacts with on the website. Most of the time, the system is waiting for user input, then optimized to send back the quickest answer between the front-end and back-end of the data contract.
How does full stack fit into the web development data contract context?
Full-stack data development is not just a merging of front-end and back-end web development. For smaller projects, a full-stack developer may do some of both areas, negotiating the data contract internally instead of between multiple organizational teams. However, full stack is really more focused on the overall architecture of the website, as well as how the data contract can be negotiated most effectively.
- Full stack requires a clear understanding of the front-end web development requirements and preferences.
- Full-stack also requires a clear understanding of the back-end web development performance constraints and scope of scalability.
They essentially help negotiate through issues happening between the front-end and back-end, applying a wider perspective over the entire system and processes dedicated to the right outcomes. They may have a stronger focus on one or the other, depending on the product or objective.
Best practices for using three kinds of web development to create amazing websites
Now that you understand how the three kinds of web development negotiate the data contract, there is one more key thing to consider:
- Does the intuitive front-end web development team, who understands the interaction needs of the user, completely grasp the site’s functionality design?
- How will the responsive and thorough back-end web development team avoid including assumptions or bias in the coding that can produce unintended or undesirable user results–even if things are delivered according to the data contract spec?
- What critical failure points are identified by the full-stack web development team, and what steps are taken to mitigate them as new features are incorporated on the website?
All of these potential issues point at the need to holistically understand a website’s functionality and goals. Here is a brief excerpt that illustrates the principle in action:
“Interaction designer Scott McGregor uses a delightful test in his classes to prove this point. He describes a product with a list of its features, asking his class to write down what the product is as soon as they can guess. He begins with 1) internal combustion engine; 2) four wheels with rubber tires; 3) a transmission connecting the engine to the drive wheels; 4) engine and transmission mounted on metal chassis; 5) a steering wheel. By this time, every student will have written down his or her positive identification of the product as an automobile, whereupon Scott ceases using features to describe the product and instead mentions a couple of user goals: 6) cuts grass quickly and easily; 7) comfortable to sit on. From the five feature clues, not one student will have written down ‘riding lawnmower’.”
Cooper, A. (2004). The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy & How to Restore the Sanity (pg. 48). Sams Publishing.
Even when a website looks good and performs work according to initial specification, online technologies are constantly evolving. All three kinds of web development should keep usability in mind, regardless of their individual priorities. That way as time passes and technology changes, your customers or clients continue to receive an experience they expect and value.
This brief overview article is the first in a four-part series diving more deeply into the three kinds of web development. If you are interested in being the first to receive this blog content directly in your email inbox, subscribe to our monthly newsletter.