On The Bike Shed, hosts Joël Quenneville and Stephanie Minn discuss development experiences and challenges at thoughtbot with Ruby, Rails, JavaScript, and whatever else is drawing their attention, admiration, or ire this week.
…
continue reading
InnehÄll tillhandahÄllet av iteration podcast, John Jacob, and JP Sio - Web Developers. Allt poddinnehÄll inklusive avsnitt, grafik och podcastbeskrivningar laddas upp och tillhandahÄlls direkt av iteration podcast, John Jacob, and JP Sio - Web Developers eller deras podcastplattformspartner. Om du tror att nÄgon anvÀnder ditt upphovsrÀttsskyddade verk utan din tillÄtelse kan du följa processen som beskrivs hÀr https://sv.player.fm/legal.
Player FM - Podcast-app
GĂ„ offline med appen Player FM !
GĂ„ offline med appen Player FM !
Refactoring đ Getting Into The Weeds
MP3•Episod hem
Manage episode 235733845 series 1900125
InnehÄll tillhandahÄllet av iteration podcast, John Jacob, and JP Sio - Web Developers. Allt poddinnehÄll inklusive avsnitt, grafik och podcastbeskrivningar laddas upp och tillhandahÄlls direkt av iteration podcast, John Jacob, and JP Sio - Web Developers eller deras podcastplattformspartner. Om du tror att nÄgon anvÀnder ditt upphovsrÀttsskyddade verk utan din tillÄtelse kan du följa processen som beskrivs hÀr https://sv.player.fm/legal.
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 episoder
MP3•Episod hem
Manage episode 235733845 series 1900125
InnehÄll tillhandahÄllet av iteration podcast, John Jacob, and JP Sio - Web Developers. Allt poddinnehÄll inklusive avsnitt, grafik och podcastbeskrivningar laddas upp och tillhandahÄlls direkt av iteration podcast, John Jacob, and JP Sio - Web Developers eller deras podcastplattformspartner. Om du tror att nÄgon anvÀnder ditt upphovsrÀttsskyddade verk utan din tillÄtelse kan du följa processen som beskrivs hÀr https://sv.player.fm/legal.
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 episoder
Alla avsnitt
×VĂ€lkommen till Player FM
Player FM scannar webben för högkvalitativa podcasts för dig att njuta av nu direkt. Den Àr den bÀsta podcast-appen och den fungerar med Android, Iphone och webben. Bli medlem för att synka prenumerationer mellan enheter.