Developing web components with TypeScript native web development using thin libraries

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 W...

Full description

Bibliographic Details
Main Author: Krause, Jörg
Format: eBook
Language:English
Published: [Berkeley, CA] Apress 2021
Subjects:
Online Access:
Collection: O'Reilly - Collection details see MPG.ReNa
LEADER 05708nmm a2200445 u 4500
001 EB001996528
003 EBX01000000000000001159429
005 00000000000000.0
007 cr|||||||||||||||||||||
008 210823 ||| eng
020 |a 9781484268407 
050 4 |a QA76.625 
100 1 |a Krause, Jörg 
245 0 0 |a Developing web components with TypeScript  |b native web development using thin libraries  |c Jörg Krause 
260 |a [Berkeley, CA]  |b Apress  |c 2021 
300 |a 280 pages 
505 0 |a Intro -- 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 
505 0 |a 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 
505 0 |a 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 
505 0 |a 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 
505 0 |a 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 
653 |a Applications Web 
653 |a TypeScript (Computer program language) / http://id.loc.gov/authorities/subjects/sh2013001822 
653 |a Web applications / fast 
653 |a Programmation Internet 
653 |a Internet programming / http://id.loc.gov/authorities/subjects/sh96009904 
653 |a Web applications / http://id.loc.gov/authorities/subjects/sh2012001728 
653 |a Internet programming / fast 
653 |a TypeScript (Langage de programmation) 
653 |a TypeScript (Computer program language) / fast 
041 0 7 |a eng  |2 ISO 639-2 
989 |b OREILLY  |a O'Reilly 
028 5 0 |a 10.1007/978-1-4842-6840-7 
776 |z 1484268407 
776 |z 9781484268407 
776 |z 9781484268391 
776 |z 1484268393 
856 4 0 |u https://learning.oreilly.com/library/view/~/9781484268407/?ar  |x Verlag  |3 Volltext 
082 0 |a 005.2/762 
520 |a 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. You will: 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