Clean Code in JavaScript

Book description

Get the most out of JavaScript for building web applications through a series of patterns, techniques, and case studies for clean coding

Key Features

  • Write maintainable JS code using internal abstraction, well-written tests, and well-documented code
  • Understand the agents of clean coding like SOLID principles, OOP, and functional programming
  • Explore solutions to tackle common JavaScript challenges in building UIs, managing APIs, and writing states

Book Description

Building robust apps starts with creating clean code. In this book, you'll explore techniques for doing this by learning everything from the basics of JavaScript through to the practices of clean code. You'll write functional, intuitive, and maintainable code while also understanding how your code affects the end user and the wider community.

The book starts with popular clean-coding principles such as SOLID, and the Law of Demeter (LoD), along with highlighting the enemies of writing clean code such as cargo culting and over-management. You'll then delve into JavaScript, understanding the more complex aspects of the language. Next, you'll create meaningful abstractions using design patterns, such as the Class Pattern and the Revealing Module Pattern. You'll explore real-world challenges such as DOM reconciliation, state management, dependency management, and security, both within browser and server environments. Later, you'll cover tooling and testing methodologies and the importance of documenting code. Finally, the book will focus on advocacy and good communication for improving code cleanliness within teams or workplaces, along with covering a case study for clean coding.

By the end of this book, you'll be well-versed with JavaScript and have learned how to create clean abstractions, test them, and communicate about them via documentation.

What you will learn

  • Understand the true purpose of code and the problems it solves for your end-users and colleagues
  • Discover the tenets and enemies of clean code considering the effects of cultural and syntactic conventions
  • Use modern JavaScript syntax and design patterns to craft intuitive abstractions
  • Maintain code quality within your team via wise adoption of tooling and advocating best practices
  • Learn the modern ecosystem of JavaScript and its challenges like DOM reconciliation and state management
  • Express the behavior of your code both within tests and via various forms of documentation

Who this book is for

This book is for anyone who writes JavaScript, professionally or otherwise. As this book does not relate specifically to any particular framework or environment, no prior experience of any JavaScript web framework is required. Some knowledge of programming is assumed to understand the concepts covered in the book more effectively.

Publisher resources

Download Example Code

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Clean Code in JavaScript
  3. About Packt
    1. Why subscribe?
  4. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  6. Section 1: What is Clean Code Anyway?
  7. Setting the Scene
    1. Why we write code
      1. Code as intent
      2. Who is the user?
      3. What is the problem? 
        1. Truly understanding the problem domain
    2. Writing code for humans
      1. Communicating intent
      2. Readability
      3. Meaningful abstractions
        1. The tower of abstraction
        2. The layers of clean code
    3. Summary
  8. The Tenets of Clean Code
    1. Reliability
      1. Correctness
      2. Stability
      3. Resilience
    2. Efficiency
      1. Time
      2. Space
      3. Efficiency's effects
    3. Maintainability
      1. Adaptability
      2. Familiarity
    4. Usability
      1. User stories
      2. Intuitive design
      3. Accessibility
    5. Summary
  9. The Enemies of Clean Code
    1. Enemy #1 – JavaScript
    2. Enemy #2 – management
      1. Pressure to ship 
      2. Bad metrics
      3. Lack of ownership
    3. Enemy #3 – Self
      1. Showing off with syntax
      2. Stubborn opinions
      3. Imposter syndrome
    4. Enemy #4 – The cargo cult
      1. Cargo culting code
      2. Cargo culting tools and libraries
    5. Summary
  10. SOLID and Other Principles
    1. The Law of Demeter
    2. SOLID
      1. Single responsibility principle
      2. Open–closed principle
      3. Liskov substitution principle
      4. Interface segregation principle
      5. Dependency inversion principle
    3. The abstraction principle
      1. Over-abstraction
      2. Under-abstraction
      3. Balanced abstraction
    4. Functional programming principles
      1. Functional purity
      2. Immutability
    5. Summary
  11. Naming Things Is Hard
    1. What's in a name?
      1. Purpose
      2. Concept
      3. Contract
    2. Naming anti-patterns
      1. Needlessly short names
      2. Needlessly exotic names
      3. Needlessly long names
    3. Consistency and hierarchy
    4. Techniques and considerations
      1. Hungarian notation
      2. Naming and abstracting functions
      3. Three bad names
    5. Summary
  12. Section 2: JavaScript and Its Bits
  13. Primitive and Built-In Types
    1. Primitive types 
      1. Immutability of primitives
      2. Primitive wrappers
      3. The falsy primitives
      4. Number
      5. String
      6. Boolean
      7. BigInt
      8. Symbol
      9. null
      10. undefined
    2. Objects
      1. Property names
      2. Property descriptors
      3. Map and WeakMap
      4. The prototype
      5. When and how to use objects
    3. Functions
      1. Syntactic context
      2. Function bindings and this
        1. Execution context
        2. super
        3. new.target
        4. arguments
      3. Function names
      4. Function declarations
      5. Function expressions
      6. Arrow functions
      7. Immediately Invoked Function Expressions
      8. Method definitions
      9. Async functions
      10. Generator functions
    4. Arrays and iterables
      1. Array-like objects
      2. Set and WeakSet
      3. Iterable protocol
    5. RegExp
      1. Regular expression 101
      2. RegExp flags
      3. Methods accepting RegExp
      4. RegExp methods and lastIndex
      5. Stickiness
    6. Summary
  14. Dynamic Typing
    1. Detection
      1. The typeof operator
      2. Type-detecting techniques
        1. Detecting Booleans
        2. Detecting numbers
        3. Detecting strings
        4. Detecting undefined
        5. Detecting null
        6. Detecting null or undefined
        7. Detecting arrays
        8. Detecting instances
        9. Detecting plain objects
    2. Conversion, coercion, and casting
      1. Converting into a Boolean
      2. Converting into a String
      3. Converting into a Number
      4. Converting into a primitive
    3. Summary
  15. Operators
    1. What is an operator?
      1. Operator arity
      2. Operator function
      3. Operator precedence and associativity 
    2. Arithmetic and numeric operators
      1. The addition operator
        1. Both operands are numbers
        2. Both operands are strings
        3. One operand is a string
        4. One operand is a non-primitive
        5. Conclusion – know your operands!
      2. The subtraction operator
      3. The division operator
      4. The multiplication operator
      5. The remainder operator
      6. The exponentiation operator
      7. The unary plus operator
      8. The unary minus operator
    3. Logical operators
      1. The logical NOT operator
      2. The logical AND operator
      3. The logical OR operator
    4. Comparative operators
      1. Abstract equality and inequality
      2. Strict equality and inequality
      3. Greater than and less than
        1. Lexicographic comparison
        2. Numeric comparison
      4. The instanceof operator
      5. The in operator
    5. Assignment operators
      1. Increment and decrement (prefix and postfix) operators
        1. Prefix increment/decrement
        2. Postfix increment/decrement
      2. Destructuring assignment
    6. Property access operators
      1. Direct  property access
      2. Computed property access
    7. Other operators and syntax
      1. The delete operator
      2. The void operator
      3. The new operator
      4. The spread syntax
      5. The comma operator
      6. Grouping
    8. Bitwise operators
    9. Summary
  16. Parts of Syntax and Scope
    1. Expressions, statements, and blocks
      1. Expressions
      2. Statements
        1. Forming statements with semicolons
      3. Blocks
    2. Scopes and declarations
      1. Variable declarations
      2. Let declarations
      3. Const declarations
      4. Function declarations
      5. Closures
    3. Summary
  17. Control Flow
    1. What is control flow?
    2. Imperative versus declarative programming
    3. The movement of control
      1. Invocation
      2. Returning
      3. Yielding
        1. Yielding to a yield
        2. Complexity of yielding
      4. Breaking
      5. Continuing
      6. Throwing
    4. Statements of control flow
      1. The if statement
      2. The for statement
        1. Conventional for
        2. for...in
        3. for...of
      3. The while statement
      4. The do...while statement
      5. The switch statement
        1. Breaking and fallthrough
        2. Returning from a switch directly
        3. Case blocks
        4. Multivariant conditions
    5. Handling cyclomatic complexity
      1. Simplifying conditional spaghetti
    6. Asynchronous control flow
      1. The Event Loop
      2. Native asynchronous APIs
        1. Callbacks
        2. Event subscribing/emitting
        3. Promises
        4. async and await
    7. Summary
  18. Section 3: Crafting Abstractions
  19. Design Patterns
    1. The perspective of a designer
    2. Architectural design patterns
      1. MVC
        1. A working example of MVC
      2. MVVM
      3. MV* and the nature of software
    3. JavaScript modules
    4. Modular design patterns
      1. Constructor patterns
        1. When to use the Constructor pattern
        2. Inheritance with the Constructor pattern
      2. The Class pattern
        1. When to use the Class pattern
        2. Static methods
        3. Public and private fields
        4. Extending classes
        5. Mixing-in classes
        6. Accessing a super-class
      3. The Prototype pattern
        1. When to use the Prototype pattern
      4. The Revealing Module pattern
      5. The Conventional Module pattern
        1. When to use the Conventional Module pattern
      6. The Singleton Class pattern
        1. When to use the Singleton Class pattern
    5. Planning and harmony
    6. Summary
  20. Real-World Challenges
    1. The DOM and single-page applications
      1. DOM binding and reconciliation
        1. DOM reconciliation
        2. React's approach
      2. Messaging and data propagation
      3. Frontend routing
    2. Dependency management
      1. Module definition – then and now
      2. npm and package.json
      3. Bundling and serving 
    3. Security
      1. Cross-Site Scripting
        1. Content Security Policy
        2. Subresource Integrity
      2. Cross-Site Request Forgery
      3. Other security vulnerabilities
    4. Summary
  21. Section 4: Testing and Tooling
  22. The Landscape of Testing
    1. What is a test?
      1. The simple assertion
      2. Many moving parts
    2. Types of testing
      1. Unit testing
      2. Integration testing
      3. E2E and functional testing
    3. Test-Driven Development
    4. Summary
  23. Writing Clean Tests
    1. Testing the right thing 
    2. Writing intuitive assertions
    3. Creating clear hierarchies
    4. Providing final clarity
    5. Creating clean directory structures
    6. Summary
  24. Tools for Cleaner Code
    1. Linters and formatters
    2. Static typing
    3. E2E testing tools
    4. Automated builds and CI
    5. Summary
  25. Section 5: Collaboration and Making Changes
  26. Documenting Your Code
    1. Aspects of clean documentation
      1. Concept
      2. Specification
      3. Instruction
      4. Usability
    2. Documentation is everywhere
    3. Writing for non-technical audiences
    4. Summary
  27. Other Peoples' Code
    1. Inheriting code
      1. Exploring and understanding
        1. Making a flowchart
        2. Finding structure and observing history
        3. Stepping through the code
        4. Asserting your assumptions
      2. Making changes
        1. Minimally invasive surgery
        2. Encoding changes as tests
    2. Dealing with third-party code
      1. Selection and understanding
      2. Encapsulating and adapting third-party code
    3. Summary
  28. Communication and Advocacy
    1. Planning and setting requirements
      1. Understanding user needs
      2. Quick prototypes and PoCs
    2. Communication strategies
      1. Listen and respond
      2. Explain from the user's perspective
      3. Have small and focused communications
      4. Ask stupid questions and have wild ideas
      5. Pair programming and 1:1s
    3. Identifying issues and driving change
      1. Raising bugs
      2. Driving systemic change
    4. Summary
  29. Case Study
    1. The problem
    2. The design
    3. The implementation
      1. The Plant Selection application
      2. Creating the REST API
      3. Creating the client-side build process
      4. Creating the component
    4. Summary 
  30. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Clean Code in JavaScript
  • Author(s): James Padolsey
  • Release date: January 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781789957648