Code refactoring workshop (in Javascript)
0 likes146 views
This document discusses code refactoring in Javascript. It introduces refactoring and defines it as changing code without altering external behavior but improving internal structure. The document outlines an agenda including an introduction, examples, and a coding activity. It discusses code smells that indicate needs for refactoring, such as duplicated code. It emphasizes testing during refactoring and focusing on small, incremental changes. The overall message is that refactoring improves code quality and maintainability over time.
Code refactoring workshop (in Javascript)
- 1. Code Refactoring in Javascript Ilias Bartolini
- 2. Agenda ● Introduction to Refactoring ● Initial setup exercise - break - ● Refactoring examples ● You own refactoring journey
- 3. Where are my black socks?
- 4. Where are my black socks?
- 5. I need a 12mm spanner...
- 6. I need a 12mm spanner...
- 8. “Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” - Martin Fowler
- 9. Refactoring
- 10. Refactoring “Refactoring is the process of changing a software system in such a way that it does not alter the external behavior of the code yet improves its internal structure.” - Martin Fowler
- 11. Hello demo exercise ● Set up in pairs ...and exchange keyboard often! ● Get the codebase $ git clone github.com/iliasbartolini/code_refactoring $ cd code_refactoring $ npm install $ npm test ● Check the /1_hello/ example
- 14. Some refactoring... Rename method, variable, class, … Replace magic numbers Extract / Inline method or function Extract / Inline variable Move method, Extract class Replace if/switch with polymorphism Pull up / Push down method, Extract interface Replace inheritance with delegation
- 15. And some smells... Source: iStock Michał Ludwiczak
- 16. Code smells and refactoring Treatment ● Extract duplicate part ● Extract & split ● Introduce class ● Move responsibility ● Split responsibilities ● Introduce polymorphism, ... ● Delete, delete, delete ● Rename / Extract method Symptom ● Duplicated code ● Long function/class ● Long list of parameters ● Code “envy” ● Divergent changes ● Common if/switch lists ● Speculative generic code ● Code comments //are like a deodorant
- 17. Practice! Check the examples in order /2_date_parser/ /3_direction/
- 18. Tools & Language support
- 19. Let’s focus on baby steps! 1) Identify a smell 2) Make a refactoring 3) Run tests! 4) Repeat ● Write down the list of smells you see and refactoring you apply ● Remember to swap keyboard ;)
- 20. Practice! Check the examples in order /4_order_receipt/ /5_rover/
- 22. Good design makes you faster https://www.martinfowler.com/bliki/DesignStaminaHypothesis.html
- 23. Myths “You don’t need to refactor your test code”
- 24. TDD Test Driven Development Write a test first Implement solution Refactor Commit Add more tests
- 25. “Test code” is “code” ...and should be maintained with the same quality criteria
- 26. Myths “We need to stop the project for this refactoring”
- 27. Boy scout rule “Leave the campground cleaner than you found it.”
- 28. Summary ● Change code in “baby steps” ● Make use of a test suite ● Learn to identify “smells” ● Try to make your code “obvious” ● Continuously improve the “code design” ● Practice, practice, practice makes perfect :)
- 29. Feedback bit.ly / <add a feedback link> Thank you! :)
- 30. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. It makes use of the works of... Slides template: Mateus Machado Luna Images credits: https://www.flickr.com/photos/dietjay/3140774470/ https://www.flickr.com/photos/147489968@N06/ https://www.flickr.com/photos/silvertje/2197752384/ https://www.flickr.com/photos/mtneer_man/7819976694/ https://www.flickr.com/photos/lingoflora/2331681471/