WAAPI and Web Components

The New Age of

Who am I?

Hi, I'm J.D Nicholls! 👋

- Open Source Contributor 👨‍💻

- Developer who loves UX 💫

- Chocolate lover 🍫

- Game developer (Hobby) 🎮

- Creator of Proyecto26 🧚

Web Animations API

1. Easing functions 📈

2. Keyframes - animations

3. Animatable properties (color, size, width, height, scale, opacity, rotation, etc)

Movement

Triggering

1. No more adding/removing classes

2. Using an API (Imperative or a Framework solution)

Be relaxed 😌

What's the key with tech?

Be agnostic 🤔

Performance, accessibility, cross-platform capabilities, UX, standards...

Do we need to migrate to another framework?

Choosing a Framework

It Depends... maybe You don't need it
 

Web Components with StencilJS

1. Introduction

2. Design Systems

3. Stencil cheatsheet

4. Resources

"Write once, use Everywhere"

What's StencilJS?

It's just a Compiler

(standards-based)

Support your current stack

And you can re-use these components from any other project... also, existing solutions!

Examples

Tap

Draw

Experiments:

1. Movement: https://codepen.io/jdnichollsc/pen/OJVWyQm

2. Warning collision: https://codepen.io/jdnichollsc/pen/wvagEYQ

Animatable Components

"Animate once, use Everywhere"

WorkShop here ⚡