Graffiti: The Coveted Universal Web Component Format
summary
Graffiti claims a universal, framework‑agnostic web component format built with HTMLBars templating and ES6/7++ class/decorator syntax, shipping a constructor workaround, reflects-to-attribute bindings, scoped CSS that prevents style bleed, and native DOM custom events that bubble. It uses Glimmer/HTMLBars rendering optimizations and zone.js style async dirty-checking, integrates with Ember and recent React canaries and targets Polymer interop, is open source and alpha, and works but still struggles on heavy realtime update workloads.
AI-written summary · about
chapters (42)
- 0:00Intro
- 0:32Component
- 1:35Frameworks
- 2:45War on View Layers
- 3:22Who am I
- 4:05The W3C
- 6:08Whats missing
- 6:52no interpolation
- 7:11no data
- 7:29no helpers
- 7:42Template tags
- 8:20Basic sugar
- 8:34jQueryesque
- 8:56Polymer
- 9:08declarative data bindings
- 9:18polymer point 5
- 9:55computed properties
- 10:17observers
- 11:33alpha
- 12:33Shadow DOM
- 13:31Polymer DOM
- 14:38Implementation Details
- 15:06Virtual DOM
- 15:41The big gripe
- 16:35React
- 18:11Glimmer
- 18:43HTML Bars
- 19:15Why Graffiti
- 23:24Feedback
- 24:04Code snippet
- 25:12Template overview
- 27:22Custom increment event
- 27:47Shadow DOM discussion
- 29:55How to use Graffiti
- 31:13Example
- 31:51Why did it do that
- 32:39The power of Glimmer
- 33:21ZoneJas
- 35:09Open Source
- 36:09Ember Core Team
- 37:11QA
- 37:32Is it integrated
related talks
51mA Glimmer of Hope: Creating Modern Web Components with Glimmer- 51mA Glimmer of Hope: Creating Modern Web Components with Glimmer
36mWeb components - A whirlwind tour thru the future of the web
51mBuilding web applications with Web Components
40mThe Web Components interoperability challenge
23mGIFs vs Web Components
39mWeb components - A whirlwind tour
46mWhat ever happened with Web Components?