{"id":271548,"date":"2018-06-19T06:56:28","date_gmt":"2018-06-19T13:56:28","guid":{"rendered":"http:\/\/css-tricks.com\/?p=271548"},"modified":"2018-06-22T11:45:37","modified_gmt":"2018-06-22T18:45:37","slug":"building-a-rss-viewer-with-vue-part-2","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/building-a-rss-viewer-with-vue-part-2\/","title":{"rendered":"Building a RSS Viewer With Vue: Part 2"},"content":{"rendered":"<p>Welcome to Part 2 of this mini-series on building a RSS viewer with Vue. In the <a href=\"https:\/\/css-tricks.com\/building-a-rss-viewer-with-vue-part-1\">last post<\/a>, I walked through how I built my demo using Vue.js and <a href=\"https:\/\/vuetifyjs.com\/en\/\" rel=\"noopener\">Vuetify<\/a> on the front end and <a href=\"https:\/\/webtask.io\" rel=\"noopener\">Webtask<\/a> on the back end. When I built that initial version, I knew it was exactly thatmdash;an &#8220;initial&#8221; version. I took some time to work on a few updates, and while I won&#8217;t dare call this a &#8220;perfect&#8221; version, I do think I&#8217;ve made some improvements and I&#8217;d like to share them with you.<\/p>\n<p><!--more--><\/p>\n<div class=\"article-series\">\n<h4>Article Series:<\/h4>\n<ol>\n<li><a href=\"https:\/\/css-tricks.com\/building-a-rss-viewer-with-vue-part-1\">Setup and first iteration<\/a><\/li>\n<li>Refinements and final version <em>(This Post)<\/em><\/li>\n<\/ol>\n<\/div>\n<p>Before I get started, here are links to the completed demo and source code.<\/p>\n<div class=\"button-group-inline-content\">\n  <a class=\"button\" href=\"https:\/\/cfjedimaster.github.io\/webdemos\/vuerss2\/\" rel=\"noopener\">View Demo<\/a> <a class=\"button\" href=\"https:\/\/github.com\/cfjedimaster\/webdemos\/tree\/master\/vuerss2\" rel=\"noopener\">View Code<\/a>\n<\/div>\n<p>Feel free to fork, file PRs, and report bugs to your heart&#8217;s content!<\/p>\n<h3>The Plan<\/h3>\n<p>When I shared the initial version in Part 1, I outlined some ideas to improve the RSS reader, including:<\/p>\n<ul>\n<li>Moving to <a href=\"https:\/\/vuex.vuejs.org\/en\/\" rel=\"noopener\">Vuex<\/a>.<\/li>\n<li>Starting to switch to components in the layout. (Well, I was already using Vuetify components, but I meant custom components for my application.)<\/li>\n<li>Using IndexedDB to store feed items for quicker access and offline support.<\/li>\n<\/ul>\n<p>That was the plan, and like most plans, I wasn&#8217;t necessarily able to hit everything in this update (and I&#8217;ll explain why at the end). But hopefully you&#8217;ll see the improvements as a general &#8220;moving in the right direction&#8221; for the application. With that out of the way, let&#8217;s get started!<\/p>\n<h3>Implementing Vuex<\/h3>\n<p>I&#8217;ll start off discussing the biggest change to the application, the addition of <a href=\"https:\/\/vuex.vuejs.org\/en\/\" rel=\"noopener\">Vuex<\/a>. As I said in the previous post, Vuex describes itself as a &#8220;state management pattern + library&#8221; on their <a href=\"https:\/\/vuex.vuejs.org\/en\/intro.html\" rel=\"noopener\">&#8220;What is Vuex&#8221;<\/a> page. No offense to their documentation, but I had a difficult time wrapping my head around exactly what this meant, from a practical sense.<\/p>\n<p>After having using it in a few small projects now, I&#8217;m coming to appreciate what it provides. To me, the core benefit is providing a central interface to your data. If I&#8217;ve got a basic Vue app working with an array of values, I may have multiple different methods that modify it. What happens when I begin to have certain rules that must be applied before the data changes? As a simple example, imagine an array of RSS feeds. Before I add a new one, I want to ensure it doesn&#8217;t already exist in the list. If I have one method that adds to the feed list, that isn&#8217;t a problem, but if I have more, it may become cumbersome to keep that logic in sync across the different methods. I could simply build a utility to do this, but what happens when I have other components in play as well?<\/p>\n<p>While it is <strong>absolutely not<\/strong> a one-to-one comparison, I feel like Vuex reminds me of how Providers or Services work in Angular. If I ever want to do work with any data, I&#8217;ll ensure I use a central provider to handle all access to that data. That&#8217;s how I look at Vuex.<\/p>\n<p>So the big change in this application was to migrate all the data related items to a store. I began by adding the library to my HTML:<\/p>\n<pre rel=\"HTML\"><code class=\"language-html\">&lt;script src=\"https:\/\/unpkg.com\/vuex\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Woot! Half-way done! (OK maybe not.)<\/p>\n<p>I then created an instance of my store in my JavaScript file:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">const feedStore = new Vuex.Store({\r\n  \/\/ lots of stuff here\r\n});<\/code><\/pre>\n<p>and included it in my Vue app:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">let app = new Vue({ \r\n  el: '#app',\r\n  store:feedStore,\r\n  \/\/ lots of stuff here too...\r\n});<\/code><\/pre>\n<p>Now comes the interesting part. Any time my Vue application needs data, which primarily consists of the list of feeds and the items from those feeds, it&#8217;s going to ask the store for them. So, for example, my <code>feeds<\/code> value is now computed:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">feeds() {\r\n  return feedStore.state.feeds;\r\n},<\/code><\/pre>\n<p>This is now defined in the <code>state<\/code> portion of my store:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">state: {\r\n  allItems: [],\r\n  feeds: [],\r\n  selectedFeed: null\r\n},<\/code><\/pre>\n<p>Notice that <code>feeds<\/code> defaults to an empty array. I had previously used the <code>created<\/code> event of my Vue app to read in the data from <code>localStorage<\/code>. Now, I ask the store to do that:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">created() {\r\n  feedStore.dispatch('restoreFeeds');\r\n},<\/code><\/pre>\n<p>Back in the store, the logic is pretty much the same:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">restoreFeeds(context) {\r\n  let feedsRaw = window.localStorage.getItem('feeds');\r\n  if(feedsRaw) {\r\n    try {\r\n    let feeds = JSON.parse(feedsRaw);\r\n    context.state.feeds = feeds;\r\n    context.state.feeds.forEach(f =&gt; {\r\n      context.dispatch('loadFeed', f);\r\n    });\r\n    } catch(e) {\r\n      console.error('Error restoring feed json'+e);\r\n      \/\/ bad json or other issue, nuke it\r\n      window.localStorage.removeItem('feeds');\r\n    }\r\n  }\r\n},<\/code><\/pre>\n<p>I say &#8220;pretty much the same&#8221; except now I&#8217;m doing a bit of error-checking on the value read in from <code>localStorage<\/code>. But here&#8217;s the crucial bit. I already said I failed in terms of switching to IndexedDB, but in theory, I could build a third version of this application with an updated store and my Vue app won&#8217;t know the difference. And that&#8217;s where I started to get really excited. The more I worked, the more &#8220;dumb&#8221; my Vue app became and the less tied it was to any particular implementation of storage. Let&#8217;s look at the complete Vue app now:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">let app = new Vue({ \r\n  el: '#app',\r\n  store:feedStore,\r\n  data() {\r\n    return {\r\n      drawer:true,\r\n      addFeedDialog:false,\r\n      addURL:'',\r\n      urlError:false,\r\n      urlRules:[],\r\n      selectedFeed:null\r\n    }\r\n  },\r\n  computed: {\r\n    showIntro() {\r\n      return this.feeds.length == 0;\r\n    },\r\n    feeds() {\r\n      return feedStore.state.feeds;\r\n    },\r\n    items() {\r\n      return feedStore.getters.items;\r\n    }\r\n  },\r\n  created() {\r\n    feedStore.dispatch('restoreFeeds');\r\n  },\r\n  methods:{\r\n    addFeed() {\r\n      this.addFeedDialog = true;\r\n    },\r\n    allFeeds() {\r\n            feedStore.dispatch('filterFeed', null);\r\n    },\r\n    addFeedAction() {\r\n      this.urlError = false;\r\n      this.urlRules = [];\r\n\r\n      feedStore.dispatch('addFeed', {url:this.addURL})\r\n      .then(res =&gt; {\r\n        this.addURL = '';\r\n        this.addFeedDialog = false;\r\n      })\r\n      .catch(e =&gt;{\r\n        console.log('err to add', e);\r\n        this.urlError = true;\r\n        this.urlRules = [\"URL already exists.\"];                                \r\n      });\r\n    },\r\n    deleteFeed(feed) {\r\n      feedStore.dispatch('deleteFeed', feed);\r\n    },\r\n    filterFeed(feed) {\r\n      feedStore.dispatch('filterFeed', feed);\r\n    }\r\n  }\r\n})<\/code><\/pre>\n<p>What you&#8217;ll notice is that pretty much all of the actual logic is now gone and all I&#8217;m really doing here is <abbr title=\"User Interface\">UI<\/abbr> stuff. Open a modal here, add an error there, and so forth.<\/p>\n<p>You can view the complete store <a href=\"https:\/\/github.com\/cfjedimaster\/webdemos\/blob\/master\/vuerss2\/app.js#L6,L122\" rel=\"noopener\">here<\/a>, although I apologize for lumping everything together in one file.<\/p>\n<h3>Adding a Component<\/h3>\n<p>One of the other changes I mentioned was beginning to &#8220;component-ize&#8221; the view layer. I ended up only making one component, <code>feed-item<\/code>. This reduced the total number of lines in the HTML a bit:<\/p>\n<pre rel=\"HTML\"><code class=\"language-html\">&lt;v-flex xs12 v-for=\"item in items\" :key=\"item.link\"&gt;\r\n  &lt;feed-item :title=\"item.title\" :content=\"item.content\" :link=\"item.link\" :feedtitle=\"item.feedTitle\" :color=\"item.feedColor\" :posted=\"item.pubDate\"&gt;&lt;\/feed-item&gt;\r\n&lt;\/v-flex&gt;<\/code><\/pre>\n<p>It isn&#8217;t a <em>huge<\/em> change by any means, but it did make it bit easier for me when I started working on the feed display. As I&#8217;m not using a fancy builder yet, I defined my component straight in JavaScript like so:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">Vue.component('feed-item', {\r\n  props:[\r\n    'color','title','content','link','feedtitle', 'posted'\r\n  ],\r\n  template: `\r\n  &lt;v-card :color=\"color\"&gt;\r\n    &lt;v-card-title primary-title&gt;\r\n      &lt;div class=\"headline\"&gt;{{title}} ({{posted | dtFormat}})&lt;\/div&gt;\r\n    &lt;\/v-card-title&gt;\r\n    &lt;v-card-text&gt;\r\n      {{content | maxText }}\r\n    &lt;\/v-card-text&gt;\r\n    &lt;v-card-actions&gt;\r\n      &lt;v-btn flat target=\"_new\" :href=\"link\"&gt;Read on {{feedtitle}}&lt;\/v-btn&gt;\r\n    &lt;\/v-card-actions&gt;\r\n  &lt;\/v-card&gt;        \r\n  `\r\n});<\/code><\/pre>\n<p>I&#8217;m not doing anything at all fancy in heremdash;there&#8217;s no dynamic logic or events or anything like that, but I could certainly add that later where it makes sense. I did finally get around to adding the date and time of posting. If you&#8217;re curious about how I built the formatter used for it, read my article <a href=\"https:\/\/vuejsdevelopers.com\/2018\/03\/12\/vue-js-filters-internationalization\/\" rel=\"noopener\">Build A i18n Filter Using Vue.js &#038; Native Web Specs.&#8221;<\/a><\/p>\n<h3>The Power of Delete!<\/h3>\n<p>Oh, and I finally added a way to delete feeds:<\/p>\n<figure id=\"post-272821\" class=\"align-none media-272821\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/vue-rss-viewer-1a.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>Trash can icon, FTW!<\/figcaption><\/figure>\n<p>This just fires off a method on the Vue object that, in turn, fires off a call to the store that takes care of removing the feed and items from the UI and then persisting it. A small thing, but, wow, did I wish I had that in the first version when testing. And here is a final shot of everything:<\/p>\n<figure id=\"post-271551\" class=\"align-none media-271551\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/vue-rss-viewer-2.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>The awesome app in all it&#8217;s awesomeness<\/figcaption><\/figure>\n<h3>Next Steps&#8230; and What Happened to IndexedDB?<\/h3>\n<p>As I said in the beginning, this version is still not <em>perfect<\/em> but I definitely feel better about it. I highly encourage you to share tips, suggestions, and bug reports in the comments below or on the GitHub repo.<\/p>\n<p>So what happened to IndexedDB support? The issue I ran into was how to properly initialize the database. Vuex stores don&#8217;t have a concept of a <code>created<\/code> process. I could have done something like this:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ dummy code for getting feeds\r\ndispatch('getDB')\r\n.then(() =&gt;\r\n  \/\/ do stuff\r\n);<\/code><\/pre>\n<p>Where the <code>getDB<\/code> action returns a promise and handles doing a one-time IndexedDB opening and storing the value in the state. I may give this a shot later, and again, what I love about Vuex is that I know I can safely do that without interfering with the rest of the application.<\/p>\n<hr>\n<div class=\"article-series\">\n<h4>Article Series:<\/h4>\n<ol>\n<li><a href=\"https:\/\/css-tricks.com\/building-a-rss-viewer-with-vue-part-1\">Setup and first iteration<\/a><\/li>\n<li>Refinements and final version <em>(This Post)<\/em><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Part 2 of this mini-series on building a RSS viewer with Vue. In the last post, I walked through how I built my demo using Vue.js and Vuetify on the front end and Webtask on the back end. When I built that initial version, I knew it was exactly thatmdash;an &#8220;initial&#8221; version. I [&hellip;]<\/p>\n","protected":false},"author":252876,"featured_media":271560,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Building a RSS Viewer With Vue: Part 2","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1280,1073,1343,1079],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/vue-rss-viewer.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/vue-rss-viewer.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/271548"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/252876"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=271548"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/271548\/revisions"}],"predecessor-version":[{"id":272822,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/271548\/revisions\/272822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/271560"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=271548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=271548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=271548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}