Build an RSS reader with Alpine.js
Playing
01. Build an RSS reader with Alpine.js

Episodes

0%
Your progress
  • Total: 14m
  • Played: 0m
  • Remaining: 14m
Join or sign in to track your progress

Transcript

00:00
In this snippet, I'm going to show you how to build an RSS reader in a single flat file with AlpineJS.
00:06
And it doesn't look great at the moment, but I'll leave you to go ahead and start this up. The most important thing is that we get all of the information that we need from all of our sources.
00:16
And we're using two sources here, the CoCourse RSS feed, which gives you the latest courses from CoCourse.com, and also from the AlpineJS weekly newsletter as well. So just via this link over here.
00:31
So they're the two sources that we're using. We're just outputting these in the date that they were published, which is, of course, really important. Let's head over, start from scratch, and get this built out.
00:42
OK, so we're starting out with a single index.html file. In fact, that's the only thing we're going to do, because we can put everything inside this one file just to keep things nice and neat and tidy.
00:52
Of course, the first thing we want to do is pull in AlpineJS. So we're going to head over to the Alpine GitHub page. And we're going to come down and just grab the latest version. So Alpine is designed to be just included in a script,
01:06
just to make things really, really simple. So let's head over to the text editor. And let's just pull this in on the top of our head, just inside of here.
01:14
Great. So I wanted to find out a really simple single component in here. If you've not worked with Alpine yet, we do have a course on learning Alpine.
01:23
But most of this will be pretty self-explanatory. And I'll speak about what we're doing as we go. So what we need in here is an xData attribute. And this contains all of the things
01:34
that we have within this component. This is the scope of the component. So this will contain things like the actual feed itself, the sources that we want to pull with,
01:42
and any JavaScript methods or functions that we're going to use to help us along the way. Now, rather than do everything inside of here, what I like to do is extract this
01:51
out to a function, which I can just define somewhere on the page. It doesn't really matter where we put this. And that just allows us to keep things neat and tidy.
01:59
And if you are used to working with a framework like Vue.js, this will make a little bit more sense to you. So from here, we just return an object. And then that object gets placed inside
02:09
of the scope within the component that we're building. So for example, just to test that Alpine is working, I'm just going to output my name inside of this component. To do that, we use a element on an HTML element.
02:25
And then we just use the x-text attribute to read from any of the properties that we have inside of this object in x-data. And if we head over to the browser and check this out,
02:35
you can see that, sure enough, my name is Alpine on the page. So nothing special at the moment. But if you get to this point and you do want to follow along and you haven't worked with Alpine,
02:43
we know now that everything is working. So we can get rid of this name property, because, of course, we're not going to need that. Now, the two things that we are going to need
02:51
are a list of feed items. These will be parsed feed items. For example, we'll have objects in here with the title of the feed, potentially
03:01
the description of the feed, of course, the URL to the feed item, and the date that was published as well. And what we'll also have is a list of hard-coded sources.
03:09
We're making this really, really simple. It's just a personal RSS reader. So what I'm going to do is grab the two sources that we spoke about earlier.
03:16
First of all, the source from the codecourse.com website that just gives you the latest list of courses that we have, and also the RSS feed for the Alpine Weekly Newsletter. So now that we've got these two, we
03:30
need a way to just start to make a request to grab these two URLs. We're going to do this all in one here. We're not going to wait for each one to finish.
03:40
We're going to make a request to each of these. And we're going to fetch the data and parse it. Now to do this, we need some kind of initialization for this component.
03:49
So we want something to happen when this component is initialized. And what we can do is actually provide an xinit attribute. And we can either do something in here,
03:59
or we can reference some kind of method. So I can reference an init or mounted method. What that allows me to do is inside of here, create that out, and then do something
04:10
when this component is initialized. So when it's attached to the DOM and we're ready to start adding and rendering items. So if I just output done here, and we come across and just
04:20
open up our console real quick, you'll see that we get the text done output to the console. Great. So that's working.
04:26
But now is the point where we want to iterate over each of our sources, and we want to grab them. Now iterating over these sources is pretty straightforward.
04:34
I'm just going to use a JavaScript for each loop. You can use a for loop here, but the order of this doesn't matter so much. And I'm also not really concerned at this point
04:43
about the performance of this. So I'm just going to go ahead and use a for each loop on here really quickly. And when we do that, we get each of the sources in here,
04:52
and then we can make a request to get the source. So why don't we introduce another function in here? So let's create out a get function, which takes in the source, the source URL,
05:04
and then makes a request to get back that information. Now parsing RSS is an absolute nightmare. So what I'm going to do is I'm going to pull in this RSS parser package, which
05:15
will allow us to send a request to the RSS URL and get back a nice object with all of the information standardized really, really importantly that we need, because some RSS feed standards change.
05:27
So we're going to go ahead and pull this in from jsdeliver since we're not working with Webpack and we're not importing things. I'm going to come over to here.
05:35
I'll leave a link for this in the course links for you. We're going to come over to the distribution here, and we're going to pull in the minified version. We're going to copy this URL to the clipboard.
05:43
And really simply, we just want to come over and just below where we've included Alpine, we're going to go ahead and just pull that source into here. And that is it.
05:54
That is on the page. Now we need to new this up, and we can do this just above our setup method just so we don't new it up for every single iteration of our sources.
06:03
So I'm just going to call this a parser. And this is globally now available as RSS parser. So let's pull this in. And then inside of get, we can use this to get the source.
06:13
But we need to invoke this first. So let's go ahead and invoke that parsing through the source. And that's pretty much all we want to do for now. OK, so let's have a go at actually using
06:21
that parser to grab the URL. So let's access the parser. Let's use parser URL just here. And let's paste in or write in the source
06:31
that we get through to this method. And basically in here, we get either an error if something went wrong, and then we get the actual feed itself, so the entire feed
06:41
that we're reading, which will contain each of them items. So what we can now do with that done is just log out the feed and just see what we're working with here.
06:51
If we do get an error, what I'm going to do is just silently fail. So I'm just going to say, well, if we get an error, just do nothing for now because we're not really
06:57
bothered too much. We'll just silently fail and not show them items on the page. So if we come back over to our page here and give that a refresh, sure enough,
07:07
you can see that for each of the sources that we're using, we get a list of items. And you can see the items just inside of here. So these are the items from the Cocos.com website,
07:20
and these are the items from the Alpine newsletter. Great. So now what we can do with these is standardize them once again or rather just cut back on the amount of data
07:29
we have because we've got quite a lot of data inside of each of these items that we potentially don't need. And what we also want to make sure is the date that we get back from here is a JavaScript date object
07:40
or a moment object, whatever package you want to pull in, just so we can order these by latest because at the moment, they're going to be grouped by the actual feed itself. So what we want to do in here is iterate again
07:51
over each of the items. So again, I'm going to use a for each loop in here. You can use a for if you want to. And for each of these, I'm just going to call these entries.
08:00
We're going to go ahead and invoke another method called addToFeed, and we're going to pass that entry through. Remember, now this is just a standard object with all of them properties we just saw.
08:11
So let's come down here and create that addToFeed function out. And all we want to do in here is take in the entry and just return a new object, giving us just the data
08:20
that we want here. So for example, the title and all that kind of stuff. But actually, we don't want to return this. We want to push it to our feed items.
08:28
Let's go ahead and access our feed, which is just that empty array up here. And let's push to that, giving it a new object. And the title here is just going to come from item,
08:39
or in this case, entry title. And we also want the author of this potentially, but let's leave that out just for now. We definitely want the link, so let's go ahead
08:48
and grab the link in here. And we also want the date as well. And like I said, with the date that we get back, let's just check this out.
08:56
We get this pub date, which is just a date string. So we want to take that date, and we want to wrap it in a new date object in JavaScript, like so. So now that we are adding each of these entries to the feed,
09:12
let's just, as we go, just so we can see what's going on here, log out the feed itself, just so we can see that this is working. So you can see here, we get a proxy object just here.
09:22
Probably would be a good idea to go ahead and log this item out, just so we're seeing we're getting the right information. So let's log this out, so it's just a little bit clearer. And let's go ahead and give that a refresh.
09:34
And there we go. So these are each of our items with the date in here. It says invalidate at the moment because I've used the wrong property, but we'll fix that up.
09:41
We've got the link in here, which is great, and the title as well. So this is actually, rather than date, it's pub date. So let's change that over, give that a refresh.
09:50
And there we go, great. So we've got a date object in there as well that we can use to format and order. So let's just fix that date up in here
09:58
where we're pushing that object, and we should be good. Now what we can actually do finally is start to output the items on the page. They're not going to be in order just yet,
10:07
but we'll look at doing that in just a second. So to iterate over, we're going to use a template. And we are going to use x4. We're going to reference entry in the feed.
10:21
So we're just going to call each of these feed items entry. And we don't have a key here just at the moment. We don't have a unique identifier for each of these items.
10:29
So what I'm actually going to do is bring in the index of these, and I'm going to key each of these by the index, like so, just to make things a little bit more efficient
10:37
for Alpine to update. So inside of the template, then, this needs one root element. So we're just going to output a div, and we're going to have a span in here with some information.
10:45
So let's just output, for example, the title, just so we know that this is working. Let's come over and give that a refresh. And sure enough, we get both of the feed items inside of there.
10:55
Great. So the next is the link. So we want just an anchor for this. But of course, we want to bind the link to the href.
11:02
So when we click here, we go over to that location. So let's use xbind and bind in the href attribute to the entry link. And then we also want some text for this element
11:13
as well, which is, of course, just the entry link, so we can actually see where we're going to. So let's give that a refresh. And there we go.
11:19
There are each of the links that we can click through to go and view, in this case, the AlpineJS newsletter. So now that we've got that, just below this,
11:29
I'm going to go ahead and output a formatted version of the date. So let's, again, use a span with xtext. And let's grab the date. Remember, that's now a JavaScript date object.
11:38
You can just output that on its own. It will use the toString method to just cast the normal string. But in this case, we want to use maybe a method like toDateString just to make this a little bit more human-friendly.
11:50
So Friday 1st of May, 2020, that looks good to me. OK, so we've got all of our items here. But at the moment, they're not in order of published date. All of these ones here, up to here,
12:01
are the AlpineJS weekly newsletter. And all of these are the latest CodeCourse.com courses. So there's a couple of ways that we can do this. The first way is just to create out a normal function.
12:13
So let's go ahead and create a sorted feed. If you're used to working with Vue.js, you'll know that we have computed properties. This would be the perfect candidate
12:21
for a computed property, which would automatically return to us a new value based on any items that are added. But for this case, since Alpine doesn't have computed properties, we're just
12:33
going to use a function here or a method. And we're just going to invoke this instead of this feed here. So instead of directly referencing the array, we're going to reference this function.
12:43
And to sort this, we want to go ahead and use just the JavaScript sorting function. We get the first and the second in here. And to sort this, we're going to, of course,
12:54
sort this by the date. So we're going to grab the date for the second item. And we're going to just grab the time. And we're going to subtract that from the first date time.
13:03
And that will sort that in descending order for us. So now we can take this, and we can switch this over here. Invoke it, really, really importantly, because it's not a computed property.
13:14
And we can give that a refresh. So it looks like here we've got the right order, which is good. We've got a mix of these in here now ordered by the published date.
13:25
Now, another way that we can do this is just use a JavaScript getter. So I can actually just put the get keyword in front of this function just here, or this method just here.
13:34
And I can come up and get rid of the ability to invoke it. And this does actually continue to work. And you can see it's still listed in order of published date.
13:42
So it's entirely up to you what you do. This technically isn't a computed property, but it acts like one. So we can just use the get keyword in there.
13:49
It's entirely up to you what you want to do. And that is pretty much it. A really, really simple, one-page, personal RSS feeder written with Alpine JS.

Episode summary

In this episode, we walk through building a simple, one-page RSS reader using Alpine.js – all inside a single index.html file! We start by pulling in Alpine.js directly from a CDN for easy setup, similar to how you might use it in a quick project. If you're new to Alpine, don't worry; we touch on the basics as we go.

We then create an Alpine component that manages our feed data. The RSS reader pulls from two example feeds: one from CodeCourse and one from the AlpineJS Weekly newsletter. We keep things organized by pulling data-fetching logic into functions, so it's nice and tidy – kind of like how you'd structure it if you were using Vue.js.

To parse the RSS feeds (which can be a pain to do manually!), we bring in a lightweight RSS Parser JavaScript library from jsdelivr. After getting our feed data, we standardize it so each item just has what we need: title, link, and the date it was published. We make sure dates are sorted newest-first, using either a getter or a method (just like computed properties in Vue, but Alpine-style!).

Finally, we show how to output each feed item onto the page, including nice formatted dates and clickable links. By the end, you'll have a super-basic RSS reader that you can use and easily extend – all without any build step or complex tooling. Perfect for learning, prototyping, or your own minimalist feed dashboard!

Episode discussion

No comments, yet. Be the first!