Komponentit ovat meille kaikille tuttuja: Angular-ekosysteemin tehokkain rakennuspalikka. Komponentit ovat paikka, jossa Dom renderöidään, palvelut injektoidaan, näkymät renderöidään uudelleen muutosten tunnistuksella. Komponentit voivat ottaa arvoja syötteinä ja käynnistää tapahtumia tuotoksina. Mutta ongelmana on, että tämä kaunis palikka toimii toistaiseksi vain Angular-ekosysteemin sisällä. Toivoisin, että voisimme auttaa ihmiskuntaa käyttämällä angular-komponentteja myös angular-ekosysteemin ulkopuolella.
Kyllä! Angular 7:stä alkaen Angular tuo ominaisuuden ”Angular Element”. Nyt angular-komponentti voidaan viedä itsenäisenä web-komponenttina. Voimme käyttää sitä aivan kuten tyypillistä HTML-tagia, kuten div tai span, millä tahansa HTML-sivulla, CMS:ssä tai jopa React- tai Vue.js-projektin sisällä.
Miten se toimii:
Web-komponentti on web-standardi, jolla voidaan määritellä uusi mukautettu HTML-elementti selaimeen. Selaimet ylläpitävät rekisteriä nimeltä customElementRegistry . Käyttämällä metodia CustomElementRegistry.define() voimme rekisteröidä ”dom-merkkijonon” ja luokan, joka määrittelee sen käyttäytymisen.
Angularin @angular/elements-paketti paljastaa metodin createCustomElement, joka muuntaa angular-komponentin ja sen riippuvuudet web-komponenttina yhteensopivana luokkana.
Web-standardia tukevat tällä hetkellä kaikki Chrome-, Firefox-, Safari- ja Opera-selaimet. Voimme tehdä siitä toimivan myös muissa selaimissa käyttämällä polyfillejä.
Käyttökohteet:
On ainakin 3 käyttökohtaa, joissa voimme hyödyntää vietäviä täysin toimivia angular-komponentteja web-komponentteina:
- Micro front end
- Legacy code migration
- Plug & play web components for third-party services
Micro front end:
Micro-service:
Micro-palvelun tavoin, on olemassa toinenkin samankaltainen konsepti, jota kutsutaan nimellä micro-frontend. Mikro-frontend-arkkitehtuurissa pieni full-stack-tiimi on vastuussa API:iden lisäksi myös niitä vastaavien front-end-komponenttien toimittamisesta. Esimerkiksi ”tuotetiimi” luo tuote-API:t ja kaikki tuotteisiin liittyvät näkymät, joita käytetään eri kategoriasivuilla, tuotetietosivulla ja ostoskorin & kassasivulla. Tällaisessa tapauksessa kaikki tiimit toimittavat erilaisia web-komponentteja ja yksi front end -tiimi vain liimaa nämä komponentit yhteen eri sivuilla.
Migraatio:
Projekteissa, jotka on kirjoitettu Angular 1.x:ssä, Migraatio Angulariin on aina ollut haaste. Ei ole olemassa helppoa taikaloitsun kaltaista ng-päivitystä. Sama pätee tapaukseen, jossa joku haluaa siirtää projektinsa Angulariin Reactista tai Vue:sta. Verkkokomponentit sopivat tähän parhaiten. He voivat asteittain muuntaa olemassa olevat komponenttinsa/valvojansa Angularin web-komponenteiksi ja korvata ne olemassa olevasta järjestelmästä. Kun kaikki komponentit/ohjaimet on muunnettu, he voivat vain korvata vanhan järjestelmän uusimmalla angularilla.
Kolmannen osapuolen palvelut:
Palveluntarjoajat voivat tarjota plug & play web-komponentteja, jotka voidaan liimata asiakkaan verkkosivustoon ilman, että tarvitaan mitään lisäsuunnittelua.
Näyttää siis siltä, että se on lupaavaa, jos voimme oikeasti toimittaa angular-komponentin web-komponenttina. Joten likaamme kätemme varsinaisella koodauksella.
Esimerkkiprojekti:
Tässä on esimerkkikoodi, jolla kirjoitamme my-todo-list web-komponentin. Tiedoksesi voit tarkistaa koko koodin täältä Githubista.
Vaihe 1: Kirjoita komponentti ja palvelu
- TodoList-komponentti, joka näyttää listan todoista.
- TodoService, joka noutaa todot JSON API:sta.
- TodoList-komponentti ottaa syötteenä ”name”.
- Todo-lista-komponentti laukaisee onTodoComplete-tapahtuman, kun jokin todo merkitään tehdyksi.
Vaihe 2: Tweak app.modules viedä todo-list-komponentti
- Koska projektia tullaan käyttämään vain angular-moduulien viemiseksi web-komponenttina, emme tarvitse bootstrappingia app-komponentin kautta.
- Meidän täytyy ilmoittaa vietävä todo-list-komponenttimme entry-komponentteina.
- Asenna @angular/elements-paketti.
- NgDoBootstrap-koukun sisällä käytämme createCustomElement-metodia kääntääksemme TodoList-komponenttimme tavallisena web-komponenttina.
- Todo-list-komponentilla on riippuvuus TodoService-palvelusta. Koska sitä tullaan käyttämään angular-ekosysteemin ulkopuolella, meidän täytyy siirtää Dependency Injector manuaalisesti, jotta se voi ladata riippuvuudet.
Vaihe 3: Niputtaminen
- Nyt jos ajamme buildin – tiedostot generoituvat ”dist” kansioon. Koska haluamme käyttää tätä toisessa ekosysteemissä parempi yhdistää tiedostot yhdeksi tulostiedostoksi. Lisää siis nämä komennot package.json-skriptiosioon:-
"concat-es5": "concat -o output/output-es5.js ./dist/example-ng-element/runtime-es5.js ./dist/example-ng-element/polyfills-es5.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es5.js","concat-es2015": "concat -o output/output-es2015.js ./dist/example-ng-element/runtime-es2015.js ./dist/example-ng-element/polyfills-es2015.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es2015.js","concat": "npm run concat-es5 && npm run concat-es2015","build": "ng build --prod --output-hashing=none && npm run concat",
- Nyt jos ajamme komennon npm run build kaksi erillistä tiedostoa output-es5.js ja output-es2015.js luodaan output-kansion sisään.
Vaihe 4: Käyttö web-komponenttina
- Nyt kaikki on valmista. Voimme käyttää näitä tulostiedostoja itsenäisenä web-komponenttina näin:-
- Jos ajamme tämän HTML-sivun, näemme, että todo-luettelo noutuu ja näkyy.
- Päästimme nimen syötteenä, näemme nimen web-komponentin sisällä – mikä tarkoittaa, että komponentin syöttö, muutoksen havaitseminen toimii!
- Kun tarkistamme/poistamme jonkun todon, tapahtuma käynnistyy ja todo-tiedot kirjautuvat konsoliin. Joten myös ulostulotapahtuma toimii!
Siten voimme käyttää angular-komponenttia missä tahansa muussa projektissa. Voit kokeilla itse kloonata koodin Githubista.
Ref:
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
- https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
- https://angular.io/guide/elements