mui-rff

All day long, I read about people vibe coding, so I decided to open my mind and try it out myself and see if I could do some sort of mix between my own skills as a life long web developer and whatever the kids are doing these days. Mostly because I have a strong belief that AI itself won't take our jobs away, but people who know AI will. What I found out is that I'm never going back to a world where I don't integrate AI into my entire coding workflow. All the way from writing documentation to committing code. It makes things way more enjoyable. I truly enjoyed creating this whole project, it scratches my itch, and I hope that it continues to grow and be maintained over many years. I have another web project that's going on 7 years now and gets 88k downloads a month [0]. This is my passion, I'm here until I die, and even that project is no

Part of the complexity of integrating a form library with a ux library is passing all of the correct properties around between the two. In this case, I wasn't doing that correctly and it resulted in a bug where disabled was not being set correctly. Someone filed a bug. The bug was fixed and a test was written to ensure that this doesn't happen again in the future. You can read the history here: https://github.com/lookfirst/mui-rff/issues/455 If you're working with people who randomly 'forget' things while they are doing development, then I guarantee that you're working with people who also write buggy code. In fact, in this case, it was ME who wrote that buggy code. I own it. Not all code gets 100% coverage and sometimes things get missed. That is ok. What is not ok is skipping tests because you might forget something and therefore think

After some digging I believe it's this one: https://github.com/lookfirst/mui-rff

Kind of yes... not all dependencies are direct for the app, a lot are just dev dependencies. Just to get eslint/prettier to warn, auto format and cleanup my code when I save a file, it is 13 direct dev dependencies in my project [0]. [0] https://github.com/lookfirst/mui-rff/blob/master/package.jso...

What package do you publish? https://github.com/lookfirst/mui-rff?

Building forms in React is a pain in the ass and requires a lot of little details with strange edge cases. I built a simple wrapper between two popular libraries, MUI and React Final Form called aptly mui-rff [1]. I've been maintaining this library for years now. It gets ~40k downloads a month off of NPM. It still isn't perfect, some of the widgets have weird edgecase failures. It took a long time to get it to the point where it is now. The saving grace over time has been that I wrote a decent amount of unit tests right from the start. This has thankfully allowed me to upgrade the library safely over time but wow... just wow... I've spent so much time just fixing things that break because of random bits of code rot. The fact that this is a ~10 page blog post and still doesn't cover all the edge cases says so much about what is wrong with

> We solved the test flakiness issue by getting rid of all of our frontend tests, which means we spend more time manually testing our product. This is a terrible idea. Getting rid of testing doesn't make the problem (flakiness) go away, it just moves it to another part of workflow (manually testing). So, now instead of having tests, you have more humans (or because you're a small company, instead of building features which grow the company, you spend time manually testing and fixing regressions that your end users embarrassingly find for you). Never mind that it just doesn't scale as your codebase increases. Even a basic level of (snapshot) testing react components is not difficult. I wrote a library [1] that intentionally has a ton of tests and over the years, I've been able to do new releases that upgrade to new versions of the underlyi

After ~25 years of open source and regretting a lot of my earlier behaviors as a younger human, a couple years ago I created another open source project [0]. I made a point of setting it up right from the beginning. Easy build system, fully unit tested, code of conduct, automated CLA signing, examples, good documentation and most importantly, I am excessively kind to anyone who comments or gives feedback. This took an inordinate amount of time up front, but was worth it. I'd say the result of this is that I've gotten a couple high quality contributions, zero stress and very very little feedback. It has been a pleasure to maintain this project because it causes me no pain at all. I'd say that maintaining 200+ projects is just insane really. You've overdone it. It is impossible to do any of them extremely well and of course you're just goin

> Our reasoning for skipping frontend tests: Most of the frontend code is visual. Tests can't tell you if the result is aesthetically satisfying, so you have to look at it no matter what. Since the backend diligently enforces data sanity, the frontend can't really get into too much trouble, and a page reload fixes almost anything. Frontend testing seems to be high-effort low-reward. This is an example front-end react component project that I wrote that benefits heavily from tests: https://github.com/lookfirst/mui-rff Why? Because it is a wrapper around two other frameworks (React Final Form and Material-UI). Any time those two frameworks change something in a way that I didn't expect, I want test failures.

Throwing my thin wrapper around Material-UI and Final Form into the mix. I personally prefer RFF over Formik because of RFF's ability to control renders. https://github.com/lookfirst/mui-rff

You certainly do not need to use a form library, but it does make it easier to deal with complicated issues such as render counts. I built a thin wrapper around material-ui and react final form (what I would suggest over formik) [1] and a little demo [2] that visually demonstrates this. [1] https://github.com/lookfirst/mui-rff [2] https://lookfirst.github.io/mui-rff/

I ran into that myself while working on a form heavy project. You can use various react form libraries to help make things easier, but then you need to figure out how to wrap your favorite visual component library. Passing all the properties between the two is really really confusing. I'm a fan of the Material-UI project which provides the visual components and ability to style them however you want. React Final Form is terrific with managing forms (and easily made very performant). imho, these form components become really nice to work with... Demo: https://lookfirst.github.io/mui-rff/ Codesandbox: https://codesandbox.io/s/react-final-form-material-ui-exampl... Code: https://github.com/lookfirst/mui-rff