HTML-lisäosa: Miksi selaimen perusominaisuuksien kopiointi oli järkevää

(10. joulukuuta 2020)

The HTML-lisäys satukirjaan tekee mitä modernit selaimet ovat tehneet vuosia. Silti se on yllättävän hyödyllinen ja lähestyy 100 000 latausta. Whitespacen johtava kehittäjä Fredrik Johansson selittää miksi.

HTML-lisäosan animoitu esikatselu toiminnassa

Idea sai alkunsa asiakasprojektista, jonka teimme ruotsalaiselle verkkoalustatoimittajalle Episerverille. Tiimimme rakensi komponenttikirjastoa, jonka heidän sisäinen tiiminsä .Net devs ottaisi käyttöön sivustolla episerver.com. He kirjoittavat komponentit Episerverille omalla mallikielellään ja halusivat helpomman pääsyn HTML-koodiin – ilman painetta Reactin kanssa.

Lisäosan kirjoittaminen Storybookille osoittautui melko yksinkertaiseksi, ja on olemassa lyhyt opas siitä, miten se tehdään. Alle päivässä HTML-lisäosan ensimmäinen versio oli valmis. Huhun mukaan lisäsin sen Whitespacen Githubiin ilman mahdollisuutta, että myös muut saattavat pitää sitä hyödyllisenä. Ja toistaiseksi vuonna 2020 meillä on ollut lähes 100 000 latausta.

Mitä HTML Addon tekee?

Se lisää paneelin, joka näyttää tarkastelemasi komponentin HTML-koodin. Storybookissa. Se on niin yksinkertaista.

Teknisesti lisäosa käyttää selaimen sovellusliittymää (erityisesti sisäistäHTML) hakemaan tuloksena syntyvän HTML-koodin eri kehyksiin kirjoitetuista komponenteista. Tämä tapahtuu automaattisesti, kun DOM päivitetään, joko vaihdettaessa tarinoita tai muuttamalla nykyisen lähdön säätimien tai nuppien avulla. Sen jälkeen merkintä käsitellään Prettierin kautta, jotta se olisi luettavissa.

Kuvakaappaus HTML-lisäosapaneelista

Miksi käytämme lisäosaa?

En aluksi nähnyt hyötyä sellaisen lisäosan luomisesta, joka näyttää vain HTML: n. Vuosien ajan yksittäisten komponenttien merkinnät ovat olleet näkyvissä nykyaikaisten selainten dev-työkalujen kautta, joten miksi pyörää keksitään uudestaan? Ollakseni rehellinen, lisäosan rakentaminen oli pikemminkin tilisi execin huumoria.

Aika on kuitenkin (kerran) osoittanut olevani väärässä.

Lisäosa yksinkertaistaa kolmea yleistä tehtävää Whitespacessa:

  1. Kanavanvaihdot. Työskentelemme usein teknologiayrityksissä, joissa on talon sisäisiä kehitysohjelmia. Suora pääsy HTML-koodiin ilman projektin määritystä säästää aikaa. Lisäksi se tekee toimituksestamme täysin riippumattoman asiakkaidemme mallikielen valinnasta.
  2. Laatutarkastukset. Kun teemme esteettömyystestejä, esteettömyysasiantuntijamme saavat suoran pääsyn HTML-merkintöihin.
  3. Vianetsintä. Välitön pääsy HTML-koodiin tekee virheenetsinnästä paljon helpompaa. Ei tarvitse avata selaimen kehitystyökaluja, mikä poistaa pienen kitkan. Ja jos koodaat elantoon, pienempi kitka on ehdottomasti hyvä asia.

Se johtuu siitä, että useampi Whitespacen (ja muualla) käyttöliittymäkehittäjä tietää HTML: n kuin React. Ja jopa innokkaalle React-kehittäjälle, kuten minä, HTML on usein suoraviivaisempi. HTML-lisäosa tislaa koodin ytimeen ja helpottaa työskentelyä monille ihmisille.

Kuinka voin asentaa sen?

Lisää HTML-lisäys satukirjaasi npm :

npm i --save-dev @whitespace/storybook-addon-html

Rekisteröi lisäosa hakemistoon .storybook / main.js :

module.exports = {
// ...
addons: [
"@whitespace/storybook-addon-html",
// ...
],
};

Lisää tietoa on GitHubin lueminutissa .

Mitä suunnitelma menee eteenpäin?

Olen yllättynyt ja tyytyväinen addonin positiiviseen vastaanottoon. Saan säännöllistä palautetta Githubin kautta ja vietän muutaman tunnin kuukaudessa virheiden korjaamiseen. Olemme nähneet myös muiden ihmisten kommentteja, jotka ovat olleet suureksi avuksi sen pitämisessä ajan tasalla Storybook-ytimen uusien versioiden kanssa.

Jos haluat lisätä ominaisuuksia, älä epäröi tehdä vetoa pyydä – tai löi minut Githubissa tai Whitespacen Twitterin kautta .

Osallistu

Tutustu Addon-luettelo , niin saat lisää tapoja mukauttaa satukirjaasi. Hanki uusimmat lisäosat ja Storybook-uutiset kirjautumalla Storybook-postituslistalle. Tutustu satukirjaan GitHubissa ja liity ristiriita -keskusteluun.

Alun perin julkaistu osoitteessa https : //whitespace.se 10. joulukuuta 2020.