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
A tartalmat a iteration podcast, John Jacob, and JP Sio - Web Developers biztosítja. Az összes podcast-tartalmat, beleértve az epizódokat, grafikákat és podcast-leírásokat, közvetlenül a iteration podcast, John Jacob, and JP Sio - Web Developers vagy a podcast platform partnere tölti fel és biztosítja. Ha úgy gondolja, hogy valaki az Ön engedélye nélkül használja fel a szerzői joggal védett művét, kövesse az itt leírt folyamatot https://hu.player.fm/legal.
Player FM - Podcast alkalmazás
Lépjen offline állapotba az Player FM alkalmazással!
Lépjen offline állapotba az Player FM alkalmazással!
Refactoring 🛠Getting Into The Weeds
MP3•Epizód kép
Manage episode 235733845 series 1900125
A tartalmat a iteration podcast, John Jacob, and JP Sio - Web Developers biztosítja. Az összes podcast-tartalmat, beleértve az epizódokat, grafikákat és podcast-leírásokat, közvetlenül a iteration podcast, John Jacob, and JP Sio - Web Developers vagy a podcast platform partnere tölti fel és biztosítja. Ha úgy gondolja, hogy valaki az Ön engedélye nélkül használja fel a szerzői joggal védett művét, kövesse az itt leírt folyamatot https://hu.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 epizódok
MP3•Epizód kép
Manage episode 235733845 series 1900125
A tartalmat a iteration podcast, John Jacob, and JP Sio - Web Developers biztosítja. Az összes podcast-tartalmat, beleértve az epizódokat, grafikákat és podcast-leírásokat, közvetlenül a iteration podcast, John Jacob, and JP Sio - Web Developers vagy a podcast platform partnere tölti fel és biztosítja. Ha úgy gondolja, hogy valaki az Ön engedélye nélkül használja fel a szerzői joggal védett művét, kövesse az itt leírt folyamatot https://hu.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 epizódok
Minden epizód
×Üdvözlünk a Player FM-nél!
A Player FM lejátszó az internetet böngészi a kiváló minőségű podcastok után, hogy ön élvezhesse azokat. Ez a legjobb podcast-alkalmazás, Androidon, iPhone-on és a weben is működik. Jelentkezzen be az feliratkozások szinkronizálásához az eszközök között.