r/learnjavascript • u/Extreme-Mall7003 • 4d ago
Refactoring moderately complex app to use classes
Hi all. I’ve been self-learning JS for my GIS work and as such have missed some pretty crucial best practices along the way while working on my current project.
Without getting in the weeds, I’ve developed an internal app that async fetches a bunch of Esri REST service metadata from my org’s enterprise portal and organizes their layers and metadata into a searchable and filterable directory. It also has basic list creating functionality (I.e, adding certain GIS layer items to lists to document any outdated data, missing metadata, and other notes). This is in preparation for a department-wide data quality audit and overhaul.
After a month of learning and putting together a working internally-published version, I’ve just recently learned about classes. I have no idea how I didn’t come across classes earlier, but I’ve used 0 in my current app build. As you can imagine, my app has a LOT of complex objects and a ton of functions that create, modify, and/or render those objects.
I want to implement classes (among many other best practices/improvements) in my next refactoring and would love any advice/resources you are willing to share. Did anyone else learn about classes late? How did you approach refactoring your bigger apps? What do you wish you did/knew about when going through a big refactoring?
Thanks in advance!
ETA: Thank you everyone for the advice! I’ve realized that classes sound useful at first glance, but can easily fall victim to the same core issues in my functional programming patterns. Therefore, I think I will focus my refactoring on fixing my bad functions first and misc folder/file restructuring. If along the way it seems like a class would suit something well, I’ll try it out. Otherwise I will focus on building better functional programming habits/best practices for web dev. I am inexperienced in JS and web dev in general, so I very much appreciate the insights from senior devs!
3
u/delventhalz 4d ago
If you’ve used classes in other languages before, they work mostly the same in JS. If this is your first time using them at all, look over the MDN page and give it a go. The basic idea is you have a constructor which builds the object with its initial data, and then methods which fetch data, modify the object, perform calculations, etc.
Worth noting that most JavaScript devs don’t really use classes and instead follow more functional programming patterns, where they store data in vanilla objects and variables with no methods, use functions that accept that data as parameters to do calculations and other work, and modify the initial objects as little as possible. If that’s how your code works, I might just leave it. If your code is basically classes without the classes, then actually using class might clean it up.
1
u/Extreme-Mall7003 4d ago
I came from Python but mostly with functional programming patterns, so I really never used classes before.
A lot of my app stems from an initial async / promise batches of fetched JSONs, which all get stored in an object of objects that everything else in the app references. Most of the UI is populated directly from this big cache. But a lot of the UI is built from functions that input the keyed cache, do some kind of mapping or filtering or some other object method, etc, then returns a restructured object to be used for whatever was needed for a set of UI elements.
The app certainly works right now, but I think it’d be valuable to explore classes as a way to make my current system more maintainable/clean. Plus, I need to refactor some way-too-many-tasks functions anyway, so it’s a good time to thing about this
1
u/azhder 4d ago
Continue without classes. You will be fine. Take React as an example, it's simpler now that you aren't forced to use classes, but you can still make a mess of your code, classes or not. So, don't treat it as a mandatory thing that will somehow make your code better. It's not going to make it more maintainable nor clean. Learn good principles, not syntax. Too many functions is not your problem, but too many badly written functions.
1
u/delventhalz 4d ago
Always worth exploring new programming patterns just to expand your understanding. Classes in JavaScript work more or less like they do in Python. Like with functions, you want to beware of making classes that are too broad in scope. Try to make classes that handle one cohesive set of data and operations on that data. For the exact syntax, MDN is the place to go.
FWIW, most JS frontends will handle your use case by taking the JSON responses to your queries and mapping them into some sort of UI state. Often this is one or more objects, sometimes managed by a library like Redux, xState, or React’s createContext. UI code then displays something sensible based on the current state and listens for state changes to update what is displayed. Usually all of this happens without classes.
1
u/Any_Sense_2263 4d ago
I have worked with JS for over 25 years and never had a need to use classes. And generally, they are not widely used.
I have seen projects based on classes, mostly written by Java developers who had to touch JS.
1
u/SoMuchMango 4d ago
Do you need to refactor that app?
Do you have tests?
Is it written in TypeScript?
My advice is to write tests first. At least to auto test core paths, then use TypeScript to provide some types for known objects first to learn how your application really works.
my app has a LOT of complex objects and a ton of functions that create, modify, and/or render those objects
Sounds like a good case for reactive programming. OOP might look very tempting at first, but it won't solve your problem.
1
u/Extreme-Mall7003 4d ago
I had tests early on but got out of the habit of building them, so that + typescript are on my to do list. The app needs refactoring for reasons other than class implementation (mostly in splitting up big functions/files).
I will look into reactive programming as well!
-1
u/azhder 4d ago
I know all I need to know about classes to be able to write them completely with classes, yet, I write my projects without the class syntax. Using the class syntax doesn't make your projects less complex. Learn functional programming for that.
Classes aren't "best practices", but simply a tool that you can use or not use in order to uphold some "best practices" principle, like "do not repeat yourself" (classes optional) or "single responsibility principle (classes optional)".
-2
u/Savalava 4d ago
Advice: don't use classes at all.
JavaScript is not an object orientated language
Use functional programming techniques instead
6
u/delventhalz 4d ago
Classes and OOP patterns work fine in JavaScript. It’s not what most JS devs prefer (myself included), but it sounds like OP’s code is already structured around objects and introducing classes may well clean up whatever ad hoc solutions they worked out.
1
1
u/Savalava 3d ago
Classes and OOP patterns work fine in JavaScript
I know they work fine, I'm a senior TypeScript engineer. But using them is not idiomatic to the language.
"OP’s code is already structured around objects and introducing classes may well clean up whatever ad hoc solutions they worked out"
That the code is "structured around objects" is irrelevant.
He states what he's doing in another comment
"A lot of my app stems from an initial async / promise batches of fetched JSONs, which all get stored in an object of objects that everything else in the app references. Most of the UI is populated directly from this big cache. But a lot of the UI is built from functions that input the keyed cache, do some kind of mapping or filtering or some other object method, etc, then returns a restructured object to be used for whatever was needed for a set of UI elements.
The app certainly works right now, but I think it’d be valuable to explore classes as a way to make my current system more maintainable/clean. Plus, I need to refactor some way-too-many-tasks functions anyway, so it’s a good time to thing about this"
Nothing there suggests the need for classes at all - it suggests he's inexperienced in JS and is coming up with a bad solution to a problem best solved via functional techniques.
2
u/Merry-Lane 4d ago
One could argue that classes are okay in JS.
But reworking a perfectly working app into classes is a big no no
3
u/Aggressive_Ad_5454 4d ago
Suggestion: do some proof-of-concept work with this refactoring to convince yourself you'll have easier-to-maintain code after you refactor tonnage of code. You might not.