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?

Reactive Data-Binding

Virtual DOM

JSX

Lazy Loading

Async Rendering

Life cycle hooks

It's just a Compiler

(standards-based)

ES6 Modules

Server Side Rendering (SEO)

Prerendering (Dynamic import)

Polyfills

Plugins

PWA

Service Worker (Workbox)

Decorators

Custom elements

Templates

Developer Experience

Docs generation

CSS variables

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"