Web development is one of the fastest-growing occupations in the early 21st century. The term web developer is used ubiquitously throughout the tech industry, yet unsurprisingly — to those not already a part of the development community — it isn’t always clear what web development is or what a web developer does. To answer these questions effectively we must first delve a tiny bit into the realm of websites themselves: How a website recognizes when a user visits the site and performs the necessary function to display the appropriate page to the user.
Digital Ping Pong: The Inner Workings of a Modern Website
While every website is built slightly differently, there are a few fundamental components that handle every interaction between a user and the site:
- Client: The local computer (desktop/laptop) or device (phone/tablet) the user is interacting with to access the website.
- Server: The remote computer that “physically houses” all the files (and thus code) that make up the website.
- Database: A sub-component of the remote server, the database is a large series of data tables used to store all the dynamic information generated or used within the website. For example, the account information of a logged in user would be stored in the database.
With our three fundamental components identified, we can briefly examine how a website recognizes a visiting user and ultimately displays the appropriate page for viewing. The following diagram provides an approximate illustration of the process.
As an example, let’s imagine Jenny wishes to visit google.com.
- Jenny first enters the URL of the website (google.com) in the browser on her local computer (the client).
- Jenny’s computer generates a request that is sent out to the server computer, which then accepts the request.
- The server runs (or executes) the back-end code, usually grabbing data from (or querying) the database.
- The database sends the requested data back to the server.
- The server takes the data and executes the front-end code to produce a response.
- This response is sent back out to the client where it is then displayed (or rendered) on the client computer as a standard web page.
The end result is that Jenny is now looking at the Google homepage as expected, all within a matter of milliseconds in most cases.
What’s My Line?: Where the Web Developer Fits In
Now that we’ve explored the fundamental process of how a web page is displayed to a user, we can dive into the deep end and discover where web development comes in and how it is applied to allow that magical ping pong-process to occur. As a broad definition, a web developer’s primary purpose is to create a functional website that performs a set of particular, defined functions. Accomplishing this goal breaks down into three core phases.
Phase 1: Planning During this preliminary phase, a web developer will work closely with the client and other developers to plan the structure and core concepts of the site. This first phase is an ideal time to decide how the various pages and components of the site link to one another (also known as a sitemap). While the sitemap can take on many forms, it should effectively outline how a user will navigate around the site. During the planning phase, it is also vital to determine how the client will interact with the site as well. If the client will be posting blogs or adding products to the online store component, it is the planning stage that should specify exactly how these tasks will be performed.
Phase 2: Design The design phase is when the visual look and feel of the site is determined. This entails everything from color palette and fonts to page width and static image placement. If the planning phase determines what the user will do with the site, the design phase determines the where and the how. Typically a mockup for each page or component of the site is created in Photoshop by a designer or multi-disciplined developer. This mockup should typically include every visual element that is expected in the final page and is thus representative of what the client wants to see when visiting the website. Throughout the design process, it is critical to consider the target audience and demographic of the website. The design should closely correspond to both the appropriate user base the site is marketed toward as well as the intended use of the site.
For example, Google is intended for all audiences and emphasizes speed and efficiency of search results, which fits the minimalist design Google uses, including a visual look comprised of almost exclusively text. Netflix, on the other hand, is all about audio and visual content and thus focused on a very colorful, full-screen design to highlight the multitude of shows available on the platform.
Phase 3: Development The development phase is of course the most crucial for web developers involved in the project, and where the majority of time and energy will be spent producing the final product. For most modern websites, the development process is broken down into three architectural components that the web developer will intermix throughout the procedure.
- Application Logic: Often referred to as the model component, this represents the majority of the back-end code a developer will write to make the site function as expected. This logic is also where a developer must understand and utilize the connection between the site and the database that powers it.
- Presentation: Commonly known as the view component, this is where the mockup that was created during the design phase is used by a developer to recreate the look and feel of the mockup image utilizing the basic building blocks of HTML and CSS, such that the end result is a webpage that looks identical to the mockup.
- Connection: Also referred to as the controller component, this code defines the connections between the back-end business logic that handles the grunt work of the site and the front-end pages that users will access: It connects the back- and front-end code together.
Choices, Choices, Everywhere: Learn Which Web Development Disciplines is Right for You
The exciting thing about web development as a field is the multitude of differing disciplines that a newcomer can focus on, depending on his or her particular skillset and desires. While the core of web development is generally considered to be from a coding perspective and thus an education in coding is expected, there are numerous disciplines within the web development field with slightly varied focus.
- Graphic/Visual Designer: The visual designer is often well-trained in the arts, utilizing Photoshop and others tools to create mockups for pages or entire websites that will please the client and appeal to the audience. In some development shops these positions are “codeless,” while often in others, visual designers would be expected to convert visual mockups into workable front-end code.
- Back-End Developer: A back-end developer writes all the code necessary for the core logic of the website: Grabbing data from the database and molding how that data is appropriately used and displayed to the user through the front end. Languages commonly used for back-end development are varied, but a handful among the most popular are Ruby on Rails, Python, PHP, and Node.js.
- Full Stack Developer: A much-lauded position, and rightfully so, the full stack developer is one who is adept at all aspects of the development process and is capable of contributing code and functional solutions every step of the way, from planning and design to both front- and back-end coding.
Stay tuned for a follow-up post on why now is the time to get started in web development!