Javascript UI kirjastot
Löf, Samuli (2020)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2020052513531
https://urn.fi/URN:NBN:fi:amk-2020052513531
Tiivistelmä
Opinnäytetyössä tutkittiin kolmea eri Javascript käyttöliittymä kirjastoa. Nämä ovat React, Angular ja Vue. Valinta tehtiin suosion mukaan.
Tutkinta tehtiin luomalla pieni sivusto jokaisella kirjastolla. Jokainen sivusto tehtiin samanlaiseksi käyttäen samoja tyylejä ja samanlaista tietorakennetta. Tavoitteena oli löytää eroavaisuuksia kirjastojen toiminnassa, millä on yksinkertaisinta tehdä sivuston osat. Työssä selvitetään myös mihin kirjastoon on helpoin yhdistää valmiiksi tehdyt tyylit ja datakoodit.
Tekeminen aloitettiin etsimällä kirjaston sivuilta ohjeet miten luoda projekti lokaaliin tiedostoon. Tämän jälkeen tehtiin sivu näyttämään esiluotuja elementtejä. Viimeisenä lisättiin lomake uuden elementin luomiseen.
Muutamia eroavaisuuksia löytyi. Reactissa oli vaikeinta liittää tyylit sivuston osiin. Se ei tukenut komponenttikohtaisia tyylejä suoraan, vaan olisi tarvinnut toisen kirjaston. Angularissa tietorakenne toimi eri tavalla. Koodeja ei voinut käyttää suoraan, vaan ne piti muokata Angularin muotoon. Vuessa taas kehittäjäystävällisyys ei ollut samalla tasolla kuin muissa. Kirjoittaessa Vue koodia editori ei osannut kertoa mitkä muuttujat ja funktiot ovat sallittuja missäkin tilanteessa.
Kaikilla oli siis omat heikot puolensa. Loppupäätelmänä React oli hyvänä keskitienä yksinkertaisuuden ja kehittäjäystävällisyyden välillä. Työkalut kertoivat suoremmin, jos jokin on väärin ja mikä sallittua. Projektirakenne oli myös paljon yksinkertaisempi kuin Angularissa. Three different Javascript interface libraries were compared in the study. These three were React, Angular ja Vue. They were chosen according to popularity.
Research was made by creating a small website with each library. Every website was made to work and look the same way, using the same styles and data layout. The goal was to find differences between the libraries, what is simplest to do with which. Also, which library is easiest to use with existing code.
The study was started by finding the directions on how to start a local project on each library’s own website. After this a page to show already made items was created. Lastly a form to add new items to the page was added.
A few differences were found. In React it was the hardest to add styles in a good way. You could not add styles into a component without an additional library. Angular then did not work with data code from outside. It had to be remade to fit into the mould. Vue was not as good in developer friendliness. When writing Vue code, the editor could not tell all mistakes or which variable and function could be used where.
Every library had its weaknesses. As a conclusion React is a good middle point between simplicity and developer friendliness. The tools worked better telling what is wrong and what can be used where. The project structure was much simpler than Angular.
Tutkinta tehtiin luomalla pieni sivusto jokaisella kirjastolla. Jokainen sivusto tehtiin samanlaiseksi käyttäen samoja tyylejä ja samanlaista tietorakennetta. Tavoitteena oli löytää eroavaisuuksia kirjastojen toiminnassa, millä on yksinkertaisinta tehdä sivuston osat. Työssä selvitetään myös mihin kirjastoon on helpoin yhdistää valmiiksi tehdyt tyylit ja datakoodit.
Tekeminen aloitettiin etsimällä kirjaston sivuilta ohjeet miten luoda projekti lokaaliin tiedostoon. Tämän jälkeen tehtiin sivu näyttämään esiluotuja elementtejä. Viimeisenä lisättiin lomake uuden elementin luomiseen.
Muutamia eroavaisuuksia löytyi. Reactissa oli vaikeinta liittää tyylit sivuston osiin. Se ei tukenut komponenttikohtaisia tyylejä suoraan, vaan olisi tarvinnut toisen kirjaston. Angularissa tietorakenne toimi eri tavalla. Koodeja ei voinut käyttää suoraan, vaan ne piti muokata Angularin muotoon. Vuessa taas kehittäjäystävällisyys ei ollut samalla tasolla kuin muissa. Kirjoittaessa Vue koodia editori ei osannut kertoa mitkä muuttujat ja funktiot ovat sallittuja missäkin tilanteessa.
Kaikilla oli siis omat heikot puolensa. Loppupäätelmänä React oli hyvänä keskitienä yksinkertaisuuden ja kehittäjäystävällisyyden välillä. Työkalut kertoivat suoremmin, jos jokin on väärin ja mikä sallittua. Projektirakenne oli myös paljon yksinkertaisempi kuin Angularissa.
Research was made by creating a small website with each library. Every website was made to work and look the same way, using the same styles and data layout. The goal was to find differences between the libraries, what is simplest to do with which. Also, which library is easiest to use with existing code.
The study was started by finding the directions on how to start a local project on each library’s own website. After this a page to show already made items was created. Lastly a form to add new items to the page was added.
A few differences were found. In React it was the hardest to add styles in a good way. You could not add styles into a component without an additional library. Angular then did not work with data code from outside. It had to be remade to fit into the mould. Vue was not as good in developer friendliness. When writing Vue code, the editor could not tell all mistakes or which variable and function could be used where.
Every library had its weaknesses. As a conclusion React is a good middle point between simplicity and developer friendliness. The tools worked better telling what is wrong and what can be used where. The project structure was much simpler than Angular.