DEV Community: Jason Lee

Turbolinks extend prefetch to speed up your website

Jason Lee — Fri, 09 Oct 2020 16:26:46 +0000

This article shares an extension of Turbolinks for accelerating web page access.

Background

Recently, I discovered InstantClick, a small technique for pre-loading web pages, which can effectively improve the speed of website access.

The general principle is that when the user mouses over the link, the web page will be pre-loaded in the cache by Ajax in advance, and when the user clicks, it will be directly rendered with the previous cache.

So I also tweeted about this:

Rails built-in Turbolinks actually has a similar cache mechanism. When the user clicks the page back and forth, it will use the cache to pre-render it, but it does not preprocess it when the user's mouse is hovered.

I checked and found that Turbolinks' Issue also discussed this turbolinks/turbolinks#313, and I found an implementation Reference, so I encapsulated it, and made improvements to implement an extension of Turbolinks.

https://github.com/huacnlee/turbolinks-prefetch

At the same time, I have additionally adjusted the visit action of Turbolinks in the implementation. If there is already a prefetch action, it will be rendered directly without requesting the page again.

As you can see, currently Ruby China has enabled this feature (Hong Kong server). When the prefetch has an effect, the page is basically opened like a local web page.

How Turbolinks Prefetch works

hover --> [prefetch] --<no cache>--> [XHR fetch] -> [Turbolinks cache.put]
              |
          <exist cache / in fetching>
              |
            ignore

click --<check cache>-- exist --> [isPrefetch] -> [Turbolinks.visit advance] ---> [render page]
             | | |
             | | --async-> [fetch background] -> [render if updated]
             | |
             | <Yes>
             | |--- [Turbolinks.visit restore] --> render -> nothing
          No cahce
             |
             ---> [Turbolinks.visit]

Installation

$ yarn add turbolinks-prefetch

Usage

import Turbolinks from 'turbolinks';
window.Turbolinks = Turbolinks;

import TurbolinksPrefetch from 'turbolinks-prefetch';
TurbolinksPrefetch.start();

When a Prefetch request is made, an additional HTTP header of Purpose: prefetch will be sent. If you need to ignore certain actions, you can use it.

For example, actions such as updating the reading status and the number of visits:

class TopicsController < ApplicationController
  def show
    if request.headers["Purpose"] != "prefetch"
      # Do not update visits during prefetch
      @topic.increment_hit
    end
  end
end

Disable Prefetch for some links

By default, Turbolinks Prefetch will turn on the behavior for all links.

Except for the following situations:

Links to different websites (Host / Origin are different);
There is a link to open a new window target="_blank";
Links with data-remote attribute;
There are links with data-method attributes;
Links with data-prefetch="false" attribute;

It should be said that you don't need to deal with most of the default situations. The default behaviors like Rails UJS are already handled in Turbolinks Prefetch.

So you can disable prefetch for some links like this:

<a href="https://google.com">Google</>
<a href="/topics/123" target="_blank">Open in new window</a>
<a href="/topics/123" data-method="PUT" data-remote>Put</a>
<a href="/topics/123" data-method="DELETE">Delete</a>
<a href="/topics/123" data-prefetch="false">Disable by directly</a>

GitHub

🎊 Don't hesitate, immediately use it in your projects that already use Tubrolinks, basically seamless support.

https://github.com/huacnlee/turbolinks-prefetch

Enumize - 扩展 ActiveRecord::Enum 增加实用方法

Jason Lee — Mon, 24 Jun 2019 06:32:01 +0000

Rails 4.2 (如果没记错）给我们带来了官方的 Enum 解决方案，目前大家都在使用它了。

比如：

class Book
  enum status: %i[draft published archived]
end

然而我们在使用的时候会发现，往往我们需要将 status 字段用中文或其他的方式在界面上显示，而不是一个 draft / published / archived。

于是很多人可能会这样：

class Book
  enum status: %i[draft published archived]

  def status_name
    case status
    when "draft" then "草稿"
    when "published" then "已发布"
    when "archived" then "归档"
    end
  end
end

然后随着项目的推进，你会发现你的 Model 里面大量有这种函数。

为了解决这个问题，我们最初在自己的项目里面实现了一个扩展，用于代替 enum 的定义，给它增加一些函数扩展，现在提取成一个 Gem，可以方便以后使用。

使用方法

gem "enumize"

然后你的原来的 enum 定义不需要改变，这个 Gem 已经覆盖了那个方法。

所以，你可以认为这个 Gem 的引入不会改变 ActiveRecord::Enum 的原有使用方式，你可以无缝的集成到你的项目中！

class Book
  enum status: %i[draft published archived]
end

现在你有了 status_name, status_color, status_value 以及 Book.status_options 这些方法:

#{attribute}_name - 返回 name 的 I18n 信息，用于显示
#{attribute}_color - 返回从 I18n 里面读取 color 的信息（如果你项目用不到可以忽略它）
#{attribute}_value - 返回原始的数据库值，用来代替 Book.statuses[@book.status]
Book.#{attribute}_options - 返回一个 Array，用于 select tag，比如 <%= f.select :status, Book.status_options %>.

配置 I18n:

config/locales/en.yml

en:
  activerecord:
    enums:
      book:
        status:
          draft: Drafting
          published: Published
          archived: Archived
        status_color:
          draft: "#999999"
          published: "green"
          archived: "red"

config/locales/zh-CN.yml

zh-CN:
  activerecord:
    enums:
      book:
        status:
          draft: "草稿"
          published: "已发布"
          archived: "归档"

下面是使用的演示：

irb> @book = Book.new(status: :draft)
irb> @book.status
"draft"
irb> @book.draft?
true
irb> @book.published?
false
irb> @book.status_value
0
irb> @book.status_name
"草稿"
irb> @book.status_color
"#999999"

status_options 方法用在 View 里面的演示:

<% form_for(@book) do |f| %>
  <%= f.text_field :name %>
  <%= f.select :status, Book.status_options %>
  <%= f.submit %>
<% end >

项目地址

https://github.com/huacnlee/enumize