Labākie mobilie komponenti progresīvām tīmekļa lietotnēm VueJs

Progresīvas tīmekļa lietotnes (Avots: https://developers.google.com/web/progressive-web-apps/images/pwa-fast.png)

2015. gadā dizaineris Frančs Berrimāns un Google Chrome inženieris Alekss Rasels izgudroja terminu “Progresīvās tīmekļa lietotnes”, lai aprakstītu lietotnes, izmantojot jaunas funkcijas, kuras atbalsta mūsdienu pārlūkprogrammas, kas lietotājiem ļauj jaunināt tīmekļa lietotnes uz progresīvām tīmekļa lietojumprogrammām dzimtajā operētājsistēmā (OS). . Viņi ir uzticami, ātri un saistoši. Īsāk sakot, tas ir grūdiens, lai ienestu tīmeklī dabisko spēku. Mūsdienās PWA kļūst arvien lielāks. Lūk, vietne, kurā, izmantojot PWA, varat to pārbaudīt šeit.

Nesen vietnē Google IO 2017 Addy Osmani (Google inženieru menedžeris, kas strādā ar Chrome un Web platformu) runāja par pwa daudzos javascript ietvaros, ieskaitot vuejs.

Divus mēnešus pirms Google IO Addy Osmani ir nosūtījis vuejs oficiālajam repozitorijam ierosinājumu par vue pwa oficiālo vue-cli veidni, pēc tam Evan You kā vuejs autors piekrita Addy ierosinātajam. Tātad, pēc Google IO, tieši 2017. gada 1. jūnijā Addy izlaida pwa veidni vue-cli. Tagad jūs varat izveidot pwa projektu pēc tipa komandu savā terminālī, piemēram, šo.

$ vue init pwa 

Veidne bija tik jaudīga, tajā tika iekļauts servisa darbinieka priekšlaicīga lietojumprogrammas apvalka un statisko līdzekļu (prod) atkārtota sagatavošana, skripta (async chunk) priekšielādēšana, izmantojot , tīmekļa lietojumprogrammas manifests + favicons, mobilajām ierīcēm draudzīgs meta-viewport , un bākas rādītājs 90 + / 100. Bet tam nav komplektācijā ar iebūvētiem komponentiem, tāpēc šajā rakstā es ierosināšu dažus no mobilajiem komponentiem, lai paātrinātu lietotāja saskarnes attīstību progresīvās tīmekļa lietotnēs. Šeit ir mobilo komponentu saraksti, lai izveidotu PWA vuejs.

  1. Vuetify

Vuetify.js ir vietnes Vue.js 2 semantisko komponentu ietvars. Tās mērķis ir nodrošināt tīras, semantiskas un atkārtoti lietojamas sastāvdaļas, kas jūsu lietojumprogrammas veidošanu padara vienkāršu. Vietnē Vuetify.js tiek izmantots Google materiāla dizaina dizaina modelis, ņemot norādes no citiem populāriem ietvariem, piemēram, Materialize.css, Material Design Lite, Semantic UI un Bootstrap 4. Vuetify.js komplektācijā ir laba dokumentācija un pilns atbalsta komponents, un tas ir ļoti viegli iemācīties.

2. Mint UI

Pamata iOS stilā, piparmētru UI ir diezgan viegla. Kad viss ir importēts, saspiestais kods aizņem tikai ~ 30 kb (JS + CSS) gzip vietas. Mint UI ir maza izmēra un pilna atbalsta sastāvdaļa, taču dokumentāciju ir tik grūti saprast, jo tā ir pārāk vienkārša un daži dokumenti ir nogriezti. Visbeidzot, lai arī piparmētras UI dokumentācijā ir angļu valodas atbalsts, taču tiešajā piemērā joprojām tiek izmantota ķīniešu valoda, tik slikti.

3. Vue materiāls

Vue materiāls ir viegls karkass, kas izgatavots precīzi saskaņā ar materiāla dizaina specifikācijām. Veidojiet jaudīgas un labi izstrādātas tīmekļa lietotnes, kuras var ievietot katrā ekrānā. Vue materiālam ir līdzība ar leņķa materiāla komponentiem, ja jūs kādreiz izmantojāt leņķa materiālu, to var viegli mainīt.

4. Keen UI

Keen UI ir paredzēta kā viegla Vue.js UI bibliotēka ar vienkāršu API. Keen UI ir iedvesmots no Google materiāla dizaina, taču Keen UI nav CSS ietvars, un tādā veidā jūs tajā neatradīsit režģa sistēmu vai tipogrāfijas stilus. Tā vietā uzmanība tiek koncentrēta uz atkārtoti izmantojamu komponentu izveidi, kuriem ir interaktivitāte.

5. Vēders

Vum ir lietotāja interfeisa ietvarstruktūra, kurā izmanto vietni Vue.js mobilajām ierīcēm. Vum ir funkcija, pilna lapas struktūra (galvene, saturs, kājene), jaudīgu komponentu ķekars, ērti lietojams un paplašināms, kā arī augstas veiktspējas CSS3 animācija. Vēde ir balstīta uz iOS dizainu, piemēram, piparmētru lietotāja saskarne, taču vājā ir mazāk komponentu nekā piparmētras lietotāja saskarnē.

Secinājums: Vuetify ir vispilnīgākie un jaudīgākie komponenti vuejs lietotnēm, tam ir laba dokumentācija, un pēdējais tam ir arī integrācija ar NUXT, lai izveidotu servera puses atveidošanas projektu. Tāpēc es par galveno prioritāti izvirzīšu vērtēšanu. Bet, ja vēlaties izvēlēties vienkāršību, par savu izvēli jums vajadzētu apsvērt Mint UI vai Keen UI. Ja vēlaties dizainu, kura pamatā ir android, varat izvēlēties Vuetify, un, ja vēlaties izmantot uz iOS balstītu dizainu, jums jāiet uz Mint UI.