CSS-sovelluskehykset & Angular Vertaileva tutkimus CSS-sovelluskehyksistä
Tallqvist, Melina (2019)
2019
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202003103283
https://urn.fi/URN:NBN:fi:amk-202003103283
Tiivistelmä
CSS-sovelluskehyksiä on paljon erilaisia ja ne kehittyvät jatkuvasti. GitHubissa suosituin CSS-sovelluskehys on saanut 128 000 tähteä, joka on lähes 85 000 tähteä enemmän kuin seuraa-vaksi suosituin. Haluttiin selvittää, millaisia ominaisuuksia CSS-sovelluskehyksillä on, soveltu-vatko ne kehitykseen Angularin kanssa ja milloin niiden käyttö on paikallaan. Päädyttiin ver-tailemaan kolmea eniten GitHubissa tähtiä saanutta CSS-sovelluskehystä ja lisäksi puhdasta CSS:ää tämän selvittämiseksi.
Vertailua varten suunniteltiin ja toteutettiin Angularilla pieni SPA-sovellus, jonka käyttöliitty-mä rakennettiin kaikilla valituilla CSS-sovelluskehyksillä sekä CSS:llä, kaikilla tekniikoilla mah-dollisimman samanlaisiksi. Osalla valituista CSS-ohjelmistokehyksistä on olemassa myös An-gularille suunniteltu, riisuttu versio, mutta niitä ei vertailun selkeyttämiseksi käytetty. Vertai-lua varten suunniteltiin myös kriteeristö, johon peilaten CSS ja sovelluskehykset pisteytettiin.
Tutkimuksen ohjelmistokehysten vertailusta voidaan nähdä toteutettujen käyttöliittymien kautta, että vain Semantic UI -CSS-sovelluskehys osoittautui yhteensopimattomaksi Angula-rin kanssa. Kriteeristön pisteytysten kautta voidaan nähdä, että Bootstrap on hieman Mate-rializea soveltuvampi käytettäväksi Angularin kanssa, mutta ei merkittävästi. There is a great number of different types of CSS frameworks, which develop constantly. GitHub’s top-rated CSS framework has 128 000 stars, which is almost 85 000 stars more than the second popular one. Features of CSS frameworks and their use cases were investigated by researching and comparing the top frameworks on GitHub.
A small single-page application was designed and developed with Angular. A user interface for the application was built with all chosen CSS frameworks and also with pure CSS. Some of chosen frameworks have a version just for Angular, but those versions don’t have all the features of the full versions, it was decided not to use them for the development of the ap-plication. For comparison purposes, a set of criteria was also designed to score CSS and CSS frameworks.
From the comparison it can be seen that with the created user interface only Semantic UI is not compatible with Angular. Through the chosen criteria it can be seen that Bootstrap is slightly more compatible to be used with Angular than Materialize.
Vertailua varten suunniteltiin ja toteutettiin Angularilla pieni SPA-sovellus, jonka käyttöliitty-mä rakennettiin kaikilla valituilla CSS-sovelluskehyksillä sekä CSS:llä, kaikilla tekniikoilla mah-dollisimman samanlaisiksi. Osalla valituista CSS-ohjelmistokehyksistä on olemassa myös An-gularille suunniteltu, riisuttu versio, mutta niitä ei vertailun selkeyttämiseksi käytetty. Vertai-lua varten suunniteltiin myös kriteeristö, johon peilaten CSS ja sovelluskehykset pisteytettiin.
Tutkimuksen ohjelmistokehysten vertailusta voidaan nähdä toteutettujen käyttöliittymien kautta, että vain Semantic UI -CSS-sovelluskehys osoittautui yhteensopimattomaksi Angula-rin kanssa. Kriteeristön pisteytysten kautta voidaan nähdä, että Bootstrap on hieman Mate-rializea soveltuvampi käytettäväksi Angularin kanssa, mutta ei merkittävästi.
A small single-page application was designed and developed with Angular. A user interface for the application was built with all chosen CSS frameworks and also with pure CSS. Some of chosen frameworks have a version just for Angular, but those versions don’t have all the features of the full versions, it was decided not to use them for the development of the ap-plication. For comparison purposes, a set of criteria was also designed to score CSS and CSS frameworks.
From the comparison it can be seen that with the created user interface only Semantic UI is not compatible with Angular. Through the chosen criteria it can be seen that Bootstrap is slightly more compatible to be used with Angular than Materialize.