Develop a web application while learning how to harness the capabilities of the web platform and advanced technologies for an exceptional user experience
Key Features
Create a full stack web application using cutting-edge technologies such as distributed edge deploy, Redis, and multi-region databases
Unlock the full potential of the web platform to enhance your React dev experience
Discover how Remix assists in building a seamless user experience from start to finish
Purchase of the print or Kindle book includes a free PDF eBook
Book Description
We’re in an exciting era of web development marked by the rapid evolution of the JavaScript ecosystem. Remix offers the necessary abstractions to take advantage of the latest advancements in React and beyond. With this Remix book, you can elevate your skills from React development to full stack web development, unlocking the full potential of the latest technologies, such as edge functions, streaming, and the full stack of the web platform.
This book guides you through Remix’s thoughtfully designed conventions, levers, and primitives to sharpen your web development skills. In this book, you’ll develop a personal finance management application—a dashboard that mimics both personal and enterprise use cases. Each chapter introduces new concepts, such as routing, data fetching, mutations, error handling, and state management, as well as advanced topics, such as real-time communication, edge deploys, and caching strategies to create a great user experience from end to end. As you apply each concept to the finance dashboard, you’ll discover how you can supercharge your React app with Remix. The final section of this book covers migration strategies, guiding you on how to transition an existing application to Remix.
By the end of this book, you’ll have a comprehensive understanding of Remix and the experience of building a full stack web app from start to finish.
What you will learn
Understand Remix’s philosophy and guiding principles
Enhance your web platform proficiency to make it applicable anywhere
Master data mutations, routing, error handling, and state management with Remix
Understand how to build web apps with accessibility and progressive enhancement in mind
Get acquainted with advanced topics such as caching strategies, real-time communication, and developing for the edge
Understand state-of-the-art technologies, such as serverless functions, edge computing, and Content Delivery Networks (CDNs)
Study migration patterns to move an existing project to Remix
Who this book is for
This book is for React developers looking to adopt Remix for their next project. For those considering migrating to Remix, this guide offers a comprehensive walkthrough of building a full stack web app. To make the most of this book, beginner-level development experience with React and JavaScript is recommended. While having basic knowledge of server-side runtimes such as Node.js and experience with TypeScript can be beneficial, they are not mandatory prerequisites.
Author(s): Andre Landgraf
Publisher: Packt
Year: 2023
Language: English
Pages: 318
Cover
Title page
Copyright and credits
Foreword
Contributors
Table of Contents
Preface
Part 1 – Getting Started with Remix
Chapter 1: The Era of Full Stack Web Frameworks
Introducing Remix
Remix is a web framework
Remix is a full stack framework
Understanding the philosophy behind Remix
Primitives, conventions, and levers
Primitives
Conventions
Levers
Remix behind the scenes
Remix is a compiler
Remix is a router
Remix is a runtime
What Remix is not
Summary
Further reading
Chapter 2: Creating a New Remix App
Technical requirements
Creating a “Hello World!” Remix app
Understanding Remix’s file and folder structure
Exploring the client and server environments
The two bundles of your Remix application
Client and server code
Troubleshooting Remix applications
A Remix troubleshooting process
Looking for answers
Summary
Further reading
Chapter 3: Deployment Targets, Adapters, and Stacks
Technical requirements
Picking a deployment target
Picking a JavaScript runtime
Picking a hosting environment
Making the final decision
Switching between adapters
Using Remix Stacks
Working with Remix official stacks
Working with custom templates
Working with BeeRich
Summary
Further reading
Chapter 4: Routing in Remix
Technical requirements
Working with Remix's route module API
Route file-naming conventions
Working with file-based routing
Creating route modules
Available route module exports
Composing pages from nested routes
Using route parameters for dynamic routing
Parameterized route segments
Sharing layouts
Using parent layout routes
Using pathless layout routes
Handling navigations in Remix
Navigating with Remix’s link components
Indicating page transitions
Redirecting a user from the server
Summary
Further reading
Part 2 – Working with Remix and the Web Platform
Chapter 5: Fetching and Mutating Data
Technical requirements
Fetching data
Fetching data at the route level
Fetching dynamic data in parameterized routes
Loading data in parallel
Mutating data
Mutating data without JavaScript
Mutating data with JavaScript
Summary
Further reading
Chapter 6: Enhancing the User Experience
Technical requirements
Understanding progressive enhancement
Progressive enhancement in Remix
Making it work without JavaScript
Making it worse before making it better
Testing on slow networks
Prefetching data
Working with action data
Handling concurrent mutations
Adding a form to a list
Supporting multiple pending states
Summary
Further reading
Chapter 7: Error Handling in Remix
Technical requirements
Dealing with unexpected errors
Invoking client and server errors
Handling errors with the root error boundary
Nested error handling
Handling thrown responses
Throwing responses
Handling exceptions with error boundaries
Creating a resilient experience
Handling page-not-found (404) errors
Summary
Further reading
Chapter 8: Session Management
Technical requirements
Working with search parameters
Reading search parameters in loader functions
Updating search parameters with form submissions
Programmatically submitting forms
Creating user sessions with cookies
Working with Remix’s session helpers
Adding a user registration flow
Adding a user login flow
Deleting a session during logout
Authenticating access to user data
Accessing cookie data on the server
Working with user data on the client
Enforcing authentication on the server
Summary
Further reading
Chapter 9: Assets and Metadata Handling
Technical requirements
Using meta tags in Remix
Declaring global meta tags
Exporting the meta function
Nesting meta exports
Using loader data in meta functions
Using matches data in meta functions
Handling fonts, images, stylesheets, and other assets
Working with static assets
Managing links in Remix
Styling in Remix
Working with images in Remix
Exposing assets with loader functions
Summary
Further reading
Chapter 10: Working with File Uploads
Technical requirements
Using multi-part form data in Remix
Processing files on the server
Loading files into memory
Using Remix’s upload handler helper functions
Authorizing access to assets with resource routes
Forwarding files to third-party services
Summary
Further reading
Part 3 – Advanced Concepts of Full Stack Web Development with Remix
Chapter 11: Optimistic UI
Technical requirements
Considering optimistic UI
Communicating rollbacks
Synchronizing client and server states
Synchronizing client and server states in Remix
Adding optimistic UI updates in Remix
Creating an expense
Updating an expense
Deleting an expense
Removing an attachment
Summary
Further reading
Chapter 12: Caching Strategies
Technical requirements
Working with HTTP caching
Adding HTTP headers in Remix
Caching public pages in shared caches
Understanding Remix’s built-in caching
Caching personalized pages in private caches
Caching immutable data responses
Caching dynamic data responses with entity tags
Exploring in-memory caching
Summary
Further reading
Chapter 13: Deferring Loader Data
Technical requirements
Streaming data to the client
Motivating server-side data fetching and streaming
Understanding HTTP streaming requirements
Deferring loader data
Summary
Further reading
Chapter 14: Real Time with Remix
Technical requirements
Working with real-time technologies
Understanding polling
Understanding SSE
Understanding WebSocket
Building real-time UIs with Remix
Summary
Further reading
Chapter 15: Advanced Session Management
Technical requirements
Managing visitor sessions
Implementing pagination
Summary
Further reading
Chapter 16: Developing for the Edge
Living on the edge
Computing at the edge
Running web apps on the edge
Remixing the edge
Understanding the edge’s benefits and limitations
Summary
Further reading
Chapter 17: Migration and Upgrade Strategies
Migrating to Remix
Migrating non-React apps to Remix
Migrating from a React app
Migrating from React Router
Working with a backend application
Keeping Remix apps up to date
Summary
Further reading
Index
Other Books You May Enjoy
