chapter nine

9 wrec library

 

This chapter covers

  • How wrec simplifies creation of web components
  • Expressions in wrec components
  • Event handling
  • Parent-child bindings
  • Sharing state between wrec components

wrec, an acronym for "Web REactive Components", is a library that greatly simplifies building web components. Automatic reactivity is its main feature, but it has many other features that make it easier to use than other web component libraries. These include simpler ways to supply data in form submissions and share state between components.

The wrec library appeals to web developers that want to follow web component best practices while writing less code to achieve that.

One difference from the other libraries we’ve discussed so far is that wrec doesn’t use JavaScript decorators. As you’ll see, there isn’t much boilerplate code for decorators to replace.

But we’re getting a bit ahead of ourselves. Let’s start at the beginning, defining what the REactive in wrec really means.

9.1 Reactivity

In the context of wrec, the word "reactivity" means the ability to automatically update the DOM when the value of a component property changes.

9.2 Project creation

9.3 Expressions

9.4 Components

9.5 Linting

9.6 wrec VS Code extension

9.7 Area calculator

9.8 Event handling

9.9 Parent-child bindings

9.10 Radio group

9.11 State

9.12 Sortable table

9.13 More features

9.14 Summary