49,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
This book offers a comprehensive guide to full stack web development, covering everything from core web technologies to advanced topics. The early chapters introduce foundational concepts like client-server relationships, HTML, CSS, and JavaScript. Readers learn how to build static and dynamic web pages, gaining a solid grounding in front-end development.
As the book progresses, it delves into more advanced areas such as structuring applications, databases, and server-side programming using frameworks like Node.js and PHP. Practical examples, such as building web servers and handling data, help readers apply their skills in real-world scenarios, bridging the gap between theory and practice.
The later chapters address crucial topics like web security, performance optimization, and project management. Readers are introduced to modern practices like Docker, microservices, and Agile project management, equipping them to handle scalable, secure applications. By the end, readers will have a holistic understanding of how to build, secure, and deploy full stack applications, making this book ideal for both beginners and experienced developers seeking to refine their skills.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 918
Veröffentlichungsjahr: 2024
Ähnliche
Philip Ackermann
Full Stack Web Development
The Comprehensive Guide
Imprint
This e-book is a publication many contributed to, specifically:
Editor Meagan WhiteAcquisitions Editor Hareem ShafiGerman Edition Editor Stephan Mattescheck, Patricia SchiewaldCopyeditor Yvette ChinTranslation Winema Language ServicesCover Design Graham GearyPhoto Credit Shutterstock: 1159836532/© optimarc; 1682920144/© klyaksunProduction E-Book Kelly O’CallaghanTypesetting E-Book Satz-Pro (Germany)
We hope that you liked this e-book. Please share your feedback with us and read the Service Pages to find out how to contact us.
The Library of Congress Cataloging-in-Publication Control Number for the printed edition is as follows: 2023024562
ISBN 978-1-4932-2437-1 (print)ISBN 978-1-4932-2438-8 (e-book)ISBN 978-1-4932-2439-5 (print and e-book)
© 2023 by Rheinwerk Publishing Inc., Boston (MA)1st edition 2023
Dear Reader,
“A jack of all trades is a master of none, but oftentimes better than a master of one.”
This little saying has gone through quite the transformation over the years. Coined in either 1592 or 1612, depending on who you want to credit, it originally just read a jack of all trades and had a fairly flattering connotation. Later, in the late 1700s, the master of none part was added, flipping it into a mild insult. The second line—but oftentimes better than a master of one—is more modern, but brings us back to it being a compliment (at least mostly)
These days, full stack developers are expected to be jacks of all trades, though it seems that most employers are hoping they’ll be masters of all, instead of masters of none. While we can’t promise that this book will make you master of both frontend and backend development (such a book would need to be 5,000+ pages!), it’s the place to begin for a thorough grounding in all aspects of web development. Whether you’re a frontend developer looking to expand your backend knowledge, a backend programmer looking to try your hand at UI design, or brand new to both, this book is for you!
What did you think about Full Stack Web Development: The Comprehensive Guide? Your comments and suggestions are the most useful tools to help us make our books the best they can be. Please feel free to contact me and share any praise or criticism you may have.
Thank you for purchasing a book from SAP PRESS!
Meagan WhiteEditor, SAP PRESS
[email protected] Publishing • Boston, MA
Notes on Usage
This e-book is protected by copyright. By purchasing this e-book, you have agreed to accept and adhere to the copyrights. You are entitled to use this e-book for personal purposes. You may print and copy it, too, but also only for personal use. Sharing an electronic or printed copy with others, however, is not permitted, neither as a whole nor in parts. Of course, making them available on the internet or in a company network is illegal as well.
For detailed and legally binding usage conditions, please refer to the section Legal Notes.
This e-book copy contains a digital watermark, a signature that indicates which person may use this copy:
Notes on the Screen Presentation
You are reading this e-book in a file format (EPUB or Mobi) that makes the book content adaptable to the display options of your reading device and to your personal needs. That’s a great thing; but unfortunately not every device displays the content in the same way and the rendering of features such as pictures and tables or hyphenation can lead to difficulties. This e-book was optimized for the presentation on as many common reading devices as possible.
If you want to zoom in on a figure (especially in iBooks on the iPad), tap the respective figure once. By tapping once again, you return to the previous screen. You can find more recommendations on the customization of the screen layout on the Service Pages.
Table of Contents
Dear Reader
Notes on Usage
Table of Contents
Foreword
Preface
1 Understanding the Basics
1.1 Terminology
1.1.1 Client and Server
1.1.2 Relationship between URLs, Domains, and IP Addresses
1.2 Structure of Web Applications
1.2.1 Creating Web Pages Using HTML
1.2.2 Designing Web Pages with CSS
1.2.3 Making Web Pages Interactive with JavaScript
1.2.4 Making Web Pages Dynamic Using Server-Side Logic
1.3 Full Stack Development
1.3.1 What Are Software Stacks?
1.3.2 What Types of Stacks Exist?
1.3.3 What Is a Full Stack Developer?
1.3.4 Structure of This Book
1.4 Tools for Full Stack Developers
1.4.1 Editors
1.4.2 Development Environments
1.4.3 Browsers
1.5 Summary and Outlook
1.5.1 Key Points
1.5.2 Outlook
2 Structuring Web Pages with HTML
2.1 Introduction
2.1.1 Versions
2.1.2 Using Elements and Attributes
2.1.3 Saving Web Pages as HTML Documents
2.2 Using the Most Important Elements
2.2.1 Using Headings, Paragraphs, and Other Text Formatting
2.2.2 Creating Lists
2.2.3 Defining Links
2.2.4 Including Images
2.2.5 Structuring Data in Tables
2.2.6 Defining Forms
2.2.7 Further Information
2.3 Summary and Outlook
2.3.1 Key Points
2.3.2 Recommended Reading
2.3.3 Outlook
3 Designing Web Pages with CSS
3.1 Introduction
3.1.1 The Principle of CSS
3.1.2 Including CSS in HTML
3.1.3 Selectors
3.1.4 Cascading and Specificity
3.1.5 Inheritance
3.2 Applying Colors and Text Formatting
3.2.1 Defining the Text Color and Background Color
3.2.2 Designing Texts
3.3 Lists and Tables
3.3.1 Designing Lists
3.3.2 Designing Tables
3.4 Understanding the Different Layout Systems
3.4.1 Basic Principles of Positioning with CSS
3.4.2 Float Layout
3.4.3 Flexbox Layout
3.4.4 Grid Layout
3.5 Summary and Outlook
3.5.1 Key Points
3.5.2 Recommended Reading
3.5.3 Outlook
4 Making Web Pages Interactive with JavaScript
4.1 Introduction
4.1.1 Including JavaScript
4.1.2 Displaying Dialog Boxes
4.1.3 Using the Developer Console
4.1.4 Introduction to Programming
4.2 Variables, Constants, Data Types, and Operators
4.2.1 Defining Variables
4.2.2 Defining Constants
4.2.3 Using Data Types
4.2.4 Using Operators
4.3 Using Control Structures
4.3.1 Using Conditional Statements and Branching
4.3.2 Using Loops
4.4 Functions and Error Handling
4.4.1 Defining and Calling Functions
4.4.2 Passing and Analyzing Function Parameters
4.4.3 Defining Return Values
4.4.4 Responding to Errors
4.5 Objects and Arrays
4.5.1 Using Objects
4.5.2 Using Arrays
4.6 Summary and Outlook
4.6.1 Key Points
4.6.2 Recommended Reading
4.6.3 Outlook
5 Using Web Protocols
5.1 Hypertext Transfer Protocol
5.1.1 Requests and Responses
5.1.2 Structure of HTTP Requests
5.1.3 Structure of HTTP Responses
5.1.4 Header
5.1.5 Methods
5.1.6 Status Codes
5.1.7 MIME Types
5.1.8 Cookies
5.1.9 Executing HTTP from the Command Line
5.2 Bidirectional Communication
5.2.1 Polling and Long Polling
5.2.2 Server-Sent Events
5.2.3 WebSockets
5.3 Summary and Outlook
5.3.1 Key Points
5.3.2 Recommended Reading
5.3.3 Outlook
6 Using Web Formats
6.1 Data Formats
6.1.1 CSV
6.1.2 XML
6.1.3 JSON
6.2 Image Formats
6.2.1 Photographs in the JPG Format
6.2.2 Graphics and Animations in the GIF Format
6.2.3 Graphics in the PNG Format
6.2.4 Vector Graphics in the SVG Format
6.2.5 Everything Gets Better with the WebP Format
6.2.6 Comparing Image Formats
6.2.7 Programs for Image Processing
6.3 Video and Audio Formats
6.3.1 Video Formats
6.3.2 Audio Formats
6.4 Summary and Outlook
6.4.1 Key Points
6.4.2 Recommended Reading
6.4.3 Outlook
7 Using Web APIs
7.1 Changing Web Pages Dynamically Using the DOM API
7.1.1 The Document Object Model
7.1.2 The Different Types of Nodes
7.1.3 Selecting Elements
7.1.4 Modifying Elements
7.1.5 Creating, Adding, and Deleting Elements
7.1.6 Practical Example: Dynamic Creation of a Table
7.2 Loading Data Synchronously via Ajax and the Fetch API
7.2.1 Synchronous versus Asynchronous Communication
7.2.2 Loading Data via Ajax
7.2.3 Loading Data via the Fetch API
7.3 Other Web APIs
7.3.1 Overview of Web APIs
7.3.2 Browser Support for Web APIs
7.4 Summary and Outlook
7.4.1 Key Points
7.4.2 Recommended Reading
7.4.3 Outlook
8 Optimizing Websites for Accessibility
8.1 Introduction
8.1.1 Introduction to Accessibility
8.1.2 User Groups and Assistive Technologies
8.1.3 Web Content Accessibility Guidelines
8.2 Making Components of a Website Accessible
8.2.1 Structuring Web Pages Semantically
8.2.2 Using Headings Correctly
8.2.3 Making Forms Accessible
8.2.4 Making Tables Accessible
8.2.5 Making Images Accessible
8.2.6 Making Links Accessible
8.2.7 Accessible Rich Internet Applications
8.2.8 Miscellaneous
8.3 Testing Accessibility
8.3.1 Types of Tests
8.3.2 Tools for Testing
8.4 Summary and Outlook
8.4.1 Key Points
8.4.2 Recommended Reading
8.4.3 Outlook
9 Simplifying CSS with CSS Preprocessors
9.1 Introduction
9.1.1 How CSS Preprocessors Work
9.1.2 Features of CSS Preprocessors
9.1.3 Sass, Less, and Stylus
9.2 Using Sass
9.2.1 Installing Sass
9.2.2 Compiling Sass Files to CSS
9.2.3 Using Variables
9.2.4 Using Operators
9.2.5 Using Branches
9.2.6 Using Loops
9.2.7 Using Functions
9.2.8 Implementing Custom Functions
9.2.9 Nesting Rules
9.2.10 Using Inheritance and Mixins
9.3 Summary and Outlook
9.3.1 Key Points
9.3.2 Recommended Reading
9.3.3 Outlook
10 Implementing Single-Page Applications
10.1 Introduction
10.2 Setup
10.3 Components: The Building Blocks of a React Application
10.3.1 State: The Local State of a Component
10.3.2 The Lifecycle of a Component
10.4 Styling Components
10.4.1 Inline Styling
10.4.2 CSS Classes and External Stylesheets
10.4.3 Overview of Other Styling Options
10.5 Component Hierarchies
10.6 Forms
10.7 The Context API
10.8 Routing
10.9 Summary and Outlook
10.9.1 Key Points
10.9.2 Recommended Reading
10.9.3 Outlook
11 Implementing Mobile Applications
11.1 The Different Types of Mobile Applications
11.1.1 Native Applications
11.1.2 Mobile Web Applications
11.1.3 Hybrid Applications
11.1.4 Comparing the Different Approaches
11.2 Responsive Design
11.2.1 Introduction: What Is Responsive Design?
11.2.2 Viewports
11.2.3 Media Queries
11.2.4 Flexible Layouts
11.3 Cross-Platform Development with React Native
11.3.1 The Principle of React Native
11.3.2 Installation and Project Initialization
11.3.3 Starting the Application
11.3.4 The Basic Structure of a React Native Application
11.3.5 User Interface Components
11.3.6 Building and Publishing Applications
11.4 Summary and Outlook
11.4.1 Key Points
11.4.2 Recommended Reading
11.4.3 Outlook
12 Understanding and Using Web Architectures
12.1 Layered Architectures
12.1.1 Basic Structure of Layered Architectures
12.1.2 Client-Server Architecture (Two-Tier Architecture)
12.1.3 Multi-Tier Architecture
12.2 Monoliths and Distributed Architectures
12.2.1 Monolithic Architecture
12.2.2 Service-Oriented Architecture
12.2.3 Microservice Architecture
12.2.4 Component-Based Architecture
12.2.5 Microfrontends Architecture
12.2.6 Messaging Architecture
12.2.7 Web Service Architecture
12.3 MV* Architectures
12.3.1 Model-View-Controller
12.3.2 Model-View-Presenter
12.3.3 Model-View-Viewmodel
12.4 Summary and Outlook
12.4.1 Key Points
12.4.2 Recommended Reading
12.4.3 Outlook
13 Using Programming Languages on the Server Side
13.1 Types of Programming Languages
13.1.1 Programming Languages by Degree of Abstraction
13.1.2 Compiled and Interpreted Programming Languages
13.2 Programming Paradigms
13.2.1 Imperative and Declarative Programming
13.2.2 Object-Oriented Programming
13.2.3 Functional Programming
13.3 What Are the Programming Languages?
13.3.1 Rankings of Programming Languages
13.3.2 Which Programming Language Should You Learn?
13.3.3 But Seriously Now: Which Programming Language Should You Learn?
13.4 Summary and Outlook
13.4.1 Key Points
13.4.2 Recommended Reading
13.4.3 Outlook
14 Using JavaScript on the Server Side
14.1 JavaScript on Node.js
14.1.1 Node.js Architecture
14.1.2 A First Program
14.1.3 Package Management
14.2 Using the Integrated Modules
14.2.1 Reading Files
14.2.2 Writing Files
14.2.3 Deleting Files
14.3 Implementing a Web Server
14.3.1 Preparations
14.3.2 Providing Static Files
14.3.3 Using the Express.js Web Framework
14.3.4 Processing Form Data
14.4 Summary and Outlook
14.4.1 Key Points
14.4.2 Recommended Reading
14.4.3 Outlook
15 Using the PHP Language
15.1 Introduction to the PHP Language
15.2 Installing PHP and the Web Server Locally
15.3 Variables, Data Types, and Operators
15.3.1 Using Variables
15.3.2 Using Constants
15.3.3 Using Operators
15.4 Using Control Structures
15.4.1 Conditional Statements
15.4.2 Loops
15.5 Functions and Error Handling
15.5.1 Defining Functions
15.5.2 Function Parameters
15.5.3 Defining Return Values
15.5.4 Using Data Types
15.5.5 Anonymous Functions
15.5.6 Declaring Variable Functions
15.5.7 Arrow Functions
15.5.8 Responding to Errors
15.6 Using Classes and Objects
15.6.1 Writing Classes
15.6.2 Creating Objects
15.6.3 Class Constants
15.6.4 Visibility
15.6.5 Inheritance
15.6.6 Class Abstraction
15.6.7 More Features
15.7 Developing Dynamic Websites with PHP
15.7.1 Creating and Preparing a Form
15.7.2 Receiving Form Data
15.7.3 Verifying Form Data
15.8 Summary and Outlook
15.8.1 Key Points
15.8.2 Recommended Reading
15.8.3 Outlook
16 Implementing Web Services
16.1 Introduction
16.2 SOAP
16.2.1 The Workflow with SOAP
16.2.2 Description of Web Services with WSDL
16.2.3 Structure of SOAP Messages
16.2.4 Conclusion
16.3 REST
16.3.1 The Workflow with REST
16.3.2 The Principles of REST
16.3.3 Implementing a REST API
16.3.4 Calling a REST API
16.4 GraphQL
16.4.1 The Disadvantages of REST
16.4.2 The Workflow of GraphQL
16.5 Summary and Outlook
16.5.1 Key Points
16.5.2 Recommended Reading
16.5.3 Outlook
17 Storing Data in Databases
17.1 Relational Databases
17.1.1 The Functionality of Relational Databases
17.1.2 The SQL Language
17.1.3 Real-Life Example: Using Relational Databases in Node.js
17.1.4 Object-Relational Mappings
17.2 Non-Relational Databases
17.2.1 Relational versus Non-Relational Databases
17.2.2 The Functionality of Non-Relational Databases
17.2.3 Key-Value Databases
17.2.4 Document-Oriented Databases
17.2.5 Graph Databases
17.2.6 Column-Oriented Databases
17.3 Summary and Outlook
17.3.1 Key Points
17.3.2 Recommended Reading
17.3.3 Outlook
18 Testing Web Applications
18.1 Automated Tests
18.1.1 Introduction
18.1.2 Types of Tests
18.1.3 Test-Driven Development
18.1.4 Running Automated Tests in JavaScript
18.2 Test Coverage
18.2.1 Introduction
18.2.2 Determining Test Coverage in JavaScript
18.3 Test Doubles
18.3.1 The Problem with Dependencies
18.3.2 Replacing Dependencies with Test Doubles
18.3.3 Spies
18.3.4 Stubs
18.3.5 Mock Objects
18.4 Summary and Outlook
18.4.1 Key Points
18.4.2 Recommended Reading
18.4.3 Outlook
19 Deploying and Hosting Web Applications
19.1 Introduction
19.1.1 Building, Deploying, and Hosting
19.1.2 Types of Deployment
19.1.3 Types of Hosting
19.1.4 Requirements for Servers
19.2 Container Management
19.2.1 Docker
19.2.2 Real-Life Example: Packaging a Web Application using Docker
19.2.3 Number of Docker Images
19.2.4 Docker Compose
19.3 Summary and Outlook
19.3.1 Key Points
19.3.2 Recommended Reading
19.3.3 Outlook
20 Securing Web Applications
20.1 Vulnerabilities
20.1.1 Open Web Application Security Project
20.1.2 Injection
20.1.3 Broken Authentication
20.1.4 Sensitive Data Exposure
20.1.5 XML External Entities
20.1.6 Broken Access Control
20.1.7 Security Misconfiguration
20.1.8 Cross-Site Scripting
20.1.9 Insecure Deserialization
20.1.10 Using Components with Known Vulnerabilities
20.1.11 Insufficient Logging and Monitoring
20.1.12 Outlook
20.2 Encryption and Cryptography
20.2.1 Symmetric Cryptography
20.2.2 Asymmetric Cryptography
20.2.3 SSL, TLS, and HTTPS
20.3 Same-Origin Policies, Content Security Policies, and Cross-Origin Resource Sharing
20.3.1 Same Origin Policy
20.3.2 Cross-Origin Resource Sharing
20.3.3 Content Security Policy
20.4 Authentication
20.4.1 Basic Authentication
20.4.2 Session-Based Authentication
20.4.3 Token-Based Authentication
20.5 Summary and Outlook
20.5.1 Key Points
20.5.2 Recommended Reading
20.5.3 Outlook
21 Optimizing the Performance of Web Applications
21.1 Introduction
21.1.1 What Should Be Optimized and Why?
21.1.2 How Can Performance Be Measured?
21.1.3 Which Tools Are Available for Measuring Performance?
21.2 Options for Optimization
21.2.1 Optimizing Connection Times
21.2.2 Using a Server-Side Cache
21.2.3 Optimizing Images
21.2.4 Using a Client-Side Cache
21.2.5 Minifying the Code
21.2.6 Compressing Files
21.2.7 Lazy Loading: Loading Data Only When Needed
21.2.8 Preloading Data
21.3 Summary and Outlook
21.3.1 Key Points
21.3.2 Recommended Reading
21.3.3 Outlook
22 Organizing and Managing Web Projects
22.1 Types of Version Control Systems
22.1.1 Central Version Control Systems
22.1.2 Decentralized Version Control Systems
22.2 The Git Version Control System
22.2.1 How Git Stores Data
22.2.2 The Different Areas of Git
22.2.3 Installation
22.2.4 Creating a New Git Repository
22.2.5 Transferring Changes to the Staging Area
22.2.6 Committing Changes to the Local Repository
22.2.7 Committing Changes to the Remote Repository
22.2.8 Transferring Changes from the Remote Repository
22.2.9 Working in a New Branch
22.2.10 Transferring Changes from a Branch
22.3 Summary and Outlook
22.3.1 Key Points
22.3.2 Recommended Reading
22.3.3 Outlook
23 Managing Web Projects
23.1 Classic Project Management versus Agile Project Management
23.1.1 Classic Project Management
23.1.2 Agile Project Management
23.2 Agile Project Management Based on Scrum
23.2.1 The Scrum Workflow
23.2.2 The Roles of Scrum
23.2.3 Events in Scrum
23.2.4 Artifacts in Scrum
23.3 Summary and Outlook
23.3.1 Key Points
23.3.2 Recommended Reading
23.3.3 Outlook
A HTTP
A.1 HTTP Status Codes
A.1.1 Brief Overview
A.2 MIME Types
A.3 Headers
A.3.1 Request Headers
A.3.2 Response Headers
B HTML Elements
B.1 HTML and Metadata
B.2 Page Areas
B.3 Content Grouping
B.4 Text
B.5 Changes to the Document
B.6 Embedded Content
B.7 Tables
B.8 Forms
B.9 Scripts
C Tools and Command References
C.1 Node.js
C.1.1 Installation File on macOS
C.1.2 Installation File on Windows
C.1.3 Binary Package on macOS
C.1.4 Binary Package on Windows
C.1.5 Binary Package on Linux
C.1.6 Package Manager
C.2 Testing Tools
C.3 Git Command Reference
C.4 Docker Command Reference
C.5 Docker Compose Command Reference
D Conclusion
E The Author
Index
Service Pages
Legal Notes
Foreword
In modern web development, you can hardly afford the luxury of claiming to be a purely frontend or backend developer. To make an application a success, you need to think outside the box, which can easily become frustrating, especially in the web world with its short release cycles and short-lived libraries. These demands make it all the more important to create a solid introduction to the topic and to continuously develop from this point.
The term full stack developer has become established, and not without reason. To me, this designation means less the idea that every developer in a web project must be able to do everything, but that everyone should have an overview of the overall system of a web application and understand the interrelationships. This overview starts with the infrastructure on which the application gets executed, continues with the organization of data storage and the backend of the application, and ends with the implementation of the frontend. A full stack developer is not necessarily only equipped with broad but shallow knowledge but may also specialize on one topic. At this point, the view of the overall system must not be lost.
This book is your ideal companion for getting started in full stack development. You’ll get an overview of all topics important for the implementation of a full-fledged web application: starting with the frontend with Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript over backend interfaces to the storage of information in databases. But topics like testing, deployment, and the organization of the source code with version control aren’t neglected either. In the process, Philip Ackermann not only teaches you how to use modern technologies but also explains concepts that are necessary for understanding applications and that help you become familiar with common libraries and frameworks. JavaScript as a technology forms an important basis in this context since it can be used both on the client and server side. Since the monopoly of JavaScript in the frontend means that you can’t avoid the need for solid basic knowledge of this language, you can make your life as a full stack developer much easier if you also use JavaScript on the server side in the form of the Node.js platform. The following principle applies: Take a look at other solution approaches such as C# or Python, get inspired, and find the approach that suits you best.
I want to take this opportunity to thank Philip for allowing me to contribute to this book with Chapter 10 on React. You can use React as an opportunity to consider single-page application development and learn about the architectural and design principles of this type of web frontend. Although the major frontend frameworks differ from each other in their implementation details, sometimes significantly, the basic paradigms are the same everywhere.
Of course, no book can make a full stack developer out of you. However, your expectation should be taking your first steps on a long road ahead. At the end of each chapter, Philip provides a list of further reading to delve more deeply into each topic.
I now hope you enjoy working through this book and that you gain many new insights from it.
Sebastian SpringerAßling, Germany
Preface
When developing web applications today, it’s true that there are more options and better tools than 20 years ago. However, the demands on developers have also increased. Practically every job ad for web developers uses the word “full stack” and requests numerous skills in a wide variety of areas. In short, “full stack developers” are in demand as never before.
However, the demands on such full stack developers are enormous. No wonder, since “full stack” refers to an entire technology stack that must be mastered to develop a web application “from front to back”—that is, from the frontend to the backend—and then prepare it for productive use.
I remember well when I myself first encountered web development, around the turn of the millennium—about 20 years ago—before I started studying computer science. During my training as a media designer, I devoured entire books on Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript; worked through online tutorials; and developed like crazy. These three languages for the web, which are still important today, were enough for me as a web developer at that time.
During my studies, and while working as a student assistant at the Fraunhofer Institute for Applied Information Technology, I came into contact with a “real” programming language for the first time—Java—and gradually got to know the other layers of a web application: the layers on the server side. My task was to convert a Java-based desktop software to a web application based on web services.
Later, and thanks to Node.js, we implemented the application almost completely from scratch using JavaScript, which had meanwhile turned into a serious programming language for the server side. We also swapped the formerly relational database for a non-relational database due to new requirements.
For almost six years now, I have been employed at Cedalo GmbH, now as a chief technology officer (CTO), where we develop several software products. Here, too, I am still concerned with all levels (i.e., with the entire “stack” of the software) regardless of whether we’re selecting the right database for a particular use case or defining the right interface for a web service. These issues come across my desk on a daily basis. To ensure that the finished software products are properly prepared for production systems, DevOps topics have now also been added to my toolbox.
Why am I telling you all this? Certainly not for me to present my resume to you. But because exactly the topics mentioned—HTML, CSS, JavaScript, web services, databases, DevOps—are now requirements for all full stack developers. Of course, deciding where to start and what exactly to focus on can be difficult.
This book is intended to serve as both a roadmap and a guidebook for you. I would like to use my knowledge from more than 20 years in web and software development to teach you the most important basics for full stack development in a compact way. On one hand, I want to help you conquer your fear of sheer number of topics, and on the other hand, I want to teach you which topics are really important.
No matter if related to frontend development or backend development; related to the implementation of web services or the selection of the right database; or related to topics like security, automated testing, or the deployment of web applications, in this book, you’ll find everything you need as a full stack developer.
Intended Audience
The book is aimed primarily for newcomers to web development who want to gain a comprehensive overview of full stack development. Thus, you don’t need previous knowledge of HTML, CSS, and or programming. This book is designed to guide you on the path to becoming a full stack developer and effectively teach you the important technologies.
Structure of the Book
In total, this book consists of 23 chapters on topics that I felt were particularly important when it comes to web development and full stack development. For a slightly more detailed description of each chapter, see Chapter 1. So, if you’re still deciding whether or not to buy, and I haven’t been able to convince you up to this point, now would be a good time to take a quick look at Chapter 1. ☺
Additionally, you can find the source text for this book at its official website at www.rheinwerk-computing.com/5704. Alternatively, the source code is also available in a GitHub repository at https://github.com/cleancoderocker/webhandbuch.
How Should I Read This Book?
I advise working through the book from cover to cover, chapter by chapter. This order is the best way for you to understand the context of each topic and ensures that you don’t miss anything important.
Of course, the book is also intended to serve as a guide and reference book that you’ll be happy to pull off the shelf again and again to refresh your knowledge as needed. Both the chapter headings and the index should enable you to quickly find the topic you’re looking for.
Acknowledgments
Writing a book always involves all kinds of work. At this point, I would like to thank all those who made this book project possible and helped me with it.
Most of all, I would like to thank my wife and children for their patience and support while I worked on this book.
In addition, I would like to thank my editor Stephan Mattescheck for the—as always—very professional and friendly collaboration, as well as the entire team involved at Rheinwerk Computing. My thanks go to Sascha Kersken and Sebastian Springer for their always extremely useful expert opinion and the many helpful hints and suggestions.
I would also like to thank you, the reader, first for buying this book of course, but also for the time you’ll spend reading and working through it. I hope you’ll enjoy it and learn many new things.
Of course, I am very happy to receive feedback on this book. I’ll be happy to answer any questions or suggestions you may have at [email protected]. You can also visit www.rheinwerk-computing.com/5704 or www.fullstack.guide for more information and updates on this book.
Philip AckermannRheinbach, Germany
1 Understanding the Basics
This first chapter provides an overview of web development and explains the most important terminology.
Everybody talks about full stack development, but to understand what it actually is, we first need to look at its basic principles. The first and second parts of this chapter deal precisely with these basic principles, before we turn to the concept of full stack development in the third part.
1.1 Terminology
In this part, I first want to provide an overview of important terms relevant to web development. Then, we’ll take a look at the basic structure of web applications.
1.1.1 Client and Server
Web pages and web applications (see the box for definitions and differences) generally have parts: one that is executed on the client side (the frontend) and one executed on the server side (the backend). On the server side, a web server ensures that the website is available. On the client side, the web application is accessed via a web client (also referred to as the client or user agent). Usually, the client is a web browser (browser for short), but other types of clients also exist, such as screen readers, command line-based or program-controlled Hypertext Markup Language (HTML) clients, or headless browsers, which don’t have a graphical user interface (GUI).
When you call a web page in the browser, the following procedure is executed: On the client side, the user enters an address into the address bar of the browser, a Uniform Resource Locator (URL), discussed further in Section 1.1.2, and confirms the loading of the web page by clicking the corresponding browser button. The browser then generates a request in the background that is sent to the server via the HTTP protocol (Chapter 5). This request is also referred to as the HTTPrequest. On the server side, the web server receives the request and generates an appropriate response (HTTPresponse) to send back to the client. The browser, in turn, receives the response and renders (that is, visualizes) the web page. The browser automatically loads any required resources, such as images, so that they can be displayed.
Figure 1.1The Client-Server Principle
Definition of Terms
Throughout this book, I use the terms web page, website, and web application, which are often incorrectly used interchangeably. For this reason, let’s briefly clarify these terms: A web page refers to a single HTML document that can be accessed at a specific URL, whereas a website is a collection of several such individual web pages, for example, the websites for this book: http://www.fullstack.guide/and the publisher’s website www.rheinwerk-computing.com/5704. A web application, on the other hand, is a website that feels more like a desktop application. Examples include Google Documents and Google Sheets. A synonym for these interactive and sometimes complex web applications is Rich Internet Application.
1.1.2 Relationship between URLs, Domains, and IP Addresses
As mentioned earlier, the address you enter into the address bar of the browser is referred to as a URL. Examples of URLs include the following:
https://www.philipackermann.de/
https://www.philipackermann.de/static/img/profile.jpg
https://www.webdevhandbuch.de/static/styles/styles.css
https://www.webdevhandbuch.de/service/api/users?search=max
A URL consists of several different parts.
Figure 1.2 Structure of URLs
Let’s breakdown the parts of a URL, as follows:
Protocol/schemaDefines the protocol to be used. Possible protocols include:
HTTP: The HTTP protocol, or its secure variant Hypertext Transfer Protocol Secure (HTTPS), is used to transfer web pages.
File Transfer Protocol (FTP): This protocol is used to transfer files to or from an FTP server.
Simple Mail Transfer Protocol (SMTP): This protocol is used for the transmission of emails.
Host name Sometimes also host, uniquely identifies the web server. The host consists of a subdomain, a domain, and a top-level domain. For example, the host “www.cleancoderocker.com” consists of the subdomain “www,” the domain “cleancoderocker,” and the top-level domain “com.”
PortSpecifies which “channel” to use to access the web server. Usually, you won’t see this part when “browsing normally” because standard ports are used (for example, 80 for HTTP or 443 for HTTPS, see also https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers) and thus are not shown in your browser’s address bar. However, for local development and especially for developing web services (Chapter 13), you’ll deal with custom ports more often. For example, a URL of a web service running locally on your computer might look like “http://localhost:8080/myservice/api/users.”
PathSpecifies the path on the web server to access the requested file (or more generally to the requested resource because the item being served isn’t always a file in the physical sense). For example, in the URL “https://www.philipackermann.de/static/img/profile.jpg,” the “/static/img/profile.jpg” is the path. The path separator is always a forward slash.
Query stringThis text can be used to pass additional information in the form of key-value pairs, which the web server can then use to generate the HTTP response. A query string is introduced by a question mark. The individual query string parameters are connected by an ampersand, and the keys and their values are separated by an equal sign, for example, “https://www.philipackermann.de/example?search=javascript&display=list.”
FragmentThis text allows you to “target” a specific location within a web page so that the browser “jumps” directly to that location when the web page loads. This part is introduced by the # character, for example, “https://www.philipackermann.de/example#chapter5.”
IP Addresses and DNS
Every web server has a unique address through which it can be reached—the web server’s IP address, either in IPv4 or IPv6 format. Technically, these values are 32-digit binary numbers (for IPv4) and 128-digit binary numbers (for IPv6), for example, 192.0.2.45 or 0:0:0:0:ffff:c000:22d, respectively. But since no one can memorize these cryptic-looking addresses, Domain Name System (DNS) servers contain mappings of host names to IP addresses and return the IP address of the corresponding web server for a host name.
Thus, when you enter a URL (and, thus, a host name), the browser—before it can make a request to the actual web server—first asks a DNS server to retrieve the IP address of the web server based on the host name you’ve entered. Only when this information is received does your browser make an actual request to the web server, as shown in Figure 1.3.
Figure 1.3 The DNS Principle
1.2 Structure of Web Applications
In web application development, three languages are crucial and indispensable for web developers, especially for frontend development: the HTMLmarkup language, the Cascading Style Sheets (CSS)style language, and the JavaScriptprogramming language. In this section, I’ll explain the relationship between these three languages. Then, we’ll explore each of these languages in the chapters that follow.
1.2.1 Creating Web Pages Using HTML
HTML enables you to define the structure of a web page and specify the meanings (the semantics) of the individual components on a web page by using HTML elements and HTML attributes. For example, you can describe an area on the web page as the main content and another area as navigation, and you can define components, such as forms, lists, buttons, input fields, and tables, as shown in Figure 1.4.
Figure 1.4 Using HTML to Define the Structure of a Web Page
Note
We’ll describe HTML in detail in Chapter 2.
1.2.2 Designing Web Pages with CSS
HTML alone does not make a website visually appealing. CSS is responsible for this part. Using CSS rules, you can design how the individual components you’ve previously defined in HTML should be displayed. Thus, you can use CSS to define the design and layout of a web page. For example, you can define text colors, text sizes, borders, background colors, color gradients, and so on.
As shown in Figure 1.5, we used CSS to adjust the font and font size of the table headings and table cells, to add borders between table columns and table rows, and to alternate the background color of the table rows. This design already looks a lot more modern and appealing than the standard visualization of pure HTML shown earlier in Figure 1.4.
Figure 1.5 Defining the Layout and Appearance of Individual Elements of Web Pages with CSS
Note
In Chapter 3, you’ll learn exactly how CSS works.
1.2.3 Making Web Pages Interactive with JavaScript
HTML defines the structure, while CSS defines the design and layout. Contrary to common belief, neither is a programming language sincethey don’t allow you to implement application logic within a web page, which is exactly where JavaScript comes into play. Unlike the other two languages, JavaScript is a programming language for adding dynamic behavior to a web page (or to components on a web page) to increase interactivity.
Examples of possible dynamic behaviors include sorting and filtering table data, as shown in Figure 1.6 and Figure 1.7, generating dynamic content on the client side, client-side validation of form input (although partially possible with HTML), and much more.
Figure 1.6 Making User-Friendly and Interactive Web Pages with JavaScript: Sortable Tables
Figure 1.7 Making User-Friendly and Interactive Web Pages with JavaScript: Filtering Data
Note
A more detailed introduction to JavaScript will follow in Chapter 4.
In most cases, a web page consists of a combination of HTML, CSS, and JavaScript code, as shown in Figure 1.8.
Figure 1.8Combining HTML, CSS, and JavaScript within a Web Page
Note
HTML structures a web page, CSS is for layout and design, and JavaScript add behaviors and interactivity. HTML and CSS aren’t programming languages—HTML is a markup language, and CSS is a style language. Of these three languages, only JavaScript is a programming language.
1.2.4 Making Web Pages Dynamic Using Server-Side Logic
As mentioned earlier, web pages have a part that runs on the client side and one part that runs on the server. Basically, however, a distinction must be made in this regard: With static web pages, the web server only provides static content in the form of files from its file system (i.e., HTML, CSS, JavaScript, images, etc.), as shown in Figure 1.9.
Figure 1.9 The Principle of Static Web Pages
With dynamic web pages, on the other hand, the web server generates the content (in the form of HTML code) dynamically at runtime and sends this content back to the client. The data that determines what content is generated is usually retrieved by the web server from a database, as shown in Figure 1.10.
Figure 1.10 The Principle of Dynamic Web Pages
Static web pages are usually not as complex to implement as dynamic web pages because their backends consist of simple web servers that simply send files to clients (without any backend logic to implement). Dynamic web pages, on the other hand, can become pretty complex depending on the use case.
1.3 Full Stack Development
Now that you have an idea of the most important terms in web development, I want to show you what the term “full stack” is all about, where it comes from, and the tasks expected of a full stack developer.
1.3.1 What Are Software Stacks?
A software stack (also a solution stack or just stack) is a concrete selection of certain components that together form a platform with which an application is developed and operated. Individual components of a stack can include the following:
The operating system on which the software or application runs (both the client-side and server-side operating systems). The classic operating systems are Linux, macOS, and Windows, but mobile operating systems, such as Android or iOS, are now commonplace.
The web server that hosts the application, for example, nginx or Apache HTTP Server.
The programming language that implements the application logic, for example, JavaScript, Java, C++, or PHP (see also Chapter 13).
The programming tools (tools) used during development, such as compilers to translate human-readable source code into computer-readable machine code.
The libraries that are used, such as frontend libraries like Lodash (https://lodash.com/) or jQuery (https://jquery.com/).
The frameworks used, such as web frameworks like Express (https://expressjs.com/).
The runtime environment under which the application is executed, for example, the JavaScript runtime Node.js, which allows JavaScript code to be executed on the server side as well (see Chapter 14).
The databases used, such as relational databases like MySQL and PostgreSQL or non-relational databases (also NoSQL databases), such as MongoDB (see Chapter 14).
The term stack reflects how the individual components are arranged hierarchically in the platform and appear “stacked on top of each other,” as shown in Figure 1.11.
Figure 1.11 Software Stacks as a Selection of Specific Components for the Development of Applications
In web applications, a distinction is also often made between a server-side stack (server stack) and a client-side stack (client stack), which can be fundamentally different. For example, a common practice is to use a programming language like Java to implement the backend and then use HTML, JavaScript, and CSS to implement the frontend. Conversely, you can conceivably program a backend in JavaScript and a frontend in Java (for example, when developing an app for Android-based smartphones).
1.3.2 What Types of Stacks Exist?
One of the best known (and oldest) examples of a backend stack is the LAMP stack—a combination of Linux (operating system), Apache (web server), MySQL (database), and PHP (programming language). Variants of the LAMP stack might use another operating system instead of Linux, for instance, WAMP (variant for Windows) and MAMP (variant for macOS). Newer variants of this stack also use Ruby or Python as the programming language instead of PHP.
Not quite as old, but perhaps more well known, is the MEAN stack, which does not distinguish quite properly between backend and frontend. A MEAN stack consists of MongoDB (a non-relational document database), Express (a web framework and a web server), Angular (a frontend framework), and Node.js (a server-side JavaScript runtime environment). This combination offers a charming advantage for developers in that the same programming language is used for both the client side and the server side.
A slight modification of the MEAN stack, the MERN stack is also pretty popular. This stack uses the React framework instead of Angular for the frontend. The other components of the stack (i.e., MongoDB, Express, and Node.js) are the same.
Note
Software stacks don’t necessarily need to contain all of the components we’ve just mentioned. For example, the MEAN and MERN stacks are not limited to a single operating system but can run on all three major operating systems (Linux, macOS, or Windows) thanks to the platform independence of Node.js.
HTML, CSS, and JavaScript
The frontend stack—consisting of the basic web technologies HTML, CSS, and JavaScript—is so important for frontend development that it is no longer even explicitly referred to as a stack.
1.3.3 What Is a Full Stack Developer?
Now that we’ve clarified the term software stack, let’s turn to what exactly full stack means, what full stack developers are, and what they do.
Full Stack
The term full stack covers the complete stack (i.e., both the backend stack and the frontend stack). So, a full stack developer is someone who develops both the backend and the frontend or someone who is equally comfortable with backend technologies and frontend technologies.
Full Stack Developers
Full stack developers are therefore true all-rounders: They can implement both a web interface with HTML, CSS, and JavaScript and a web service that runs on the server side and processes requests from the client. They can also select the right database to meet specific requirements and also know how to prepare the entire application for use in production systems, as shown in Figure 1.12.
Figure 1.12The Many Requirements of Full Stack Developers
Requirements for Full Stack Developers
Let’s quickly look at the types of roles that can occur in a web project (exclusively regarding development):
Frontend developersCan build complex web interfaces using HTML, CSS, and JavaScript and, at best, has design experience. Should also be familiar with frontend libraries and frameworks such as Angular, React, and Vue; be able to use the relevant tools such as WebPack or Babel; and know how to use CSS preprocessor languages.
Backend developersCan develop complex application logic for the server side and make this logic available via web services, for example. Should know web service Application Programming Interface (API) design and which databases are suitable for which purposes.
DevOps specialists DevOps is made up of the terms development and operations and combines these two areas of activity into one role, the DevOps specialist (or DevOps for short). The tasks of DevOps specialists thus include, for example, deploying applications for production systems, configuring build systems, and administering web servers. In addition, DevOps specialists are also often familiar with topics like web application security and performance.
In a best case scenario, a full stack developer fulfills all of these requirements and combines the three roles in one person to a certain extent. Acquiring this breadth of knowledge is not an easy task and often requires years of experience.
Note
Our discussion of the requirements for frontend developers, backend developers, and DevOps is by no means exhaustive, and even within these three groups, further specialization is possible, such as database specialists, frontend designers, user experience (UX) designers, testers, and more.
Full Stack Developers versus Specialists
Due to the wide range of possible requirements, however, many full stack developers quickly run the risk of being “only a little bit good at everything, but not quite good at anything.” This is then contrasted by the specialists who have specialized precisely in a particular area. A database specialist usually knows databases better than a full stack developer; a frontend designer probably knows the various CSS tricks necessary to implement a layout exactly according to a template. A DevOps specialist, in turn, is usually more effective at working with the command line and at managing servers than a full stack developer.
Large Companies versus Start-Ups
In large companies or large software projects, entire teams frequently exist for different areas of the stack. One team might take care of the database, another might be responsible for the frontend design, a third team might manage the implementation of the design into a concrete web interface, and so on. Full stack developers are therefore often needed especially in smaller companies or start-ups, which can (or must) often react in a more agile and flexible manner to changing requirements.
The Focus of This Book
You can’t become a full stack developer overnight, and even working through a thick book like this one won’t make you a full stack developer. Rather, the goal of this book is to provide an overview of a broad range of topics important to full stack developers. This book is designed to guide you to becoming a developer who is familiar with many technologies, both backend and frontend, and to some extent DevOps. Whether you then want to call yourself a “full stack developer” is up to you.
1.3.4 Structure of This Book
The total of 23 chapters can be roughly divided into three sections: Chapters 1 through 11 deal mainly with general basics and topics from the frontend area, and Chapters 12 through 17 deal with topics that are mainly related to the backend area. Chapters 18 through 23 deal with topics that are relevant to both the frontend and the backend, such as testing, security, deployment, and the management of web projects.
Frontend
This part of the book is organized in the following way:
In Chapter 1, you’ll get to know (or have already learned) the most important basics.
In Chapters 2 through 4, I’ll describe the three major languages of the web in detail.
In Chapter 5, you’ll learn which protocols are important in the context of web applications and when each is used.
In Chapter 6, you’ll learn about various formats that are important for implementing web applications.
Chapter 7 introduces you to a selection of web APIs for JavaScript, which are program-based interfaces that can be controlled through JavaScript.
In Chapter 8, I’ll show you what you should consider when it comes to web page accessibility.
Chapter 9 describes tools to help you make your CSS code more concise.
In Chapter 10, a guest author for this book, Sebastian Springer, shows you what single-page applications are and how you can implement them using the React JavaScript library.
In Chapter 11, you’ll learn about different types of mobile web applications.
Backend
This part of the book is structured in the following way:
Chapter 12 introduces you to several web architectures that form the basis for most web applications.
In Chapter 13, we’ll turn to the various programming languages used on the server side. I’ll show you what types of programming languages exist and which are relevant for implementing web applications.
Based on Chapter 13, Chapter 14 describes how to run JavaScript on the server side using the Node.js runtime.
For Chapter 15, another guest author for this book, Florian Simeth, introduces you to the PHP language.
In Chapter 16, you’ll learn what web services are and how to implement them.
Chapter 17 provides everything you need to know about databases as a full stack developer.
Cross-Disciplinary Topics and DevOps
This part of the book focuses on the following topics:
In Chapter 18, you’ll learn how to automate web application testing.
In Chapter 19, I’ll show you how to prepare web applications for production use, that is, how to “deploy” them.
Chapter 20 describes considerations related to web application security and how to prevent vulnerabilities and security gaps.
In Chapter 21, we’ll look at how you can optimize the speed and performance of your web applications.
In Chapter 22, you’ll learn how best to manage web projects and organize their versions.
Chapter 23 describes different types of project management and goes into a little more detail about the Scrum process model.
Appendices
The book is rounded out by several appendices for overviews of HTTP (Appendix A) and HTML (Appendix B) as well as information and command references for the tools used in this book (Appendix C).
Overview
To highlight how each chapter fits in thematically with the whole book, you’ll find a kind of roadmap at the beginning of each chapter, with the topic discussed in each chapter highlighted. Some topics are on the client side (for example, HTML or web APIs), and others on the server side (for example, web services and databases). One topic is in between (web protocols), and others—the cross-disciplinary topics—are on both sides.
Figure 1.13 Classifying the Different Topics in this Book
1.4 Tools for Full Stack Developers
For web application development, you need the right tools to make your work easier. Without the right tools, development would be a lot more time consuming. Throughout this book, I’ll provide tips in this regard. At this point, however, I want to introduce you to the basic tools you absolutely need for development:
Editors: Even if a simple text editor is basically sufficient for developing web applications or implementing the associated source code, I recommend you install a good editor that supports you in writing source code and that is specifically designed for development. Code editors can, for example, highlight the source code in colors (syntax highlighting), relieve you of typing with recurring source code modules, recognize syntax errors in your source code, and much more.
Development environments: Simply put, these powerful code editors provide common features like syntax highlighting but also advanced features such as integrated debugging tools, version control, and so on.
Browsers: Of course, a browser is required for testing web applications. In particular, the developer tools available in most browsers have become indispensable parts of a web developer’s toolbox.
1.4.1 Editors
Meanwhile, a whole range of good code editors are available for the development of web applications. Particularly popular are Sublime Text (www.sublimetext.com, shown in Figure 1.14); Atom (https://atom.io, shown in Figure 1.15); and Brackets (https://brackets.io). All of these editors are available for Linux, Windows, and macOS. Basically, the editors I’ve mentioned are quite similar, so which you adopt depends mainly on your personal tastes. Try out several to find which one appeals to you the most.
Figure 1.14 The Sublime Text Editor
Figure 1.15The Atom Editor
1.4.2 Development Environments
More powerful than editors are development environments, often called integrated development environments (IDEs). Compared to a normal editor, development environments have special features for the development of software, such as synchronization with a version control system, the execution of automatic builds, or the integration of test frameworks. If one of these features is not installed by default, usually a corresponding plugin is available.
Well-known examples of development environments specifically for web application development include Microsoft Visual Studio Code (VS Code; https://code.visualstudio.com, shown in Figure 1.16) and WebStorm by IntelliJ (www.jetbrains.com/webstorm, shown in Figure 1.17).
Note
A good overview of plugins available for VS Code can be found at its official website at https://marketplace.visualstudio.com/vscode.
Figure 1.16The VS Code Development Environment
Figure 1.17 The WebStorm Development Environment
1.4.3 Browsers
To display a web page or HTML document that you’ve created in an editor or a development environment, you’ll need a web browser. An essential component of a web browser is its rendering engine, which enables you to visualize HTML, CSS, and JavaScript.
Tip
Since the rendering engines of individual browsers differ in detail (i.e., sometimes resulting in different visualizations), you should always test a web page on several browsers.
The five most popular browsers are the following:
Google Chrome: https://www.google.com/chrome (shown in Figure 1.18)
Mozilla Firefox: https://www.mozilla.org/firefox (shown in Figure 1.19)
Safari: https://support.apple.com/downloads/safari (shown in Figure 1.20)
Opera: https://www.opera.com (shown in Figure 1.21)
Microsoft Edge: https://www.microsoft.com/edge (shown in Figure 1.22)
Figure 1.18 Google Chrome (macOS)
Figure 1.19Mozilla Firefox (macOS)
Figure 1.20 Safari (macOS)
Figure 1.21Opera (macOS)
Figure 1.22 Microsoft Edge (macOS)
Besides these “big five” browsers, quite a few others exist. Most notable are Microsoft’s (aging) Internet Explorer (the predecessor of the faster Microsoft Edge browser), which—to the chagrin of many developers—is still used by some companies today, and Brave (https://brave.com), which was initiated by Brendan Eich, the inventor of the JavaScript language. If you’re interested, you can find an extensive list of other alternatives at the links to Wikipedia pages mentioned in the box.
Note
For an overview of the distribution of browsers, see https://en.wikipedia.org/wiki/Usage_share_of_web_browsers. As of today (February 2023, with StatCounter statistics from December 2022), Chrome is by far (71.2%) the most used browser, followed by Safari (15.1%), Microsoft Edge (3.7%), Firefox (3.0%), and Opera (1.3%). You can also compare various browsers based on criteria such as range of function, support for web technologies, etc. at https://en.wikipedia.org/wiki/Comparison_of_web_browsers.
Additional Information
To determine which browsers use which rendering engines, see https://en.wikipedia.org/wiki/Comparison_of_browser_engines. In this context, we recommend reading “How browsers work: Behind the scenes of modern web browsers” at https://www.html5rocks.com/de/tutorials/internals/howbrowserswork, which explains in detail the functionality of browsers and rendering engines.
Which Browser Is the Right One?
Which browser is the “right one,” that is, which one you should use, depends on various factors:
Customer requirements Does the customer have any special requirements? Often, you’ll encounter rather specific requirements about which browsers a web application must work for. Now and then—don’t panic—this requirement can involve Internet Explorer.
Features Do certain features need to be supported? The individual browsers (or more precisely, the various rendering engines) support different features depending on their version. Especially with the abundance of web APIs now available, the individual engines will differ. For a good overview of whether a feature is supported, check out the website https://caniuse.com.
Functional scopeBy now, all major browsers offer a similar range of functions. Of particular interest to developers are the developer tools, which you can use, for example, to adapt HTML and CSS or execute JavaScript for a web page that has already been rendered.
1.5 Summary and Outlook
In this chapter, you learned the most important basic concepts important for the rest of this book. To conclude this chapter, I’ll provide an overview of the most important points and offer a brief outlook on what to expect in the following chapters. I’ll do this kind of retrospective at the end of each chapter.
1.5.1 Key Points
The following key points were presented in this chapter:
Web pages, websites, and web applications consist of two parts: one that runs on the client side (the frontend) and one that runs on the server side (the backend).
The address you enter in the browser’s address bar is called a Uniform Resource Locator (URL).
Every web server has a unique address through which it can be reached, the IP address, which is in IPv4 or IPv6 format.
Domain Name System (DNS servers) map host names to IP addresses and return IP addresses for web servers associated with specific host names.
The following languages are especially important in web development:
Using Hypertext Markup Language (HTML), you can define the structure of a web page via HTML elements and HTML attributes and determine the meaning (the semantics) of individual components on a web page.
The Cascading Style Sheets (CSS) style language uses CSS rules to design how the individual components that you have previously defined in HTML should be displayed on the screen.
You can add dynamic behavior to a web page using the JavaScript programming language.
A software stack or stack is a concrete selection of certain components that together form a platform with which an application is developed and operated.
For web applications, several well-known stacks are available such as the LAMP, WAMP, MAMP, MEAN, and MERN stacks.
Full stack developers are familiar with all areas of a stack and combine the roles of frontend developer, backend developer, and DevOps.
A full stack developer’s toolbox consists of an editor or a development environment, one or more browsers (in different versions), their browser developer tools, and other tools that we’ll introduce later in this book.
1.5.2 Outlook
This book is divided roughly into three parts, and in the following chapters, I’ll discuss the most important languages of the web. The next chapter starts us off with HTML.
2 Structuring Web Pages with HTML
Along with the Cascading Style Sheets (CSS) style language and the JavaScript programming language, the Hypertext Markup Language (HTML) is one of the three major languages important for frontend development.
In this chapter, you’ll learn about the HTML language, which is used to define the structure of web pages.
Figure 2.1 HTML, One of Three Important Languages for the Web, Defines the Structure of Web Pages
2.1 Introduction
I don’t want to dwell on the history of HTML too long. Instead, let’s get into the language itself as quickly as possible with just a brief overview of the major versions of HTML.
2.1.1 Versions
A complete history of HTML, as well as all the different version numbers and release dates, can be found at https://en.wikipedia.org/wiki/HTML, for example, However, for a quick overview, let’s briefly touch upon following versions:
HTML: The first version (without a version number) was published in 1992 and was based on proposals that Tim Berners-Lee (the inventor of HTML) had already worked out in 1989 at the European Organization for Nuclear Research (CERN).
HTML 4.0: Released in 1997 and important because CSS became available in this version (see Chapter 3).
XHTML 1.0: With the appearance of the Extensible Markup Language (XML), described further in Chapter 6, the HTML language was reformulated according to XML rules. These rules are more strict than those of HTML 4.0; for example, attributes can only be written in lowercase and must always have a value (Section 2.1.2).
HTML5: This version was released in 2014 and replaced previous versions of HTML (and XHTML). HTML5, intentionally written with the version number right after “HTML,” introduced a number of new functionalities as well as numerous new web Application Programming Interfaces (APIs), which we’ll discuss in more detail in Chapter 7.
Like many other standards on the web, HTML is maintained by the World Wide Web Consortium (W3C). For a long time, the W3C attached great importance to adopting stable specifications for various standards, which, however, was not conducive to further development of the HTML standard and unnecessarily delayed progress. As a response, various browser manufacturers founded the Web Hypertext Application Technology Working Group (WHATWG), which then regarded the HTML standard as a “living specification” (living standard) and has since continued to develop HTML without a concrete version number (see https://html.spec.whatwg.org/). Meanwhile, however, the W3C and the WHATWG have agreed on further development of the standard and are now collaborating on the Living Standard.
2.1.2 Using Elements and Attributes
As mentioned in Chapter 1, you can use HTML to define the structure of a web page as well as the meanings (the semantics) of individual components on a web page. Similar to word processing programs like Microsoft Word, you can highlight text, define headings, include images, create lists, and generate complex tables.
Defining the Structure via Elements
To define these components, you’ll use elements (HTML elements), which in turn can be individualized via through attributes (HTML attributes). Listing 2.1 shows a relatively simple web page: Notice how each element consists of an opening tag and a closing tag. The opening tag introduces an element, and the closing tag ends the element. For example, the opening tag <h1> introduces a first-level heading, and the (closing) tag </h1>
