Rails Action Pack Variants

Responsive yapılar, akıllıca tasarlanmış, sayfaların boyutlarına(platformlara) göre şekillenen yetenekli ve esnek tasarım yapılarıdır ve günümüzde de çokca tercih edilmektedir.

Responsive tasarımların bu çok yetenkli halleri, içinde yüklü miktarda JS, CSS ve HTML kodu bulundurmasına sebep oluyor. Bu durum özellikle de mobil cihazların arayüz kullanımlarında hatrı sayılır hız kayıplarına neden oluyor.

Neyse ki Ruby on Rails 4.1 ile birlikte "Action Pack Variants" adında yeni bir özellik duyuruldu. Action Pack Variants, siteye hangi platformdan girdiğinizi tespit eder ve tarayıcınıza hangi platformun sayfasını yükleyeceğine karar verir. Bu sayede sayfaların yüklenme hızları artmış olur.

Bugün de sizlerle Rail Action Pack Variants'ı Rails 4.1 ve sonrası projelerde nasıl kullacağını göstermek adına bir uygulama yapacağız.

Rails Action Pack Variants Uygulaması

Demo için kurulum:

Öncelikle Action Pack Variantlarını denemek için bir controller oluşturalım.

1  rails g controller Homes show

Action Pack Variantlarını denerken rahat edebilmemiz açsından projemizin açılış sayfasını Homes#show olarak güncelleyelim.

1Rails.application.routes.draw do
2  resource :home, only: [:show]
3  root to: "homes#show"
4end

Gerekli hazırlıkları tamamladık. Peki Action Pack Variantlarını nasıl kullancağız?

Application controller içinde detect_browser adında bir method oluşturuyoruz ve içine aşağıda bulunan satırları yapıştırıyoruz. (Ben "detectbrowser" olarak isimlendirdim fakat siz başka bir method ismi de verebilirsiniz.) Ve bu oluşturulmuş olduğumuz detectbrowser methodunu da before_action ile çağırıyoruz.

1class ApplicationController < ActionController::Base
2  # Prevent CSRF attacks by raising an exception.
3  # For APIs, you may want to use :null_session instead.
4  protect_from_forgery with: :exception
5
6  before_action :detect_browser
7
8private
9  def detect_browser
10    case request.user_agent
11      when /iPad/i
12        request.variant = :tablet
13      when /iPhone/i
14        request.variant = :phone
15      when /Android/i && /mobile/i
16        request.variant = :phone
17      when /Android/i
18        request.variant = :tablet
19      when /Windows Phone/i
20        request.variant = :phone
21      else
22        request.variant = :desktop
23    end
24  end
25end

Peki, Nasıl Çalışır?

detect_browser çağırıldığında request.variant olması gerektiği gibi ayarlanır. Biz örneğimizde sayfamıza tablet, telefon ya da masaüstünden mi girdiğini tespit ediyoruz.

NOT: before_filter, before_action ile aynı işi yapmaktadır. Rails 5.1 den itibaren de before_filter kullanımdan kaldırılmıştır.

Bu yapı piyasada bulunan bazı cihazların hangi platforma ait olduğunu tespit edemeyebilir. Bu sorun bazı cihaz üreticilerinin, cihazın hangi platforma dahil olduğunu uygun şekilde belirtmemesinden kaynaklanır. Fakat günün sonunda çoğu cihazın hangi platforma dahil olduğunu bu yapı ile tayin edebiliriz.

view katmanı:

Şimdi ise farklı ekranlarda görmek istediğimiz view katmanlarını oluşturalım. View dosyalarını oluştururken isimlendirmeyi aşağıdaki yapıda oluşturuyoruz.

"show.html+platform_adı.erb"

Öncelikle varsayılan olan masaüstü view'imizi oluşturalım. Bu kısımda herhangi bir platform adı belitmemize gerek yok.

show.html.erb

1<div class="jumbotron jumbotron-fluid bg-warning">
2  <div class="container text-dark">
3    <h1 class="display-2">Desktop</h1>
4    <h1 class="display-4">All other users get redirected here.</h1>
5  </div>
6</div>

Telefon için olan görünümü ayarlamak için phone etiketini kullanıyoruz.

show.html+phone.erb

1<div class="jumbotron jumbotron-fluid bg-success">
2  <div class="container text-white">
3    <h1 class="display-2">Phone</h1>
4    <h1 class="display-4">You are running on a smart phone</h1>
5  </div>
6</div>

Tablet ekranları için de tablet etiketini kullanarak view dosyamızı oluşturuyoruz.

show.html+tablet.erb

1<div class="jumbotron jumbotron-fluid bg-danger">
2  <div class="container text-white">
3    <h1 class="display-2">Tablet</h1>
4    <h1 class="display-4">You are running on a tablet.</h1>
5  </div>
6</div>

Evet şu an yapıyı kurmuş bulunmaktayız.

Peki nasıl test edicez?

Google developer tools'u kullanarak sistemi kolayca test edebilirz.

• İlk olarak varsayılan olarak ayarladığımız. Masaüstü görünümü ile karşılaşacağız.

• Diğer platformlardan nasıl göründüğünü görmek için;

CTRL + SHIFT + I

ile google developers tool'u açıyoruz ve ardından görüntülemek istediğimiz platformu resimdeki gibi belirliyoruz.

NOT: Platform değiştirdikten sonra sayfayı yenilemeyi unutmayın! Şu an yaptığımız işlem bir responsive tasarımı simüle etmekten ziyade platform özeline oluşturulmuş biricik bir sayfanın görüntüleme işlemidir.

• Evet, anasayfamızı her platform için farklı şekilde tasarlayıp görüntüledik(view katmanı). Peki bunu controller katmanı için de yapmak mümkün mü?

controller katmanı:

format.html yapıları içinde platformlara özel sorgular yapabiliyoruz. Mesela internet Explorer 6/7 kulanan kullanıcıları tespit edip onlara tarayıcılırını güncellemeleri gerektiğini gösterebiliriz.

1class HomesController < ApplicationController
2  def show
3    @device = "others"
4    respond_to do |format|
5
6        format.html.phone do # phone variant
7          # add code here for phones
8        end
9
10        format.html.tablet do # tablet variant
11          # add code here for tablets
12        end
13
14        format.html.desktop do
15          # add code here for desktops and other devices
16        end
17    end # end respond_to
18  end # end show
19end # end class

View katmanında hangi variantın kullanıldığını tespit etmek istersek?

Bunu yapmanın kolay bir yolu var. Bu örneğe bakarak bunu anlayabilir ve siz de kodunuzu buna benzeterek sorununuzu çözebilirsiniz.

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>ActionPackVariantsExample</title>
5    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
6    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
7    <%= csrf_meta_tags %>
8  </head>
9  <body>
10    <%= yield %>
11
12    <% if request.variant.include? :tablet %>
13      <small>Welcome Tablet User</small>
14    <% elsif request.variant.include? :phone %>
15      <small>Welcome Phone User</small>
16    <% end %>
17  </body>
18</html>

• Anlatımımızın sonuna geldik umarım sizler için faydalı olmuştur. Bir daha görüşümek üzere. İyi çalışmalar. :)

> Kaynakça

• Deepak Singh

• richonrails.com

• coderwall.com