- I. Definition
- II. Roles
- III. Dependencies
- IV. Examples
- V. Review
Definition
In web development, interaction and website functionaltity can often be conceptualized in terms of a "front-end" and "back-end".
Front-end is what the general public visibly interacts with. It is the code and functionality that loads into your browser on your computer. Sometimes this is called “client-side” code because this is the technology that you, the client or user, have downloaded into your web browser to interact with.
What does a front-end (FE)developer do? They work in code languages your web browser understand, like HTML, XHTML, CSS, and others to make your browser display the graphic designer’s creations just like they were envisioned. The front-end developer deals with, fonts, layout, image placement, inserting video/other media onto a webpage. The best front-end developer's have something of a designer's eye for detail so they can translate the vision of the graph design into something functional while not loosing the details.
Beyond markup languages, FE developers code in JavaScript, PHP and others to make elements on the page active and functional, like drop-down navigation menus, images that change when you mouse over them and new popup windows.
The FE developers also need to know how to place special code in their front-end efforts to allow for dynamically generated content and other interactions that come from the back-end. We get into the relationship between front and back-end code below and on the next tutorial section. Sometimes these code elements are called "hooks" because these are the spots in the front-end layout that directly connect to the back-end.
Front-End to Back-End
The front-end is also the gate to the “back-end” where complex data handling functions take place. Think of when you shop online. The tasks you complete in a online store (selecting something to buy, placing it into a shopping cart, entering your credit card) all happen in the front-end interface that you see in your browser. What you don’t see is the webpage sending information from your browser over your internet connection to the website’s servers, otherwise known as its “back-end”. We will get into back-end coding next chapter, but its important to remember that what you see in your computer monitor is the front-end “shell” or layer that is responsible to pass information to the back-end.
Roles
Front-End Developer – Their job is to take the visual language of the designer, the interactive requirements of the functional specifications, and the copy of the Editor and create the actual interface that a user interacts with.
Other Roles:
- Designer – The Front-End Developer must consult with the Designer repeated to make sure they are implementing the design guidelines appropriately. The style guide should answer most questions about how a webpage is supposed to look but there will always be content that requires individual attention.
- Information Architect – Even though the functional specification should document most of how tasks and functionality should operate, they never cover every contingency. Collaboration with the Information Architect on questions of work-flow and functionality behaviors is common.
- Back-End Developer – Any “hooks” or paths to send user information to back-end functionality must be understood and accommodated by the Front-End Developer. Also the front-end must be able to display information sent from the back-end appropriately.
Dependencies
Technical Specifications
- Client requirements
Internal Skills - Traditionally the client administers the website after its initial launch so it is crucial that the front-end developer creates a website that can be supported by internal client resources. Research into the client's technical capabilities will reveal what internal skill sets are available and/or if resources are open to training.
Server Architecture - If there are existing servers or server requirements, those requirements will affect how the Front-End developer will code the solution. - User specifications
Another critical consideration a Front-End developer must keep in mind as they are building the front-end code is the minimum system requirements the website will require of the audience member. During the Strategy phase, the audience's minimum system requirements were determined (what browsers are supported and what versions, what operating systems and what versions, the average connection speed which translates into how big a file size the webpage can be, etc.). These requirements must be included in the Front-End developer's coding strategy.
Tech and Functional Specs 40kb
Information Architecture
- Functional specifications
The Front-End developer needs to know how functionality that has been approved on a IA wireframe is supposed to work on a real webpage.
Design
- Cut and optimized graphics
Photoshop directions that have been approved will need to be cut up into necessary images (photos, logos, buttons, etc.) so they can be placed in a live webpage. - Style guide
Specifications about the colors, layout measurements, font treatments in the final design system need to be communicated to the developer.
Style Guide Example 7.1mb
Back-End Code
- Because of the close dependability between the Front-End and Back-End code, they are often developed concurrently. Ideally a channel of constant testing and communication is established to aid each other in their separate efforts.
Examples
Technical Specifications – The technical specifications document provides the team a list of technical requirement and piece of functionality required for the project and how its construction will be addressed. The technical specification document also acts to connect and synthesize all the strategic research as it pertains to development.
Paying special attention to:
- User interface functionality – The interactive elements and content display functionality
- End user technical profile (operating system, browser spec, screen resolution, bandwidth)
Review
Click the button below to launch a quick review of the Front-End period. Once you are done, close the review and move on to Chapter 6: Back-End Code.
- It's the interface the user interacts with
- Sends information to the back-end
- Displays information sent from the back-end
- Must work in a variety of browsers and computer types
