S06E04 - Iteration
A weekly podcast about development and design through the lens of amazing books, chapter-by-chapter
Refactors Before -
- Extract Function
- Change Function Decleration
- Replace Temp with query
- Replace conditional with polymorphism
Refactoring in Practice
Introduce Parameter Object - 140 - Structure your parameters
- This way order doesn’t matter
- You can set default values
- Grouping data is more clear in the relationship
Replace Constructor with Factory Function 334 - - Encapsulating the creation of objects (the initialize) into a factory Function
In Ruby: Creating a new User and Organization within a UserOrganizationFactory call / Tangent / Related to FormObjects.
In JavaScript: availableVariants - big array with Item, Colors, Sizes - replaced with variantFactory(34,2345,2345,) just passing ID’s
Extract Function into class - 182 - Consolidate up a bunch of related functions into a parent class
Split Phase 154 - Variant of Extract Function - When a function is dealing with two different things - look for a way to split it out - was cleaner approach.
JavaScript - Cart.js - logic of API calls associated with the user input
- Split this into discrete functions
Ruby - Notification logic was calling Twilio
- Encapsulate this into it’s own method
- Later then it was a service object to itself
My Cart.js Story - (Refactoring in Vue / JavaScript)
- addItem - for adding item to cart
- removeItem - for removing item from cart
- increaseItemCount - for adjusting line item
- decreaseItemCount - for adjusting line item
- setLineItemCount - for adding to cart an initial value
First - Rename Methods (Change Function Declaration) 124 - addItem - became - addItemToCart
- removeItem - became - removeItemFromCart
- increaseItem - became - increaseLineItemCount
- decreaseItem - became - decreaseLineItemCount
Second - Extract Function 106 - Both increaseLineItemCount and decreaseLineItemCount were doing something very similar.
- So I created a new function of setLineItemQty
- Both my methods of increaseLineItemCount and decreaseLineItemCount were then calling this setLineItemQty that accepted a qty parameter - function.
Second - parameterize Function 310 - This did take a refactor of my vue listeners.
- Since I had this new setLineItemQty that accepted a qty parameter
- I replaced increaseLineItemCount and decreaseLineItemCount a single function of setLineItemQty
- Deleted a lot of code
Third - Used inline function 106 to simply alias another function. - Through the above refactors I realized that addItemToCart was doing the same transactional work as setLineItemQty to 1
- I removed the body of addItemToCart and replaced it with setLineItemQty with the default params accordingly.
Fourth - Again used inline function 106 to alias another function - Through the above refactors I realized that removeItemFromCart was doing the same transactional work as setLineItemQty to 0
- I removed the body of removeItemFromCart and replaced it with setLineItemQty with the default params accordingly
Fifth - I used
I realized that all these functions were just doing the same thing. Adjusting CartLineItemCount.
- The final refactor simply deleted removeItemFromCart and addItemToCart
In closing:
- Code went from 160 lines to around 60
- It’s way DRY
- It’s way more reusable
- The interface to my cart.js is now just a single function of setLineItemQty
Updated my vue listeners - Every interaction within this front end is just calling setLineItemQty
Picks:
- vue.js - https://vuejs.org/ -
- Burnout Reddit thrread: https://www.reddit.com/r/cscareerquestions/comments/b6xzr0/how_do_you_keep_from_burning_out_at_your_job/