Juan David Nicholls
Open Source Contributor, Full-Stack Developer
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
"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"
WorkShop here ⚡
WAAPI and WebComponents
By Juan David Nicholls
WAAPI and WebComponents
A talk about Web Animations API, Web Components and StencilJS
