I?m looking forward to seeing what services appear to fill Google Reader?s wake. Reeder and Press are my favourite RSS apps, which I use to curate my sources for upcoming DailyJS content. It sounds like Reeder will support Feedbin, so hopefully Press and other apps will as well. I?ve also used Newsblur in the past, but I?m not sure if we?ll see Newsblur support in Reeder?
With that in mind, I thought it would be pretty cool to use a feed reader as the AngularJS tutorial series theme. A Bootstrap styled, AngularJS-powered feed reader would look and feel friendly and fast. The main question, however, is how exactly do we download feeds? Atom and RSS feeds aren?t exactly friendly to client-side developers. What we need is JSON!
JSONP
The now standard way to fetch feeds in client-side code is to use JSONP. That?s where a remote resource is fetched, usually by inserting a script tag, and the server returns JavaScript wrapped in a callback that the client can run when ready.
I remember reading a post by John Resig many years ago that explained how to use this technique with RSS specifically: RSS to JSON Convertor. Ironically, a popular commercial solution for this was provided through Google Reader. Fortunately there?s another way to do it, this time by Yahoo! ? the Yahoo! Query Language.
YQL
The YQL service (terms of use) is basically SQL for the web. It can be used to fetch and interpret all kinds of resources, including feeds. It has usage limits, so if you want to take this tutorial series to build something more commercially viable then you?ll want to check those out in detail. Even though the endpoints we?ll use are ?public?, Yahoo! will still rate limit them if they go over 2,000 requests per hour. To support higher volume users, API keys can be created.
If you visit this link you?ll see a runnable example that converts the DailyJS Atom feed into JSON, wrapped in a callback. The result looks like this:
cb({ "query": { /* loads of JSON! */ } });
The cb method will be run from within our fancy AngularJS/Bootstrap client-side code. I wrote about how to build client-side JSONP implementations in Let?s Make a Framework: Ajax Part 2, so check that out if you?re interested in that area.
As far as feed processing goes, YQL will give us the JSON we need to make a little feed reader.
Yo!
Before you press ?next unread? in your own feed reader, let?s jump-start our application with Yeoman. First, install it and Grunt. I assume you already have a recent version of Node, if not get a 0.10.x copy installed and then run the following:
npm install -g yo grunt-cli bower generator-angular generator-karma
Yeoman is based around generators, which are separate modules that you can install using npm. The previous command installed the AngularJS generator, generator-angular.
Next you?ll need to create a directory for the application to live in:
mkdir djsreader
cd djsreader
You should also run the angular generator:
yo angular
It will install a lot of stuff, but fortunately most of the modules are ones I?d use anyway so I?m cool with that. Answer Y to each question, apart from the one about Compass (I don?t think I have Compass installed, so I didn?t want that option).
Run grunt start to see the freshly minted AngularJS-powered app!
You may have noticed some ?karma? files have appeared. That?s the AngularJS test framework, which you can read about at karma-runner.github.io. If you type grunt test, Grunt will happily trudge through some basic tests that are in test/spec/controllers/main.js.
Summary
Welcome to the world of Yeoman, AngularJS, and? Yahoo!, apparently. The repository for this project is at alexyoung / djsreader. Come back in a week for the next part!
No comments:
Post a Comment