Crafting Clean Code with JavaScript and React: A Practical Guide to Sustainable Front-End Development

Table of Contents....5 About the Author....11 About the Technical Reviewer....12 Introduction: The JavaScript Bubbling Movement....13 Chapter 1: Getting Started: Presenting the Context....16 The Team....17 The Web Application....18 Nonfunctional and Technical Requirements....20 Nonfunctional Requirements....20 Technical Requirements....21 Conclusion....22 Chapter 2: Functional Programming: Blueprint for Pure Code....23 JavaScript Against Others....24 Elm: A Deep Dive....27 ReasonML: An Overview....32 Emscripten: An In-Depth Look....34 TypeScript: An In-Depth Look....36 The Decision: JavaScript....38 The Rise of Functional Programming....39 JavaScript Paradigms....39 Foundations of Functional Thinking....40 Code Driven by Composition....40 Side Effects....42 Pure Functions: The Bedrock of Predictable Code....49 Defining Purity....50 Why Pure Functions Matter....50 Pure vs. Impure: A JavaScript Perspective....51 Pure Functions in React....51 Real-World Applications....52 Mathematical Notation....52 Key Takeaways....54 Immutable and Scoped Variables and Parameters....54 What Makes Immutability So Significant?....54 Primitive and Reference Data Types....55 Deep vs. Shallow Copy: Understanding Object Duplication in JavaScript....58 Declarative Approach to Reduce Code Amount....61 Declarative vs. Imperative....61 Generalizing with Higher-Order Functions....62 Abstraction, Modularity, and Function Composition....63 Handling Code Complexity: Split, Compose, and Reuse....64 The Power of Composition....65 Composition in JavaScript....65 Benefits of Composition....66 Higher-Order Functions: The Glue of Composition....66 Currying: Simplifying Functions with Partial Application....67 Benefits of Currying....68 Beyond Unit Conversion....68 Key Takeaways....69 Functional Programming Superpowers....69 Memoization....69 Why Memoization?....70 Requirements for Memoization....70 Memoization in JavaScript....70 Recursion....72 Memoization and Recursion....81 Lazy Evaluation: Optimizing Computation Through Demand-Driven Execution....84 Functors: Composable Transformations in a Safe Context....85 Monads: Elevating Functional Programming....87 Key Takeaways....89 Thinking Functionally with JavaScript....90 Scoped Variables: let and const....90 Key Takeaways....93 Arrow Functions....94 Key Takeaways....98 High-Order Functions: The Basic Unit of Abstraction....98 Creating Our Own Control Abstractions....102 map to Transform Array Data....103 reduce to Group Array Results....109 filter Out Undesirable Elements....110 Chaining: Performing Sequential Operations on Arrays....111 every/some....112 Time and Space Complexity of JavaScript Array Methods....114 Key Takeaways....116 Metaprogramming in JavaScript....117 Proxies....117 Reflection....118 Use Cases for Proxies and Reflection....119 Validation....119 Logging and Profiling....120 Immutability....121 Dynamic Object Composition....122 Security....123 Cautions with Metaprogramming....124 Debugging....124 Performance....124 Security....124 Creating Shallow Copy with Spread....124 Optional Chaining with “OR”: Safe Access with Default Values....132 Maybe: “If (Not Null) Then” As an Expression....137 The Problem with Null Checks....137 The Maybe Solution....138 Benefits....139 Either: "If/Else" As an Expression....139 The Problem with Traditional Error Handling....139 The Either Solution....140 Example: Error Handling in a Division Function....141 Example: Handling HTTP Response....142 Benefits....144 Pattern Matching: switch As an Expression....145 Key Takeaways....146 Thinking Functionally About UI Using ReactJS....147 React Declarative Approach....147 Lazy Evaluation....151 Memoization....152 Lazy Loading....155 Higher-Order Component (HOC)....157 Effects....160 Functional Reactive Programming (FRP) in React....162 Key Takeaways....164 Thinking Functionally About Async Side Effects....165 Asynchrony Jargon....166 Promisification....168 Linear Async Flows....174 Generators....174 Generator: Early Completion....178 Generator: Early Abort....181 An Attempt to Make Asynchronous Generators....183 Asynchronous Generators....192 Key Takeaways....199 Conclusion....200 Chapter 3: SAGE(S)-Driven Design: An Inclusive and Eco-friendly Website....201 SAGE(S)-Driven Design....202 Semantic....203 Reviving the Power of HTML....203 Backbone of an HTML Document....206 Order and Priority of Web Resource Loads....209 Body’s Arrangement....210 HTML Elements Categories....210 Break the Page into Sections....211 Root Layout....212 The Dilemma: Article vs. Section....213 Headings Hierarchy....214 Paragraph....215 Text-Level Semantics....215 How Can a List of Data Be Represented in a Semantic Way?....217 How to Semantically Organize a Form?....217 Semantic Media Elements....219 Layout Validation....220 Key Takeaways....220 Accessible....221 What Does It Mean to Be “Accessible”?....221 Accessibility Guidelines....222 Screen Readers and HTML....223 Temporary Disabilities....224 Accessibility Best Practices....224 WAI-ARIA....225 Accessibility Testing Tools....227 Key Takeaways....228 Green....229 Sustainable UX Design....229 Sustainable UX Design Practices....230 Easy (KISS): Keep It Simple, Stupid....231 KISS UI/UX Design....231 KISS Software Development....232 Key Takeaways....232 Secure....233 Frontend Security Threats....233 URL-Based Attacks....234 DOM-Based Attacks....235 Form-Based Attacks....237 Input Attacks....237 Form Action Hijacking....238 JSON-Based Attacks....239 React Escape Hatches....240 Dependencies Vulnerabilities....242 Defense Plans....242 Prevent URL-Based XSS Attacks....242 Prevent DOM-Based XSS Attacks....243 innerText Instead of innerHTML....243 Prevent Form-Based XSS Attacks....244 Prevent Dependencies Vulnerabilities....244 Key Takeaways....245 Conclusion....246 Chapter 4: HOFA: The Path Toward Clean Architecture....247 Why Does Software Design and Architecture Matter?....248 Foundation and Plan....248 Team Collaboration....248 Consistency and Automation....248 Adaptive Architecture....249 Bugs and Regressions....249 Quality and Future-Proofing....249 “Good” Architecture’s Definition....249 Learnability....251 Performance (Time and Resource Utilization)....252 Configurability....252 Flexibility....252 Testability....253 Maintainability....253 Measuring Architecture Characteristics....253 Mathematical Model for Software Architecture (Sets and Graphs)....253 Sets for Describing Modules....254 Graphs for Visualizing Relationships....254 Sets for Measuring Cohesion....254 Graphs for Measuring Coupling....255 Benefits of This Approach....256 Practical Measurement of Software Architecture's Effectiveness....256 Metrics....256 Efferent Coupling (CE)....258 Afferent Coupling (CA)....258 Instability Index....259 Code Health Meter Tool....260 Frontend-Oriented Architecture Styles....261 Atomic Design....261 Unidirectional Architecture....267 Extending Capabilities with Ports and Adapters (Hexagonal Architecture)....275 Defining Subdomains (Feature-Sliced Design)....280 Reinforcing Boundaries (Onion Architecture)....282 Final Architecture: HOFA Architecture....289 Merge Patterns and Maximize Profits....290 Benefits....295 Trade-Offs....297 Key Takeaways....298 Conclusion....301 Chapter 5: MOME: Befriend User Execution Capabilities....302 Why Does Performance Matter?....302 What Factors Can Impact Both Loading and Interaction Performance?....303 Browser Internal Working....303 Focus on the Rendering Engine....307 Interaction Between Rendering Engine and JavaScript....310 The Order of Processing Scripts and Stylesheets....312 JavaScript Engines Working Pipeline....316 Standard Working Pipeline for JavaScript Engine....316 V8 (Chrome) Pipeline....318 SpiderMonkey (Firefox) Pipeline....321 Executing an Asynchronous Task (Case of V8)....323 Memory Management (Case of V8)....326 Lessons Learned....327 “MOME” Performance Methodology....330 Measure....330 Performance Metrics....330 A Metric for Each Phase....330 First Contentful Paint....332 Largest Contentful Paint (LCP)....333 First Input Delay (FID)....334 Cumulative Layout Shift (CLS)....335 Interaction to Next Paint (INP)....336 Core Web Vitals....338 Time to Interactive (TTI)....339 Total Blocking Time (TBT)....341 Performance Measurement Tools....343 Code Coverage (Find Unused JavaScript and CSS)....343 Performance Monitor (Analyze Runtime Performance)....345 Network Monitor (Inspect Network Activity)....347 Memory Inspection (Find Memory Issues)....349 Lighthouse (All in One)....351 WebPageTest (Beyond the Local)....353 HTTP Archive (Keep an Eye on the World)....355 Optimize....356 Lazy-First....356 Small Is Better....360 Modern Is More Efficient....362 Adaptive Serving....363 Other Tips....365 Monitor....366 Performance Budgets (Catch Issues Before They Ship)....366 Project Health Tool....369 Educate....371 Key Takeaways....371 Conclusion....373 Chapter 6: CRISP: Clean, Reliable, Integrated Software Process....374 Why CRISP?....375 Pre-development....376 Define a Common Development Protocol....376 Naming Convention....376 Import Order....381 Self-documenting Code vs. Comments....381 Define a Shared Checklist....384 React Checklist....384 W3C Compliance Checklist....386 A11Y Checklist....388 Performances Checklist....392 Security Checklist....393 Browser Compatibility....396 First Step Toward Automated Best Practices....397 Code Generator....397 ESLint for Code-Level Analysis....398 Complexity Analysis....398 Adherence to JavaScript Recommendations....399 Modern JavaScript Features....399 Integrating the Airbnb JavaScript Style Guide....400 Code Formatting....400 Code Health Meter....401 Cognitive Complexity: A Subjective Lens on Code Readability....402 Limitations of Cognitive Complexity....402 Why I Don’t Rely on Cognitive Complexity....403 Bundle Analysis....403 Dependency Management....404 During Development....406 The World of Testing....406 Testing Trophy: A Balanced Approach to Modern Software Testing....406 Unit Testing Reusable Components....408 Integration Testing with Cypress....412 End-to-End Testing with Cypress....413 Visual Testing....414 Why Visual Testing Matters?....414 Visual Testing with Puppeteer and Pixelmatch....415 Key Takeaways: Building a Robust Testing Strategy for React....417 Essential DevTools for React Development: Mastering Our Toolkit....419 React Developer Tools: Our Window into the React World....419 Browser Developer Tools: Our Web Development Arsenal....420 Proactive Use of DevTools....421 Documentation: Empowering Collaboration and Understanding....422 Types of Documentation: Meeting Diverse Needs....422 Best Practices for Documentation Excellence....423 Reaping the Rewards: Why Documentation Matters....424 Overcoming Challenges....424 Post-development....425 Collaborative Coding: Powering React Development with Teamwork....425 Key Collaborative Practices....425 Pull Requests (PRs) and Release Flow: Bridging Collaboration and Delivery....426 Collaborative Coding in the React Ecosystem....427 Continuous Integration (CI): Our Safety Net for Code Quality....428 Automated Code Verification....429 Automated Bundle Check and Security Scanning....430 GitLab CI/CD Example....432 The Power of Continuous Integration and Automated Verification....433 Project Health Tool (phTool)....433 Monitoring and Logging: Keeping Your React Apps Healthy....436 Application Monitoring: The Pulse of Your App....436 Error Logging: Your Application’s Black Box....437 Best Practices for Monitoring and Logging....438 Key Takeaways....439 Conclusion....440 Book Summary....441