Remix Single: Multiple Forms and Single Button Mutations

[@someshmusunuri4233]

Remix Singles are Awesome and Ryan Florence is the best DEMO person, to the point and crystal clear. Love these.

[@GustavoDiaz93]

Oh, man! Using a hidden input field brings me old good memories. I love Remix.

[@BenMcHone]

I can't get enough of remix. Make the web simple again!

[@Justbur]

discovering these videos again today and they are awesome. 2 years old is a million years in web time but these are still amazing.

[@sephiics]

"It's what ur code doesn't do" killed me

[@cagdasucar3932]

Remix is so much better than Next.js. Good job!

[@ronderksen]

The “bop bop bop bop”, followed by a little chuckle at 8:44 really reminded me of Bob Ross. Which is awesome. On a more serious node: you could use the form method to distinguish different forms, right? And the button value to differentiate further when needed?

[@Remix-Run]

It's all HTML, so yes and yes. Do it however you like.

[@Arzen84]

So amazing what you guys have built so far! I cannot wait for more videos like this!

[@DEV_XO]

Been watching this video with a smile on the face. This tells you all I guess! ♥💛💚💙🖤

[@amir-ziaei]

Thanks Remix! These short videos are great and I love them!

[@emdagon]

"Buttons are input fields" It's funny how stuff I learned 20 years ago (while reading html 4.0 spec) sounds like news now 😂 -- Awesome framework!

[@Aquilalias]

Love those videos. Great commentary and always something new to learn even with a few years of experience on my back.

[@tomaszgrabowski8766]

I ❤ Remix! I was so tired of Next and now I like to do a web dev once again!

[@willsmith4140]

I get that it's cool in theory to use all this native functionality, but at the end of the day having this giant form with multiple hidden inputs is way less readable and maintainable to me, compared to an "onClick"

[@gijsroge]

Awesome videos, thanks! Maybe a video that shows how you would approach reusable components, used on many routes that fetch and post data?

[@dagoacarralero5080]

Papapapa this was fun & enlighten. What such a good tech, now I see why the REMIX

[@dmbarry86]

These singles are great.

[@danwilloughby2088]

7:09 bop bop bop bop bop bop buh bup 🤣. Can that please be the official name for that concept?

[@sotr-archives150]

Throtting or debounce, there is a lodash utility for this as well.

[@jacobharris3929]

almost 10 years of webdev and i never thought to use a button as a form input with a value. wild stuff

[@alinsimion]

Mind blown! Great job guys!

[@DEV_XO]

Amazing series! Remix is just 🔥💚

[@SeanLazer]

Maybe more of an architecture question but how would you scale this out to a route that has potentially dozens of mutations? For example a dashboard. I've gotten really accustomed to building reusable components that do their own data management, ie you embed the Users, Orders, and Products widgets on the dashboard page and they take care of their own data needs. How would you handle something like that in Remix without having super bloated loader and action functions?

[@frontendtony]

I've not tried Remix yet, but isn't this a good candidate for nested routes? I'm trying to imagine a scenario where this would be possible where the mutations aren't in a list

[@SeanLazer]

@@frontendtony that's what I was wondering, maybe the idea of like portable or embeddable routes. I just remember the rails days of a dashboard#index action where you're loading like 10 separate pieces of data in one controller action.

[@tobrie1976]

If you have the `Form` post to a different path via `action="/somewhereelse"`, like described at 00:01:30, ... 1. how to prevent the browser from navigating there, and 2. how to get potential server-validation errors back to render them below the input fields?

[@tshddx]

I love the "use real forms" stuff, it's great to be able to dust off my PHP and Django web dev experience from 15 years ago! Has the Remix team been thinking about how to model forms in such a way that we can get TypeScript coverage between frontend (default export) and backend (loader and action exports)? Having these all in the same route module file is already such a neat developer experience, it would be even cooler to have the tooling help a little more with this stuff! I've been playing around with different ways of doing this in Remix but haven't found anything that fits naturally with the inherently untyped nature of the web APIs (e.g. FormData and input name and value attrs).

[@tomrowe2181]

I personally tie the form typing with validation using Zod. Someone recently created remix-validated-form as well to add onto zod or yup and just make using forms a little nicer.

[@dmsnm]

Great solution. Can we get one where inputs are dependent on another input's value? Like when sub category select options are dependent upon category select value.

[@tomrowe2181]

This is a good use case for useFetcher OnChange of the first select, you can trigger a fetcher submission to retrieve the options for the second dropdown and populate it. Or for a normal react solution simply send all options down on first page load, and useState to track which set to show

[@daoodqurashi4758]

Yeahh rayan keep it comming

[@simonswiss]

You are correct - I never implement an abort fetch for rapid clicking 😅

[@trashAndNoStar]

Is there a sample code discussed here on a gist/repo?

[@frozen_tortus]

2:47 While I like this approach, React is throwing an error for this approach since 'onClick' handler is missing. Is it possible to suppress that error? EDIT: Use defaultValue :)

[@fabischkamau]

Aaah thanks i run into that problem sometime ago 🤦 but now i now i know how to handle it. Thanks you☺️🥳

[@OberfeldwebelPfeffer]

Why don't you use the method="delete" in the form? That way you wouldn't need to define the "_action" name on the button.

[@fennecbesixdouze1794]

Because the browser HTML forms API doesn't support method="delete". It only supports POST and GET.

[@OberfeldwebelPfeffer]

I found that out a year ago. 😅 But I guess it’s good to be mentioned here for others that encounter this. So thanks for answering.

[@nightshade427]

Reminds me of aspnet postback model and client side auto update using updatepanel of the early 2000s. I dig it, it's a mix of old and new.

[@DaCurse0]

5:25 ah yes, classic DOM clobbering 😁

[@edwarddelgado9654]

I'm old school hidden but data-* on the button might also work for the id.

[@amsterdamtinus8456]

As one of these old developers I would add an hidden input for the action as well, like in the olden days :)

[@VincentDECAUX]

I can't understand how we can't name the Form directly. Going back with hidden input is hard to maintain, read the code to find the hidden input in your Form ...

[@jannekanerva9484]

What if I also wanted to create an API for the same actions (like e.g. the delete action) and provide it to my customers? Should I separate that into a different route (so duplicate it) or how is that meant to be done in remix universe?

[@DenysSlipko]

Thanks a lot!

[@mogadanez]

can we use just method="DELETE"?

[@FzsHotDogInDonut]

Any RTE for remix js????

[@albiceleste101]

Thank you so much!

[@김슬찬-g6b]

which tool do you use for disalbe/enable javascript on developer mode?

[@farrukhazad]

nice work dear friend , i like , nice share , stay connected

[@mjg_____]

everything old is new again and I mean that in the best possible way 😅 side note, having educators create a framework makes learning it soooooo much easier.

[@arek9430]

I have question - if there is a separate backend app meaning frontend app server would serve as a "proxy" to this backend, then what is the purpose and advantages besides SEO, to do all this complications just for the fetch calls to happen on the server (which then do fetch call to the backend anyway)? I see that application can work even without js enabled (but this is extreme rarity to happen - but still nice to have), comes with complete HTML, has SEO. But apart from this, is there anyhing else worth this gymnastics for SSR?

[@royrevelt5698]

Bravo! Give it a year and The Industry will wake up and start using Remix. If I may ask an unrelated question - Mr. Florence, which keyboard (and mouse) are you using in this recording? It's not mechanical, is it?

[@Sm123bg]

Hello. If I had a form that added a like to a blog post or something would you recommend just removing the default submit button styling so only a font awesome icon is shown?

[@stiforr8714]

A replacement for _action i've been using is "intent"

[@pablen808]

Yep. I did enjoy it.

[@juraev0056]

Hi, is _action with value being added to FormData with ? Because Chrome does not seem to include button by default if I just call new FormData(form) in fetch.

[@dmytroulianov8743]

just curious how it would work if I wanted to delete a few users simultaneously like clicking five times on different names with slow connection, I guess it will do the job for my last click but not for all of them right? btw really like remix and your videos

[@dmytroulianov8743]

nice video on concurrent mutations, thanks!

[@alexmachin1785]

Yeah that's what I've been thinking, like if you have a table and select multiple users how can you handle that ? I bet you can it's just a matter of understanding how.

[@mrala]

8:46 type `ej` for enabling and `dj` for disabling javascript

[@oussou_lessou]

Holly Button !!! 😯

[@barmannphoto]

A user could change the values of the hidden fields before submitting. It seems like there should be a more secure way of doing this.

[@TheDrokon]

So the user is going to hack themselves? This is silly

[@RustanJhi]

Really enjoy it. "bop bop bop bop", makes me laugh.

[@ZachCurtis]

The sound effects while deleting make this video! 🤣

[@DanKreiger]

I don't do much, but I always used to abort unnecessary requests

[@vrfjwehs29]

Ohh thats how that works

[@fev4]

damnn! this is nice

[@JLarky]

I wish action was passing $REQUEST

[@fennecbesixdouze1794]

We're definitely going backwards here by leaps and bounds. You've just added dozens of lines of code to add the Form and the hidden inputs, when you could have had one single button with an "onClick" that receives just the iteration variable "person". All the complexity of how to take a "person" and delete it, including that dynamodb will require the id and createdAt and unwrapping those and putting them in hidden inputs etc etc: the type, the name, the gotcha of an underscore for the action, all of that could have been abstracted away; but here they have to be in your face down to the level of the DOM and the Form and input elements. The browser should be evolved to support things method="DELETE". We shouldn't go backwards 20 years as a community to a far worse developer experience.