Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hopsoft/render_later

Improve the user perceived performance of your Rails app
https://github.com/hopsoft/render_later

performance rails rails-engine ruby-gem ruby-on-rails stimulus xhr

Last synced: 4 days ago
JSON representation

Improve the user perceived performance of your Rails app

Host: GitHub
URL: https://github.com/hopsoft/render_later
Owner: hopsoft
License: mit
Created: 2019-03-14T20:59:25.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2019-03-14T23:44:45.000Z (almost 6 years ago)
Last Synced: 2024-05-01T23:54:38.142Z (9 months ago)
Topics: performance, rails, rails-engine, ruby-gem, ruby-on-rails, stimulus, xhr
Language: Ruby
Homepage:
Size: 62.5 KB
Stars: 13
Watchers: 4
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

        

## Table of Contents

- [RenderLater](#renderlater)

  - [Improve user perceived performance of your Rails app](#improve-user-perceived-performance-of-your-rails-app)

  - [Quick Start](#quick-start)

  - [Next Steps](#next-steps)

    - [Style the placeholder element](#style-the-placeholder-element)

    - [Add loading content](#add-loading-content)

    - [Change the placeholder tag](#change-the-placeholder-tag)

  - [How it Works](#how-it-works)

  - [Similar Tools](#similar-tools)

  - [JavaScript Development](#javascript-development)

[![Lines of Code](http://img.shields.io/badge/lines_of_code-27-brightgreen.svg?style=flat)](http://blog.codinghorror.com/the-best-code-is-no-code-at-all/)

[![Maintainability](https://api.codeclimate.com/v1/badges/a0661a5ab84b7b83b5aa/maintainability)](https://codeclimate.com/github/hopsoft/render_later/maintainability)

# RenderLater

## Improve user perceived performance of your Rails app

Render slower sections of web pages asynchronously after initial load.

## Quick Start

1. __Gemfile__

```ruby

gem "render_later"

```

2. __app/assets/javascripts/application.js__

```javascript

//= require render_later

```

3. __app/views/any_erb_template.html.erb__

```erb

<%= render_later "/some/slow/url" %>

```

## Next Steps

### Style the placeholder element

You may wish to style the placeholder.

This can be done by passing `css` and `style` arguments to `render_later`

```erb

<%= render_later "/some/slow/url", css: "css-class", style: "color:red" %>

```

### Add loading content

The text content `Loading...` displays by default.

This can be overridden by passing a block to `render_later`

```erb

<%= render_later "/some/slow/url" do %>

  <%= image_tag "spinner.gif" %>

<% end %>

```

### Change the placeholder tag

A `span` placeholder tag is used by default.

This can be overridden by passing the `tag` argument to `render_later`

```erb

<%= render_later "/some/slow/url", tag: "tr" %>

```

## How it Works

1. Site visitor requests a page

1. Server renders a response

1. Browser renders the page

1. [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is used to fetch `render_later` sections asynchronously

1. The DOM is updated with the asyncrhonously loaded HTML

## Similar Tools

- https://github.com/renderedtext/render_async

- https://github.com/jarthod/render-later

## JavaScript Development

The JavaScript source is located in `app/assets/javascripts/src`

& transpiles to `app/assets/javascripts/render_later.js` via Webpack.

```sh

# build the javascript

./bin/yarn

./bin/webpack

```