Reader small image

You're reading from  Full Stack Web Development with Remix

Product typeBook
Published inNov 2023
Reading LevelIntermediate
PublisherPackt
ISBN-139781801075299
Edition1st Edition
Languages
Tools
Right arrow
Author (1)
Andre Landgraf
Andre Landgraf
author image
Andre Landgraf

Andre is a full stack developer from Germany. He graduated with an MS in Information Systems from the Technical University of Munich and was also awarded an MS in Computer Science from Sofia University in Palo Alto. Andre currently lives in Cupertino, California, and he works as a Software Engineer at LinkedIn. Andre loves learning, writing, and speaking about all things web. In his free time, he tutors aspiring developers and builds for the web.
Read more about Andre Landgraf

Right arrow

Preface

Welcome to Full Stack Web Development with Remix. We live in exciting times for web development. Modern web apps are complex, and they operate on intricate business logic. As web developers, it's our job to deliver great user experiences, using the latest web development advancements and tackling the complexities of today's business requirements.

React is the de facto standard for building modern web applications, but it draws clear lines where its responsibilities end. It allows you to compose your UI from reusable components, but React doesn't cover other key elements of your app. This is where React is supplemented by a full stack web framework. Today's web frameworks offer abstractions for routing, data fetching and mutations, caching, session management, progressive enhancement, optimistic UI, and many other aspects crucial for building state-of-the-art web experiences. This is where Remix comes into play.

Remix is a full stack web framework for React applications. It is built with different deployment targets in mind and utilizes web standards to unlock the full potential of the web platform. Remix provides great primitives, conventions, and levers to let us build modern applications and great user experiences faster. Most importantly, Remix operates on a simple mental model that lets us build complex user interfaces with reduced complexity by leveraging the philosophy of progressive enhancement. Building pending, optimistic, and real-time user interfaces has never been easier. Personally, I have never felt more productive building for the web, and I also never had more fun doing so!

This book follows a real-world project that goes beyond what can be found in Remix’s documentation, tutorials, and workshops. By the end of this book, you will be able to apply and articulate many best practices to work with Remix. You will further work with web standards and learn how to unlock the full potential of the web platform with Remix. Finally, you will understand the advantages of utilizing a web server environment in your application architecture. Let’s dive into Full Stack Web Development with Remix and learn how Remix can make us more productive in building better user experiences faster.

Who this book is for

This book is for React developers looking to use a full stack framework to unlock the full potential of the web platform. This book will also come in handy to evaluate and justify a migration to Remix.

This book is for you if you are the following:

  • A web developer who wants to utilize web standards to build fast, slick, and resilient user experiences.
  • A React developer who is curious to learn more about full stack web development and the benefits of adding a web server environment to the frontend.
  • A tech lead evaluating a migration from a single-page application to Remix, looking to learn more about today's full stack web frameworks.

What this book covers

Chapter 1, The Era of Full Stack Web Frameworks, introduces Remix as a full stack web framework and highlights the advantages Remix provides you as a React developer. The chapter further discusses Remix’s philosophy and establishes the mental model of primitives, conventions, and levers. Finally, the chapter explains how Remix works under the hood.

Chapter 2, Creating a New Remix App, kicks off your Remix development journey. The chapter guides you through creating a new Remix application using Remix’s create-remix CLI script. The chapter also provides an overview of Remix’s file and folder structure and Remix’s two environments – the client and the server. Finally, the chapter offers a troubleshooting guide for Remix projects.

Chapter 3, Deployment Target, Adapters, and Stacks, offers an overview of Remix’s different deployment targets and discusses considerations to select the right target for your application. The chapter further details how to switch between adapters and how to use Remix Stacks to use an existing application template. Finally, the chapter introduces you to BeeRich, the demo application of this book.

Chapter 4, Routing in Remix, reviews Remix’s file-based routing convention. The chapter guides you through creating standalone pages, nested routes, parameterized routes, pathless layout routes, and other routing concepts. The chapter also discusses page navigations in Remix.

Chapter 5, Fetching and Mutating Data, dives deep into data fetching and mutations with Remix. The chapter documents Remix’s request-response life cycle and provides detailed practices to work with Remix’s server-side loader and action functions. The chapter also explains Remix’s built-in data revalidation.

Chapter 6, Enhancing the User Experience, formalizes how progressive enhancement works in Remix. The chapter then focuses on advanced data fetching and mutation concepts, such as prefetching and handling concurrent mutations.

Chapter 7, Error Handling in Remix, provides an overview of handling expected and unexpected errors in Remix to develop resilient user experiences.

Chapter 8, Session Management, guides you through implementing a search feature and a login and signup flow in BeeRich. The chapter provides a practical deep dive into managing UI and session state, using web standards and Remix’s primitives.

Chapter 9, Assets and Metadata Handling, focuses on meta tags and static assets in Remix. The chapter includes practices to expose static assets and work with custom fonts. Finally, the chapter discusses how to manage images with Remix.

Chapter 10, Working with File Uploads, introduces you to Remix’s file upload helpers. The chapter guides you through the implementation of uploading user files in BeeRich and emphasizes limiting access to the uploaded files to authorized users only.

Chapter 11, Optimistic UI, discusses the trade-offs of the optimistic UI. The chapter further lets you work with optimistic UI in BeeRich using Remix’s primitives. Finally, the chapter highlights how Remix eases the implementation of optimistic UI through its primitives and built-in data revalidation.

Chapter 12, Caching Strategies, provides an overview of different caching strategies to improve the performance of a Remix application. First, the chapter reviews different HTTP caching strategies before discussing in-memory caching. The chapter offers practical examples using the BeeRich demo application.

Chapter 13, Deferring Loader Data, introduces you to Remix’s concept of deferring loader data. The chapter further explains HTML streaming and motivates its usage and use cases to use streaming to defer data requests.

Chapter 14, Real-Time with Remix, examines popular real-time technologies and allows you to implement real-time data updates in BeeRich, using a Remix resource route and Server-Sent Events.

Chapter 15, Advanced Session Management, explores additional session and UI state management use cases. The chapter provides an overview of Remix’s cookie helper primitives compared to its session helpers. The chapter further guides you through the implementation of pagination in BeeRich.

Chapter 16, Developing for the Edge, defines the term edge in detail and considers the advantages and disadvantages of deploying Remix applications to an edge environment.

Chapter 17, Migration and Upgrade Strategies, wraps up the learning journey of this book and offers an overview of different strategies to migrate to Remix. The chapter also explains Remix’s future flags and how they can be used to ease major version upgrades.

To get the most out of this book

This book guides you through the development of a full stack web application with Remix. Each chapter introduces new concepts and includes practical examples to gain hands-on experience. You will get the most out of this book if you have some experience building web applications with React or a similar frontend framework or library. Since this book’s demo application is written in TypeScript, previous TypeScript exposure will also be helpful to follow along with the code examples.

To follow the hands-on exercises in this book, you will need a computer with Node.js and npm installed. We advise using the latest LTS version of Node.js (currently v18). You can download Node.js and npm here: https://nodejs.org/en. An editor such as VS Code is also recommended.

Each chapter is accompanied by one or more README.md files in the book’s GitHub repository. The README.md files contain additional guidance and set-up instructions for each chapter if necessary.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “The root of the routes folder maps to the /-path.”

A block of code is set as follows:

import { H1 } from '~/components/headings';export default function LoginPage() {
  return (
    <main>
      <H1>Login!</H1>
    </main>
  );
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<Routes>  <Route file="root.tsx">
    <Route index file="routes/index.tsx" />
    <Route path="demo" file="routes/demo.tsx" />
  </Route>
</Routes>

Any command-line input or output is written as follows:

npx remix routes

Bold: Indicates a new term, an important word, or words that you see on screen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Notice that one route is flagged as index, while the demo route has a path property, which matches its filename.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at customercare@packtpub.com and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at copyright@packt.com with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Full Stack Web Development with Remix, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?
Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application. 

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

  1. Scan the QR code or visit the link below

https://packt.link/free-ebook/9781801075299

  1. Submit your proof of purchase
  2. That’s it! We’ll send your free PDF and other benefits to your email directly
lock icon
The rest of the chapter is locked
You have been reading a chapter from
Full Stack Web Development with Remix
Published in: Nov 2023Publisher: PacktISBN-13: 9781801075299
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at £13.99/month. Cancel anytime

Author (1)

author image
Andre Landgraf

Andre is a full stack developer from Germany. He graduated with an MS in Information Systems from the Technical University of Munich and was also awarded an MS in Computer Science from Sofia University in Palo Alto. Andre currently lives in Cupertino, California, and he works as a Software Engineer at LinkedIn. Andre loves learning, writing, and speaking about all things web. In his free time, he tutors aspiring developers and builds for the web.
Read more about Andre Landgraf