ampproject / ampproject/amp-react-prototype

Dependency on layout size and in-viewport

Aperta
#54 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
TBD
Lingua principale
JavaScript
Stelle
36
Fork
6
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con l’esempio di useResizeObserver indicato in src/amp-react-utils.js, intorno alla riga 57, quindi confrontalo con i requisiti dell’issue relativi a ResizeObserver e IntersectionObserver. Il lavoro è completato quando i componenti Bento possono reagire ai cambiamenti delle dimensioni del layout e della visibilità nel viewport senza dipendere da funzionalità pesanti del framework AMP; non vengono indicati file di componenti target né test.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
28/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.