Sử dụng gem Breakfast để tích hợp Frontend Framework vào dự án Rails
Bài đăng này đã không được cập nhật trong 2 năm
Rails + Brunch.io = ❤️
Breakfast
Breakfast là gem dùng để kết hợp công cụ Javascript hiện đại vào dự án Rails của bạn. Được cung cấp bởi Brunch.io. Nhận hỗ trợ cho cú pháp & mô-đun ES6, live reload cho CSS, JS, và HTML và hỗ trợ Yarn. Với Breakfast, chỉ mất một vài phút là đã tích hợp được một frontend framework mới vào dự án rồi.
Brunch.IO
Brunch (breakfast-lunch) là sự kết hợp đầy ngẫu hứng của một bữa ăn trễ hơn bữa sáng, nhưng cũng chưa đến giờ ăn trưa. Nói cách khác, đó là bữa tiệc dành cho những người yêu thích cuộc sống phóng khoáng tận hưởng “một ngày trễ” theo cách tự do tự tại. À, hình như mình nhầm. Brunch cũng giống như Gulp hoặc Grunt, đều giúp ta chạy các tác vụ một cách tự động. Nhưng có điểm khác đó là có tốc độ nhanh hơn nhưng config đơn giản hơn nhiều. Và với Brunch, bạn chỉ cần 3 câu lệnh đơn giản:
brunch new để tạo project mới
brunch build để build
brunch watch để live-compile
Các tính năng của Breakfast
Cú pháp ES6
Nhận hỗ trợ cho tất cả các cú pháp ES6 mới. Imports, exports, arrows, classes đều làm việc được với Breakfast.
import HelloWorld from "./hello"
let App = {
init() {
HelloWorld.sayHello();
}
};
module.exports = App;
Tích hợp Yarn
Yarn là công cụ quản lý thư viện javascript mã nguồn mở tốc độ cao, tin cậy và bảo mật nhằm thay thế NPM (Node Package Management). Được hình thành bởi các kỹ sư Facebook, Google, Exponent và Tilde, và đã được sử dụng thực tế mức Production tại các công ty trên. Và tin tốt là nó được hỗ trợ ở đây. Bạn sẽ có thể quản lí các dependencies của dự án với Yarn, và không cần phải copy hoặc download các các scripts mà không thể quản lí được version của nó vào thư mục vendor nữa.
Live Reloading
Browser sẽ tự động reload CSS, JS, HTML mỗi lần bạn save. Và việc build lại code sẽ được Brunch xử lí một cách nhanh gọn. Không còn cảnh chuyển sang trình duyệt rồi phải Reload trang nữa 
Updates in the browser
Xem các cập nhật về thông tin build hoặc lỗi ngay trên trình duyệt. Điều này giảm được kha khá thời gian chuyển qua lại editor để tìm chỗ sai.
Bắt đầu cài đặt nào
Dependencies
Breakfast hiện tại chỉ hỗ trợ Rails 5.0+. Bạn cũng cần phải cài đặt Node.js và Yarn.
Installation
Thêm breakfast vào Gemfile
gem "breakfast"
Chạy bundle install để cài đặt.
Sau đó chạy bộ generator của nó:
rails generate breakfast:install
# Sample Output
$ rails generate breakfast:install
create brunch-config.js
create package.json
create app/frontend/css
create app/frontend/images
create app/frontend/js
create app/frontend/vendor
create app/frontend/js/app.js
create app/frontend/css/app.scss
create app/frontend/images/.gitkeep
create app/frontend/vendor/.gitkeep
run yarn install from "."
Mặc định, Breakfast sẽ đặt assets ở folder app/frontend/, nhưng nếu không thích, bạn vẫn có thể thiết lập lại, bằng cách sửa trong file brunch_config.js
# joinTo options will need to have their locations modified
files: {
javascripts: {
joinTo: {
'app.js': /^path\/to\/new\/folder\/js\//,
'vendor.js': /^(path\/to\/new\/folder\/js\/)/,
}
},
...
...
...
# The watched path also needs to be updated
paths: {
watched: [
"path/to/new/folder"
]
}
Và đổi luôn cả thiết lập Breakfast:
# In config/environments/development.rb
config.breakfast.view_folders = [Rails.root.join("path", "to", "new", "folder")]
Bắt đầu sử dụng
Khởi động Rails server, và bạn sẽ thấy dòng sau ở logs:
info: compiled 6 files into 3 files in 808ms
Lần build đầu tiên này nó sẽ kết hợp JS, CSS của cả dự án đã được mình config sẵn trong file brunch-config vào các file tương ứng: app.js, vendor.js, app.css
Để load những file này vào app, ta sẽ sử dụng javascript_include_tag,
stylesheet_link_tag, breakfast_autoreload_tag.
Chỉnh file application.html.erb lại như sau:
# In application.html.erb
<head>
<%= stylesheet_link_tag "app.css" %>
<%= javascript_include_tag "vendor.js" %>
<%= javascript_include_tag "app.js" %>
<script>require('frontend/js/app').init();</script>
<%= breakfast_autoreload_tag %>
</head>
breakfast_autoreload_tag sẽ cài đặt tính năng auto reloading trên môi trường development.
Tiếp theo đến file app/frontend/js/app.js.
Ban đầu khi được generate ra thì nó trông như thế này:
const App = {
init() {
}
};
module.exports = App;
Dòng require('frontend/js/app').init() ở trên sẽ load file này vào app và thực thi funtion init().
Để xem cách modules hoặc động, tạo ra một file khác, lấy tên là app/js/frontend/hello.js chẳng hạn:
const HelloWorld = {
sayHello() {
console.log("Hello World");
}
}
module.exports = HelloWorld;
Sau đó sửa lại app.js một chút:
// Relative Path
import HelloWorld from "./hello"
// Alternative: Full path
// import HelloWorld from "frontend/js/hello"
const App = {
init() {
HelloWorld.sayHello();
}
};
module.exports = App;
Bây giờ qua trình duyệt và xem nào, sẽ xuất hiện dòng Hello World ở dưới console.
Vậy là bạn đã tích hợp được Breakfast vào trong Rails rồi đấy.
Tích hợp Frontend Framework vào dự án
Tiếp theo bạn đã có thể tích hợp frontend framework vào dự án. Ở trang chủ của Breakfast có hướng dẫn kết hợp với React, Vue, Elm, Bootstrap. Ở bài này, mình sẽ tích hợp VueJS.
Cài đặt Vue
Chạy lệnh sau ở folder gốc của project:
yarn add vue
yarn add --dev vue-brunch vueify postcss-brunch babel-plugin-transform-runtime
Vậy là bạn đã cài các thư viện cần thiết cho Vue rồi.
Tiếp theo là expose Vue globally:
Ở file brunch-config.js, thêm đoạn dưới sau vào phần npm:
npm: {
globals: {
Vue: 'vue/dist/vue.common.js'
}
}
Sau đó phải đảm bảo là Templates Option đã có mặt trong file brunch-config
files: {
javascripts: {
'app.js': /^app\/frontend\/js\//,
'vendor.js': /^(?!app\/frontend\/js)/
}
...
// Make sure templates is there. New installs of Breakfast
// should have this by default.
templates: {
joinTo: 'app.js'
}
}
Taọ thử 1 Vue component:
Tạo folder app/frontend/js/components. Và tiếp theo, tạo file Hello.vue:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello from Vue!"
}
}
}
</script>
Sửa lại app/frontend/js/app.js để require component trên:
import Hello from './components/Hello';
// Import this if you wish to use CSS in your .vue files.
// See section below for more information.
import "vueify/lib/insert-css";
let App = {
init() {
$(document).on("turbolinks:load", () => {
new Vue({
el: '#root',
components: {
'hello': Hello
}
})
});
}
}
Và thêm nó vào view:
<div id="root">
<hello></hello>
</div>
Nếu có sử dụng Turbolinks, sửa lại file app.js 1 tẹo:
<div id="root">
<hello></hello>
</div>
Vậy là xong, chuyển sang Browser và xem kết quả.
Nếu bạn có thắc mắc gì thì đừng ngại comment ngay dưới nhé
Nguồn: http://breakfast.devlocker.io
All rights reserved
