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.

4Developers 2015: Clean JavaScript code - only dream or reality - Sebastian Łaciak

377 views

Published on

Sebastian Łaciak

Language: English

JavaScript isn’t longer language used only by secondary school students. It is powerful tool to build next generation web application. You can use TDD, integration test, simple IDEs, static code analysis, object oriented design and well known patterns. Can't believe it? See you in new JS reality.

Published in: Software
  • Be the first to comment

  • Be the first to like this

4Developers 2015: Clean JavaScript code - only dream or reality - Sebastian Łaciak

  1. 1. Clean JavaScript Code only dream or reality? Sebastian Łaciak
  2. 2. • Clean Code • Node.js • Environment • Tests Support • Design Patterns Agenda
  3. 3. Clean Code
  4. 4. C1: Inappropriate Information /** ------------------------------- REVISION HISTORY ------------- dd-mmm-yyyy <name> <problem number> <description> 06/01/99 Kowalski Andy initial */ C2: Obsolete Comments /* return sum of arguments */ function multiply(a, b) { return a * b; } C3: Redundant Comments /* multiply two numbers */ function multiply(a, b) { return a * b; } C4: Poorly Written Comments /* I had to write this comment due to checkstyle */ function add(a, b) { return a + b; } C5: Commented-Out Code /* function devide(a, b) { return a / b; } */ Comments
  5. 5. E1: Build Requires More Than One Step mvn install E2: Tests Require More Than One Step karma start Environment
  6. 6. G2: Obvious Behavior Is Unimplemented function getValue() { this.otherValue = null; counter = counter + 1; return counter; } G3: Incorrect Behavior at the Boundaries function getLastName() { return firstName; } G4: Overridden Safeties /** QUnit.test("should return sum of 1 and 3", function(assert) { assert.equal(this.calculator.add(1, 3), 4); }); }*/ General
  7. 7. G5: Duplication DRY – Don’t repeat yourself G9: Dead Code G10: Vertical Separation function add(a, b) { AssertArg.notUndefined(a); AssertArg.notUndefined(b); return a + b; } G11: Inconsistency function setLastName(lName) { surName = lName; } General
  8. 8. G20: Function Names Should Say What They Do function getValue() { this.otherValue = null; counter = counter + 1; return counter; } G25: Replace Magic Numbers with Named Constants var MONTH_APRIL = 3; General
  9. 9. F1: Too Many Arguments function doSth(a,b,c,d,e,f,g,h) { … } F3: Flag Arguments function sort(ascOrder) {…} F4: Dead Function Functions
  10. 10. N1: Choose Descriptive Names function doSth(a,b,c,d,e,f,g,h) {…} N5: Use Long Names for Long Scopes var pageDisplayCounter = 1; N7: Names Should Describe Side-Effects function getOrCreate() {…} Names
  11. 11. T1: Insufficient Tests it("should return sum of 1 and 3", function() { var result = calculator.add(1, 3); }); T2: Use a Coverage Tool! T3: Don’t Skip Trivial Tests function setLastName(lName) { firstName = lName; } T6: Exhaustively Test Near Bugs T9: Tests Should Be Fast Tests
  12. 12. Node.js
  13. 13. Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. Node.js
  14. 14. Node.js
  15. 15. Node.js
  16. 16. Java Platform
  17. 17. Node.js – Single Thread
  18. 18. npm is a package manager for JavaScript, and is the default for Node.js. npm is bundled and installed automatically with the Node.js environment. npm runs through the command line and manages dependencies for an application. It also allows users to install Node.js applications that are available on the npm registry. Node Package Manager
  19. 19. Environment
  20. 20. Development Environment
  21. 21. Development Environment
  22. 22. JSHint
  23. 23. Tests Support
  24. 24. Unit tests
  25. 25. QUnit
  26. 26. Jasmine
  27. 27. Mocks
  28. 28. Mocks – QUnit with Sinon
  29. 29. Mocks – Jasmine
  30. 30. Karma runner
  31. 31. Karma configuration
  32. 32. QUnit - browser
  33. 33. QUnit - browser
  34. 34. Karma Coverage with QUnit
  35. 35. PhantomJS
  36. 36. Design Patterns
  37. 37. Namespaces
  38. 38. Class with encapsulation
  39. 39. Singleton
  40. 40. Inheritance
  41. 41. Factory

×