iteration

Refactoring 🛠Getting Into The Weeds

Episode Summary

This week we talk about introducing parameter object, replacing constructor with factory function, and extracting function into class.

Episode Notes

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/