Remixing How We Give

Rate this content
Bookmark

A review of how we're using Remix at Daffy.org to change the way people give to charities.


We'll talk about why we decided to use Remix, how we've used it and migrated from our previous frontend application and some patterns and libraries we have developed internally.

Sergio Xalambri
Sergio Xalambri
32 min
18 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Daphne uses Remix for their web application, benefiting from its resilience, error boundaries, cache boundaries, and progressive enhancement. Remix simplifies form submission, authorization, and validation, and allows for easier refactoring and code duplication avoidance. Next and Remix are used together, with Remix serving as the backend for the frontend and handling data aggregation. Remix provides query functions for fetching data, mutations for form data validation and API calls, and custom conventions using the handle export. Migrating to Remix resulted in smaller JavaScript files, faster navigation, and the ability to preload data and assets. The migration process took around nine months and involved mixing Next.js and Remix using Express. Hiring someone to work on Remix is easier than hiring for other frameworks.

Available in Español

1. Introduction to Daphne and Remix

Short description:

Hello, welcome to my presentation. I'm Sergio Salambri, web developer at Daphne, and I'm going to talk how we use Daphne, how we use Remix at Daphne. Daphne is a platform to help people donate to the charities they care about in an automated way. We use Remix for our web application because it provides resilience, error boundaries, cache boundaries, and progressive enhancement. With Remix, we can catch unexpected errors, show known errors, and ensure the application remains usable even if JavaScript fails to load. Additionally, we chose RemixBoot for its form mutation capabilities.

Hello, welcome to my presentation. I'm Sergio Salambri, web developer at Daphne, and I'm going to talk how we use Daphne, how we use Remix at Daphne.

So what is Daphne? Daphne is a platform to help people donate to the charities they care about in an automated way. To do that we provide both an iOS application and a web application and we use Remix for that web application. We also use Remix for other apps. We are going to focus on how we use it for main web. That's what users use.

So first of all we started using and building the front end. Daphne or MVP was a router application being served from a Rails route and compiled by Rails webpacker. It worked great for the MVP proof of concepts but then we changed it to Next.js for the landings and the web because we wanted to have a server and other features. We had some problems with the setup. We had slow pages on a slow connection to the website. If there was an error on one of our API calls to get data to render on the page, they would crash and show a suspected error. Also, forms were way too complex to validate and run to errors. We have some unnecessary duplication of code. Also sharding code in get server-side props function is too complex, because you need to grab it on high-order functions.

So we decided we needed to use something else, and we chose to use RemixBoot. And the reason for that is the first one, the resilience. So the resilience is how well an app can support, can keep working in case of an error. Remix doesn't make your app work all the time if there is an error, but it helps you a lot to get there or near there. With error boundaries, we can catch any unexpected error and show something to the user, like, hey, something went wrong. We are going to – we know about this now, but you can contact support if you need more help. With Cache Boundaries, we can show any known errors. The user goes to a charity and that charity doesn't exist, that's not fun. Or a user provider doesn't exist, it's not fun. They want to do something that needs more money on their account, we can return a missing payment cell or UI with Cache Boundaries. We also can use Progressive Enhancement. If a JS fails to load for any reason, the application is mostly usable. At least they can access the content. Another reason was form ammutation.

2. Simplifying Form Submission and Migration to Remix

Short description:

With Remix, the process of form submission, authorization, and validation becomes much simpler. The action call is in the same file as the form, making it easier to understand the flow of the application. Remix also offers conventions and separation of concerns, allowing for easier refactoring and avoiding code duplication. Additionally, the migration to Remix was done by running Remix and Next together, utilizing the express server to run both apps in a single process.

With the previous stack, we had to do a lot of things to do ammutation like create a form, a state for input, serialize that, send it in a fetch to an API, create the API in another file, send authorize, validate data and send it to our Rails API. With Remix, this becomes way simpler. We just render the form, export in action on the same file the form lives in. We can do the service and launch authorization and validation of the data before sending it to Rails and it works. It's way simpler.

Action call is also on the same file of the form. That's a great benefit for being able to know what's happening in a route. We go to a route, so there is a form. We go to the action. We know what's that form doing. We can also add validation with solve. Multi-step forms can work with JavaScript way simpler and with the back button, something we had used before. And we can use the user transition to enhance the experience of the users. And so from loading states to optimistic UIs.

Conventions and separation of concerns is also another reason we choose Remix. Roots files help a lot with refactoring. We can just remove a root file and remove with that the action, the loader, the component, links, everything. We need nested roots also help avoid duplication. We don't need to move code to another file and import it into many files like headers, across roots. We just create a pattern, layout root, and put inside everything that needs that header and that's it. And the component then lives in the root. Loaders and actions also use standards. And we spend less time on Remix docs and more time on Mozilla Developer Network docs. Also means hiring and teaching the stack is simpler. We hired someone who didn't know Remix and she learned Remix for the interview and passed the interview and other developers focusing on backend were able to learn Remix super fast, like a day or less than a day and started using it.

Now, how we migrated to Remix. We know we wanted to use Remix, but we still had this big Next application. What we did, the first thing was, we can migrate everything at once, so we decided to run Remix and Next together. To do this, we take advantage that Remix can be plugged in an express server and Next can also be plugged in an express server. We use express to run both processes, both apps in a single process.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Understanding React’s Fiber Architecture
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.

Workshops on related topic

Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Build and Launch a personal blog using Remix and Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
Robert Pop
Robert Pop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.