CRAFTING CLEAN CODE WITH JAVASCRIPT AND REACT : a practical guide to sustainable front-end... development

Understand the guiding principles of "clean code" and how it applies to modern front-end development, accessibility (a11y), semantics, performance, and the Green Web. Highlighting key topics ranging from the foundations of JavaScript and HTML to popular frameworks like React, this book provides best practices to ensure code and applications are easier, more efficient and cost effective to run. Using a web-based application as an example, you'll begin by cleaning and improving its code base by dividing the JavaScript into smaller, reusable and composable functions without side effects. Then, you'll improve the HTML code base by applying "Disability Driven Design" patterns, focusing on semantics before moving on to improving the architecture with a functional style (immutable, modular and composable). Because the web today needs to be green with reduced loading time and energy consumption, you'll apply some tips and tricks to improve code performance and see how to best monitor it in a continuous and scalable way. What You'll Learn See how the JavaScript engine works and memory management. Explore in greater detail key focus areas of accessibility and green computing Make applications easier and more cost-effective to run Look closely at clean and sustainable development using JavaScript and React Who This Book Is For Programmers, developers, engineers and product managers who are looking at cost-efficient ways to make their applications run more smoothly and efficiently. Table of Contents About the Author About the Technical Reviewer Introduction: The JavaScript Bubbling Movement Chapter 1: Getting Started: Presenting the Context The Team The Web Application Nonfunctional and Technical Requirements Nonfunctional Requirements Technical Requirements Conclusion Chapter 2: Functional Programming: Blueprint for Pure Code JavaScript Against Others Elm: A Deep Dive ReasonML: An Overview Emscripten: An In-Depth Look TypeScript: An In-Depth Look The Decision: JavaScript The Rise of Functional Programming JavaScript Paradigms Foundations of Functional Thinking Code Driven by Composition Side Effects Pure Functions: The Bedrock of Predictable Code Defining Purity Why Pure Functions Matter Pure vs. Impure: A JavaScript Perspective Pure Functions in React Real-World Applications Mathematical Notation Key Takeaways Immutable and Scoped Variables and Parameters What Makes Immutability So Significant? Primitive and Reference Data Types Deep vs. Shallow Copy: Understanding Object Duplication in JavaScript Declarative Approach to Reduce Code Amount Declarative vs. Imperative Generalizing with Higher-Order Functions Abstraction, Modularity, and Function Composition Handling Code Complexity: Split, Compose, and Reuse The Power of Composition Composition in JavaScript Benefits of Composition Higher-Order Functions: The Glue of Composition Currying: Simplifying Functions with Partial Application Benefits of Currying Beyond Unit Conversion Key Takeaways Functional Programming Superpowers Memoization Why Memoization? Requirements for Memoization Memoization in JavaScript Recursion Memoization and Recursion Lazy Evaluation: Optimizing Computation Through Demand-Driven Execution Functors: Composable Transformations in a Safe Context Monads: Elevating Functional Programming Key Takeaways Thinking Functionally with JavaScript Scoped Variables: let and const Key Takeaways Arrow Functions Key Takeaways High-Order Functions: The Basic Unit of Abstraction Creating Our Own Control Abstractions map to Transform Array Data reduce to Group Array Results filter Out Undesirable Elements Chaining: Performing Sequential Operations on Arrays every/some Time and Space Complexity of JavaScript Array Methods Key Takeaways Metaprogramming in JavaScript Proxies Reflection Use Cases for Proxies and Reflection Validation Logging and Profiling Immutability Dynamic Object Composition Security Cautions with Metaprogramming Debugging Performance Security Creating Shallow Copy with Spread Optional Chaining with “OR”: Safe Access with Default Values Maybe: “If (Not Null) Then” As an Expression The Problem with Null Checks The Maybe Solution Benefits Either: "If/Else" As an Expression The Problem with Traditional Error Handling The Either Solution Example: Error Handling in a Division Function Example: Handling HTTP Response Benefits Pattern Matching: switch As an Expression Key Takeaways Thinking Functionally About UI Using ReactJS React Declarative Approach Lazy Evaluation Memoization Lazy Loading Higher-Order Component (HOC) Effects Functional Reactive Programming (FRP) in React Key Takeaways Thinking Functionally About Async Side Effects Asynchrony Jargon Promisification Linear Async Flows Generators Generator: Early Completion Generator: Early Abort An Attempt to Make Asynchronous Generators Asynchronous Generators Key Takeaways Conclusion Chapter 3: SAGE(S)-Driven Design: An Inclusive and Eco-friendly Website SAGE(S)-Driven Design Semantic Reviving the Power of HTML Backbone of an HTML Document Order and Priority of Web Resource Loads Body’s Arrangement HTML Elements Categories Break the Page into Sections Root Layout The Dilemma: Article vs. Section Headings Hierarchy Paragraph Text-Level Semantics How Can a List of Data Be Represented in a Semantic Way? How to Semantically Organize a Form? Semantic Media Elements Layout Validation Key Takeaways Accessible What Does It Mean to Be “Accessible”? Accessibility Guidelines Screen Readers and HTML Temporary Disabilities Accessibility Best Practices WAI-ARIA Accessibility Testing Tools Key Takeaways Green Sustainable UX Design Sustainable UX Design Practices Easy (KISS): Keep It Simple, Stupid KISS UI/UX Design KISS Software Development Key Takeaways Secure Frontend Security Threats URL-Based Attacks DOM-Based Attacks Form-Based Attacks Input Attacks Form Action Hijacking JSON-Based Attacks React Escape Hatches Dependencies Vulnerabilities Defense Plans Prevent URL-Based XSS Attacks Prevent DOM-Based XSS Attacks innerText Instead of innerHTML Prevent Form-Based XSS Attacks Prevent Dependencies Vulnerabilities Key Takeaways Conclusion Chapter 4: HOFA: The Path Toward Clean Architecture Why Does Software Design and Architecture Matter? Foundation and Plan Team Collaboration Consistency and Automation Adaptive Architecture Bugs and Regressions Quality and Future-Proofing “Good” Architecture’s Definition Learnability Performance (Time and Resource Utilization) Configurability Flexibility Testability Maintainability Measuring Architecture Characteristics Mathematical Model for Software Architecture (Sets and Graphs) Sets for Describing Modules Graphs for Visualizing Relationships Sets for Measuring Cohesion Graphs for Measuring Coupling Benefits of This Approach Practical Measurement of Software Architecture's Effectiveness Metrics Efferent Coupling (CE) Afferent Coupling (CA) Instability Index Code Health Meter Tool Frontend-Oriented Architecture Styles Atomic Design Unidirectional Architecture Extending Capabilities with Ports and Adapters (Hexagonal Architecture) Defining Subdomains (Feature-Sliced Design) Reinforcing Boundaries (Onion Architecture) Final Architecture: HOFA Architecture Merge Patterns and Maximize Profits Benefits Trade-Offs Key Takeaways Conclusion Chapter 5: MOME: Befriend User Execution Capabilities Why Does Performance Matter? What Factors Can Impact Both Loading and Interaction Performance? Browser Internal Working Focus on the Rendering Engine Interaction Between Rendering Engine and JavaScript The Order of Processing Scripts and Stylesheets JavaScript Engines Working Pipeline Standard Working Pipeline for JavaScript Engine V8 (Chrome) Pipeline SpiderMonkey (Firefox) Pipeline Executing an Asynchronous Task (Case of V8) Memory Management (Case of V8) Lessons Learned “MOME” Performance Methodology Measure Performance Metrics A Metric for Each Phase First Contentful Paint Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) Interaction to Next Paint (INP) Core Web Vitals Time to Interactive (TTI) Total Blocking Time (TBT) Performance Measurement Tools Code Coverage (Find Unused JavaScript and CSS) Performance Monitor (Analyze Runtime Performance) Network Monitor (Inspect Network Activity) Memory Inspection (Find Memory Issues) Lighthouse (All in One) WebPageTest (Beyond the Local) HTTP Archive (Keep an Eye on the World) Optimize Lazy-First Small Is Better Modern Is More Efficient Adaptive Serving Other Tips Monitor Performance Budgets (Catch Issues Before They Ship) Project Health Tool Educate Key Takeaways Conclusion Chapter 6: CRISP: Clean, Reliable, Integrated Software Process Why CRISP? Pre-development Define a Common Development Protocol Naming Convention Import Order Self-documenting Code vs. Comments Define a Shared Checklist React Checklist W3C Compliance Checklist A11Y Checklist Performances Checklist Security Checklist Browser Compatibility First Step Toward Automated Best Practices Code Generator ESLint for Code-Level Analysis Complexity Analysis Adherence to JavaScript Recommendations Modern JavaScript Features Integrating the Airbnb JavaScript Style Guide Code Formatting Code Health Meter Cognitive Complexity: A Subjective Lens on Code Readability Limitations of Cognitive Complexity Why I Don’t Rely on Cognitive Complexity Bundle Analysis Dependency Management During Development The World of Testing Testing Trophy: A Balanced Approach to Modern Software Testing Unit Testing Reusable Components Integration Testing with Cypress End-to-End Testing with Cypress Visual Testing Why Visual Testing Matters? Visual Testing with Puppeteer and Pixelmatch Key Takeaways: Building a Robust Testing Strategy for React Essential DevTools for React Development: Mastering Our Toolkit React Developer Tools: Our Window into the React World Browser Developer Tools: Our Web Development Arsenal Proactive Use of DevTools Documentation: Empowering Collaboration and Understanding Types of Documentation: Meeting Diverse Needs Best Practices for Documentation Excellence Reaping the Rewards: Why Documentation Matters Overcoming Challenges Post-development Collaborative Coding: Powering React Development with Teamwork Key Collaborative Practices Pull Requests (PRs) and Release Flow: Bridging Collaboration and Delivery Collaborative Coding in the React Ecosystem Continuous Integration (CI): Our Safety Net for Code Quality Automated Code Verification Automated Bundle Check and Security Scanning GitLab CI/CD Example The Power of Continuous Integration and Automated Verification Project Health Tool (phTool) Monitoring and Logging: Keeping Your React Apps Healthy Application Monitoring: The Pulse of Your App Error Logging: Your Application’s Black Box Best Practices for Monitoring and Logging Key Takeaways Conclusion Book Summary