Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Managing and evolving JavaScript Code

940 views

Published on

If your project has working features, a living design system, quality assurance and a code style guide, there is nothing that you will learn in this talk. Maybe.

Published in: Technology
  • Be the first to comment

Managing and evolving JavaScript Code

  1. 1. @jcemer Managing and 
 evolving 
 JavaScript Code
  2. 2. http://jcemer.com @jcemer
  3. 3. Code refactoring is the process of improving the design of existing code without changing its external behavior. https://martinfowler.com/ books/refactoring.html
  4. 4. If your project has
 1. working features, 
 2. a living design system, 
 3. quality assurance and 
 4. a code style guide…
  5. 5. There is nothing that you will learn in this talk. Maybe.
  6. 6. 4. Code 
 Style
  7. 7. The way code looks adds to our understanding of it. https://www.smashingmagazine.com/ 2012/10/why-coding-style-matters/
  8. 8. Working in a well- organized code base is like cooking in a clean kitchen. If things feel messy, it’s easy not to treat it with respect. Joe Ferris
  9. 9. Inconsistent formatting is the first sign of a code base that nobody really cares about. Joe Ferris
  10. 10. The code style of a project must be consistent.
  11. 11. Writing is an act of ego, and you might as well admit it. On Writing Well: The Classic Guide To Writing Nonfiction
  12. 12. Commit changes in code style is one of the worst feelings to me.
  13. 13. After agreeing in spaces or tabs, it is important to discuss other conventions.
  14. 14. .jshintrc sample config file
  15. 15. There are JSHint, JSLint and ESLint. If you can, pick the last one with a preset!
  16. 16. > npm install -g eslint
 > eslint --init ? How would you like to configure ESLint? Use a popular style guide ? Which style guide do you want to follow? Airbnb ? Do you use React? No ? What format do you want your config file to be in? JavaScript
  17. 17. error 'define' is not defined 
 no-undef
 error Unexpected dangling '_' in '_$scope' no-underscore-dangle
 error A space is required after '{' object-curly-spacing
 error Unexpected tab character no-tabs
 
 ✖ 167053 problems 
 (157018 errors, 10035 warnings)
  18. 18. The language and the open source projects evolve!
  19. 19. Legacy projects don't have modern language and API features.
  20. 20. var values = [{name: 'misko', gender: 'male'}]; var log = []; angular.forEach(values, function(value) { this.push( angular.extend({ info: info }, value) ); }, log);
  21. 21. const values = [{name: 'misko', gender: 'male'}] values.map((value) => ({ info, ...value }))
  22. 22. We have tens of thousands of JS modules at Facebook. When an engineer makes breaking API changes we transform all of our JavaScript to new code. @cpojer
  23. 23. 3. Quality 
 Assurance
  24. 24. Linting through static code analysis is the simplest tool to improve quality and reduce defects.
  25. 25. https://martinfowler.com/bliki/ TestPyramid.html Code testing
  26. 26. It is harder to measure the benefit of refactoring code 
 if the code base doesn't include tests.
  27. 27. 1. Low test coverage 2. Fear of refactoring 3. Sloppy code 4. Bad design http://blog.codeclimate.com/blog/ 2013/12/05/refactoring-without-good-tests/
  28. 28. 1. JUnit, 2. Jasmine, 
 3. Jest, 4. Karma, 
 5. AVA, 6. Mocha+chai, 
 7. Nightwatch.js.
  29. 29. I will not lie, it is still hard to properly test rich web applications. But try Jest.
  30. 30. Code review checks 
 for things that the automation might miss. 
 It ensures the business logic and prevents poor coding decisions.
  31. 31. 2. Living 
 Design
  32. 32. Learn deeply the project tech stack, paradings, and patterns.
  33. 33. 1. Prototypejs, 
 2. Angular, 3. jQuery, 
 4. BackboneJS, 
 5. React, 6. RxJS, 
 7. Redux, 8. Flow, 
 9. Vue.js.
  34. 34. The project design is a hostage of the tech stack.
  35. 35. Generally, code that doesn’t have good test coverage is also badly designed. http://blog.codeclimate.com/blog/ 2013/12/05/refactoring-without-good-tests/
  36. 36. The same logic in different places needs to be changed at least twice.
  37. 37. Try different approaches to improve your design quality.
  38. 38. These code variations were written on the same day.
  39. 39. Examine every word you put on paper. You'll find a surprising number that don't serve any purpose. On Writing Well: The Classic Guide To Writing Nonfiction
  40. 40. all[type].splice(
 all[type].indexOf(handler) >>> 0, 
 1
 ); this isn't simple
  41. 41. Simplify, simplify. On Writing Well: The Classic Guide To Writing Nonfiction
  42. 42. 1. Working
 Features
  43. 43. Quality Control is a procedure to detect faults by inspecting and testing the final product.
  44. 44. It’s important to collect and measure the incidents that happen on the 
 client side.
  45. 45. At least, briefly understand the 
 real-world business rules.
  46. 46. And when you face 
 a bug…
  47. 47. 1. Issues tracking, 
 2. tests, and 3. Git blame are the best ways to understand the product.
  48. 48. debugger and console.log() are your best friends to isolate problems.
  49. 49. 1. Pay attention on the console insights
  50. 50. 2. Look into other people's solutions
  51. 51. 3. Investigate any memory leaking
  52. 52. It is common to get stuck on a complex problem, then solve it quickly. Programming is about persistence.
  53. 53. Chris Pojer: Building 
 High-Quality JavaScript Tools 
 JSConf EU 2017
  54. 54. Chris Pojer: Building 
 High-Quality JavaScript Tools 
 JSConf EU 2017
  55. 55. Work hard for 
 1. working features, 
 2. a living design system, 
 3. quality assurance and 
 4. a code style guide.
  56. 56. https://xkcd.com/1428/
  57. 57. Zuckerberg: 'Move fast and break things' isn't how Facebook operates anymore
  58. 58. @jcemer Thank you!
 I hope you had some fun.

×