Code refactoring workshop (in Javascript)
0 likes139 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. Lets 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 dont 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... 際際滷s 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/