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/

would you rather...

anything goes with emma chamberlain

Would You Rather?

The AI-powered Podcast Player