Introduction to Rendr

Isomorphic JavaScript frameworks and libraries have gained a lot of attention recently. Isomorphic JavaScript applications are applications written in JavaScript that can run both on the client and on the server. Because of this, you can write the code once and then execute it on the server to render static pages and on the client to allow for fast interactions.

In this article, we’ll be exploring and getting started with [Rendr](http://ift.tt/1CnxoaH), an open-source library developed by the [Airbnb](https://www.airbnb.com/) team. The library was initially built with the goal of powering the company’s mobile apps running on [Backbone.js](http://backbonejs.org/) and [Node.js](https://nodejs.org/en/). Later the company made it an open source project and this let the project gain a lot of traction.

## What's Rendr

The basic idea behind Rendr is to allow rendering Backbone.js applications on the client and the server by writing common code for both the ends. This allows web page content to be rendered via the server, way before JavaScript code gets executed in the browser. Once the initial page load is done and the browser has all the client side framework loaded, further routing of the application will be handled by Backbone.js on the client side. Rendr is not intended to be a complete framework and it has the following design goals:

* Writing an application logic which is irrespective of the environment
* Reducing the `if(server) { ... } else { ... }` structures
* Communicating with RESTful APIs as any other Backbone application would do
* Hiding library complexities
* Excluding a server-side DOM

In this tutorial we’ll explore a simple Rendr application, with a GitHub browser that fetches data of repositories and users via the GitHub REST API. This small application is provided as part of Rendr's sample examples. [You can download these examples from this GitHub repository](http://ift.tt/1M4BZMZ). Here, we’ll be exploring the basic "00_simple" application.

[author_more]

Before deepening the topic, let's understand what our application would look like. It would have the following sections:

* **Repos List View:** The repositories' list section would fetch and list some GitHub repositories
* **Repo View**: Clicking on a specific repository, it opens its information page
* **Users List View**: The users' list section fetches and lists the GitHub users
* **User View**: Clicking on a specific user, it opens up the user profile view with some basic user details and their repositories

Continue reading %Introduction to Rendr%

by Ashish Trivedi via SitePoint