vi
new
+1
Avatar
Hoàng Mirs @hoangmirs
783 38 18
Đã đăng vào thg 4 2, 2017 2:45 CH 5 phút đọc
254

Sử dụng gem Breakfast để tích hợp Frontend Framework vào dự án Rails

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

JavaScript Framework VueJS Ruby on Rails breakfast brunch

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí