DEV Community

Iteration Podcast

Refactoring đź› Getting Into The Weeds

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/

Episode source