#turbolinks

Do you know the good old days in which a server rendered HTML and a browser showed it? They are coming back! :)

People are finally realizing that shipping 1.5MB of Javascript to a browser, letting it parse, compile and execute on the computer/phone of the user just to show the homepage is a waste of time/bandwidth. And, you know, browsers are really good/fast to display HTML not at being compiler.

I kept saying this for years and you know, the Rails community even embedded TurboLinks inside Rails so that the server renders the page/component and then magically swaps it in your browser so it all looks "react-like" but is fast.

But no, let's go full-circle first. We had to change everything in React-Native, now we are going back to NodeJS for server rendering frontend, and we will eventually go back to just one backend server.

本日から仕事始めになります。本年もよろしくお願いいたします。

年末年始 Ruby on Rails にある Turbolinks という機能について、プログラマの観点から理解を促す記事をみることがありましたが、非プログラマ職として、私が Turbolinks を無効にする理由について考えてみました。

Rails のフロントエンド周りの未来予測

Turbolinks 再考

私が、すぐに思いつく Turbolinks を無効にする理由は下記になります。

jQuery 依存の Web 演出の再発明を避けたい

SNS 系のスクリプトの実行成否

広告コンバージョンタグの実行成否

対象サービスが、クローズドなものであり、自社のプログラマによって管理できる体制ならば Turbolinks は良いのかもしれませんが、実際のサービス運用を考えると、すこし難しいのではないかと思います。

SNS 系のスクリプトの実行成否

jQuery の生態系と合わない、という理由はよくみますが、さらにいくつか理由があります。例えば Twitter や Facebook といった SNS 系スクリプトや広告コンバージョンタグが正しく実行されるかわかりにくい点です。

SNS 系のスクリプトは先方のスクリプト更新の頻度やスクリプトの種類が少なからずあり、そのうえ開発用のアカウント開設や各種設定コストが見込まれます。スクリプトによっては VM で完全に正常動作しているか不明な場合があり、正直、一見動いている状態では不安が残ります。

ローカルの VM で動かないスクリプトは論外です。（業務上、なんとか対処することになりますが）

広告コンバージョンタグの実行成否

広告コンバージョンタグとは広告の効果測定のための JavaScript になります。多くの場合、これらは Rails の JavaScript 群とは別に管理する必要があり、そのためにタグマネージャというサービスがあります。

なぜ、広告コンバージョンタグを別に管理する必要があるかというと、開発運用体制にもよりますが、広告ごとにスクリプト（コンバージョンタグ）を変更する必要があり、そのためだけにデプロイするのは重いため、こうしたタグマネージャで広告担当者（非プログラマ）がコンバージョンタグの有効、無効を制御します。

YTM: Yahoo Tag Manager … jQuery 使用

Yahoo! タグマネージャご利利用ガイド 上級編 PDF

GTM: Google Tag Manager

タグマネージャに設定するコンバージョンタグは比較的単純な JavaScript ですが、広告配信会社ごとに多様な状態になっており、場合によってはすこしスクリプトの記述を修正する必要があります。実務上、例えば、広告配信会社と広告代理店が分かれている場合、広告代理店の担当者さんでは手におえないこともあります。

広告出稿には数百万円からそれ以上の支払いがあるため、コンバージョンタグの実行成否は慎重にならざるえません。媒体の客層と合わなかったのか、クリエイティブが悪いのか等なにが成功失敗の要因か、よく吟味する必要があることからも Turbolinks の導入には熟考、合意形成が必要です。

その他

turbolinks に関するセキュリティ上の懸念について

If you are using the following:

Foundation framework

Ruby on Rails

Turbolinks

And you find that your drop down menus are acting a little bizarre (or just not working at all), then do the following:

Gemfile:  gem 'jquery-turbolinks'

Application.js: //= require jquery.turbolinks

Note: This does NOT replace //= require jquery or //= require turbolinks. So don’t touch those.

This should now allow the turbolinks within the drop down on the Foundation navigation bar (I’m using top-bar, for example) to work.

I found rack-tracker - it’s a instant Google Analytics implementation into your rails app.

It also works with Turbolinks (with just small change).

Installation

Gemfile:

gem 'rack-tracker'

config/application.rb:

config.middleware.use(Rack::Tracker) do   handler :google_analytics, { tracker: 'UA-11111111-1', position: :body } end

Don’t forget add that `position: :body`, thanks to this it will work with Turbolinks. Also don’t forget replace UA-11111111-1 with your own GA code of course.

Heroku

In case your rails hosting is Heroku, use ENV variables instead of harcoded values. Then you can change tracking ID anytime from the terminal.

First, set new Heroku variable with your tracking code in value:

heroku config:set GA_TRACKING_CODE=UA-11111111-1

Then config/application.rb:

config.middleware.use(Rack::Tracker) do   handler :google_analytics, { tracker: ENV['GA_TRACKING_CODE'], position: :body } end

Turbolinks and the 403 redirect

Recently I came across the weird phenomenon of getting 403 responses instead of the 302 redirects I was actually doing in my code. As it took me some time to find the root cause of that I wanted to share the solution that hopefully saves you some time.

The Problem

On a request that was returning a 302 redirect to my root path I got back a 403 on  production. At first it was also very hard to…

With Twitter bootstrap you can easily achieve grid system ie. with 2 columns in a row. But what if you need same height for each of these columns?

Here is 2-columns HTML code using Twitter Bootrap:

<div class="row">  <div class="col-sm-6">    <div class="same-height">      <img class="img-responsive" src="..."></div>      <p>...</p>    </div>  </div>

 <div class="col-sm-6">    <div class="same-height">      <img class="img-responsive" src="..."></div>      <p>...</p>    </div>  </div> </div>

Then in app/assets/javascripts/same_height.js (create this file and it will be loaded automatically).

We need write a script that will find the most high element (with css class “same-height”) and set that height to each element with that class. Here:

$(document).bind('page:change', function() {

 $('body').waitForImages(function() {

   var heights = $(".same-height").map(function() {      return $(this).height();    }).get(),

   maxHeight = Math.max.apply(null, heights);

   // $(".same-height").height(maxHeight);

   $(".same-height").each(function(){      additionalHeight = parseInt( $(this).attr('data-add-height') ) || 0;      $(this).height(maxHeight + additionalHeight);    });

 });

});

Notes:

1. Notice page:change event instead of jQuery’s document.ready. We can’t use document ready since we use Turbolinks along with our Rails project. See https://github.com/rails/turbolinks