DEV Community: Leslie

2021 Weeknotes 3

Leslie — Sat, 16 Jan 2021 06:47:32 +0000

🧠 This is a brain dump.

Development BTS
React Hook Form | What to do with server-side responses
Tree-shaking with Webpack5 and Material UI
Writing Brag Books

Development BTS

I've just realized that the redux-form integration with material-ui components is not magical.. at all. I am currently moving to react-hook-form for another project. Why is it not as easy as before?? Not that it's more complicated.. it’s just that I feel like there are too many things to do.

Soooo looking back at my old code, I've done a lot of customizations in my previous integration that made it easy to use from one project to another with little setup. I forgot these behind-the-scenes.

Now I need to do it again, except that I am not starting from scratch. Maybe I can just drop in the previous builds I made. Will see that later. 😝

Update: Yep. Pretty much like that. Plus the designer wants to change the UX, so yea. Same Same but not really. 😅

React Hook Form | What to do with server-side responses

Maybe I missed some examples in the docs, but it was hard to see how I should incorporate server responses into my form. For example, success messages or server-side validation error messages.

Found these helpful links along the way:

Submit from outside the form / RHF Github
Server-side validation / Carl Rippon. I like this site. Subscribed haha.

Tree-shaking with Webpack5 and Material UI

I kept looking for a way to make my build smaller.

Material UI. Found my code blowing up to like 900kb. Whyyyy. I was only using TextField, why do I have modal and popover. So I jumped into the code, and this component is more of a convenience wrapper. It's not just the normal text field, you can use it for select, etc. Plus, the lodash packages are killing me. I forgot if it's also material-ui, but proptypes kept creeping into the production build.

Step 1: Make sure my webpack + babel + material UI setup is correct.

The bundle actually got a whole lot smaller. Lodash is not being loaded fully. But I still want to optimize what I can.

Step 2: Check other options.

Check the gzipped version. Maybe it's not that bad.
- Used the web-cli to get this working. The result's not bad at all. Everything was around 100kb (including react and other packages).
Try making my own TextField but still using mui.
- Tried this. But hmm. Is it worth doing this? Stopped.
Use another package that also implements material design like Material Web Components
- There are ways to incorporate it into React but, again, is the effort worth it? And is it actually smaller?
Write my own?
- Nope. Not this time. 🤣

Step 3: Decide.

Went with #1. Will re-optimize next time.

Writing Brag Books

Because it's that season again, performance assessment.

Common problems in presenting accomplishment reports:

you don't remember things you did
not writing down the impact of the action
worrying about looking boastful

Thankfully, our new senior manager shared this: Julia Evans' Brag Documents Guide. There are guide questions at the end of the article. Helped me for last year's. Will continue to use this year, probably write down milestones every quarter at least? Yep.

the overengineer

Leslie — Mon, 04 Jan 2021 15:04:15 +0000

Kailan ka ba titigil?

A team mate asked me when I'll finally stop. He was referring to my seemingly never-ending refactors.

The frontend landscape is always changing. You wake up, and there's two new frameworks or bundlers or "must-use" packages. Everything is changing constantly, and sometimes it's really tiring. And when I get tired of all the crazy stuff, I remember Chris.

The cover image is Chris Heilmann in JS Conf 2015. His Overboard.JS talk continues to console me to this day. It's a reminder that I don't have to use every new and shiny thing right away! Actually, I may not have to use all of them. Or any of them.

It's a matter of good judgment. And staying in this domain? It's a matter of passion.

return to react

Leslie — Sat, 02 Jan 2021 07:26:59 +0000

In 2020 most of my time was spent dealing with legacy systems revolving around jQuery. By the end of the year, I had my personal roadmap quite laid out for 2021, and migration to react is on top of the list.

I started listing down the things I have to do:

list the new feature requirements
check my current reactJS setup
review reactJS changes and the packages I use

Current setup: reactJS + redux. To note, I'm using redux-form and redux-saga. I use this for my big dashboard projects.

New setup: reactJS, no redux. My new project does not need redux. I'm still in the process of redesigning, but this will probably be it. I will surely miss redux-saga though.

Anyway, for now here are things I learned / checked out:

new form: formik vs react-final-form. I learned both and their APIs do look similar.
validations: yup. Clean validation schemas. I haven't looked for something else though. So no comparisons.
xhr: ky. Based on the native fetch.
react-query. Interesting, especially for data-heavy projects.
new setup for webpack5 and babel
enzyme vs react-testing-library. Decided not to change my current setup using enzyme. At least not for now, because I just have too many other things to decide on.
Learned redux-saga can be used without redux

Lastly, Robin Wieruch's tutorials. I first started truly learning reactJS through his ebooks. That was in 2017. Every time I want to brush up on my FE knowledge, I always visit his website.