ampproject / ampproject/amp-react-prototype
Dependency on layout size and in-viewport
- Vorherrschende Sprache
- JavaScript
- Sterne
- 36
- Forks
- 6
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
For some elements their layout size is important. For instance `amp-fit-text` picks the right font size given its content and available layout space. In AMP layout size is provided by the framework. However, in Bento, we do not want to depend on heavy framework features and instead need to enable the components themselves to react to size changes.
We can use a relatively new ResizeObserver to monitor size changes. See [useResizeObserver](https://github.com/ampproject/amp-react-prototype/blob/104861c3777d5341377092620f123b9013c0050d/src/amp-react-utils.js#L57) as an example. There are some nuances however:
- It's near-impossible to polyfill well. ResizeObserver is available in Chrome and Firefox, and will be available in Safari very soon. That still leaves IE and Edge. Partial implementation is possible using `window.onresize` event, but it's a poor substitution.
- An instance of ResizeObserver is heavy. Sharing resize observers [appears to improve performance up to 8x](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ).
Very similar reasons should guide "in-viewport" approach with IntersectionObserver.
Beitragsleitfaden
Rechercherichtung
Beginne mit dem referenzierten useResizeObserver-Beispiel in src/amp-react-utils.js ungefähr in Zeile 57 und vergleiche es dann mit den Anforderungen des Issues an ResizeObserver und IntersectionObserver. Als erledigt gilt die Aufgabe, wenn Bento-Komponenten auf Änderungen der Layout-Größe und des Viewport-Sichtbarkeitsstatus reagieren können, ohne auf umfangreiche AMP-Framework-Funktionen angewiesen zu sein; es werden keine Dateien von Zielkomponenten oder Tests genannt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 5/5
- Geschätzter Aufwand
- Über eine Woche
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 28/100