توسعهٔ فرانت‌اند بدون فریم‌ورک: آیا شما وابستگی‌هایتان را کنترل می‌کنید یا آن‌ها شما را کنترل می‌کنند؟

Explore an alternative method of front-end application development without using frameworks or third-party libraries. This book provides you with the required skills and freedom to consider a “no framework” approach when choosing a technology for creating a new project. You’ll work through the most important issues in a clear and sensible way, using practical methods and tools to gain an understanding of non-functional requirements. This book answers questions on important topics such as state management, making a routing system, creating a REST client using fetch, and reveals the trade-offs and risks associated with choosing the wrong framework or tool for your project, as well as providing sustainable, functional alternatives. __Frameworkless Front-End Development__ breaks down the concept of technical debt and the ways in which a framework can impact the lifespan of a project. Along with gaining a comprehensive and clear guide on coding effectively from scratch without frameworks, you will also learn some principles of technical decision-making. **What You'll Learn** * Review how DOM manipulation works * Manage the state of a front-end application with different patterns * Safely migrate existing applications to a new framework or to frameworkless code * Use decision-making tools such as a Framework Compass Chart and an Architectural Clash * See how the choice of frameworks can affect the ‘health’ and lifespan of a codebase **Who This Book Is For** JavaScript developers; technical managers responsible for helping teams choose technology stacks for new projects; consultants intending to refactor existing JavaScript front-end codebases Table of Contents......Page 5 About the Author......Page 10 About the Technical Reviewer......Page 11 Acknowledgments......Page 12 Frameworkless Movement......Page 13 Chapter 1: Let’s Talk About Frameworks......Page 14 What Is a Framework?......Page 15 Comparing Frameworks to Libraries......Page 16 Dependency Injection......Page 19 Observables......Page 20 Let’s Talk About React......Page 22 AngularJS......Page 27 React......Page 29 Technical Debt......Page 31 The Cost of Frameworks......Page 32 Technical Investment......Page 33 Summary......Page 34 The Document Object Model......Page 35 Monitoring Rendering Performance......Page 37 Chrome Developer Tools......Page 38 stats.js......Page 39 Custom Performance Widget......Page 40 TodoMVC......Page 42 Pure Functions Rendering......Page 43 Let’s Review Our Code......Page 49 Component Functions......Page 52 The Virtual DOM......Page 58 A Simple Virtual DOM Implementation......Page 60 Summary......Page 64 The YAGNI Principle......Page 65 The DOM Events API......Page 66 Attach Handlers with Properties......Page 67 Attach Handlers with addEventListener......Page 68 The Event Object......Page 70 The DOM Event Lifecycle......Page 72 Using Custom Events......Page 76 Adding Events to TodoMVC......Page 78 Let’s Review Our Rendering Engine......Page 80 The Template Element......Page 81 A Basic Event Handling Architecture......Page 85 Event Delegation......Page 91 Summary......Page 93 The APIs......Page 95 Can I Use It?......Page 96 Custom Elements......Page 97 Managing Attributes......Page 98 attributeChangedCallback......Page 101 Virtual DOM Integration......Page 103 Custom Events......Page 105 Using Web Components for TodoMVC......Page 112 Code Style......Page 120 Community......Page 121 Disappearing Frameworks......Page 122 Summary......Page 123 A Bit of History: The Birth of AJAX......Page 124 A todo-list REST Server......Page 125 Representational State Transfer......Page 127 Code Examples......Page 128 The Basic Structure......Page 129 XMLHttpRequest......Page 134 Fetch......Page 140 Axios......Page 143 Let’s Review Our Architecture......Page 146 How to Choose the Right HTTP API......Page 147 Security......Page 148 Summary......Page 149 Single-Page Applications......Page 150 The First Example......Page 153 Navigating Programmatically......Page 158 Route Parameters......Page 160 History API......Page 169 Using Links......Page 173 Navigo......Page 175 How to Choose the Right Router......Page 177 Summary......Page 178 Chapter 7: State Management......Page 179 Let’s Review the TodoMVC Application......Page 180 Model-View-Controller......Page 183 Observable Model......Page 191 Reactive Programming......Page 198 A Reactive Model......Page 199 Native Proxies......Page 204 Event Bus......Page 208 A Frameworkless Implementation......Page 211 Redux......Page 221 Comparing State Management Strategies......Page 223 Reactive Programming......Page 224 Event Bus......Page 225 Summary......Page 227 Chapter 8: The Right Tool for the Right Job......Page 228 JavaScript Fatigue......Page 229 The “Right” Framework......Page 231 Fear of Obsolescence......Page 232 Following the Hype......Page 234 The Usual Path......Page 235 Rage-Driven Decisions......Page 236 The First Principle......Page 237 The Second Principle......Page 238 The Third Principle......Page 239 The Fourth Principle......Page 240 Matteo Vaccari’s Tool......Page 241 Trade-off Sliders......Page 243 Framework Compass Chart......Page 245 Other Tools......Page 249 Summary......Page 251 Index......Page 252 Explore an alternative method of front-end application development without using frameworks or third-party libraries. This book provides you with the required skills and freedom to consider a "no framework" approach when choosing a technology for creating a new project. You'll work through the most important issues in a clear and sensible way, using practical methods and tools to gain an understanding of non-functional requirements. This book answers questions on important topics such as state management, making a routing system, creating a REST client using fetch, and reveals the trade-offs and risks associated with choosing the wrong framework or tool for your project, as well as providing sustainable, functional alternatives. Frameworkless Front-End Development breaks down the concept of technical debt and the ways in which a framework can impact the lifespan of a project. Along with gaining a comprehensive and clear guide on coding effectively from scratch without frameworks, you will also learn some principles of technical decision-making. WHAT YOU'LL LEARN: Review how DOM manipulation works Manage the state of a front-end application with different patterns Safely migrate existing applications to a new framework or to frameworkless code Use decision-making tools such as a Framework Compass Chart and an Architectural Clash See how the choice of frameworks can affect the 'health' and lifespan of a codebase WHO IS THIS BOOK FOR: JavaScript developers; technical managers responsible for helping teams choose technology stacks for new projects; consultants intending to refactor existing JavaScript front-end codebases Explore an alternative method of front-end application development without using frameworks or third-party libraries. This book provides you with the required skills and freedom to consider a "no framework" approach when choosing a technology for creating a new project. You'll work through the most important issues in a clear and sensible way, using practical methods and tools to gain an understanding of non-functional requirements. This book answers questions on important topics such as state management, making a routing system, creating a REST client using fetch, and reveals the trade-offs and risks associated with choosing the wrong framework or tool for your project, as well as providing sustainable, functional alternatives. "Frameworkless front-ent development" breaks down the concept of technical debt and the ways in which a framework can impact the lifespan of a project. Along with gaining a comprehensive and clear guide on coding effectively from scratch without frameworks, you will also learn some principle of technical decision-making