ResizeObserver-rajapinta: Nykyaikaisen webin salaisuus vaivattomaan elementin koon seurantaan ja responsiivisiin asetteluihin

Nykyaikaisessa web-kehityksessä rakennamme sovelluksia komponenteista. Ajattelemme itsenäisinä, uudelleenkäytettävinä käyttöliittymälohkoina – kortteina, kojelautoina, vimpaimina ja sivupalkkeina. Silti vuosien ajan ensisijainen työkalumme responsiiviseen suunnitteluun, CSS-mediakyselyt, on ollut perustavanlaatuisesti irrallaan tästä komponenttipohjaisesta todellisuudesta. Mediakyselyt välittävät vain yhdestä asiasta: globaalin näkymäportin koosta. Tämä rajoitus on ajanut kehittäjät nurkkaan, mikä on johtanut monimutkaisiin laskelmiin, hauraisiin asetteluihin ja tehottomiin JavaScript-virityksiin.

Mitä jos komponentti voisi olla tietoinen omasta koostaan? Mitä jos se voisi mukauttaa asetteluaan ei siksi, että selainikkunan kokoa muutettiin, vaan koska naapurielementti puristi säiliötä, jossa se on? Tämän ongelman ResizeObserver-rajapinta ratkaisee elegantisti. Se tarjoaa suorituskykyisen, luotettavan ja natiivin selainmekanismin, jolla voidaan reagoida minkä tahansa DOM-elementin koon muutoksiin, aloittaen todellisen elementtitason responsiivisuuden aikakauden.

Tämä kattava opas tutkii ResizeObserver-rajapintaa alusta alkaen. Käsittelemme, mikä se on, miksi se on monumentaalinen parannus aiempiin menetelmiin verrattuna ja kuinka sitä käytetään käytännönläheisten, todellisen maailman esimerkkien avulla. Lopuksi sinulla on valmiudet rakentaa vankempia, modulaarisempia ja dynaamisempia asetteluja kuin koskaan ennen.

Vanha tapa: Näkymäporttiin perustuvan responsiivisuuden rajoitukset

Arvostaaksemme täysin ResizeObserverin voimaa meidän on ensin ymmärrettävä sen voittamat haasteet. Yli vuosikymmenen ajan responsiivista työkalupakkiamme ovat hallinneet kaksi lähestymistapaa: CSS-mediakyselyt ja JavaScript-pohjainen tapahtumien kuuntelu.

CSS-mediakyselyiden pakkopaita

CSS-mediakyselyt ovat responsiivisen web-suunnittelun kulmakivi. Niiden avulla voimme soveltaa erilaisia tyylejä laitteen ominaisuuksien perusteella, yleisimmin näkymäportin leveyden ja korkeuden mukaan.

Tyypillinen mediakysely näyttää tältä:

/* Jos selainikkuna on 600px leveä tai vähemmän, tee bodyn taustasta vaaleansininen */ @media screen and (max-width: 600px) { body { background-color: lightblue; } }

Tämä toimii erinomaisesti korkean tason sivuasettelun muutoksissa. Mutta harkitse uudelleenkäytettävää `UserInfo`-korttikomponenttia. Saatat haluta tämän kortin näyttävän avatarin käyttäjän nimen vieressä leveässä asettelussa, mutta pinoavan avatarin nimen päälle kapeassa asettelussa. Jos tämä kortti sijoitetaan leveään pääsisältöalueeseen, sen tulisi käyttää leveää asettelua. Jos täsmälleen sama kortti sijoitetaan kapeaan sivupalkkiin, sen tulisi automaattisesti omaksua kapea asettelu, riippumatta näkymäportin kokonaisleveydestä.

Mediakyselyillä tämä on mahdotonta. Kortilla ei ole tietoa omasta kontekstistaan. Sen tyylittelyn sanelee täysin globaali näkymäportti. Tämä pakottaa kehittäjät luomaan varianttiluokkia, kuten .user-card--narrow, ja soveltamaan niitä manuaalisesti, mikä rikkoo komponentin itsenäisyyttä.

JavaScript-viritysten suorituskykyansat

Kehittäjien luonnollinen seuraava askel tämän ongelman edessä oli kääntyä JavaScriptin puoleen. Yleisin lähestymistapa oli kuunnella `window`-olion `resize`-tapahtumaa.

window.addEventListener('resize', () => { // Jokaiselle sivun komponentille, jonka on oltava responsiivinen... // Hae sen nykyinen leveys // Tarkista, ylittääkö se kynnysarvon // Lisää luokka tai muuta tyylejä });

Tässä lähestymistavassa on useita kriittisiä puutteita:

• Suorituskyvyn painajainen: `resize`-tapahtuma voi laueta kymmeniä tai jopa satoja kertoja yhden vedä-ja-muuta-kokoa -toiminnon aikana. Jos käsittelijäfunktiosi suorittaa monimutkaisia laskelmia tai DOM-manipulaatioita useille elementeille, voit helposti aiheuttaa vakavia suorituskykyongelmia, nykimistä ja asettelun myllerrystä.
• Edelleen näkymäportista riippuvainen: Tapahtuma on sidottu `window`-olioon, ei itse elementtiin. Komponenttisi muuttuu edelleen vain, kun koko ikkuna muuttaa kokoaan, ei silloin, kun sen vanhempisäiliö muuttuu muista syistä (esim. sisaruselementin lisääminen, harmonikan laajentuminen jne.).
• Tehoton tarkistus (polling): Jotta kehittäjät saisivat kiinni koon muutoksista, jotka eivät johdu ikkunan koon muuttamisesta, he turvautuivat `setInterval`- tai `requestAnimationFrame`-silmukoihin tarkistaakseen elementin mitat säännöllisesti. Tämä on erittäin tehotonta, kuluttaa jatkuvasti suoritinsyklejä ja tyhjentää akkua mobiililaitteissa, vaikka mitään ei tapahtuisi.

Nämä menetelmät olivat kiertoteitä, eivät ratkaisuja. Verkko tarvitsi paremman tavan – tehokkaan, elementtikeskeisen rajapinnan koon muutosten tarkkailuun. Ja juuri sen ResizeObserver tarjoaa.

Esittelyssä ResizeObserver: Moderni ja suorituskykyinen ratkaisu

Mikä on ResizeObserver-rajapinta?

ResizeObserver-rajapinta on selainrajapinta, jonka avulla saat ilmoituksen, kun elementin sisältö- tai reunalaatikon (content box, border box) koko muuttuu. Se tarjoaa asynkronisen, suorituskykyisen tavan tarkkailla elementtien koon muutoksia ilman manuaalisen tarkistuksen tai `window.resize`-tapahtuman haittoja.

Ajattele sitä `IntersectionObserverina` mitoille. Sen sijaan, että se kertoisi sinulle, milloin elementti vierii näkyviin, se kertoo, milloin sen laatikon kokoa on muutettu. Tämä voi tapahtua monista syistä:

• Selainikkunan kokoa muutetaan.
• Sisältöä lisätään elementtiin tai poistetaan siitä (esim. tekstin rivittyminen uudelle riville).
• Elementin CSS-ominaisuuksia, kuten `width`, `height`, `padding` tai `font-size`, muutetaan.
• Elementin vanhemman koko muuttuu, mikä saa sen kutistumaan tai kasvamaan.

Keskeiset edut perinteisiin menetelmiin verrattuna

ResizeObserver ei ole vain pieni parannus; se on paradigman muutos komponenttitason asettelun hallinnassa.

• Erittäin suorituskykyinen: Selain on optimoinut rajapinnan. Se ei laukaise takaisinkutsua jokaisesta yksittäisestä pikselin muutoksesta. Sen sijaan se niputtaa ilmoitukset ja toimittaa ne tehokkaasti selaimen renderöintisyklin aikana (yleensä juuri ennen maalaamista), estäen `window.resize`-käsittelijöitä vaivaavan asettelun myllerryksen.
• Elementtikohtainen: Tämä on sen supervoima. Tarkkailet tiettyä elementtiä, ja takaisinkutsu laukeaa vain, kun kyseisen elementin koko muuttuu. Tämä irrottaa komponenttisi logiikan globaalista näkymäportista, mahdollistaen todellisen modulaarisuuden ja "elementtikyselyiden" (Element Queries) käsitteen.
• Yksinkertainen ja deklaratiivinen: Rajapinta on huomattavan helppokäyttöinen. Luot tarkkailijan, kerrot sille, mitkä elementit ovat tarkkailun kohteena, ja annat yhden takaisinkutsufunktion kaikkien ilmoitusten käsittelyyn.
• Tarkka ja kattava: Tarkkailija antaa yksityiskohtaista tietoa uudesta koosta, mukaan lukien sisältölaatikko, reunalaatikko ja täytteet, antaen sinulle tarkan hallinnan asettelulogiikkaasi.

Kuinka käyttää ResizeObserveria: Käytännön opas

Rajapinnan käyttäminen sisältää kolme yksinkertaista vaihetta: tarkkailijan luominen, yhden tai useamman kohde-elementin tarkkailu ja takaisinkutsulogiikan määrittäminen. Käydään se läpi.

Perussyntaksi

Rajapinnan ydin on `ResizeObserver`-konstruktori ja sen instanssimetodit.

            // 1. Valitse elementti, jota haluat tarkkailla
const myElement = document.querySelector('.my-component');

// 2. Määritä takaisinkutsufunktio, joka suoritetaan, kun koon muutos havaitaan
const observerCallback = (entries) => {
  for (let entry of entries) {
    // 'entry'-olio sisältää tietoa tarkkaillun elementin uudesta koosta
    console.log('Elementin koko on muuttunut!');
    console.log('Kohde-elementti:', entry.target);
    console.log('Uusi sisältöalue (contentRect):', entry.contentRect);
    console.log('Uusi reunalaatikon koko (borderBoxSize):', entry.borderBoxSize[0]);
  }
};

// 3. Luo uusi ResizeObserver-instanssi ja anna sille takaisinkutsufunktio
const observer = new ResizeObserver(observerCallback);

// 4. Aloita kohde-elementin tarkkailu
observer.observe(myElement);

// Lopettaaksesi tietyn elementin tarkkailun myöhemmin:
// observer.unobserve(myElement);

// Lopettaaksesi kaikkien tähän tarkkailijaan sidottujen elementtien tarkkailun:
// observer.disconnect();
            

              
                Copy
              
            
          

Takaisinkutsufunktion ja sen parametrien ymmärtäminen

Antamasi takaisinkutsufunktio on logiikkasi sydän. Se saa parametrinaan taulukon `ResizeObserverEntry`-olioita. Se on taulukko, koska tarkkailija voi toimittaa ilmoituksia useista tarkkailluista elementeistä yhtenä eränä.

Jokainen `entry`-olio sisältää arvokasta tietoa:

• entry.target: Viittaus DOM-elementtiin, jonka koko muuttui.
• entry.contentRect: `DOMRectReadOnly`-olio, joka antaa elementin sisältölaatikon mitat (leveys, korkeus, x, y, ylä, oikea, ala, vasen). Tämä on vanhempi ominaisuus, ja yleensä suositellaan käyttämään alla olevia uudempia laatikon koko-ominaisuuksia.
• entry.borderBoxSize: Taulukko, joka sisältää olion, jolla on `inlineSize`- (leveys) ja `blockSize`- (korkeus) ominaisuudet elementin reunalaatikolle. Tämä on luotettavin ja tulevaisuudenkestävin tapa saada elementin kokonaiskoko. Se on taulukko tukemaan tulevia käyttötapauksia, kuten monipalstaisia asetteluja, joissa elementti voi jakautua useisiin osiin. Toistaiseksi voit lähes aina turvallisesti käyttää ensimmäistä alkiota: `entry.borderBoxSize[0]`.
• entry.contentBoxSize: Samanlainen kuin `borderBoxSize`, mutta antaa sisältölaatikon (täytteiden sisällä olevan alueen) mitat.
• entry.devicePixelContentBoxSize: Antaa sisältölaatikon koon laitepikseleinä.

Keskeinen paras käytäntö: Suosi `borderBoxSize`- ja `contentBoxSize`-ominaisuuksia `contentRect`-ominaisuuden sijaan. Ne ovat vankempia, linjassa modernien CSS-loogisten ominaisuuksien kanssa (`inlineSize` leveydelle, `blockSize` korkeudelle) ja ovat rajapinnan kehityssuunta.

Tosielämän käyttötapauksia ja esimerkkejä

Teoria on hienoa, mutta ResizeObserver todella loistaa, kun näet sen toiminnassa. Tutkitaan joitain yleisiä skenaarioita, joissa se tarjoaa puhtaan ja tehokkaan ratkaisun.

1. Dynaamiset komponenttiasettelut ("Kortti"-esimerkki)

Ratkaistaan aiemmin käsittelemämme `UserInfo`-kortin ongelma. Haluamme kortin vaihtavan vaakasuorasta pystysuoraan asetteluun, kun se kapenee liikaa.

HTML:

            <div class="card-container">
  <div class="user-card">
    <img src="avatar.jpg" alt="User Avatar" class="user-card-avatar">
    <div class="user-card-info">
      <h3>Jane Doe</h3>
      <p>Senior Frontend Developer</p>
    </div>
  </div>
</div>
            

              
                Copy
              
            
          

CSS:

            .user-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Pystysuoran asettelun tila */
.user-card.is-narrow {
  flex-direction: column;
  text-align: center;
}

.user-card-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 1rem;
}

.user-card.is-narrow .user-card-avatar {
  margin-right: 0;
  margin-bottom: 1rem;
}
            

              
                Copy
              
            
          

JavaScript ja ResizeObserver:

            const card = document.querySelector('.user-card');

const cardObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { inlineSize } = entry.borderBoxSize[0];
    // Jos kortin leveys on alle 350px, lisää 'is-narrow'-luokka
    if (inlineSize < 350) {
      entry.target.classList.add('is-narrow');
    } else {
      entry.target.classList.remove('is-narrow');
    }
  }
});

cardObserver.observe(card);
            

              
                Copy
              
            
          

Nyt ei ole väliä, mihin tämä kortti sijoitetaan. Jos laitat sen leveään säiliöön, se on vaakasuorassa. Jos vedät säiliön pienemmäksi, `ResizeObserver` havaitsee muutoksen ja lisää automaattisesti `.is-narrow`-luokan, joka muuttaa sisällön asettelua. Tämä on todellista komponentin kapselointia.

2. Responsiiviset datavisualisoinnit ja kaaviot

Datavisualisointikirjastot, kuten D3.js, Chart.js tai ECharts, joutuvat usein piirtämään itsensä uudelleen, kun niiden säiliöelementin koko muuttuu. Tämä on täydellinen käyttötapaus `ResizeObserverille`.

            const chartContainer = document.getElementById('chart-container');

// Oletetaan, että 'myChart' on kaaviokirjaston instanssi,
// jolla on 'redraw(width, height)' -metodi.
const myChart = createMyChart(chartContainer);

const chartObserver = new ResizeObserver(entries => {
  const entry = entries[0];
  const { inlineSize, blockSize } = entry.contentBoxSize[0];

  // Kutsujen viivästyttäminen (debouncing) on usein hyvä idea tässä,
  // jotta vältetään liian tiheä uudelleenpiirtäminen,
  // vaikka ResizeObserver jo niputtaakin kutsuja.
  requestAnimationFrame(() => {
    myChart.redraw(inlineSize, blockSize);
  });
});

chartObserver.observe(chartContainer);
            

              
                Copy
              
            
          

Tämä koodi varmistaa, että riippumatta siitä, miten `chart-container`-elementin kokoa muutetaan – kojelaudan jaetun ruudun, kokoontaitettavan sivupalkin tai ikkunan koon muuttamisen kautta – kaavio piirretään aina uudelleen sopimaan täydellisesti sen rajoihin ilman suorituskykyä heikentäviä `window.onresize`-kuuntelijoita.

3. Mukautuva typografia

Joskus haluat otsikon täyttävän tietyn määrän vaakasuoraa tilaa, ja sen fonttikoon mukautuvan säiliön leveyteen. Vaikka CSS:ssä on nyt tähän `clamp()` ja säiliökysely-yksiköitä, `ResizeObserver` antaa sinulle hienojakoisen hallinnan JavaScriptin avulla.

            const adaptiveHeading = document.querySelector('.adaptive-heading');

const headingObserver = new ResizeObserver(entries => {
  const entry = entries[0];
  const containerWidth = entry.borderBoxSize[0].inlineSize;

  // Yksinkertainen kaava fonttikoon laskemiseksi.
  // Voit tehdä tästä niin monimutkaisen kuin tarvitset.
  const newFontSize = Math.max(16, containerWidth / 10);

  entry.target.style.fontSize = `${newFontSize}px`;
});

headingObserver.observe(adaptiveHeading);
            

              
                Copy
              
            
          

4. Tekstin katkaisun ja "Lue lisää" -linkkien hallinta

Yleinen käyttöliittymämalli on näyttää tekstinpätkä ja "Lue lisää" -painike vain, jos koko teksti ylittää säiliönsä. Tämä riippuu sekä säiliön koosta että sisällön pituudesta.

            const textBox = document.querySelector('.truncatable-text');
const textContent = textBox.querySelector('p');

const truncationObserver = new ResizeObserver(entries => {
  const entry = entries[0];
  const target = entry.target;

  // Tarkista, onko vierityskorkeus suurempi kuin asiakaskorkeus
  const isOverflowing = target.scrollHeight > target.clientHeight;

  target.classList.toggle('is-overflowing', isOverflowing);
});

truncationObserver.observe(textContent);
            

              
                Copy
              
            
          

CSS voi sitten käyttää `.is-overflowing`-luokkaa näyttääkseen liukuvärjätyn häivytyksen ja "Lue lisää" -painikkeen. Tarkkailija varmistaa, että tämä logiikka suoritetaan automaattisesti aina, kun säiliön koko muuttuu, näyttäen tai piilottaen painikkeen oikein.

Suorituskykyyn liittyviä huomioita ja parhaita käytäntöjä

Vaikka `ResizeObserver` on suunniteltu erittäin suorituskykyiseksi, on olemassa muutamia parhaita käytäntöjä ja mahdollisia sudenkuoppia, joista on syytä olla tietoinen.

Äärettömien silmukoiden välttäminen

Yleisin virhe on muokata tarkkaillun elementin ominaisuutta takaisinkutsun sisällä, mikä puolestaan aiheuttaa uuden koon muutoksen. Esimerkiksi, jos lisäät elementtiin täytettä (padding), sen koko muuttuu, mikä laukaisee takaisinkutsun uudelleen, joka lisää lisää täytettä, ja niin edelleen.

// VAARA: Ääretön silmukka! const badObserver = new ResizeObserver(entries => { const el = entries[0].target; // Täytteen muuttaminen muuttaa elementin kokoa, mikä laukaisee tarkkailijan uudelleen. el.style.paddingLeft = parseInt(el.style.paddingLeft || 0) + 1 + 'px'; });

Selaimet ovat älykkäitä ja havaitsevat tämän. Muutaman nopean takaisinkutsun jälkeen samassa kehyksessä ne pysähtyvät ja heittävät virheen: `ResizeObserver loop limit exceeded`.

Kuinka välttää se:

• Tarkista ennen kuin muutat: Ennen muutoksen tekemistä, tarkista, onko se todella tarpeen. Esimerkiksi korttiesimerkissä me vain lisäämme/poistamme luokan, emme jatkuvasti muuta leveysominaisuutta.
• Muokkaa lapsielementtiä: Jos mahdollista, aseta tarkkailija vanhempielementille ja tee koon muutokset lapsielementtiin. Tämä katkaisee silmukan, koska tarkkailtua elementtiä itseään ei muuteta.
• Käytä `requestAnimationFrame`:** Joissakin monimutkaisissa tapauksissa DOM-muokkauksen kääriminen `requestAnimationFrame`-kutsuun voi siirtää muutoksen seuraavaan kehykseen, mikä katkaisee silmukan.

Milloin käyttää `unobserve()`- ja `disconnect()`-metodeja

Aivan kuten `addEventListenerin` kanssa, on tärkeää siivota tarkkailijat muistivuotojen estämiseksi, erityisesti yksisivuisissa sovelluksissa (SPA), jotka on rakennettu Reactin, Vuen tai Angularin kaltaisilla kehyksillä.

Kun komponentti poistetaan DOMista tai tuhotaan, sinun tulisi kutsua `observer.unobserve(element)` tai `observer.disconnect()`, jos tarkkailijaa ei enää tarvita lainkaan. Reactissa tämä tehdään tyypillisesti `useEffect`-koukun siivousfunktiossa. Angularissa käyttäisit `ngOnDestroy`-elinkaarikoukkua.

Selainyhteensopivuus

Tänä päivänä `ResizeObserver` on tuettu kaikissa suurimmissa nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge. Tuki on erinomainen maailmanlaajuiselle yleisölle. Projekteissa, jotka vaativat tukea hyvin vanhoille selaimille, kuten Internet Explorer 11, voidaan käyttää polyfill-kirjastoa, mutta useimmissa uusissa projekteissa voit käyttää rajapintaa natiivisti luottavaisin mielin.

ResizeObserver vs. tulevaisuus: CSS-säiliökyselyt (Container Queries)

On mahdotonta keskustella `ResizeObserveristä` mainitsematta sen deklaratiivista vastinetta: CSS-säiliökyselyitä (Container Queries). Säiliökyselyt (`@container`) antavat sinun kirjoittaa CSS-sääntöjä, jotka soveltuvat elementtiin sen vanhempisäiliön koon perusteella, ei näkymäportin.

Korttiesimerkissämme CSS voisi näyttää tältä säiliökyselyillä:

            .card-container {
  container-type: inline-size;
}

/* Itse kortti ei ole säiliö, vaan sen vanhempi on */
.user-card {
  display: flex;
  /* ... muut tyylit ... */
}

@container (max-width: 349px) {
  .user-card {
    flex-direction: column;
  }
}
            

              
                Copy
              
            
          

Tämä saavuttaa saman visuaalisen tuloksen kuin `ResizeObserver`-esimerkkimme, mutta kokonaan CSS:llä. Joten, tekeekö tämä `ResizeObserveristä` vanhentuneen? Ehdottomasti ei.

Ajattele niitä toisiaan täydentävinä työkaluina eri töihin:

• Käytä CSS-säiliökyselyitä, kun sinun tarvitsee muuttaa elementin tyyliä sen säiliön koon perusteella. Tämän tulisi olla oletusvalintasi puhtaasti esityksellisiin muutoksiin.
• Käytä ResizeObserveria, kun sinun tarvitsee suorittaa JavaScript-logiikkaa vastauksena koon muutokseen. Tämä on välttämätöntä tehtäville, joita CSS ei voi käsitellä, kuten:
  • Kaaviokirjaston uudelleenpiirtämisen käynnistäminen.
  • Monimutkaisten DOM-manipulaatioiden suorittaminen.
  • Elementtien sijaintien laskeminen mukautetulle asettelumoottorille.
  • Vuorovaikutus muiden rajapintojen kanssa elementin koon perusteella.

Ne ratkaisevat saman ydinongelman eri näkökulmista. `ResizeObserver` on imperatiivinen, ohjelmallinen rajapinta, kun taas säiliökyselyt ovat deklaratiivinen, CSS-natiivi ratkaisu.

Yhteenveto: Omaksu elementtitietoinen suunnittelu

`ResizeObserver`-rajapinta on perustavanlaatuinen rakennuspalikka modernille, komponenttivetoiselle webille. Se vapauttaa meidät näkymäportin rajoituksista ja antaa meille mahdollisuuden rakentaa aidosti modulaarisia, itsetietoisia komponentteja, jotka voivat sopeutua mihin tahansa ympäristöön, johon ne sijoitetaan. Tarjoamalla suorituskykyisen ja luotettavan tavan tarkkailla elementtien mittoja se poistaa tarpeen hauraille ja tehottomille JavaScript-virityksille, jotka ovat vaivanneet frontend-kehitystä vuosia.

Olitpa rakentamassa monimutkaista datakojelautaa, joustavaa suunnittelujärjestelmää tai vain yhtä uudelleenkäytettävää vimpainta, `ResizeObserver` antaa sinulle tarkan hallinnan, jota tarvitset dynaamisten asettelujen hallintaan luottavaisesti ja tehokkaasti. Se on tehokas työkalu, joka yhdistettynä nykyaikaisiin asettelutekniikoihin ja tuleviin CSS-säiliökyselyihin mahdollistaa kestävämmän, ylläpidettävämmän ja hienostuneemman lähestymistavan responsiiviseen suunnitteluun. On aika lopettaa ajattelemasta vain sivua ja alkaa rakentaa komponentteja, jotka ymmärtävät oman tilansa.