Web Components
Free!
With Membership
$9.99
Suggested price

Web Components

The future of modern Web Apps

About the Book

This book describes web components and related APIs for HTML 5 developers. Instead of using any huge framework, such powerful native technique is the future of web development. Additionally a nice and small framework called @nyaf is being featured to further simplify the first steps. Each chapter explains the basic techniques step by step and the advantage of adding some custom code.

The second part is a case study about the making of the included Web Component library. It shows how such a library works, what are the gotchas and traps and how to overcome them. These chapters require a good knowledge of JavaScript and TypeScript and address professional developers.

The third part is the full documentation of the library mentioned in the former parts.

The book is written in a simple and easy to read style. With a little knowledge about HTML and JavaScript it's possible to get started.

The examples are made using TypeScript. Despite the simple style a professional approach is the underlying idea of this book. It will make you a pro once fully read and understood.

  • Share this book

  • Categories

    • ES6
    • Web Development
    • HTML
  • Installments completed

    2 / 2

  • Feedback

    Email the Author(s)

About the Author

Joerg Krause
Joerg Krause

I like to introduce myself as an experienced expert in the field of Web Technologies, especially for JavaScript/TypeScript, NodeJS, Azure Development, SQL Server, and related subjects.

I'm a developer, consultant, trainer, and software architect. I work as a freelance consultant for enterprises and run a few amazing projects on my own, such as a very smart Web Component framework and helpers for cloud-native architectures.

Table of Contents

  •  
    • Who Should Read this Book?
    • Conventions used in the Book
    • Preparations
    • About the Author
  • 1 Introduction
    • 1.1 The Global Picture
    • 1.2 The Raise of Thin Libraries
    • 1.3 Compatibility
    • 1.4 Other Libraries
  • 2 Making Components
    • 2.1 Basics
    • 2.2 Observing Attributes
    • 2.3 Rendering Order
    • 2.4 Customized Built-in Elements
    • 2.5 Advantage of TypeScript
  • 3 Shadow DOM
    • 3.1 Preparation
    • 3.2 Built-in Shadow DOM
    • 3.3 Shadow Tree
    • 3.4 Encapsulation
    • 3.5 The Shadow Root API
    • 3.6 Summary
  • 4 Events
    • 4.1 Events in ECMAScript
    • 4.2 Events in Web Components
    • 4.3 Custom Events
    • 4.4 Smart Events
    • 4.5 Summary
  • 5 Templates
    • 5.1 HTML 5 Templates
    • 5.2 Activating a Template
    • 5.3 Templates and Web Components
    • 5.4 Nested Templates
    • 5.5 Template Styles
    • 5.6 Summary
  • 6 Slots
    • 6.1 Slots Explained
    • 6.2 Slots and Components
    • 6.3 Slot Behavior
    • 6.4 Slot Fallback Content
    • 6.5 Default Slots
    • 6.6 Slot Events
    • 6.7 Updating Slots
    • 6.8 The Slot API
    • 6.9 Summary
  • 7 Components and Styles
    • 7.1 Style Behavior
    • 7.2 Styling Slotted Content
    • 7.3 CSS Hooks
    • 7.4 Parts
    • 7.5 Summary
  • 8 Making Single Page Apps
    • 8.1 Architecture SPAs
    • 8.2 The Router
    • 8.3 Router Implementation
    • 8.4 The History API
    • 8.5 Stateful Apps
    • 8.6 Summary
  • 9 Professional Components
    • 9.1 Smart Selectors
    • 9.2 Data Binding
    • 9.3 UI less Components
    • 9.4 Template Engines
    • 9.5 Make your Own using JSX
    • 9.6 Summary
  • Introducing @nyaf
    • Elevator Pitch
    • Parts
    • Project Configuration with TypeScript
    • Project Configuration with Babel
    • Components
    • The First Component
    • Template Features
    • n-repeat
    • JSX / TSX
    • Examples
    • Select Elements
    • Smart Components
    • The Life Cycle
    • State and Properties
    • Directives
    • Events
    • Router
    • Shadow DOM
    • Services
    • Forms Module
    • View Models
    • Data Binding
    • Creating Forms
    • Smart Binders
    • Validation
    • Additional Information
    • Custom Binders
    • Installation of Forms Module
    • The Flux Store
    • Type Handling in Typescript
    • Global and Local Store
    • Disposing
    • Effects Mapping
    • Automatic Updates
    • Installation
  • Notes

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earnedover $14 millionwriting, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub