توسعهٔ کامپوننت‌های وب با تایپ‌اسکریپت: توسعهٔ وب بومی با استفاده از کتابخانه‌های سبک

Jörg Krause has been working with software and software technology since the early 1980s, beginning with a ZX 81 and taking his first steps as a programmer in BASIC and assembly language. He studied information technology at Humboldt University, Berlin, but left early, in the 1990s, to start his own company. He has worked with Internet technology and software development since the early days when CompuServe and FidoNet dominated. He has worked with Microsoft technologies and software since Windows 95. In 1998, he worked on one of the first commercial e-commerce solutions and wrote his first book. Due to its wide success, he started working as a freelance consultant and author in order to share his experience and knowledge with others. He has written several books for Apress, Hanser, Addison-Wesley, and other major publishers along with several self-published books for a total of over 60 titles. He also publishes articles in magazines and speaks at major conferences in Germany. Currently, Jörg works as an independent consultant, software developer, and author in Berlin, Germany.In his occasional spare time, Jörg enjoys reading thrillers and science fiction novels and going on a round of golf.Follow him on Twitter at @joergisgeek for updates and insights.xvii About the Technical Reviewer Yogendra Sharma is a developer with experience in architecture, design, and development of scalable and distributed applications with a core interest in microservices and Spring. Currently he is working as an IoT and Cloud Architect at Intelizign Engineering Services Pvt Pune. He also has hands-on experience in technologies such as AWS, IoT, Python, J2SE, J2EE, NodeJS, VueJs, Angular, MongoDB, and Docker. He constantly explores technical novelties, and he is open-minded and eager to learn about new technologies and frameworks. He has reviewed several books and video courses published by Apress and Packt. xix Acknowledgments Whenever you see a professional doing astonishing things or being a bit above the average, remember that it's simply hard work. Nothing else. Talent helps, coincidences might happen, luck is possible. But for 99% of people, none of these things work. Hard work is the key. I'd like to thank my family first for understanding that projects like this, along with the daily work on code, require a lot more time than just 9-to-5. I really appreciate silent nights at the computer.Also, again, the team at Apress was very helpful during this project, with the right mixture of time and pressure to get it done on schedule. Thank you all for the opportunity to write about a subject I really care about a lot. Sometimes it's hard, but there is always a way to see things positively. Even the biggest catastrophes may have an upside. Looking straight into the darkness might make it hard to see this. But there is one, for sure. This book and the library code used as the foundation were written during the pandemic in 2020. The upside was the leisure time not spent with friends, at holidays, or other activities. Not good, of course, but some new things learned, some pieces tried, some more lines written...you get the idea, I hope.xxi Table of Contents About the Author About the Technical Reviewer Acknowledgments Introduction Chapter 1: Introduction The Global Picture Components Component Architecture Parts of a Component The Rise of Thin Libraries Single-Page Apps The HTML 5 API The Template Language Smart Decorators TypeScript WebPack Compatibility Other Libraries Summary Chapter 2: Making Components Basics A First Example Observing Unset Elements Custom Elements AP Observing Attributes Attribute Data Discussing the Options The MutationObserver Type Proxy Rendering Order Delaying Access Introducing a Life Cycle Customized Built-in Elements Advantage of TypeScript Using Generics Final Thoughts on Generics Summary Chapter 3: Shadow DOM Preparation Built-in Shadow DOM Shadow Tree Terms Using Shadow Trees Limitations Modes Encapsulation Shadow DOM without Components Closing the Shadow Root The Shadow Root API Properties Methods Summary Chapter 4: Events Events in ECMAScript Event Handlers Assigning a Handler Choosing the Right Events HTML 5 Standard Events Event Bubbling The Event Object Stopping Other Handlers Other Types of Propagation Event Capturing Removing Handlers Multiple Handlers Stopping Default Behavior Follow-Up Events Passive Events Document Handlers Events in Web Components Events and Slots Event Bubbling Composed Events Custom Events Synthetic Events The dispatchEvent API Customize Events Smart Events Summary Chapter 5: Templates HTML 5 Templates How It Works Activating a Template Clone or Import Templates and Web Components Shadow DOM Using createShadowRoot Shadow DOM and innerHTML Nested Templates Template Styles Applying Global Styles Summary Chapter 6: Slots Slots Explained Slot and Templates Shadow DOM Slots and Components Slot Behavior Slot Positions Multiple Slots Default Slots Slot Events Adding an Event Handler Updating Slots Slot Change Events The Slot API Summary Chapter 7: Components and Styles Style Behavior Accessing the Host Cascading Selecting a Host Element Accessing the Host Context Aware Styling Slotted Content CSS Hooks Ignoring Styles Parts The Part Attribute and Pseudo Selector Forwarding Parts The Part API The Future of Parts Summary Chapter 8: Making Single-Page Apps The Architecture of SPAs The Router Monitoring the URL Configuring the Router Defining the Target Router Implementation The History API The History Stack The history Object History Change Events Final Thoughts on the History API Stateful Apps Flux The Flux Parts Tell Tales Implementing Flux Overview The Demo Component The Store Merging Stores The Observer Summary Chapter 9: Professional Components Smart Selectors The Smart Selector Decorator How Does It Work? Data Binding Why Data Binding? Implementing Data Binding Discussion Forms and Validation Sketching a Solution The Required Decorator The View Model The Example Component UI-less Components Directives Discussion Template Engines Mustache Handlebars jQuery Templating Lit Element (lit-html) JSX/TSX Making Your Own Using JSX Activating JSX Implementing JSX Extending the Syntax Summary Appendix A: Introducing @nyaf Elevator Pitch Parts Project Configuration with TypeScript The Entry File TypeScript Configuration WebPack Configuration Project Configuration with Babel Setting Up the Environment Project Dependencies Configuring Babel Configuring WebPack Writing Components Improvements Bundle Size The @nyaf CLI Components Registration Support The First Component Template Features n-if, n-else n-hide, n-show n-expand Quick Expanders n-repeat The n-repeat Component The n-repeat Attribute JSX/TSX Introduction JSX Scope Select Elements Smart Components Repeater - n-repeat Transparent Outlet n-outlet Render Finisher n-finish The Life Cycle State and Properties State Properties Accessing Properties Properties and Models Directives Making a Directive Registration Activation Working with Host Elements Events n-on-event Syntax Enhancements Short Form Additional Parameters Async Custom Events Router Registering Routes Using Routes Named Routes Additional Data Special Values Navigating to Route Route Events Shadow DOM Example with Shadow DOM Single Tab Tabs Container Usage of the Tabs Shadow DOM and Styles Services Forms Module How It Works View Models in Components View Models Why Use View Models? Creating a View Model Validation Decorators UI Decorators (Property Level) Mapping the Properties Special Decorators Providing the View Model Data Binding Template Language Enhancements Terms and Parts View Model IModel Interface Binding Handlers Smart Binders Creating Forms Standard Binding Handlers Smart Binders Multi-Attribute Binding Even More Smartness Validation View Model Decorators State Binding to Validators Handler Behavior Additional Information Custom Binders Implementing a Custom Binder How It Works A Simple Binder Installation of Forms Module Dependencies The Flux Store How It Works Actions Reducer Return Value Considerations Store and Dispatcher Using the Store Type Handling in Typescript Example Global and Local Stores Merge Strategy Disposing Example General Usage Effects Mapping The Effects Decorator Using the Effects Decorator The Selector The Trigger The Action Definition The Parameter Automatic Updates The Updates Decorator Using the Updates Decorator The Selector The Store The Target Installation Dependencies Summary Index Create professional and progressive web apps with the native HTML API on the latest technology stack. This book describes the basics of web components and how to create them using plain JavaScript as well as how to make professional applications based on web components using TypeScript. Developing Web Components with TypeScript looks at APIs using examples, techniques, and tricks. You will start with a brief introduction to web components, including slots and templates, handling custom events, and styling components with or without shadow DOM. Then, it introduces TypeScript as part of the tool set. It shows the internal construction of a professional thin library. It also helps you learn how to deal with web components in real-life projects; this includes techniques such as creating a single-page app without framework code. All code samples used here are supported by all modern browsers for you to follow along. Library code and examples are available on GitHub. What You Will Learn Create isolated web components using shadow DOM, slots, and templates Understand the advantage of an enhanced toolset, especially TypeScript Pick up styles and customizations Master professional web apps using native APIs Understand the life cycle of a component Who This Book Is For Professional developers who want to move from desktop to web and away from fat frameworks to achieve their goal.