Abstracting

It turns out, I really like clean code. I was given a project within the first week of working that was already complete, but that I would be adding onto. The entire application lived in one file, and it was nearly impossible to make sense of. If you wanted to find a specific piece of information, you had to know where to look and then start scrolling. I believe it was over 1600 lines long, and for the one guy that had been working on it until then, that was perfectly acceptable. He knew how everything worked and where everything was, so there was no issue. It was well written, just not very well organized. The first thing I did was componentize the whole thing. When I got done with it, I had split it up into about 30 files and created an acceptable folder structure. After doing so, I understood much better what was going on, and furthermore, when I added on to it, I knew where to put things. Even now, the application has grown pretty significantly, and I'm seriously contemplating whether or not I should reorganize the structure of the folders. At least for now, I know where things are and I think someone else coming on to the project would be able to figure it out better than I could when I started, but it's not ideal. In most frameworks, there is a clear structure of how to organize your files, but React is different in this way. There are suggestions on how to do it, but as long as you're consistent, there's really no wrong answer.

So, that leaves me a project for the future, in reorganizing the folder structure, but for now, I'm living in the world I created. My biggest issue with the organization right now is the CSS. As I've stated in the last few entries, I'm right in the middle of an advanced CSS course, and it's giving me all kinds of ideas for restructure of this file. However, the focus in the course is more with Sass, and Sass has a very specific way they suggest to organize things, and it's not exactly one I would implement. What would be ideal is a design system my cohort and I can decide on, and start implementing on future projects and refactoring for older projects. This goes beyond folder structure and file organization, though. I am of the opinion that we should have set guidelines for margins, padding, font sizes, fonts, inputs, buttons, and many other pieces that would be reusable. We could even create a component library that would be accessible in a Github repository to use as reference, or even create a package specific to our company that we would just install and implement. I'm going to be starting a new project next week, and it would simplify everything if I had something concrete like this to go off of. So, yesterday I brought it up to my cohort. I had to be careful, because I didn't want to insult the way he did things, but again, he was working by himself and had no reason to implement standards like this. If our team were to ever grow, onboarding someone into a system like this would be a cinch.

Along the lines of organization, I decided I wanted to add some order to some of my files. With all of the logic and JSX in one file, React components can quickly become unruly, even when they're only 10 lines of JSX. But, with custom hooks, you can take a lot of that logic and throw it into a different file, wrapping it in a function and returning out whatever you need for the file. I had watched a video by Jason Lengstorf a while back and had it down. In fact, I used custom hooks in a news app I created just after watching this, but I couldn't remember exactly how to do it. After going through a few blog posts, I decided to give it another try. I struggled at first, and broke the app for about an hour. Finally, I got it to click. In the first file, I moved 70 lines of code out of the file and into its own encapsulated hook. I could have taken more, too, but I decided I wanted to keep the handlers in the file itself. I don't know for sure if this is the pattern I will use going forward; I'll think about it this weekend, but I think it makes more sense to keep that with the JSX. A lot of the time, you would use a custom hook with code that is duplicated. This way, you can just wrap it up and call it multiple times from wherever you want. I have one hook that I can duplicate right now, but for now, each one is unique. I'm mostly using it to clean up the code for now, but I may take it a step further to be more reusable. Today, I was able to implement 9 custom hooks, which is awesome. I still have 7 to go. My application add-on is almost done, and they want to ship it by the end of the week next week. I'll mainly be waiting on the backend to finish up, though.

Until tomorrow!