Yarr

Yet Another RSS Reader

Live Demo

Table of Contents

• Chapter 0 : Setup

  Just basic setup for webpack, npm packages to install etc.

• Chapter 1 : Intro to Observables

  If you’re new to Rx, this chapter will act as a small introduction. It’s not extensive, more of just a brush up. If you haven’t heard of Rx yet, you might like going through this presentation (with transcript).

• Chapter 2 : Intro to Virtual-Dom

  This chapter will introduce virtual-dom and we’ll see how virtual-dom is used (not how it works). Again sort of brush up to bring us to same page.

• Chapter 3 : Components and Rendering System

  I like React and the it allows writing code in terms of isolated components. That’s the API we kinda-sorta try to achieve in this tutorial, and I think we get success to a fair length. We’ll set a very slim rendering system, and some conventions about how we’ll write our views as components and how we’ll try to keep them isolated.

• Chapter 4 : Delegated Events

  I don’t like React’s way of doing events (not that it’s wrong, I just don’t like it very much). So we’ll do something very stupid and set a ridiculously simple (equally stupid) system for handing events in our app. Although stupid, this system will serve us well throughout the app.

• Chapter 5 : Fetching Feeds and Styles

  This will be an easy one, title is self explanatory I think.

• Chapter 6 : Models and Sidebar Controls

  We’ll keep our data in kinda-sorta models, and we’ll add components for interacting with the app.

• Chapter 7 : Offline Storage with Dexie.js

  We’ll use dexie.js for using IndexedDB for making our app offline compatible. Dexie is a slim abstraction over IndexdDB. We’ll take an offline first approach to build our app.

• Chapter 8 : Making Dexie.js reactive

  I do a lot of work with Meteor.js, and I love the way it provides a kind of database on the client which is reactive. Reactive like you just change the data in the database, and UI (or whatever else) who’s using that data will respond to the change. That’s what we’ll try to achieve in this chapter. e.g we’ll just put feeds in our IndexedDB and they’ll show up in UI automagically.

• Chapter 9 : Bring UI to Life

  We’ll make the controls we add in Chapter 6 actually work.

• Chapter 10 : The Reader

  The final piece of the puzzle. We’ll create a component which’ll parse HTML strings provided by our RSS feed to what virtual-dom understands (hyperscript), and show it in an elegant manner.

How to Follow the tutorial

I’ve written this tutorial using git tags for chapters. We start with basic introduction to Rx, virtual-dom and then move ahead with writing a simplistic app.

If you just want to read the tutorial, you can do that on Github. Just go through the tags in this repo from 0 to 10.

If you want to follow along (you should):

• Clone this repo
• Checkout to tag 0

  git checkout 0-setup
      

• Copy it over to another folder where you’ll write the code
• Start with reading readme.org. It’ll instruct you how to proceed

If you want to read the complete tutorial in a single document, there’s also `complete-tutorial.org` committed in the final commit in which you can read all the chapters in a single document.

How to run the app

• Clone this repo and cd to the cloned folder
• Execute: npm install
• To check the app in development mode, just run npm start and it’ll run a server on localhost:8080

How to build

• After above steps, execute this command:

npm run build

• Now we’ve created our styles and scripts in dist.js, and you can simply open index.html in your browser.

Credits: Thanks to @Cmdv for the effort of writing these npm scripts. I was using webpack directly from cli earlier (I prefer that in a tutorial), but it require installing webpack/webpack-dev-server globally, which can be avoided with npm scripts, and they are more comfy.

Here are few things this tutorial might have to offer:

• An app written without using any frameworks
• The whole app is a long chain of operations on Observables. We’ll try to get as close as possible to a system like this: We’ll fetch data from network, put it in indexedDb (the source), make it go through a long chain of operations, and put it in on the webpage (the sink).
• Persistent offline storage with IndexedDB
• Meteor like reactive client side db (although Meteor’s client db is not persistent)
• Easter eggs, obvious/non-obvious mistakes made on purpose and otherwise