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?
- Introduction
- What is Web Development
- History of Web Development
- How the Web Works
- Web Development Technologies
- HTML
- CSS
- Javascript
- Rendering: Server-Side
- Rendering: Client-Side
- Rendering: Server-Side
Introduction
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.
Some of those applications have most of their logic living on a web server which renders HTML, CSS, and JavaScript to create an application.
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.
Regardless, though, of how web development is done, the basic technologies are the same: HTML, JavaScript, CSS—and a large amount of patience.
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)
- Java
- ASP.NET
- C++
- C
- Scala
- Ruby
Reference: Wikipedia: Programming languages used in most popular websites
This is possible because the user interface of a web application is essentially HTML, CSS, and Javascript which can be generated by any programming language capable of generating text.
JavaScript is used to manipulate what is known as the DOM (Document Object Model), which is a representation of a webpage in the browser, to directly change the user interface displayed in the browser without directly creating new HTML or CSS code.
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.
Eventually with browser technology evolving and computers getting faster—as well as a growing demand for more complex applications—JavaScript started being used to expand the capabilities of many web applications.
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.
Rendering everything on the server was too slow and didn’t feel responsive, so technologies like AJAX (Asynchronous JavaScript and XML) were invented to allow web pages to update dynamically without refreshing the page.
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.
A web browser is also capable of executing JavaScript to do various things including modifying the underlying structure of 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.
Now, obviously there is much more going on under the covers, but the basic idea is that the web browser makes a request and the web server responds by returning back from HTML, CSS, and JavaScript.
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.
HTML
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.
A web browser will parse the HTML and use it along with CSS and JavaScript to render a page.
CSS
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.
JavaScript
When JavaScript first came out, it was a bit of a novelty that was used to do some very basic things on web pages, but JavaScript has evolved to take a much more central role in web development.
At its heart, JavaScript is a fully-functional dynamic language which can be executed directly in the web browser.
JavaScript makes web pages more interactive and allows for programmatic manipulation of web pages and their content.
JavaScript can directly interact with the DOM of a web page, which is its underlying structure.
By using JavaScript to manipulate the DOM, the entire structure and style of a web page can be changed programmatically.
In web applications, this all happens inside of the browser (unless you are using a technology like Node.js, which runs JavaScript on the server to actually parse requests and send back responses).
Rendering: Server-Side
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.
In the most simple model of web development, all web pages are rendered on the server and the HTML, CSS, and JavaScript of that page is sent to the web browser, where it is parsed and displayed to the user.
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.
Today, technologies like ASP.NET or PHP still mainly utilize this model, although with the use of various JavaScript frameworks, even a server-side rendering technology can be used for client-side rendering.
Client-Side Rendering
With the increasing capabilities of browsers and JavaScript engines in browsers, there has been a strong movement towards what is known as client-side rendering.
Client-side rendering simply means that the content of the web page is constructed in the browser—via JavaScript—instead of on the server.
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.
Behind the scenes, JavaScript is being used to create and manipulate DOM elements and even produce HTML or CSS that is part of the web page, or in this case, the web app.
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.
