book

Full Stack Web Development

Name: Full Stack Web Development
ISBN: 9781836644934

by Rheinwerk Publishing, Inc, Philip Ackermann

September 2024

Intermediate to advanced

743 pages

27h 48m

English

Packt Publishing

Read now

Unlock full access

Dear Reader
Notes on Usage
Table of Contents
Foreword
Preface
Intended Audience Structure of the Book How Should I Read This Book? Acknowledgments
1 Understanding the Basics
1.1 Terminology1.1.1 Client and Server1.1.2 Relationship between URLs, Domains, and IP Addresses
1.2 Structure of Web Applications
1.2.1 Creating Web Pages Using HTML1.2.2 Designing Web Pages with CSS1.2.3 Making Web Pages Interactive with JavaScript1.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 Editors1.4.2 Development Environments1.4.3 Browsers
1.5 Summary and Outlook
1.5.1 Key Points1.5.2 Outlook

2 Structuring Web Pages with HTML
2.1 Introduction2.1.1 Versions2.1.2 Using Elements and Attributes2.1.3 Saving Web Pages as HTML Documents
2.2 Using the Most Important Elements
2.2.1 Using Headings, Paragraphs, and Other Text Formatting2.2.2 Creating Lists2.2.3 Defining Links2.2.4 Including Images2.2.5 Structuring Data in Tables2.2.6 Defining Forms2.2.7 Further Information
2.3 Summary and Outlook
2.3.1 Key Points2.3.2 Recommended Reading2.3.3 Outlook
3 Designing Web Pages with CSS
3.1 Introduction3.1.1 The Principle of CSS3.1.2 Including CSS in HTML3.1.3 Selectors3.1.4 Cascading and Specificity3.1.5 Inheritance
3.2 Applying Colors and Text Formatting
3.2.1 Defining the Text Color and Background Color3.2.2 Designing Texts
3.3 Lists and Tables
3.3.1 Designing Lists3.3.2 Designing Tables
3.4 Understanding the Different Layout Systems
3.4.1 Basic Principles of Positioning with CSS3.4.2 Float Layout3.4.3 Flexbox Layout3.4.4 Grid Layout
3.5 Summary and Outlook
3.5.1 Key Points3.5.2 Recommended Reading3.5.3 Outlook
4 Making Web Pages Interactive with JavaScript
4.1 Introduction4.1.1 Including JavaScript4.1.2 Displaying Dialog Boxes4.1.3 Using the Developer Console4.1.4 Introduction to Programming
4.2 Variables, Constants, Data Types, and Operators
4.2.1 Defining Variables4.2.2 Defining Constants4.2.3 Using Data Types4.2.4 Using Operators
4.3 Using Control Structures
4.3.1 Using Conditional Statements and Branching4.3.2 Using Loops
4.4 Functions and Error Handling
4.4.1 Defining and Calling Functions4.4.2 Passing and Analyzing Function Parameters4.4.3 Defining Return Values4.4.4 Responding to Errors
4.5 Objects and Arrays
4.5.1 Using Objects4.5.2 Using Arrays
4.6 Summary and Outlook
4.6.1 Key Points4.6.2 Recommended Reading4.6.3 Outlook
5 Using Web Protocols
5.1 Hypertext Transfer Protocol5.1.1 Requests and Responses5.1.2 Structure of HTTP Requests5.1.3 Structure of HTTP Responses5.1.4 Header5.1.5 Methods5.1.6 Status Codes5.1.7 MIME Types5.1.8 Cookies5.1.9 Executing HTTP from the Command Line
5.2 Bidirectional Communication
5.2.1 Polling and Long Polling5.2.2 Server-Sent Events5.2.3 WebSockets
5.3 Summary and Outlook
5.3.1 Key Points5.3.2 Recommended Reading5.3.3 Outlook
6 Using Web Formats
6.1 Data Formats6.1.1 CSV6.1.2 XML6.1.3 JSON
6.2 Image Formats
6.2.1 Photographs in the JPG Format6.2.2 Graphics and Animations in the GIF Format6.2.3 Graphics in the PNG Format6.2.4 Vector Graphics in the SVG Format6.2.5 Everything Gets Better with the WebP Format6.2.6 Comparing Image Formats6.2.7 Programs for Image Processing
6.3 Video and Audio Formats
6.3.1 Video Formats6.3.2 Audio Formats
6.4 Summary and Outlook
6.4.1 Key Points6.4.2 Recommended Reading6.4.3 Outlook
7 Using Web APIs
7.1 Changing Web Pages Dynamically Using the DOM API7.1.1 The Document Object Model7.1.2 The Different Types of Nodes7.1.3 Selecting Elements7.1.4 Modifying Elements7.1.5 Creating, Adding, and Deleting Elements7.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 Communication7.2.2 Loading Data via Ajax7.2.3 Loading Data via the Fetch API
7.3 Other Web APIs
7.3.1 Overview of Web APIs7.3.2 Browser Support for Web APIs
7.4 Summary and Outlook
7.4.1 Key Points7.4.2 Recommended Reading7.4.3 Outlook
8 Optimizing Websites for Accessibility
8.1 Introduction8.1.1 Introduction to Accessibility8.1.2 User Groups and Assistive Technologies8.1.3 Web Content Accessibility Guidelines
8.2 Making Components of a Website Accessible
8.2.1 Structuring Web Pages Semantically8.2.2 Using Headings Correctly8.2.3 Making Forms Accessible8.2.4 Making Tables Accessible8.2.5 Making Images Accessible8.2.6 Making Links Accessible8.2.7 Accessible Rich Internet Applications8.2.8 Miscellaneous
8.3 Testing Accessibility
8.3.1 Types of Tests8.3.2 Tools for Testing
8.4 Summary and Outlook
8.4.1 Key Points8.4.2 Recommended Reading8.4.3 Outlook
9 Simplifying CSS with CSS Preprocessors
9.1 Introduction9.1.1 How CSS Preprocessors Work9.1.2 Features of CSS Preprocessors9.1.3 Sass, Less, and Stylus
9.2 Using Sass
9.2.1 Installing Sass9.2.2 Compiling Sass Files to CSS9.2.3 Using Variables9.2.4 Using Operators9.2.5 Using Branches9.2.6 Using Loops9.2.7 Using Functions9.2.8 Implementing Custom Functions9.2.9 Nesting Rules9.2.10 Using Inheritance and Mixins
9.3 Summary and Outlook
9.3.1 Key Points9.3.2 Recommended Reading9.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 Component10.3.2 The Lifecycle of a Component
10.4 Styling Components
10.4.1 Inline Styling10.4.2 CSS Classes and External Stylesheets10.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 Points10.9.2 Recommended Reading10.9.3 Outlook
11 Implementing Mobile Applications
11.1 The Different Types of Mobile Applications11.1.1 Native Applications11.1.2 Mobile Web Applications11.1.3 Hybrid Applications11.1.4 Comparing the Different Approaches
11.2 Responsive Design
11.2.1 Introduction: What Is Responsive Design?11.2.2 Viewports11.2.3 Media Queries11.2.4 Flexible Layouts
11.3 Cross-Platform Development with React Native
11.3.1 The Principle of React Native11.3.2 Installation and Project Initialization11.3.3 Starting the Application11.3.4 The Basic Structure of a React Native Application11.3.5 User Interface Components11.3.6 Building and Publishing Applications
11.4 Summary and Outlook
11.4.1 Key Points11.4.2 Recommended Reading11.4.3 Outlook
12 Understanding and Using Web Architectures
12.1 Layered Architectures12.1.1 Basic Structure of Layered Architectures12.1.2 Client-Server Architecture (Two-Tier Architecture)12.1.3 Multi-Tier Architecture
12.2 Monoliths and Distributed Architectures
12.2.1 Monolithic Architecture12.2.2 Service-Oriented Architecture12.2.3 Microservice Architecture12.2.4 Component-Based Architecture12.2.5 Microfrontends Architecture12.2.6 Messaging Architecture12.2.7 Web Service Architecture
12.3 MV* Architectures
12.3.1 Model-View-Controller12.3.2 Model-View-Presenter12.3.3 Model-View-Viewmodel
12.4 Summary and Outlook
12.4.1 Key Points12.4.2 Recommended Reading12.4.3 Outlook
13 Using Programming Languages on the Server Side
13.1 Types of Programming Languages13.1.1 Programming Languages by Degree of Abstraction13.1.2 Compiled and Interpreted Programming Languages
13.2 Programming Paradigms
13.2.1 Imperative and Declarative Programming13.2.2 Object-Oriented Programming13.2.3 Functional Programming
13.3 What Are the Programming Languages?
13.3.1 Rankings of Programming Languages13.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 Points13.4.2 Recommended Reading13.4.3 Outlook
14 Using JavaScript on the Server Side
14.1 JavaScript on Node.js14.1.1 Node.js Architecture14.1.2 A First Program14.1.3 Package Management
14.2 Using the Integrated Modules
14.2.1 Reading Files14.2.2 Writing Files14.2.3 Deleting Files
14.3 Implementing a Web Server
14.3.1 Preparations14.3.2 Providing Static Files14.3.3 Using the Express.js Web Framework14.3.4 Processing Form Data
14.4 Summary and Outlook
14.4.1 Key Points14.4.2 Recommended Reading14.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 Variables15.3.2 Using Constants15.3.3 Using Operators
15.4 Using Control Structures
15.4.1 Conditional Statements15.4.2 Loops
15.5 Functions and Error Handling
15.5.1 Defining Functions15.5.2 Function Parameters15.5.3 Defining Return Values15.5.4 Using Data Types15.5.5 Anonymous Functions15.5.6 Declaring Variable Functions15.5.7 Arrow Functions15.5.8 Responding to Errors
15.6 Using Classes and Objects
15.6.1 Writing Classes15.6.2 Creating Objects15.6.3 Class Constants15.6.4 Visibility15.6.5 Inheritance15.6.6 Class Abstraction15.6.7 More Features
15.7 Developing Dynamic Websites with PHP
15.7.1 Creating and Preparing a Form15.7.2 Receiving Form Data15.7.3 Verifying Form Data
15.8 Summary and Outlook
15.8.1 Key Points15.8.2 Recommended Reading15.8.3 Outlook
16 Implementing Web Services
16.1 Introduction
16.2 SOAP
16.2.1 The Workflow with SOAP16.2.2 Description of Web Services with WSDL16.2.3 Structure of SOAP Messages16.2.4 Conclusion
16.3 REST
16.3.1 The Workflow with REST16.3.2 The Principles of REST16.3.3 Implementing a REST API16.3.4 Calling a REST API
16.4 GraphQL
16.4.1 The Disadvantages of REST16.4.2 The Workflow of GraphQL
16.5 Summary and Outlook
16.5.1 Key Points16.5.2 Recommended Reading16.5.3 Outlook
17 Storing Data in Databases
17.1 Relational Databases17.1.1 The Functionality of Relational Databases17.1.2 The SQL Language17.1.3 Real-Life Example: Using Relational Databases in Node.js17.1.4 Object-Relational Mappings
17.2 Non-Relational Databases
17.2.1 Relational versus Non-Relational Databases17.2.2 The Functionality of Non-Relational Databases17.2.3 Key-Value Databases17.2.4 Document-Oriented Databases17.2.5 Graph Databases17.2.6 Column-Oriented Databases
17.3 Summary and Outlook
17.3.1 Key Points17.3.2 Recommended Reading17.3.3 Outlook
18 Testing Web Applications
18.1 Automated Tests18.1.1 Introduction18.1.2 Types of Tests18.1.3 Test-Driven Development18.1.4 Running Automated Tests in JavaScript
18.2 Test Coverage
18.2.1 Introduction18.2.2 Determining Test Coverage in JavaScript
18.3 Test Doubles
18.3.1 The Problem with Dependencies18.3.2 Replacing Dependencies with Test Doubles18.3.3 Spies 18.3.4 Stubs18.3.5 Mock Objects
18.4 Summary and Outlook
18.4.1 Key Points18.4.2 Recommended Reading18.4.3 Outlook
19 Deploying and Hosting Web Applications
19.1 Introduction19.1.1 Building, Deploying, and Hosting19.1.2 Types of Deployment19.1.3 Types of Hosting19.1.4 Requirements for Servers
19.2 Container Management
19.2.1 Docker19.2.2 Real-Life Example: Packaging a Web Application using Docker19.2.3 Number of Docker Images19.2.4 Docker Compose
19.3 Summary and Outlook
19.3.1 Key Points19.3.2 Recommended Reading19.3.3 Outlook
20 Securing Web Applications
20.1 Vulnerabilities20.1.1 Open Web Application Security Project20.1.2 Injection20.1.3 Broken Authentication20.1.4 Sensitive Data Exposure20.1.5 XML External Entities20.1.6 Broken Access Control20.1.7 Security Misconfiguration20.1.8 Cross-Site Scripting20.1.9 Insecure Deserialization20.1.10 Using Components with Known Vulnerabilities20.1.11 Insufficient Logging and Monitoring20.1.12 Outlook
20.2 Encryption and Cryptography
20.2.1 Symmetric Cryptography20.2.2 Asymmetric Cryptography20.2.3 SSL, TLS, and HTTPS
20.3 Same-Origin Policies, Content Security Policies, and Cross-Origin Resource Sharing
20.3.1 Same Origin Policy20.3.2 Cross-Origin Resource Sharing20.3.3 Content Security Policy
20.4 Authentication
20.4.1 Basic Authentication20.4.2 Session-Based Authentication20.4.3 Token-Based Authentication
20.5 Summary and Outlook
20.5.1 Key Points20.5.2 Recommended Reading20.5.3 Outlook
21 Optimizing the Performance of Web Applications
21.1 Introduction21.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 Times21.2.2 Using a Server-Side Cache21.2.3 Optimizing Images21.2.4 Using a Client-Side Cache21.2.5 Minifying the Code21.2.6 Compressing Files21.2.7 Lazy Loading: Loading Data Only When Needed21.2.8 Preloading Data
21.3 Summary and Outlook
21.3.1 Key Points21.3.2 Recommended Reading21.3.3 Outlook
22 Organizing and Managing Web Projects
22.1 Types of Version Control Systems22.1.1 Central Version Control Systems22.1.2 Decentralized Version Control Systems
22.2 The Git Version Control System
22.2.1 How Git Stores Data22.2.2 The Different Areas of Git22.2.3 Installation22.2.4 Creating a New Git Repository22.2.5 Transferring Changes to the Staging Area22.2.6 Committing Changes to the Local Repository22.2.7 Committing Changes to the Remote Repository22.2.8 Transferring Changes from the Remote Repository22.2.9 Working in a New Branch22.2.10 Transferring Changes from a Branch
22.3 Summary and Outlook
22.3.1 Key Points22.3.2 Recommended Reading22.3.3 Outlook
23 Managing Web Projects
23.1 Classic Project Management versus Agile Project Management23.1.1 Classic Project Management23.1.2 Agile Project Management
23.2 Agile Project Management Based on Scrum
23.2.1 The Scrum Workflow23.2.2 The Roles of Scrum23.2.3 Events in Scrum23.2.4 Artifacts in Scrum
23.3 Summary and Outlook
23.3.1 Key Points23.3.2 Recommended Reading23.3.3 Outlook
A HTTP
A.1 HTTP Status CodesA.1.1 Brief Overview
A.2 MIME Types
A.3 Headers
A.3.1 Request HeadersA.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.jsC.1.1 Installation File on macOSC.1.2 Installation File on WindowsC.1.3 Binary Package on macOSC.1.4 Binary Package on WindowsC.1.5 Binary Package on LinuxC.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

Content preview from Full Stack Web Development

10.4 Styling Components

Admittedly, the contact list does not look particularly breathtaking at the moment. However, so far, we have only dealt with structure (i.e., HTML) and dynamics (i.e., JavaScript) and React itself. We’ve completely ignored the topic of styling. At this point, React provides some options for styling components using CSS. Basically, you can draw on the entire repertoire of CSS features.

10.4.1 Inline Styling

The easiest way to style your application is to use inline styles. Like in regular HTML, you can use the style attribute of elements to apply certain CSS declarations, as discussed in Chapter 3. The difference with HTML, however, is that in React you use a JavaScript object instead of normal strings. As a result, ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781836644934

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Full Stack Web Development

by Rheinwerk Publishing, Inc, Philip Ackermann