This is Part 1 of The Beginner’s Guide To Setting Up a Development Environment.
If you’ve read any development-related content or talked with anyone in the field of web development, you’ve likely heard the term “development stack.”
But until you’ve actually worked within the context of a larger website or web application, some of the terminology can be confusing. On top of that, if you’ve primarily been working with basic pages, markup, stylesheets, and/or JavaScript, then this is entirely new territory.
Unlike some aspects of programming, getting a handle on a development stack isn’t terribly challenging. It’s nothing more than few pieces of software working together to provide a foundation on which you can build your project.
Before taking a look at the entire stack, let’s take a look at each individual component.
1. The Webserver
Whenever you browse the Internet and land on a web page, a lot happens in between the time that you computer navigates to said page and is displayed on your screen.
- Your browser sends a request to the domain that includes the file name (such as index.html)
- The server that is located at the above domain looks at the incoming filename, locates the file, and returns the contents to the web browser
- Your browser reads the information in the file and displays it in your browser
Generally speaking, the second step is what a web server does: handles incoming requests, locates files, returns them back to the source of the request.
Two of the most popular web servers include Microsoft’s Internet Information Server (also referred to as IIS) and The Apache HTTP Server Project (typically referred to as Apache). Though they are outside the scope of this series, there are a number of less popular, free, lightweight web servers such as Mongrel that ship with popular development frameworks.
Web servers sit on top of the operating system and act as the foundation of a web development stack.
2. The Database
For some, a website is nothing more than a collection of HTML files that display information that’s contained within said files; however, most of us are used to more dynamic sites. That is, we’re used to sites that handle input, allow us to update it, modify it, and publish it for others to see.
But since that information is constantly changing, it has to live somewhere. That’s where the database comes in. A database is responsible for taking incoming data and placing it in the proper place as well as returning data that is requested from it.
For what it’s worh, this is where I personally draw the line between a website and a web application – when the saving and retrieving of data is introduced.
SQL Server and MySQL are two of the most popular database systems around, but there are newer technologies that are growing in popularity. These include CouchDB, MongoDB, and NoSQL. Again, these are outside of the scope of this series but worth reading about if you’re interested.
For those that are interested, SQL is short for “structured query language” and it is the language used to put data into and pull data from the database.
A database system sits alongside the web server in a development stack.
3. The Server-Side Programming Language
If you’re familiar with any type of basic web application development, you’ve likely heard of .NET (and various languages such as VB.NET, C#.NET, and so on), PHP, Ruby, and so on.
These are all examples of the server-side programming languages. That is, these languages run on the machine that is also running the web server and database system. An example of a client-side language would be JavaScript or HTML. That is, they run on the client machine.
The .NET Framework and its family of languages usually interface with SQL Server and IIS; where as PHP, Ruby on Rails, and other languages typically – though not always – run on top of Apache and MySQL.
An important distinction to make is that although these languages are used within web application programming, many of them – especially .NET and Ruby – can be used to write desktop applications, too.
Server-side languages are also referred to as the application layer of the development stack as they are typically responsible for taking incoming data and preparing it to be inserted into a database or they are responsible for retrieving data from the database and preparing it to display in the web browser.
Simply put, if you’re writing code in a language that is not SQL, HTML, CSS, or JavaScript, you’re probably working in the application layer and this layer sits on top of the web server.
4. The Big Picture
Finally, the web development stack can be pictured exactly like this:
It’s literally a stack of technologies that work together to provide a foundation for your project. For more information, you may be interested in reading about a basic introduction to tiered architecture.
Next up, we’re going to talk about what constitutes a development environment and how this interact with your development stack.
Ben says
For the sake of learning proper semantics, is it ok to call CSS and HTML a “coding language” or is there another name for them since they are mainly on the web-server?
Tom McFarlin says
Technically, HTML is a markup language and CSS is referring to a styling (or stylesheet) language but I’d definitely say CSS and HTML are coding languages – you write code in them :).
These are actually client-side languages since they describe and style documents within the browser.
Examples of server-side languages are PHP, Ruby, C#, Python, Java, etc.
Diana says
This was an Excellent article written in plain English, Thank You.