Why F2E should learn Rails?

xdite, Rocodev

Why F2E should learn Rails?

你所不知道的 Rails 前端優勢

xdite xdite@rocodev.com

Hi

xdite

Ruby on Rails

 

Fulltime Business Developer

Poster from movie “Fulltime Killer”

兩個重點

Best Practicss for
Speeding Up Your Website

最佳實踐

Asset Pipeline

http://xdite.github.io/jsdc-2013-slide/

在 JSDC 講 Rails ?

明明 node.js 比較快

速度比較表

Web 框架 併發模型 531 req / s
Rails Multiple Process 531 req / s
Sinatra Multiple Process 576 req / s
Sinatra::Synchrony Fibers 1692 req / s
Goliath Fibers 1924 req / s
Cramp Event IO 3516 req / s
Node.js Event IO 3100 req / s

node.js 比 Rails 快了 6

那…

現場調查

Best Practicss for
Speeding Up Your Website

速度比較表

Web 框架 併發模型 531 req / s
Rails Multiple Process 531 req / s
Sinatra Multiple Process 576 req / s
Sinatra::Synchrony Fibers 1692 req / s
Goliath Fibers 1924 req / s
Cramp Event IO 3516 req / s
Node.js Event IO 3100 req / s

這張表講的是

「網頁產生速度」

回到正題

Scaling Websites

Priciples

Front-end performance

7s -> 1s

SQL Query Performance

500ms -> 50ms

Method Performance

50ms -> 10ms

Programming Language Performance

5ms -> 2ms

Webpage 產生速度 =

SQL Query speed +

Method speed +

Programing Language speed

比較語言和框架本身的速度沒什麼意義

能夠壓榨出來的時間

Frontend(7s - 1s ) > Backend( 550ms - 62ms)

What can Rails do ?

Speed Frontend Performance by default

(1) Parallel Download

Easy to apply Parallel Download

The HTTP/1.1 specification suggests that browsers download no more than 2 components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel.

Easy to imeplement parallel download

config.action_controller.asset_host =    "http://asset%d.example.com"  <img src="http://asset1.example.org/demo4.jpg"><img src="http://asset2.example.org/demo3.jpg"><img src="http://asset3.example.org/demo2.jpg"><img src="http://asset4.example.org/demo1.jpg">

4 支 CSS 開 8 秒 => 4 支開 2

(2) CDN

加速下載

擋台灣鋤頭鄉民

Easy to apply CDN

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance.

Easy to imeplement parallel download

config.action_controller.asset_host =    "http://cdn%d.example.com"  <img src="http://cdn1.example.org/demo4.jpg"><img src="http://cdn2.example.org/demo3.jpg"><img src="http://cdn3.example.org/demo2.jpg"><img src="http://cdn4.example.org/demo1.jpg">

CDN invalid 問題

<link href="/assets/application.css" type="text/css" />

CDN invalid 問題

<link href="/assets/application-v1.css" type="text/css" /><link href="/assets/application-v2.css" type="text/css" /><link href="/assets/application-v3.css" type="text/css" />

Based on TIMESTAMP, auto INVALID

<link href="/assets/application-1b7a795f9.css" type="text/css" /><link href="/assets/application-ca29aba87.css" type="text/css" /><link href="/assets/application-72ae3ec5b.css" type="text/css" />

(3) minimal HTTP Request

Too many CSS

<link href="/assets/bootstrap.css" type="text/css" /><link href="/assets/my-homepage.css" type="text/css" /><link href="/assets/user-account.css" type="text/css" />

application.css

//= require_self//= require bootstrap//= require my-homepage//= require user-account.css//= require jquery.fullcalendar

minimal HTTP Request

application.css

<link href="/assets/application-1b7a795f9.css" type="text/css" />

(4) CSS Sprite

把幾十張小圖打包成一張

img

Powered by SCSS & Compass

@import "icon/*.png"; $icon-sprite-dimensions: true;@include all-icon-sprites;

(5) ETag

Auto ETag

ETag , is part of HTTP, the protocol for the World Wide Web. It is one of several mechanisms that HTTP provides for web cache validation, and which allows a client to make conditional requests. This allows caches to be more efficient, and saves bandwidth, as a web server does not need to send a full response if the content has not changed.

Auto ETag

# lib/rack/etag.rbdef call(env)  status, headers, body = @app.call(env)  parts = []  body.each { |part| parts << part.to_s }  headers['ETag'] = %("#{Digest::MD5.hexdigest(parts.join(""))}")  [status, headers, parts]end

通通第一天就內建

That’s why you should use Rails

Rails 還能作什麼?

Package Management

Framework 升級的痛

rm -rf boostrap-2.2cp -rf ~/Downloads/bootstrap bootstrap-2.3

Gemfile

gem "jquery"gem "font-awesome"gem "tinymce-rails"gem "bootstrap-rails", "2.2.0"

Upgrade Asset

gem "jquery"gem "font-awesome"gem "tinymce-rails"gem "bootstrap-rails", "2.3.0"

Benefit

Directory Management

(A) by controller

寫在一支 CSS 裡

.article h2  { font-size: 20px;}.user .name { font-weight: bold; }.comment p { line-height: 1.2em; }

寫在以 controller 命名的 CSS 裡

//= require article//= require user//= require comment

(B) by function

傳統收納方式(等於沒有收納)

目錄結構

傳統收納方式

改良後的收納方式

Bootstrap 綜合密技

Bootstrap Hack (1)

//= require bootstrap-wrapper//= require awesome-bootstrap-theme//= require awesome-bootstrap-theme-override

Bootstrap Hack (2)

@import "bootstrap-setting";@import "twitter/bootstrap/variables";@import "bootstrap-override";

Bootstrap Hack (3)

// puts your override variable here// $baseFontSize:  13px;// $navbarHeight:  50px; $navbarInverseLinkColor: #ddd;$navbarInverseBackground: #222;$navbarInverseBackgroundHighlight: #610403;

制服

Flat Style ~

And there’s more in Rails 4

Live Streaming

總結

寫程式是為了讓自己

能夠生活得更快樂

 

If you were coding in Ruby, you'd be HOME by now.

我先下班了~

歡迎一起學習 Rails!

Rails 101 新版

img

http://leanpub.com/rails-101

Ruby 2.0.0 + Rails 4.0

JSDC2013 ($5 USD coupon)

另外一本

http://leanpub.com/rails-fnd

Rails Fronend Practices

Coming Soon…

Thanks

Fork me on Github