Najnovije objave

Quasar framework

Marijo Kiš 13. kolovoza 2021.

quasar framework.png

U moru JavaScript frameworka, među kojima najveći dio tržišnog kolača odnose Angular, React i Vue.js, uvijek se može naći neki uhu i oku „novi“ framework koji se nije uspio probiti dublje na našu regionalnu tehnološku scenu, a o baš takvom jednom ćemo govoriti u ovome blogu.

 

Quasar je JavaScript framework koji se temelji na Vue.js-u. Njegov kreator, Razvan Stoenescu, nakon rada za IBM i Lenovo, gdje je koristio razne tehnologije kako bi razvijao web, Android, iOS i desktop aplikacije, odlučio je potražiti mitsku tehnologiju kojom bi se taj proces sveo na jedan framework, a kako to obično biva, nije našao ništa što bi ga zadovoljilo te je odlučio stvari preuzeti u svoje ruke. I tako priča o ovom frameworku započinje 2015. godine. Prva stabilna verzija izašla je u ljeto 2019., a samo godinu kasnije, rastom zajednice, održana je i prva službena Quasar konferencija.

 

Kao što je već spomenuto, Quasar se bazira na Vue.js-u. Kao najveća prednost frameworka ističe se mogućnost razvoja aplikacija za razne platforme. Glavni moto je „piši kod jednom i deployaj ga kako god trebaš“. Moguća je izrada SPA, SSR, PWA, BEX, Android i iOS aplikacija uz Cordovu ili Capacitor i multiplatformskih desktop aplikacija koristeći Electron. Također, dolazi uz out-of-the-box rješenjima uz koja nisu potrebna uključivanja vanjskih biblioteka kao što su Hammer.js, Moment.js ili Bootstrap. Kada je riječ o samom vizualnom dijelu aplikacije, odnosno o elementima na pageu, Quasar nudi široku paletu komponenta izrađenih prema material designu. Uz sve to, nudi i podršku za TypeScript te Vue3 koja je u trenutku pisanja ovoga teksta u beta verziji, no prva stabilna verzija planirana je za prvi kvartal 2021. godine.

 

Kako bi uopće krenuli s razvojem aplikacija kroz ovaj framework, potrebno je imati instaliran NodeJS (minimalno verzija 10) i Quasar CLI. Nakon što se zadovolje ovi preduvjeti, moguće je kreirati novi projekt pokretanjem sljedeće naredbe unutar terminala:

quasar create my-quasar-project

 

Prilikom kreiranja, korisniku će biti ponuđeno da odabere CSS pretprocesor, način uvoza komponenata, dodatnih značajki kao što su Vuex, ESLint, Axios, Vue-i18n i ostalih...

 

 

 

Na slici je prikazana inicijalna struktura projekta nakon samog kreiranja. Unutar src direktorija nalaze se neki od direktorija koji sadrže SFC (Single File Component) datoteke koje se sastoje od template, script i style oznaka (npr. pages, layout i components direktorij). U root razini projekta smještena je quasar.conf.js datoteka koja sadrži postavke aplikacije. Od ostalih foldera pronalaze se još css folder unutar kojega se nalazi app.css gdje je definiran globalni stil aplikacije, router direktorij unutar kojeg je sadžana konfiguracija ruta projekta te ostali za koje se objašnjenja mogu naći na službenoj Quasar dokumentaciji koja je izrazito detaljna i user-friendly čak i za korisnike koji tek započinju koračanje frontend developmentom.

 

Pokretanje projekta u development načinu vrši se naredbom:

 

quasar dev

 

 

 

Na prethodnoj slici prikazan je početni izgled kreiranog projekta. Prenamijenit ćemo postojeći layout i proći primjer u kojemu ćemo izraditi karticu u kojoj se upisivanjem imena i prezimena, nakon klika na gumb izbacuje poruku pozdrava unutar dialoga.

 

Prvi korak je „očistiti“ kreirani layout unutar layout foldera i ukloniti za ovaj primjer nepotrebne komponente, kao što je ladica s lijeve strane.

 

 

 

Uklonili smo q-drawer komponentu koja je sadržavala linkove, gumb za otvaranje i zatvaranje ladice i izmijenili smo q-header komponentu. Unutar q-layout oznake definira se layout pagea, a u našem slučaju će se sastojati od zaglavlja i tijela aplikacije.

 

Idući korak je otići u pages direktorij i otvoriti Index.vue datoteku. Unutar templatea možemo obrisati sve osim root oznake, te q-page komponente koja enkapsulira sav sadržaj.

 

Dodat ćemo q-card i q-dialog komponente. q-card sadrži predefinirane oznake pomoću kojih možemo lakše razmjestiti elemente unutar kartice, a za ovaj primjer će biti potrebni q-card-section unutar kojeg će se nalaziti polja za unos podataka (q-input) i q-card-actions unutar kojeg je smješten gumb (q-btn) za otvaranje dialoga. Dialog (q-dialog) također sadrži komponentu kartice, a sve ovo se detaljnije može razmotriti na sljedećem primjeru.

 

 

 

Ukoliko ste pratili primjer, spremanjem izmjena, izgled aplikacije bi trebao izgledati kao na sljedećoj slici:

 

 

Upisivanjem imena i prezimena te pritiskom na 'say hi' gumb, otvara se dialog sa pozdravnom porukom.

 

Kroz ovaj primjer prikazano je kako je jednostavno započeti s razvojem aplikacija pomoću Quasar frameworka. Kratki uvod je odrađen, a na Vama je samo da uronite dublje u dokumentaciju i otkrijete sve mogućnosti koje Vam Quasar nudi!

footer logo

© Gauss 2021. Sva prava pridržana.