Web Development is some-what a vague term used to describe the building or maintaining of web sites hosted on the internet. I use the word ‘vague' because there's so many programming languages, frameworks and tools that are used for Web Development. Web Development could refer to a single web page built with HTML and CSS that might contain a couple hundred lines of code. Or on the other end of the spectrum it could refer to a website like Facebook that supposedly contains around 60 million lines of code, See reference: How Many Lines of Code?
- What is Web Development
- History of Web Development
- How the Web Works
- Web Development Technologies
- Rendering: Server-Side
- Rendering: Client-Side
- Rendering: Server-Side
I’m going to be completely honest with you: I’m not a huge fan of web development.
Don’t get me wrong. I’ve done plenty of web development, but in comparison to developing desktop apps or mobile apps, web development is… well… trickier.
Like it or not, as a software developer you have to know about it—at least the basics.
In fact, most software developers today are web developers.
It’s true; web development has taken over the world. It’s the King Kong of development platforms.
Desktop and developers used to be the norm, but more and more applications have moved to the web and continue to do so.
Even with the rapid growth of mobile development, web development is still critical because, as cell phones and tablets get more powerful, creating cross-platform apps will become easier by making them web apps which run in the browser.
That means, whether or not you are planning on becoming a web developer, you need to at least be familiar with web development, how the web works, and the major technologies involved.
In this chapter, we are going to cover some of the basics.
What Is Web Development?
Web development itself and how it is done has changed greatly over the years, but one thing has remained the same: web development is about creating applications which run in a web browser.
Other applications only utilize the server to create their initial state, download the logic to run the application, and then use the server only to retrieve and store data.
Web developers today utilize about every major programming language to create web applications. To name a few of the most popular web development languages in no particular order:
- Python (that includes Django, the Python web development framework)
A Brief History of the Web
Let's talk about the history of web development. It will give us a good reference point for talking about “what is web development” today.
Web development started in a very different place than where it is now.
Early web development consisted mostly of creating static HTML pages, and navigation was done exclusively by hyperlinks.
An early web developer didn’t really create an “app.” They created a set of static web pages which were used to convey information and perhaps a few pictures, all linked together with hyperlinks.
In order for web development to be useful, there needed to be a way to make web pages more interactive and to conditionally render some content (or other content), as well as to track some kind of state.
Early web developers utilized a technology called CGI to create the earliest web applications which were able to conditionally generate HTML depending on data, like query strings, which were sent from the browser to the server.
Then came along actual web development frameworks which were designed to make CGI and dynamic generation of HTML easier.
You may have heard of technologies like ColdFusion or ASP. These were some of the early web frameworks which made web development much easier.
Now a web developer could create HTML mixed with special tags and markup to make the generation of that HTML conditional and could also execute certain logic to determine what kind of HTML to produce for a given web page.
This kind of technology worked like a templating language and allowed a huge number of developers to create web applications for the first time.
CSS also came along around this time to make it easier to style and change the style of web applications by giving HTML the role of defining content and CSS the role of defining the layout and style of that content.
Developers kept on trying to find ways to make the web more and more dynamic.
Eventually entire web applications were built dynamically without any page refreshes at all. These types of web applications are known as SPAs, or Single Page Applications. Ever been on a website, filled in some information on a form, pressed refresh, and the webpage didn't reload? That's likely AJAX submitting the request. It makes it possible to dynamically change a webpage without having to refresh it. Pretty cool stuff.
The web continues to move forward as it evolves to be more and more like desktop applications of the past, with the browser really starting to act like an operating system.
In fact, this has become so true that Google created a web-based OS called Chrome OS in which the OS is basically the Chrome web browser. One day everything will be hosted on the web because browsers will be powerful enough to run everything. It's already moving in that direction as we see more and more Cloud-Based technologies popping up.
How the Web Works
It’s difficult to understand what web development is if you don’t have at least a general idea of how the web works.
Some things have changed over the years, but the basic functionality of the web and its underlying technologies have mostly remained the same.
Consider this brief primer a very condensed and basic explanation of how the web works.
First of all, we have the web browser.
The web browser is able to parse and render HTML and CSS into a visible format which we call a web page.
The web browser has to send a request to a web server in order to get a web page to render.
This is done through a protocol known as HTTP, or Hypertext Transfer Protocol.
When a request for a particular resource or URI (Uniform Resource Identifier) is sent to a web server, that web server finds the requested content—if it exists—and send back a response to the browser.
The browser then parses and renders that response, which is what the end user sees in the web browser.
Why is this important to understand if you want to do web development?
Because, as you can imagine, a web application has to be thought about a bit differently than a normal desktop application, since web applications have to continually make requests from the server for every action that happens in the application. (I’m generalizing here, but this is mostly true.)
In a desktop application, you might be able to hold various bits of state in memory and be able to access that state data when you switch to a different page or section of the application.
For web applications, you have to work around the fact that the underlying HTTP protocol is stateless.
You have to have some way to manage states between requests and keep track of the individual users that are using the web application simultaneously.
Now, obviously, there are frameworks and patterns that make this easier to do, but it’s critical to understand that web development is much different than other kinds of development due to the statelessness of HTTP and the constant client server interactions.
Primary Web Development Technologies
All right, now that you have the basics of how the web works and understand a little bit about how the web evolved over time, let’s talk about a few of the most common web development technologies you are likely to encounter.
This is the keystone of web development. All web development must contain some HTML, because HTML is the basic building block of the web.
You can build an entire web application using just HTML—although it won’t really do that much (and I’d probably call it a web page).
HTML, or (Hypertext Markup Language), is used to specify the format and the layout of a web page.
HTML consists of a series of tags that define the parts and components of a web page.
For example, you might use the <img> tag to embed an image on a page.
Before CSS existed, HTML was used to both specify the format of a web page as well as to dictate how it should be displayed and styled.
This was a problem because it meant that in order to change the styling of a web application— for example, to make all the buttons a different color—the HTML would have to be changed in many places in the application.
CSS was invented to solve this problem by cleanly separating the content of a web page from the styling of it (although the two do overlap from time to time).
CSS (Cascading Style Sheets) can be linked to in a web page in order to define the styling for that web page.
An entire web application can link to a set of CSS pages which set the style for the entire web application.
Then, if you want to change the color of a button, you can just modify one CSS file, and all the buttons for the entire web application will change.
Quite a useful technology.
If you are good with CSS, there is quite a bit you can do to change the presentation of a web page, from making elements appear or disappear, to changing the locations of elements, resizing, changing fonts, and just about anything else you can imagine.
Before we can wrap up our very basic overview of web development, we do need to talk about the differences between server-side rendering and client-side rendering, because they can be quite confusing.
Let’s start with server-side rendering.
Server-side rendering simply means that the pages are fully constructed by the logic on the server.
So, with server-side rendering, the logic for the application lives almost entirely on the server.
As we talked about in the history of the web, this was the original way most web applications worked.
With client-side rendering, you can almost think of the web server delivering an “app” to the browser, and the browser executes that app internally to render the pages, create the navigations, and request any additional data from the server.
As you can imagine, client-side rendering appears more seamless to the end-user because there isn’t a need to make requests back to the server to have new pages rendered, only requests for additional data, which is then “plugged into” the web page dynamically.
This is why some client-side rendered apps are called SPAs.
There is usually only one page and the contents of that page are dynamically updated.
Both techniques can even be combined in a single web application, where some parts of the user interface are rendered client-side and other parts and pages are rendered server-side.