(Previous step: Managing user's notes)

There are some little things we should improve in our application:

• Home flickering
• Show errors
• Cache ajax requests

Home flickering

Right now, if you reload the page with a user page URL in the browser, you first see the home page and then you're redirected to the user page. When we load the application and the router (PageJS) gets initialized, it checks the URL and invokes the corresponding route handler (you can disable this behaviour if you want to by using the dispatch attribute). As we have configured the default view to be 'HomePage' in our App instance, it will get loaded before the router does its magic.

My solution for this is to create an empty view in our App and set it to be the default view, so we won't see any sub-view until the router invokes the right route handler and the right view is promoted to be shown.

(Previous step: Loading user info)

Now we want to add to our little application the ability to create and delete notes for the users we can already see. We will have a collection of notes for every user.

We need somewhere to store that notes and, for this tutorial, we'll use Firebase free plan service. If you don't have an account, go and create one. Once you have it, create a new APP from your account page. Now that you have your APP created, take note of its URL, as we'll be using it to integrate our application using Firebase REST API. The URL should be something like this: https://ps-github-saver.firebaseio.com/.

First of all, we're going to populate our notes component, as right now it's empty. We could just put all the code in the notes-section component, but for the sake of modularity (it would also help with the testing), we will have another two components:

• add-note: a little component to handle notes creation.
• notes-list: a little component to show current notes and allow removing them.

(Previous step: Routing)

Rigth now our page shows nothing but some labels. The next step is to allow our users to search for a GitHub user and, if it's found, show his info in the specific page.

We will be requesting data to the GitHub REST API. These are the endpoints we'll be hitting:

• https://api.github.com/users/{username}: Get user main info
• https://api.github.com/users/{username}/repos: Get user's repositories data

Polyfills

To implement third party integration, we will be usign two new ES2015 APIs which are not already arrived to all browsers, so we need to include some polyfills in our application for them: fetch and Promise.

We will need to update our webpack configuration to include in our JS bundle these polyfills.

First, we need to install the polyfills and a couple of webpack plugins:

$ npm install es6-promise whatwg-fetch --save
$ npm install imports-loader exports-loader --save-dev

(Previous step: Creating the barebones)

Ractive does not have its own routing system becouse it is a library, not a framework, and routing is not part of its goal. In the link above you can see they recommend:

• Backbone.Router
• PageJS

There is also a Ractive specific router built by Martin Kolarik you can check:

• Ractive-route

As I already have some experience with PageJS I will be using that library for implementing a custom made routing subsystem.

(Previous step: Setting up your environment)

Ok, so now that you have all ready to fly, let's check what we want to do.

The goal is to build a simple app that let us view GitHub user's information and, also, to manage our own message notes for every user. We will have a common layout with a static section (the one where you can search for users) and two subviews, having each one a different URL:

• Home page: will only contain a welcome message
• User profile page: will contain three sections for every user info group

(Previous step: Tutorial introduction)

I'm glad you decided to get here and I hope I can get your attention all the way down to the end of this tutorial.

So, the first step is to set up your working environment with the tools you will use. I assume you have NodeJS and NPM installed in your system. If not, please, follow the previous link and come back once you're ready.

Now, you need to create a new empty folder and initialize your project with npm:

$ mkdir notetaker-ractive
$ cd notetaker-ractive
$ npm init

NPM will ask you some questions. You don't need to type anything and just press Enter for every question. This command has created a new file (package.json) in your folder. Now we need to install the basic packages:

• Webpack: will help us to bundle all our JS code and to use ES2015 import system.
• Babel: will help us to use new ES2015 features by transpiling them to ES5 compatible code.
• node-static: will serve our files (static server)

You can use this command:

$ npm i webpack babel-core babel-loader node-static --save-dev

UPDATE (24-02-2016): The new version of Babel (v6) requires an extra dependency to be installed and configured. Please, if you're following this tutorial for the first time, also install babel-preset-es2015 dependency.

I'm a big fan of javascript. I like it in the front-end and I love it in the back-end (thanks Ryan Dhal). Also I enjoy playing with new libraries and frameworks that pops up every day. It seems nowadays everybody creates a new one and, when the time comes for you to start a new project and select the right one, oh man! it's a tough time.

With the beggining of this year, I was in the position of starting a new big project and I spent some time deciding which libraries we would use in the front-end (no doubts on our back-end: NodeJS FTW). It was then when I discovered Ractive.JS.

The more time I spent reading the docs and playing with their interactive demos, the more surprised I was I didn't hear anything about this library before. IMHO it's a very easy to learn and powerful tool for dealing with DOM automatic bindings, event handling, pub/sub stuff and so on.

I began working in a prototype of our project using this tool and I was also surprised about the speed yur can get in terms of development. The way this library solves some common problems is very natural for me, it fits my mindset. And every time I needed to learn how to implement something, it was pretty straightforward to find out.

I didn't have a great time trying to implement a simple feature involving Google Analytics in one of my projects (nodejs web application).

My humble requirement was to collect some data (events) I was pushing to Google Analytics in order to create a simple report for my users. Since it isn't a critical report, my idea was to get the data once a day and cache it.

So, as simple as it seems, it has been a tough trip for me and I want to share the whole process with the community. I hope anyone trying to achive something similar gets to this article and find it helpful.

These are the main steps I had to take:

• Register an application in Google API console center
• Create a service account
• Register the newly created service account generated email into the Google Analytics account I wanted to consume
• Implement the authorization token request (create a JWT)
• Implement the request to collect data from Google Analytics