Muut sovelluskehykset, kirjastot ja lisäosat

Reactia on mahdollista käyttää missä tahansa verkkosovelluksessa (Facebook Inc., 2020h) ja verkkosovelluksissa, jotka käyttävät jo valmiiksi muita kilpailevia sovellus-kehyksiä. Vastaavasti muita sovelluskehyksiä hyödyntävät sovellukset on mahdollista

upottaa React-sovellukseen. React on kuitenkin epätietoinen Reactin ulkopuolella teh-dyistä DOM-muutoksista, koska React tekee DOM-päivitykset oman sisäisen React DOM:in kautta. Jos Reactin käsittelemiä DOM-solmuja (engl. node) muokataan Reac-tin ulkopuolella, ei Reactilla ole mahdollista palautua virhetilasta. Tämän takia kehit-täjän tulee olla hyvin tietoinen siitä, millaisia toimenpiteitä jokainen Reactin kanssa käytetty ulkoinen koodikirjasto tekee. Reactin tarjoaman ReactDOM.render()-meto-din joustavuuden ansiosta Reactia on mahdollista hyödyntää verkkosovelluksen itse-näisissä osissa useita kertoa ja itsenäiset osat voivat olla esimerkiksi yhden painikkeen tai koko sovelluksen kokoisia. React Nativen ja Reactin yhteiskäyttö mahdollistaa mo-biilisovellusten kehittämisen.

Vaikka React suosittelee kokonaisia sovelluskehyksiä (esitelty alakohdassa 5.5.1) muutamien yleisimpien työkaluketjujen (engl. toolchain) käyttämiseen, on Reactin yh-teydessä mahdollista käyttää myös muita Reactin suosittelemia (Facebook Inc., 2020c) teknologioita. Teknologioita suositellaan kokeneemmille kehittäjille esimerkiksi sil-loin kun on rakentamassa komponenttikirjastoa tai integroimassa Reactia olemassa olevaan koodiin. Esimerkkejä virallisessa dokumentaatiossa mainituista teknologi-oista ovat Neutrino, Nx ja Parcel. Neutrino on työkalu, joka yhdistää ennakkoon mää-ritetyt esiasetukset ja Webpack-moduulikääntäjän hyödyt nopeuttamaan projektien alustusta ja rakentamista vähäisten kehitysriippuvuuksien avulla. Neutrino sisältää esi-asetukset React-sovelluksille ja -komponenteille. Nx on työkalu, joka mahdollistaa mm. yhdessä versionhallinnassa (engl. monorepo) tapahtuvan useiden sovellusten ke-hityksen ja sovellusten välisten riippuvuuksien hallinnan. Nx sisältää myös muita toi-mintoja ja siinä on sisäänrakennettu tuki Reactille ja Next.js:lle. Parcel on verkko-sovellusten paketointityökalu, jonka avulla verkkoverkko-sovellusten eri resurssit voidaan pa-ketoida yksinkertaisesti ja nopeasti. Parcel tukee Reactia. Lomakkeiden teko Reactissa voi olla haastavaa ja tästä syystä virallisessa dokumentaatiossa (Facebook Inc., 2020k) mainitaan Reactille ja React Nativelle tarkoitettu avoimen lähdekoodin Formik-loma-kekirjasto, joka helpottaa ja nopeuttaa React-lomakkeiden kehitystä merkittävästi.

Testaukseen React tarjoaa (Facebook Inc., 2020l) vaihtoehtoja ulkoisten työkalujen ja npm-pakettien kautta. React Testing -kirjasto on yksi esimerkki npm-pakettina asen-nettavasta testaustyökalusta, jonka avulla on mahdollista testata Reactin käyttöliitty-mäkomponentteja.

Komponentit ovat Angularin tärkeimpiä rakennuspalikoita, mutta niiden rajoituksena on, että ne toimivat pääsääntöisesti vain Angularin omassa ekosysteemissä. Kuitenkin Angularin versiosta 7. eteenpäin Angular on tarjonnut mahdollisuuden käyttää Angu-lar Element -ominaisuutta (Rahman, 2019), jonka avulla AnguAngu-lar-komponenteista voi-daan tehdä itsenäisiä verkkokomponentteja (engl. web component). Verkkokomponen-tit ovat selaimien natiivisti tukemia elementtejä, joita voidaan käyttää missä tahansa verkkosovelluksessa tai nettisivulla normaalin HTML-tägin tavoin. Angular-kom-ponentista tehtyä verkkokomponenttia voidaan käyttää siis esimerkiksi React- tai Vue-sovelluksen sisässä. Angular-elementtien hyödyntäminen vaatii, että haluttu kompo-nentti kuitenkin ensin kehitetään normaalisti Angularilla ja sen jälkeen muunnetaan (engl. export) tarvittaviksi JavaScript-resursseiksi. Muuntamisen jälkeen verkkokom-ponentti ja siihen liittyvät resurssit upotetaan haluttuun verkkosovellukseen. Angular-elementeistä on hyötyä esimerkiksi vanhojen (engl. legacy) koodien päivityksessä uu-simpaan Angularin versioon tai kun Angular-komponentti halutaan pudottaa olemassa olevaan verkkosovellukseen ”plug&play” tyyliin ilman suurempaa kehitystyötä tai konfigurointia. elementtien käyttö (S, 2019) mahdollistaa myös Angular-komponenttien käytön sovellusten palvelinpäässä asiakaspään sijaan. Verkkosovel-luksiin upotettuja Angular-elementtejä on mahdollista myös kehittää ja julkaista itse-näisesti.

Angular listaa dokumentaatiossa (Google, 2020h) suuren määrän erilaisia työkaluja sekä lisäosia eikä niitä kaikkia avata tässä. Tärkeää on kuitenkin tietää, että Angularin perustoimintoja on mahdollista laajentaa virallisten sekä kolmansien osapuolien kir-jastojen ja pakettien avulla. Virallisista kirjastoista tärkeimpiä ovat Angular Material, Angular Service Worker (@angular/service-worker), Angular Universal, Angular Fire ja Protractor. Angular Material on yleiskäyttöinen kirjasto, joka tarjoaa hienostuneita ja uudelleenkäytettäviä käyttöliittymäkomponentteja. Angular Service Worker (Google, 2020i) on npm-paketti, joka sisältää tarvittavia koodeja ja toimintoja PWA-sovellusten kehittämiseen Angularin avulla. Angular Fire on virallinen kirjasto Angu-larin ja Firebasen välille ja sen avulla esimerkiksi sovelluksen dataa on yksinkertai-sempaa käsitellä Firebasen ja sovelluksen välillä. Firebase (Google Developers, 2020c) itsessään on Googlen monipuolinen kehitysalusta, joka tarjoaa esimerkiksi eri-laisia back-end ratkaisuja, mittareita sovellusten laaduntarkkailuun, testaustyökaluja ja paljon muuta. Angular Universal käsiteltiin jo alakohdassa 5.5.1.

Vue (Evan You, 2020a) toimii pääsääntöisesti vain verkkosovellusten näkymäkerrok-sessa ja tämän takia Vue voidaan integroida osaksi muita kirjastoja ja aikaisemmin tehtyjä projekteja. Vue ei kuitenkaan listaa tiiviisti dokumentaatiossaan muita sovel-luskehyksiä, joiden kanssa Vue toimii. Poikkeuksena ovat alakohdassa 5.5.1 listatut sovelluskehykset, jotka mahdollistavat Vuen piirtämisen palvelimella. Muita sovellus-kehyksiä ja teknologioita kuitenkin listataan Vuen GitHub (GitHub, Inc., 2020g) awesome-vue alisivulla, jonne on koottu erittäin suuri määrä erilaisia teknologioita, komponentteja, työkaluja ja sovelluskehyksiä, joiden avulla Vuen toimintaa pystyy laajentamaan tai joiden kanssa Vuea voi käyttää. Koska GitHub-sivulla luetellaan suuri määrä eri asioita, ei kaikkia listata ja esitellä tässä erikseen. Tiivistettynä voidaan kuitenkin todeta, että Vueen on tarjolla valmiita, virallisia sekä kolmansien osapuolien tuottamia ratkaisuja seuraaviin asioihin: käyttöliittymäkomponentit, käyttöliittymä-asettelut (engl. UI layout), sovelluskehykset, käyttöliittymätyökalut, muut työkalut ja integraatiot toisiin järjestelmiin ja teknologioihin. Käyttöliittymäkomponenteissa on tarjolla esimerkiksi valmiita taulukoita, kaavioita, valikoita ja karttoja. Sovelluskehyk-sissä luetellaan kokonaisia sovelluskehyksiä (komponentit ja asettelut), mobiileja so-velluskehyksiä ja komponenttikokoelmia (ilman asetteluja). Käyttöliittymätyökaluissa on tarjolla esimerkiksi työkaluja lomakkeiden kehittämiseen, erilaisiin animaatioihin ja reititykseen. Suurin osa edellä mainituista laajennuksista otetaan käyttöön Vue-so-velluksissa koodipakettien muodossa, esimerkiksi npm-paketinhallintajärjestelmän avulla. Dokumentaation (Evan You, 2020h) mukaan Vuen avulla on mahdollista ke-hittää myös mobiilisovelluksia ja PWA-sovelluksia hyödyntämällä esimerkiksi Capa-citor- tai NativeScript-alustoja. Natiivisti, eli ilman tukevia sovelluskehyksiä ja tekno-logioita, Vue ei tue mobiilisovellusten kehitystä. Capacitor on alusta, joka mahdollis-taa alustariippumattomien (engl. cross-platform) mobiilisovellusten ja PWA-sovellus-ten kehittämisen. NativeScript on myös vastaavanlainen alusta, mutta NativeScript keskittyy pääsääntöisesti vain mobiilisovellusten kehittämiseen.

Vue CLI käyttää arkkitehtuuria (Evan You, 2020i), joka mahdollistaa lisäosien (engl.

plugin) käyttämisen ja CLI:n ominaisuuksien laajentamisen lisäosien avulla. Lisäosat ovat itsenäisiä koodikokonaisuuksia, jotka lisäävät yleensä ylätason toiminnallisuuk-sia Vueen. Lisäosat voivat laajentaa Vuen ja CLI:n toimintaa esimerkiksi lisäämällä globaaleja metodeja, ominaisuuksia, resursseja tai kirjastoja, jotka tarjoavat omia

API-Router. Vuex (Vuejs.org, 2020a) on tilanhallintamalli ja -kirjasto Vue-sovelluksille ja Vue Router (Vuejs.org, 2020b) on Vuen virallinen reititystyökalu, joka mahdollistaa mm. SPA-sovellusten toteuttamisen. Testauksen osalta Vuen dokumentaatio (Evan You, 2020j) esittelee kolmea eri testauksen osa-aluetta, jotka ovat: yksikkötestaus, komponenttitestaus ja päästä-päähän-testaus (engl. End-to-End testing, E2E). Osa-alu-eiden testauksessa voi dokumentaation mukaan hyödyntää useita erilaisia testityöka-luja ja testaussovelluskehyksiä. Vue kuitenkin suosittelee käyttämään Vue CLI:n kautta asennettavia ja käytettäviä lisäosia. Lisäosia @vue/cli-plugin-unit-jest ja

@vue/cli-plugin-unit-mocha suositellaan yksikkötestaukseen, lisäosaa @testing-lib-rary/vue komponenttitestaukseen ja päästä-päähän-testaukseen suositellaan @vue/cli-plugin-e2e-cypress ja @vue/cli-plugin-e2e-nightwatch.

Emberiin on rakennettu lisäosia tukeva arkkitehtuuri, joka mahdollistaa lisäominai-suuksien lisäämisen ydintoimintoihin vähällä konfiguraatiolla. Mozilla mainitsee (Mozilla, 2020f) esimerkkeinä PREmber, empress-blog ja emberserviceworker -lisäosat. PREmber on lisäosa staattisten nettisivujen luontiin, empress-blog-lisäosa merkintäkielellä tehtyjen hakukoneoptimoitujen blogipostauksen tekemiseen ja em-ber-service-worker on lisäosa PWA-sovellusten konfigurointiin. Corber-abstraktiota hyödyntämällä Ember-sovelluksia voidaan kääntää natiiveiksi mobiilisovelluksiksi.

Yksi tärkeimmistä lisäosista on Ember Engines (Tilde Inc., 2020j), joka mahdollistaa Ember-sovelluksen koostamisen useista itsenäisistä Ember-sovelluksista. Käyttäjälle sovellus näyttäytyy siis vain yhtenä sovelluksena, mutta taustalla sovellus on jaettu useisiin sovelluksiin. Ember Engines -osat on eristetty toisistaan ja jokaiselle itsenäi-sellä ”moottorilla” on lähes kaikki samat ominaisuudet kuin normaaleissa Ember-so-velluksissa. Moottoreista on hyötyä etenkin isoille organisaatioille, jotka haluavat ja-kaa yhden sovelluksen useiksi alisovelluksiksi ja hoitaa kunkin kehityksen esimerkiksi erillisten tiimien toimesta. Eriytys on hyödyllistä etenkin silloin, jos tiimien päätehtä-vät eroavat merkittävästi toisten tiimien päätehtävistä ja jokaisen sovelluksen kehitys, testaus ja paketointi halutaan hallita omana alikokonaisuutenaan. Ember-sovellus (Tilde Inc., 2020i) on mahdollista upottaa aiemmin tehdyille verkkosivuille ja suorittaa yhdessä muiden JavaScript-sovelluskehysten kanssa. Ember-sovellus on myös mah-dollista tarjoilla samasta domainista kuin jokin toinen verkkosovellus. Ember CLI tu-kee useita lisäosia ja mm. testaukseen liittyen Emberin virallisessa dokumentaatiossa

(Tilde Inc., 2020k) suositellaan Ember Test Selectors, Ember CLI Mirage ja Ember Exam -lisäosia. Ember Test Selectors auttaa kirjoittamaan DOM-muutosten suhteen juostavia testejä. Ember CLI Mirage mahdollistaa ns. jäljitelmäpalvelimen (engl.

mock server) tekemisen, jonka avulla on esimerkiksi mahdollista testata, että Ember-sovellus suorittaa tarvittavat toimenpiteet oikein, kun sovelluksen ja palvelimen välillä lähetetään dataa. Ember Examin avulla on mahdollista rinnastaa esimerkiksi piirtotes-tien ja hyväksymistespiirtotes-tien suoritusta ja näin nopeuttaa testaukseen kuluvaa aikaa.

Kaikki sovelluskehykset tarjoavat komentorivityökalujen lisäksi myös kehitystyöka-luja ja laajennuksia selaimiin. Yleensä näiden työkalujen käytössä suositellaan joko Google Chrome tai Mozilla Firefox -selaimia. Emberin työkalu (Tilde Inc., 2020h) on nimeltään Ember Inspector ja Vuen (Evan You, 2020g) Vue.js devtools. React kutsuu kehitystyökaluja (GitHub, Inc., 2020j) nimellä React Developer Tools. Angularin ta-pauksessa Augury (Google, 2020b) on yksi suosittu vaihtoehto ja se on Googlen ja Rangle.io:n ylläpitämä avoimen lähdekoodin projekti. Kaikki työkalut tarjoavat pää-sääntöisesti samankaltaisia toimintoja, joista yksi esimerkki on sovelluskehysten avulla kehitettyjen sovellusten sisäisten komponenttien ja muuttujien arvojen tarkistus.

Sovelluskehysten laajennettavuutta käsitellessä on tärkeää huomioida, että kaikki so-velluskehykset hyödyntävät tai suosittelevat hyödyntämään jotakin paketinhallintajär-jestelmää kuten esimerkiksi npm:ää tai Yarnia. Koska paketinhallintajärjestelmien yh-tenä suurimpana tarkoituksena on mahdollistaa ulkoisten pakettien ja niiden riippu-vuuksien lisäämistä projektiin, on kaikkiin sovelluskehyksiin mahdollista lisätä myös sellaisia paketteja ja toimintoja, joita tässä alakohdassa ei ole erikseen mainittu.