[v] 關於 Rails 的前端

我對 Rails 前端的部分了解不深,試著寫寫看目前的理解,有錯請多多指教,謝謝。

前端基本上就是 HTML, CSS, JavaScript.

HTML 的部分,Rails 內建的 template engine 是 erb, 副檔名是 .html.erb, 另外兩個 template engines 是 slim 和 haml. 孰優孰劣可以參考下面兩篇:
http://stackoverflow.com/questions/11390512/erb-haml-or-slim-which-one-do-you-suggest-and-why
https://speakerdeck.com/lvrug/erb-vs-haml-vs-slim-randy-schifflin

CSS 的部分,開新的 Rails 專案時,Gemfile 裡面已經有 "sass-rails" gem 了,把 CSS 檔案的副檔名 .css 改成 .css.sass 就寫 SASS 語法,改成 .css.scss 就寫 SCSS 語法,Rails 會因為副檔名而自己去認裡面對應的語法。

JavaScript 的部分,開新的 Rails 專案時就已經把 jQuery 裝好了,所以 Gemfile 裡面已經有 "jquery-rails" gem, 而在 application.js 中也已經有:

//= require jquery

//= require jquery_ujs

所以開好 Rails 專案就可以直接開始寫 jQuery 了。
官網 jQuery plugins 的文件整理得相當清楚,可以多加利用。
http://plugins.jquery.com/

https://github.com/rails/jquery-rails
http://stackoverflow.com/questions/13481996/how-can-i-use-jquery-in-rails-3-2-8
https://pragmaticstudio.com/blog/2015/3/18/rails-jquery-ajax

Bootstrap 的部分,如果安裝了 "bootstrap-sass" gem, 因為 Bootstrap 支援 CSS 和 JavaScript, 所以可以在 application.css.scss 裡面加入下面兩行來載入 CSS 會用到的 Bootstrap 元素,比如 Grid.

@import "bootstrap-sprockets";
@import "bootstrap";

要注意的是@import "bootstrap-sprockets"; 要在 @import "bootstrap"; 之上,bootstrap icon fonts 才能正常顯示。

接著,在 application.js 中加入

//= require bootstrap

或是

//= require bootstrap-sprockets

會載入 JavaScript 會用到的 Bootstrap 元素

要注意的是,不要同時 include bootstrap-sprockets 及 bootstrap 進 application.js
bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts.

也就是說,在 application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

而在 application.js 中,只需要

//= require bootstrap

或是

//= require bootstrap-sprockets

兩者擇一

https://github.com/twbs/bootstrap-sass
https://github.com/twbs/bootstrap-sass/issues/829#issuecomment-75153827

如果只要一部分的 Bootstrap 元素,也可以只載入要用到的部分。

//= require bootstrap/dropdown

//= require bootstrap/alert

簡單的介紹可以看這篇 https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1/

要特別注意的是,所有的 JavaScript plugins 都需要先 include jQuery.
http://getbootstrap.com/getting-started/

application.css.scssapplication.js 是 manifest 檔,至於要怎麼寫非 manifest 的 .js,我還不是很清楚,先跳過。

總結,我對於 Rails 前端的理解是:

  1. 把所有的 layout 都當成一般的 HTML 檔來寫,所以裡面會有 DOCTYPE, head, body ...... 等基本的 HTML 結構。
  2. 在 body 中透過 render 來載入 partial, 透過 yield 來載入對應到的其他 .html.erb 頁面。
  3. 在這些其他頁面中寫 HTML, 並用 SCSS 和 JavaScript/jQuery 語法來修飾。
  4. 載入網頁的時候,沒特別在 controller 指定 layout 的網頁就用 application.html.erb, 有指定就用指定的 layout。接著依照 layout 中代碼的先後順序載入。以教材而言,就是先 render partial, 接著透過 yield 載入對應的頁面。

至於 JS 框架要怎麼和 Rails 做結合呢?等我有時間玩 Vue.js 後再寫文章分享 : )