Het bouwen van een RSS-Viewer Met Vue: Deel 2

0
45

Welkom bij Deel 2 van deze mini-serie over het bouwen van een RSS-viewer met Vue. In de laatste post, liep ik door hoe ik bouwde mijn demo met Vue.js en Vuetify op de front-end en Webtask op de back-end. Toen bouwde ik die eerste versie, wist ik dat het precies thatmdash;een “oorspronkelijke” versie. Ik nam wat tijd om te werken aan een paar updates, en terwijl ik het niet durven noemen dit een “perfecte” versie, ik denk dat ik heb een aantal verbeteringen gemaakt en ik zou graag om ze te delen met u.

Serie Artikelen:

  1. Installatie en eerste iteratie
  2. Verfijningen en definitieve versie (Deze Post)

Voordat ik de slag te gaan, hier zijn de links naar de voltooide demo en source code.

Bekijk De Demo ‘ Bekijk De Code

Voel je vrij om te vork, bestand PRs, en bugs te rapporteren aan uw hart inhoud!

Het Plan

Toen deelde ik de eerste versie in Deel 1, die ik hieronder enkele ideeën voor het verbeteren van de RSS-reader, met inbegrip van:

  • Verhuizen naar Vuex.
  • Te beginnen om over te schakelen naar onderdelen in de lay-out. (Goed, ik was al met Vuetify componenten, maar ik bedoelde aangepaste onderdelen voor mijn toepassing.)
  • Met behulp van IndexedDB te slaan feed items voor snellere toegang en offline ondersteuning.

Dat was het plan, en zoals de meeste plannen, ik was niet per se in staat om te raken van alles wat in deze update (en ik zal uitleggen waarom op het einde). Maar hopelijk zie je de verbeteringen als een algemeen “in de juiste richting bewegen” voor de toepassing. Met dat uit de weg, aan de slag!

De Uitvoering Van Vuex

Ik zal beginnen met het bespreken van de grootste verandering is voor de toepassing, de toevoeging van Vuex. Zoals ik al zei in de vorige post, Vuex beschrijft zichzelf als een “state management patroon + bibliotheek” op hun “Wat is Vuex” pagina. Geen belediging voor hun documentatie, maar ik had een moeilijke tijd wikkelen mijn hoofd rond precies wat dit betekende, vanuit een praktische betekenis.

Na het in een paar kleine projecten nu, ik kom om te waarderen wat het biedt. Voor mij is de kern is het verstrekken van een centrale interface om uw gegevens. Als ik heb een basic-Vue app werken met een matrix van waarden, ik kan meerdere verschillende methodes die aan te passen. Wat gebeurt er wanneer ik begin met het bepaalde regels die moeten worden toegepast voordat de gegevens wijzigen? Als een simpel voorbeeld, stel je een verzameling van RSS-feeds. Voordat ik een nieuwe, ik wil ervoor zorgen dat het niet al bestaat in de lijst. Als ik een methode die wordt toegevoegd aan de lijst met feeds, is dat geen probleem, maar als ik meer, kan dat hinderlijk te houden dat de logica synchroniseren tussen de verschillende methoden. Ik kan gewoon het bouwen van een hulpprogramma om dit te doen, maar wat gebeurt er als ik andere onderdelen in het spel?

Terwijl het is absoluut niet een één-op-één vergelijking, ik voel me als Vuex doet me denken aan hoe de Aanbieders of Diensten werk in Hoek. Als ik ooit wil doen werken met gegevens, ik zal zorgen dat ik gebruik maken van een centrale aanbieder te behandelen en toegang tot die gegevens. Dat is hoe ik in het Vuex.

Dus de grote verandering in deze toepassing was het migreren van de gegevens van verwante items in de winkel. Ik ben begonnen met het toevoegen van de bibliotheek om mijn HTML-code:

<script src=”https://unpkg.com/vuex”></script>

Woot! Halverwege gedaan! (OK misschien niet.)

Vervolgens heb ik gemaakt van een exemplaar van mijn winkel in mijn JavaScript-bestand:

const feedStore = nieuwe Vuex.Winkel({
// veel spullen hier
});

en opgenomen in mijn Vue app:

laten app = nieuwe Vue({
el: ‘#app’,
winkel:feedStore,
// veel spullen hier te…
});

Nu komt het interessante deel. Enige tijd mijn Vue application data nodig heeft, die voornamelijk bestaat uit de lijst van feeds en de items in de feeds, het gaat om de vraag aan de winkel voor hen. Dus, bijvoorbeeld, mijn feeds waarde is nu berekend:

feeds() {
terug feedStore.staat.feeds;
},

Deze is nu gedefinieerd in de staat deel van mijn winkel:

staat: {
allItems: [],
feeds: [],
selectedFeed: null
},

Merk op dat feeds standaard een lege array. Ik had eerder gebruikt gemaakt van de gebeurtenis van mijn Vue app te lezen in de gegevens van localStorage. Nu, ik vraag aan de winkel om dat te doen:

aangemaakt() {
feedStore.verzending(‘restoreFeeds’);
},

Terug in de winkel, de logica is vrij veel het zelfde:

restoreFeeds(context) {
laat feedsRaw = venster.localStorage.getItem(‘feeds’);
als(feedsRaw) {
proberen {
laat feeds = JSON.parse(feedsRaw);
de context.staat.feeds = feeds;
de context.staat.feeds.forEach(f => {
de context.verzending(‘loadFeed’, f);
});
} catch(e) {
console.fout(‘Fout bij het herstellen van json-feed’+e);
// slecht json of een ander probleem, het nuke
venster.localStorage.removeItem(‘feeds’);
}
}
},

Ik zeg “vrijwel hetzelfde, behalve nu doe ik een beetje van foutcontrole op de waarde lezen uit localStorage. Maar hier is het van cruciaal belang beetje. Ik zei al dat ik niet in termen van het overschakelen op IndexedDB, maar in theorie, ik kon het bouwen van een derde versie van deze applicatie met een bijgewerkte winkel en mijn Vue app niet weten wat het verschil is. En dat is waar ik begon heel enthousiast. Hoe meer ik werkte, des te meer “domme” mijn Vue app werd en de minder gebonden was aan een bepaalde uitvoering van de opslag. Laten we eens kijken naar de volledige Vue app nu:

laten app = nieuwe Vue({
el: ‘#app’,
winkel:feedStore,
gegevens() {
terug {
lade:true,
addFeedDialog:false,
addURL:”,
urlError:false,
urlRules:[],
selectedFeed:null
}
},
berekend: {
showIntro() {
retourneren.feeds.lengte == 0;
},
feeds() {
terug feedStore.staat.feeds;
},
items() {
terug feedStore.getters.items;
}
},
aangemaakt() {
feedStore.verzending(‘restoreFeeds’);
},
methoden:{
addFeed() {
deze.addFeedDialog = true;
},
allFeeds() {
feedStore.verzending(‘filterFeed’, null);
},
addFeedAction() {
deze.urlError = false;
deze.urlRules = [];

feedStore.verzending(‘addFeed’, {url:dit.addURL})
.vervolgens(res => {
deze.addURL = “;
deze.addFeedDialog = false;
})
.catch(e =>{
console.log(‘err toe te voegen’, e);
deze.urlError = true;
deze.urlRules = [“URL bestaat al.”];
});
},
deleteFeed(feed) {
feedStore.verzending(‘deleteFeed’, voeding);
},
filterFeed(feed) {
feedStore.verzending(‘filterFeed’, voeding);
}
}
})

Wat je zult merken is dat vrijwel alle van de werkelijke logica is nu weg en ik ben echt te doen is UI spullen. Open een modaal hier, voeg een fout er, en zo voort.

U kunt het volledige winkel hier, hoewel ik verontschuldig me voor het samenvoegen van alles samen in een bestand.

Het toevoegen van een Component

Een van de andere veranderingen die ik noemde was het begin naar “component-ize” de layer. Uiteindelijk heb ik alleen het maken van een component, feed-item. Dit vermindert het totale aantal lijnen in de HTML een beetje:

<v-flex xs12 v-for=”item” :key=”item.link”>
<feed-item :title=”item.titel :content=”item.inhoud” :link=”item.link” :feedtitle=”item.feedTitle” :color=”item.feedColor” :geplaatst=”item.pubDate”></feed-item>
</v-flex>

Het is niet een enorme verandering door enig middel, maar het maakte het wat makkelijker voor me toen ik begon te werken op het invoer scherm. Als ik niet met behulp van een fancy builder nog, ik gedefinieerd mijn onderdeel recht in JavaScript:

Vue.component(‘feed-item’, {
rekwisieten:[
‘kleur’,’titel’,’inhoud’,’link’,’feedtitle’, ‘geplaatst’
],
sjabloon: `
<v-card :color=”kleur”>
<v-card-titel primaire-titel>
<div class=”kop”>{{titel}} ({{geplaatst | dtFormat}})</div>
</v-card-titel>
<v-card-tekst>
{{inhoud | maxText }}
</v-card-tekst>
<v-card-acties>
<v-btn flatscreen target=”_new” :href=”link”>Lees verder {{feedtitle}}</v-btn>
</v-card-acties>
</v-card>
`
});

Ik ben niet iets te doen op alle zin in heremdash;er is geen dynamische logica of evenementen of iets dergelijks, maar ik kan dit zeker toevoegen die later waar het zinvol is. Ik heb eindelijk eens aan het toevoegen van de datum en het tijdstip van terbeschikkingstelling. Als je nieuwsgierig bent naar hoe bouwde ik de formatter gebruikt voor het lezen van mijn artikel het Bouwen van Een i18n Filteren met Behulp van Vue.js & Native Web Specs.”

De Macht van Verwijderen!

Oh, en ik heb eindelijk toegevoegd, een manier om te verwijderen feeds:

Prullenbak-pictogram, FTW!

Dit is gewoon vuurt een methode op de Vue object dat, op zijn beurt, vuurt een oproep naar de winkel die zorgt voor het verwijderen van het voer en de items van de UI en daarna voortduren. Een klein ding, maar, wow, ik wou dat ik dat had in de eerste versie te testen. En hier is een laatste schot van alles:

De app alle awesomeness

Volgende Stappen… en Wat is er Gebeurd met IndexedDB?

Zoals ik al zei in het begin, deze versie is nog steeds niet perfect, maar ik heb zeker een beter gevoel over. Ik raden u om te delen tips, suggesties, en fout rapporten in de reacties hieronder of op de GitHub repo.

Wat is er gebeurd met IndexedDB ondersteuning? De kwestie die ik liep was hoe goed het initialiseren van de database. Vuex winkels niet hebben een concept gemaakt van een proces. Ik zou hebben gedaan iets als dit:

// dummy voor het krijgen van feeds
verzending(‘getDB’)
.dan(() =>
// doe dingen
);

Waar de getDB actie retourneert een belofte in en verwerkt het doen van een eenmalige IndexedDB het openen en opslaan van de waarde in de staat. Ik kan dit een schot later, en weer, wat ik graag over Vuex is dat ik weet dat ik veilig kan doen zonder te interfereren met de rest van de applicatie.

Serie Artikelen:

  1. Installatie en eerste iteratie
  2. Verfijningen en definitieve versie (Deze Post)

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!