What is Web Development? Important Points and Takeaways

Disclaimer The following is a reflection on my reading from Chapter 1 of Fundamentals of Web Development (2nd Edition) by Randy Connolly and Ricardo Hoar. All credit for illustrations and "Key Point" bullet points go to the authors of this book. Bullet points labeled "Takeaway" are my own thoughts and are in my own words. This post is serves as a commentary and reflection on the chapter, not as a summary or a publishing of the contents of the book. It is meant to help other JMU CS students by highlighting what I thought was important so that they can reflect after they read the chapter themselves.

Disclaimer Fair use is a legal doctrine that promotes freedom of expression by permitting the unlicensed use of copyright-protected works in certain circumstances. Section 107 of the Copyright Act provides the statutory framework for determining whether something is a fair use and identifies certain types of uses—such as criticism, comment, news reporting, teaching, scholarship, and research—as examples of activities that may qualify as fair use.

Figure 1.1 The web development ecosystem

What does web development consist of?

Key Point Figure 1.1 imagines web development as a building with three levels.

The basement has the foundational components that are necessary to make everything work, but operate out of sight

Networking, Protocols, Servers, Configuration

The main level has components that we traditionally understand as being web development

HTML, CSS, JavaScript, Server-side languages, etc.

The upper level has more advanced topics of web development

Algorithms, Security threats, Advanced programming design, etc.

Takeaway While the topics on all three of these "floors" may fall under the umbrella of web development, it's not necessary to understand them all to be a successful web developer. Understanding the topics on the main floor is my goal; if I am able to gain an understanding of any top floor or basement topics along the way, then that will be in addition to my core web development skills.

How can two computers communicate with one another? How does one computer know what format to deliver a message to another computer in? What does the internet consist of?

Key Point Bandwidth is a measurement of how much data can (maximally) be transmitted along a communication channel.

Measured in bits per second (bps)
A 10-gbps fiber optic connection has far more bandwidth than a dial-up 56-kbps modem

Key Point Messages can be split in to small chunks called packets and then be routed to a destination address.

Packets can take multiple routes to a destination
Not reliant on a single pathway that could fail

Key Point A protocol is a formal set of publicly available rules that manage data exchange between two points.

Communications protocols allow two computers to communicate with each other so long as they implement the protocol

Key Point TCP/IP stands for Transmission Control Protocol/Internet Protocol

The internet protocol suite provides end-to-end communication
Specifies how data should be packetized, addressed, transmitted, routed, and received.

Takeaway Networking allows us to link two computers together and allow them to communicate. Two computers can connect to a network and communicate if they follow the correct protocol. TCP/IP networking is a protocol that has been widely adopted. A message from one computer can be split in to packages. These packages are addressed, then transmitted and routed to the destination address, which is the computer receiving the message.
Takeaway The four main layers of the internet are the link layer, the internet layer, the transport layer, and the application layer. All four layers play important roles in establishing end-to-end communication under the TCP/IP protocol.
Takeaway The World Wide Web, or just the Web (WWW) is only one part of the internet. Email (via SMTP) or file transfer (via FTP) are examples of uses of the internet that do not include the world wide web.

What comprises the world wide web?

Key Point Five essential elements of the world wide web were created in the 90s:

A Uniform Resource Locator (URL) uniquely identifies a resource on the world wide web
The Hypertext Transfer Protocol (HTTP) describes how requests and responses operate.
A software program (later called web server software) that can respond to HTTP requests.
Hypertext Markup Language (HTML) to publish documents.
A program (later called a browser) that can make HTTP requests to URLs and that can display the HTML it receives.

Key Point The Request for Comments (RFC) archive lists all of the Internet and WWW protocols, concepts, and standards.
Takeaway HTTP tells me how I can request something from a particular location and receive a response from it. A URL tells me where something is located on the web. A web server can receive and respond to my request for information. HTML is a language that allows me to create documents that will later be viewed on a web browser. A browser makes an HTTP request to a URL then shows me the HTML that it gets in response to the request.
Takeaway Web apps are accessible from any computer that's connected to the internet. Web apps work across various operating systems and browsers.
Takeaway Concerns about the internet include security issues when transmitting private information across the internet, web apps not appearing the same way on different browsers, the need to have a reliable internet connection to use a web app, and many others

What is the difference between static and dynamic web pages? What is Web 2.0?

Key Point Static websites consist only of HTML pages that look identical for all users at all times.

Key Point A dynamic server-side website has page content that is being created at run time by a program created by a programmer.

This page content can vary from user to user

Key Point Web 2.0 refers to participatory websites that emphasize user-generated content.

For users, this referred to an interactive experience where users could contribute and consume web content
For software developers, this meant that programming logic had to migrate to the browser. This required learning the programming language JavaScript.
Popular websites today that fall in to the Web 2.0 category include Facebook, Youtube, and Wikipedia.

Takeaway If a web page is static, it is just an unchanging document that is displayed in my browser. When a web page is dynamic, that means that the actions of the end user are changing the web page. This requires programming logic, which can either happen on the server side of the web application, or on the client's side of the web application. Server-side programming can be done in any server-side language, such as PHP. Programming logic done on the client-side is often done with JavaScript, which will be documented heavily in later posts on this website.

Illustration by Michael Kirkpatrick

What is Client-Server Architecture? What is the difference between a client and a server? How do clients communicate with a server? What is Peer-to-Peer architecture?

Key Point A server is a computer agent that is normally active 24/7 and is ready to respond to requests from clients.

Central hub of the client-server model. "Command center"
Hosts or stores web applications and data; performs tasks related to security
One server could service thousands or millions of clients, can have high demand

Key Point A client is a computer agent that makes requests and receives responses from the server, in the form of response codes.

Desktops, laptops, and phones that we often see in our normal lives
Can make requests to certain servers for resources and wait for a response

Illustration by Michael Kirkpatrick

A server could act as a client, by requesting resources from another server

Key Point In the request-response loop, the client initiates a request to a server and gets a response that could include some resource, like an HTML file or an image.
Key Point In a peer-to-peer model, each computer acts as both a client and a server, so each computer is able to send and receive data directly from one another.
Takeaway Many clients can connect to the same server. A client-server architecture allows one server to provide resources to a high volume of clients. Imagine a restaurant where one waiter or waitress is serving five tables at the same time. The tables are the clients, while the waiter or waitress is the server. The request-response loop describes how a server requests data, and waits for a response, then can request data again, and wait for a response again. A peer-to-peer connection is very different, where multiple computers can request resources from one another. This type of connection does not even necessarily require the internet.

The internet is not magic: what are the hardware components that make up the internet? What is the difference between a router and a modem?

Key Point The internet is implemented using millions of miles of copper wires and fiber-optic cables connecting millions of server computers and probably an equal number of routers, switches, and other networked devices.
Note Book to consider reading
Key Point An Internet Service Provider (ISP) is an organization that provides services for accessing, using, or participating, in the Internet.
Key Point A broadband modem (or cable modem or DSL modem) is a bridge between the network hardware outside the house (typically controlled by a phone or cable company) and the network hardware inside the house.

Key Point A router is a hardware device that forwards data packets from one network to another network.

Routers are one of the most important and ubiquitous hardware devices that make the internet work.

Key Point A routing table is used by a router to determine where a package should be sent.

Table of connections between target addresses and the destination (typically another router) to which the router can deliver the packet.

Takeaway Above I've defined what I believe to be some of the more important hardware components of the internet for us web developers to understand. An ISP sells access to the internet to homes or businesses and maintains wiring and hardware components outside of that home or business that facilitate connection to the internet. A broadband modem bridges this hardware outside of the home with devices inside of the home that can be connected to the internet. The modem is like the doorway to the internet, while the router is distributing that connection to different devices. Chances are if you're connected to the internet in your home, you're using both a modem and a router.

What is the difference between back-end web development and front-end web development? Do I need to know how to do both to be a web developer?

Key Point Web Development job roles today often include a distinction between front-end development (JavaScript) and back-end development (PHP, ASP.NET, etc.)
Key Point Building and maintaining a website is a team effort. The world of web development requires a team of people with various complementary skill sets as well as some areas of overlap and cooperation.
Takeaway Back-end web developers and front-end web developers may work on different sides of a web application, but they are still collaborating and working together to create one experience. Web development involves programmers, UI/UX designers, product managers, and many other roles. No one person needs to understand everything or be involved at every level. Web application development is a collaboration between a group of people with complementary skill sets.

Figure 1.23 Web development roles and skills

What types of jobs can I do with my web development knowledge? Are their other skills required for those positions?

Key Point The following is a list of job titles in web development and the skills that are required for them.

Hardware Architect/Network Architect/Systems Engineer

Design and manage the the layout of the physical and logical network.
Design specifications for servers in a data center
Requires networking and operating systems knowledge

System Administrator

Choose and install network operating system, manage the shared operating system environments for other users

Database Administrator/Data Architect

In larger companies, there may be many databases from various divisions that need to be managed, secured, and backed up.
Performs maintenance on databases and manages access for user and software accounts
Requires knowledge of database design
Data architect is more focused on the design and integration of data

Security Specialist/Consultant/Expert

Test for vulnerabilities, implement security best practices, protect website to threats, etc.
Requires insight in to security/cyber security. Some companies will outsource this position.

Developer/Programmer

Positions often begin at the entry level
Higher-level decisions left to software engineers and senior developers
Typically used to refer to a job more focused on server-side development

Front-End Developer/UX Developer

For software developers skilled at GUI design and with an understanding of human-computer interaction.
Requires in-depth JavaScript skills, good CSS skills

Software Engineer

Uses established best practices in the development of software
Knowledge of software development life cycle (Agile, Waterfall)

Tester/Quality Assurance

Identifying flaws in software
Some test roles are for non-experts, but experts may write automated test suites or develop testing plans

Search Engine Optimization (SEO) Specialist

Improving discoverability of web content by search engines
See Chapter 23 in the book
Should be familiar with analytics, testing approaches, social networking APIs, content creation strategies

Content Strategists/Marketing Technologist

Merge knowledge of new or old web tech with knowledge about audience to create engaging web content
Should have writing/marketing skills, knowledge of content management systems, email services, and social networking interfaces

Project Manager/Product Manager

Web development requires the talent of many different people. PMs communicate between people to get them to work together in an effective manner
Knowledge of planning and estimation methodologies, people management skills

Business Analyst

Speaks to clients and gathers requirements
Speaks to other members of a company and creates requirements that software engineers then work on.

Other Nontechnical Roles

Analytics manager, motion designer, social media analyst, cloud architect, hacker, etc.

Takeaway More information about each of these positions is included in the book, but I thought it was important to include every position listed in the book here. Web development is a very large and diverse area of computer science. There are endless possibilities with this part of CS, and you can gain web development skills and apply them to other areas that you are interested in. If you are interested in cyber security, software engineering, or database design, gaining web development skills can gain you a huge advantage in these areas. There are so many different directions you can go in with web development knowledge, so taking time to learn the basics can really add a lot to your résumé and open a lot of possibilities for you.

Do all companies hire web developers? What types of companies can I work for?

Key Point Consider which type of web development company you may want to work for.
Key Point Types of web development companies include hosting companies, design companies, website solution companies, vertically integrated companies, start-up companies, internal web development
Takeaway Yes, every company has a website, but consider how massive the internet space actually is. There are a massive range of companies that operate in this space, and the book only lists a few.

Assignments

Draw the Internet

Sketch a representation of the internet on paper.
If it's not obvious, I am not an artist :P

Chapter 1 Review Questions

1. What are the advantages of packet switching in comparison to circuit switching?

Circuit switching requires a physical connection to be made between the communicating parties, which must remain for the duration of the connection. This makes it difficult to have multiple connections simultaneously. A packet switched connection does not require a continuous connection, as it splits the message in to smaller packets which do not have to take the same route to their destination. This is more robust than circuit switching because it is not reliant on a single pathway that could fail, and it's a more efficient use of network resources.

2. What are the five essential elements of the early web that are still the core features of the modern web?

URL, HTTP, Web Server Software, HTML, and Internet Browsers

3. Describe the relative advantages and disadvantages of web-based applications in comparison to traditional desktop applications.

Web applications are accessible via any computer connected to the internet, while desktop applications require the application to be installed on the computer's hard disk. Web applications are able to be used on different operating systems without any additional work (usually), while desktop applications have to be ported to run natively on different operating systems. Web applications are easier to update because you only need to update the software on the server, whereas with desktop applications every user must download an update to their copy of the software. Centralized storage on the server allows for more secure storage of sensitive data as opposed to storing a lot of sensitive data locally on someone's desktop application and having to send it over the internet every time another computer needs to access it.

4. What is an intranet?

An intranet refers to an internal network using internet protocols that is local to an organization or business.

5. What is a dynamic web page? How does it differ from a static web page?

A dynamic web page has content that is being created at runtime by programming logic that was written by a programmer. It has content on it that changes from client to client. A static web page is exactly the same for every client that requests it; it is simply an HTML page that is unchanging, unless the "webmaster" updates the webpage on the server.

6. What does Web 2.0 refer to?

Web 2.0 refers to participatory websites that emphasize user-generated content.

7. What is the client-server model of communications? How does it differ from peer-to-peer?

Client-server architecture consists of a server that responds to requests from multiple clients. A client requests information from the server, and the server responds with the requested resources. A peer-to-peer connection is when two computers are connected directly, and either computer can act as a client or a server. Both computers can request and respond to each other.

8. Discuss the relationship between server farms, data centers, and Internet exchange points. Be sure to provide a definition for each.

Server farms consists of clusters of machines (clusters of servers), and incoming requests are dispersed between them so that no one web or data server is overloaded. These server farms are housed within data centers, which will not only contain many computers and hard drives, but also sophisticated air conditioning systems to keep them cool, redundancy power systems in case of power outage, fire suppression systems, and security personnel on site. Internet exchange points are housed in one or more data centers, which allow one or more internet service providers to interconnect with one another in a shared facility.

9. What kinds of jobs are available in web development? That is, describe the broad job categories within web development.

There are jobs that involve designing and maintaining the systems that support web development, such as designing physical networking layers, database systems, or installing and managing network operating systems. There are programming positions that involve solving problems and writing back end code, such as software engineer, software developer, or tester/QA. There are also front-end positions that involve creating the client-side of a web application, such as front-end developer, UI developer, or UI/UX designer. There are also a variety of non-technical positions that involve communication and planning, such as business analyst, product manager, social media analyst, and more.

10. What sorts of service can a company offer in the web development world?

Hosting companies can host websites for web developers; these companies maintain servers and allow people to pay to host their websites on them. Design companies can design a user interface mock-up that will later be implemented by a software engineer. Web solution companies can build and deploy a website for their clients. Vertically integrated companies are doing all parts of web development in-house for a client; designing a UI, building the website, and hosting it on their servers.

11. What is a full-stack web developer? What kinds of companies typically hire full-stack developers?

A full-stack developer is a web developer who can work on all sides of a web application. This includes the client-facing front end, the server-side back end, and the database portion of the application. Full-stack development is like a hybrid of front-end and back-end development. Many companies are looking to create web pages with dynamic front-ends, server-side code in languages like PHP or C#, and database persistence that stores user information between sessions. Companies who are creating products like this want to hire full-stack developers because they are flexible and can work on both the front-end and back-end of a web application.

web adventure by reece