Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Full Stack Web Development with Remix
  • Table Of Contents Toc
  • Feedback & Rating feedback
Full Stack Web Development with Remix

Full Stack Web Development with Remix

By : Andre Landgraf
5 (14)
close
close
Full Stack Web Development with Remix

Full Stack Web Development with Remix

5 (14)
By: Andre Landgraf

Overview of this book

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.
Table of Contents (23 chapters)
close
close
1
Part 1 – Getting Started with Remix
6
Part 2 – Working with Remix and the Web Platform
13
Part 3 – Advanced Concepts of Full Stack Web Development with Remix

Understanding the philosophy behind Remix

Remix’s mission is to let you build fast, slick, and resilient user experiences. The vision is to let you deliver software that people love. In this section, we will have a closer look into the philosophy behind Remix. You will learn about the creation of Remix and the values that the team promotes.

Remix was created by Ryan Florence and Michael Jackson (@ryanflorance and @mjackson on Twitter and GitHub). Ryan and Michael are React veterans and the authors behind React Router – the most popular routing library for React applications with over 1 billion downloads on npm. Remix’s philosophy is heavily influenced by the lessons Ryan and Michael learned by building and maintaining React Router.

Initially, Remix was intended to be a license-based framework. But in October 2021, the development team behind Remix announced that they had secured seed funding and would make Remix open source. In November 2021, the team released v1 of Remix after 18 months of development. A year later, in October 2022, Shopify acquired Remix. The Remix team is now fully focused on Remix’s development while still pursuing the same mission and vision at Shopify.

Not only is Remix open source, but the Remix team also embraces open development. The team has made the roadmap and all Requests for Comments (RFCs) and proposals available to the public. They also live-stream roadmap meetings and actively encourage community participation and contributions. The goal is to open the development process to the community as much as possible while still fostering the philosophy that guided Ryan and Michael.

Over time, the team behind Remix has mentioned many of the things that are important to them. Above all, Remix is meant to push the web forward. Both Ryan and Michael stress that they want to see better websites. The mission is to provide you with the tools to build great user experiences. They want people to love using your stuff.

The Remix team did a great job summarizing its philosophy in the Remix documentation. Some of the points that the Remix team has emphasized are as follows:

  • Remix aims to avoid over-abstraction. In Remix, APIs are meant to be a thin abstraction layer on top of the web platform. Simplicity is king. Remix does not reinvent the wheel.
  • Remix looks both forward and backward. It mixes cutting-edge technologies and matches them with battle-proven web standards to create new approaches. Remix takes advantage of HTTP2 streaming and edge deployment but simultaneously embraces HTML forms, cookies, and URLs.
  • Remix progressively enhances the user experience without straying from the browser’s default behavior. The goal is to stay true to the browser’s default behavior and be able to fall back to it whenever possible.
  • Remix is about unlocking the full stack of the web platform – or, as the Remix team phrases it, the client/server model.
  • The team behind Remix deeply cares about the network tab and your app’s bundle size. The goal is to load less and load things as quickly as possible.

Frameworks provide the foundation and framing for your application code. The Remix team also refers to Remix as being center stack (instead of full stack). Remix is meant to be the core, reaching out to both the client and server sides of your application. It is meant to be the centerpiece.

For me, Remix is a powerful tool with great developer experience that lets me build for the web. I value the simplicity and utility of the APIs that Remix provides. I have learned a lot about the web since picking up Remix, all thanks to the emphasis on using the web platform. Remix combines new approaches with old ones. It is refreshing to use and has already started influencing the ecosystem around it. We now truly live in the era of full stack web frameworks.

The Remix team promotes the Remix way of thinking. For instance, Ryan suggests a three-step process for developing web experiences:

  1. Make everything work without JavaScript.
  2. Enhance the experience with JavaScript.
  3. Move as much business logic as possible to the server.

In each step, we build upon the last step to enhance the experience:

  1. First, we focus on building the feature without JavaScript. With Remix, we take advantage of the web platform. We use forms to mutate data and use server-side redirects to communicate feedback. After the feature works without JavaScript, we could possibly publish it and be done.
  2. Next, we use JavaScript on the client to enhance the user experience. We may add optimistic UIs, deferred data loading, and real-time data updates.
  3. Finally, we move as much business logic as possible to the server. This allows for graceful degradation in case client-side JavaScript isn’t loaded. It also decreases the bundle size of your app.

By using Remix and engaging with the Remix community, you are exposed to Remix’s philosophy. Applying Remix’s philosophy to your development process will truly supercharge your React development.

Remix’s philosophy can also be understood by the tools it provides you. In the next section, I want to introduce you to a mental model of framework features.

Create a Note

Modal Close icon
You need to login to use this feature.
notes
bookmark search playlist download font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Delete Note

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY