https://DevOpsCloud.io -- Cloud Monk Losang Jinpa

Return to The Complete Developer

B0BZH15BDB (CmplDv 2024)

“ (CmplDv 2024)

“Nearly all programming jobs today require at least a cursory understanding of full-stack development, but if you’re a beginner, you might struggle to find the right entry point to this overwhelming topic. You might not even know what the term means.” (CmplDv 2024)

“Simply put, full-stack web development typically refers to the creation of complete web applications using JavaScript and the many JavaScript frameworks built for it. It requires a mastery of the traditional disciplines of frontend development and backend development, as well as the ability to write middleware and various kinds of application programming interfaces (APIs).” (CmplDv 2024)

“Lastly, a well-rounded full-stack developer can handle databases and has professional skills, such as the ability to craft automated tests and deploy their code by themselves. To do all of this, they must understand HTML, CSS, and JavaScript, as well as the language’s typed counterpart, TypeScript. For a crash course on some of this terminology, see “The Parts of a Full-Stack Application” on page xxiv.” (CmplDv 2024)

“If this sounds like a lot, you’ve come to the right place. This book will introduce you to each software component of a modern application and teach you how to use some of the most widely used web technologies to build them.” (CmplDv 2024)

“There are two primary audiences for the book. The first includes professional frontend engineer or backend engineers who want to advance their careers by mastering full-stack development. The second includes inexperienced, beginning developers interested in learning about web development.” (CmplDv 2024)

“While the book introduces many technologies from scratch, it assumes some prior familiarity with HTML, CSS, and JavaScript, as well as the client/server architecture of most web applications. For a refresher, see The Coding Workbook by Sam Taylor (No Starch Press, 2020), which teaches you how to build a website with HTML and CSS, and The Book of CSS3, 2nd edition, by Peter Gasston (No Starch Press, 2014) to sharpen your CSS skills. To familiarize yourself with JavaScript, I recommend JavaScript Crash Course by Nick Morgan (No Starch Press, 2024), which is a fast-paced JavaScript tutorial for beginners, and Eloquent JavaScript, 3rd edition, by Marijn Haverbeke (No Starch Press, 2018), for a deep dive into JavaScript.” (CmplDv 2024)

“The book is split into two parts. Part I, comprising Chapters 1 through 10, introduces you to the components of a modern technology stack. Each chapter focuses on one technology and highlights the topics you need to know as a full-stack developer. The exercises will encourage you to begin writing application code from page 1.” (CmplDv 2024)

Chapter 1: Node.js  Introduces you to Node.js and its ecosystem, which let you run JavaScript code outside a browser. Then you’ll use Node.js and the Express.js framework to create your own simple web server with JavaScript.

Chapter 2: Modern JavaScript  Focuses on contemporary JavaScript syntax useful for full-stack developers, including how to use modules to write maintainable code packages. We look at the different ways to define variables and constants, the arrow function, and techniques for asynchronous code. You’ll use these to rewrite your JavaScript server.

Chapter 3: TypeScript  Introduces TypeScript, a superset of JavaScript, and highlights how modern full-stack development benefits from it. We discuss the shortcomings and pitfalls of JavaScript and how to effectively leverage TypeScript’s type system through inference. You’ll conclude the chapter by refactoring your JavaScript server with type annotations, custom types, and interfaces.

Chapter 4: React  Discusses React, one of the most common libraries for creating user interface components. You’ll see how its components simplify full-stack development and learn how to use its JSX elements, the virtual DOM, and hooks. You’ll then use React to add a reactive user interface to your Express.js server.

Chapter 5: Next.js  Focuses on Next.js, the leading web application framework built on top of React. You’ll create pages and custom API routes with Next.js’s file-based routing before learning different ways to render a page within the framework. Finally, you’ll migrate the Express.js server to Next.js as an exercise.

Chapter 6: REST and GraphQL APIs  Teaches you all about APIs, what they are, and how to use them for full-stack web development. We explore two kinds of APIs: REST and GraphQL. You’ll conclude the chapter by adding an Apollo GraphQL server to your Next.js full-stack application.

Chapter 7: MongoDB and Mongoose  Discusses the differences between traditional relational databases and non-relational databases such as MongoDB. You’ll add the Mongoose object data modeling tool to your technology stack to simplify working with a database. You’ll then connect the GraphQL API to your own MongoDB database.

Chapter 8: Testing with the Jest Framework  Explains the importance of automated tests and test-driven development to full-stack development. We explore different types of tests, common test patterns, and the concepts of test doubles, stubs, fakes, and mocks. Lastly, you’ll add a few basic snapshot tests to your Next.js application with the Jest framework.

Chapter 9: Authorization with OAuth  Discusses authentication and authorization and how full-stack developers can use the OAuth protocol to handle those tasks by integrating with a third-party service. We walk through this authorization flow and its components. You’ll run through a complete OAuth interaction on the command line to explore each step in depth.

Chapter 10: Containerization with Docker  Introduces you to using Docker to deploy your application. We cover the concept of a microservice architecture, then cover all relevant components of the Docker ecosystem: the host, the Docker daemon, Dockerfiles, images, containers, volumes, and Docker Compose. You’ll conclude by splitting your application into self-contained microservices.

In Part II, you’ll use your newfound knowledge to build a web application that applies the concepts, tools, and frameworks introduced in Part I. The Food Finder application is a location search service that lets users log in with their GitHub account and maintain a wish list of places to visit.

Chapter 11: Setting Up the Docker Environment  Create the foundation of your Food Finder application by using your knowledge of Docker and containerization to set up your development environment. You’ll use Docker Compose to decouple the application development from your local system and then add a MongoDB server as its own service.

Chapter 12: Building the Middleware  Create the first part of the Food Finder application’s middleware. Here you’ll connect Mongoose to the MongoDB service and create its schema, model, services, and custom types. With these pieces in place, you’ll be able to create, read, update, and delete data from your database.

Chapter 13: Building the GraphQL API  Use your knowledge of GraphQL to add an Apollo GraphQL server to your Food Finder application, then implement a public GraphQL API. You’ll be able to use the Apollo sandbox to read and update data with GraphQL on your MongoDB server.

Chapter 14: Building the Frontend  Use React components and the Next.js framework to build the frontend for the Food Finder application. At this point, you’ll have implemented a complete modern full-stack application that reads data from the database through your custom middleware and renders the data to your application’s frontend.

Chapter 15: Adding OAuth  Add an OAuth flow to your app so that visitors can log in to maintain a personal wish list of locations. You’ll use the next-auth package from Auth.js to add login options using GitHub.

Chapter 16: Running Automated Tests in Docker  Set up automated snapshot tests with Jest and configure a new service to run the tests automatically.

Then, in the appendices, you’ll get detailed information on the TypeScript Compiler options and the most common Jest matchers. Also, you’ll use your newfound knowledge to explore and understand Next.js’s modern app directory approach.

Appendix A: TypeScript Compiler Options  Shows the most common TypeScript Compiler (TSC) options so that you can customize your own TypeScript projects to your liking.

Appendix B: The Next.js app Directory  Explores a new routing pattern using the app directory that Next.js introduced in version 13. You can then choose to work with either the traditional pages approach covered in Chapter 5 or the modern app directory in your own upcoming projects.

Appendix C: Common Matchers  Shows the most common matchers for testing your applications with Jest and the Jest DOM.

The Parts of a Full-Stack Application

Throughout this book, we’ll discuss various portions of an application. This section gives you a crash course on what we mean when we use the terms frontend, middleware, and backend.

The Frontend

The frontend is the user-facing part of a website or web application. It runs on the client, typically a web browser. You can think of it as the “front office” of the web application. For example, on https://www.google.com, the frontend is a page with a simple search bar, though of course, frontend development can be much more complex than this; take a look at Google’s search results page or the interface of the last website you visited.

Frontend developers focus on user engagement, experiences, and interfaces. They rely on HTML for creating the elements of the website’s interface, CSS for styling, JavaScript for user interactions, and frameworks such as Next.js to pull everything together.

The Middleware

The middleware connects an application’s frontend and backend and performs all of its chores, such as integrating with third-party services and transferring and updating data. You can think of it as the employees on the company floor.

As full-stack developers, we often write middleware for routing our applications, which means serving the correct data for a particular URL, handling database connections, and performing authorization. For example, on https://www.google.com, the middleware asks the server for the landing page’s HTML. Then a different part of the middleware checks whether the user is logged in, and if so, which personal data it should show. Meanwhile, a third part of the middleware consolidates the information from each of these data streams and then answers the server’s requests with the correct HTML.

One essential part of a full-stack application’s middleware is its API layer, which exposes the application’s APIs. Generally, an API is code written to connect two machines. Often, an API lets the frontend code (or a third party) access the application’s backend. JavaScript-driven development relies on two primary architectural frameworks for creating APIs: REST and GraphQL, both of which are covered in Chapter 6.

You could write the middleware by using any programming language. Most full-stack developers use modern JavaScript or TypeScript, but they could instead use PHP, Ruby, or Go.

The Backend

The backend is the invisible part of a web application. In a JavaScript-driven application, the backend runs on a server, typically Express.js, though others might use Apache or NGINX. You can think of it as the “back office” of the web application.

More concretely, the backend handles any operations involving the application’s data. It performs create, read, update, and delete (CRUD) operations on the values stored in the database and returns the datasets requested by the user through the middleware’s API layer. For https://www.google.com, the backend is the code that searches the database for the keywords you entered in the frontend, which the backend received through the middleware. The middleware would combine these search results with other relevant pieces of information. Then the user would see the search results page rendered by the frontend.

Backend development can be done in any programming language. Full-stack developers usually employ modern JavaScript or TypeScript. Other options include PHP, Ruby, Elixir, Python, Java, and frameworks like Symfony, Ruby on Rails, Phoenix, and Django.

A Brief History of JavaScript and Full-Stack Development

All developers should understand the context of the tools they’re using. Before we begin developing, let’s start with a bit of history.

The full-stack developer position evolved alongside JavaScript, which began as nothing more than a scripting language that ran in users’ browsers. Developers used it to add elements to their websites, such as accordions, pop-up menus, and overlays, that reacted immediately to a user’s behavior, without requiring requests to the application’s server.

Until the late 2000s, most JavaScript libraries were designed to provide consistent interfaces to handle vendor-specific quirks. Often, the JavaScript engines were slow, especially when interacting with, updating, or modifying the HTML. Hence, JavaScript was considered a quirky scripting language for the frontend and was frowned upon by backend developers.

Several projects attempted to popularize the use of JavaScript in the backend, but until the release of Node.js in 2009, these didn’t gain any traction. Node.js, covered in Chapter 1, is a JavaScript tool for developing backends. Shortly thereafter, the Node.js package manager npm built the missing ecosystem for full-stack JavaScript development.

This ecosystem includes a host of JavaScript libraries for working with databases, building user interfaces, and writing server-side code (many of which we’ll explore in this book). These new tools allowed developers to use JavaScript reliably on both the client and the server. Of particular importance, Google released the Angular framework in 2010, and Meta (known as Facebook at the time) released React in 2013. The commitment of these internet giants to building JavaScript tools turned full-stack web development into a sought-after role.

Setting Up

Throughout this book, you’ll write code and run command line tools. You can use any development environment you’d like, but here are some guidelines.

The most common code editor these days is Visual Studio Code, which you can download from https://code.visualstudio.com. It is Microsoft’s open source editor and is free for Windows, macOS, and Linux. In addition, you can extend and configure it through a plethora of third-party plug-ins and adjust its appearance to your liking. However, if you’re used to a different editor, such as Vim or Emacs, you can keep using it. The book doesn’t require a particular tool.

Depending on your operating system, your default command line program will be either the Command Prompt (on Windows) or the Terminal (on macOS and Linux). These programs use slightly different syntax for tasks like creating, changing, and listing the contents of a directory. This book shows the Linux and macOS versions of these commands. If you’re using Windows, you’ll have to adapt the commands for your operating system. For example, instead of ls, Windows uses dir to list files and folders in the current directory. Microsoft’s official command line reference lists all available commands here: https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/windows-commands#command-line-reference-a-z.

The most notable difference between operating systems relevant to this book is the escape character used for line breaks in multiline cURL commands. This escape character is \ on macOS and ^ on Windows. We’ll point out these differences in Chapter 6, when we first use cURL.

You can download the code listings for the first part of the book and the complete source code for the Food Finder application from https://www.usemodernfullstack.dev/downloads.

” (CmplDv 2024)

Fair Use Sources:

• B0BZH15BDB (CmplDv 2024)