Player FM рдРрдк рдХреЗ рд╕рд╛рде рдСрдлрд╝рд▓рд╛рдЗрди рдЬрд╛рдПрдВ!
Refactoring ЁЯЫаGetting Into The Weeds
Manage episode 235733845 series 1900125
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/
78 рдПрдкрд┐рд╕реЛрдбрд╕
Manage episode 235733845 series 1900125
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/
78 рдПрдкрд┐рд╕реЛрдбрд╕
Todos los episodios
×рдкреНрд▓реЗрдпрд░ рдПрдлрдПрдо рдореЗрдВ рдЖрдкрдХрд╛ рд╕реНрд╡рд╛рдЧрдд рд╣реИ!
рдкреНрд▓реЗрдпрд░ рдПрдлрдПрдо рд╡реЗрдм рдХреЛ рд╕реНрдХреИрди рдХрд░ рд░рд╣рд╛ рд╣реИ рдЙрдЪреНрдЪ рдЧреБрдгрд╡рддреНрддрд╛ рд╡рд╛рд▓реЗ рдкреЙрдбрдХрд╛рд╕реНрдЯ рдЖрдк рдХреЗ рдЖрдирдВрдж рд▓реЗрдВрдиреЗ рдХреЗ рд▓рд┐рдП рдЕрднреАред рдпрд╣ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рдкреЙрдбрдХрд╛рд╕реНрдЯ рдПрдкреНрдк рд╣реИ рдФрд░ рдпрд╣ Android, iPhone рдФрд░ рд╡реЗрдм рдкрд░ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдЙрдкрдХрд░рдгреЛрдВ рдореЗрдВ рд╕рджрд╕реНрдпрддрд╛ рдХреЛ рд╕рд┐рдВрдХ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд╛рдЗрдирдЕрдк рдХрд░реЗрдВред