CoffeeScript và Ruby on Rails

Ruby on Rails (Rails) là một framework web tuân thủ hai nguyên tắc cốt lõi: Convention over Configuration (Ưu tiên quy ước hơn cấu hình) và DRY (Don’t Repeat Yourself – Không lặp lại chính mình). Những nguyên tắc này giúp giảm thiểu mã样板 và tăng tốc độ phát triển.

Kể từ phiên bản 3.1, Rails tích hợp sẵn Asset Pipeline, hỗ trợ tiền xử lý các tài nguyên như JavaScript, CSS thông qua hệ thống preprocessor. Trong đó, CoffeeScript được hỗ trợ mặc định — mọi file có đuôi .js.coffee sẽ tự động được biên dịch sang JavaScript trước khi gửi đến trình duyệt.

Cấu trúc ứng dụng Rails với CoffeeScript

Khi tạo controller mới bằng lệnh:

rails generate controller Tasks

Rails sẽ tự động tạo file app/assets/javascripts/tasks.js.coffee. Nội dung trong file này sẽ được tự động nhúng vào layout nếu bạn sử dụng <%= javascript_include_tag "application" %> trong file app/views/layouts/application.html.erb.

Ví dụ: Xử lý AJAX với CoffeeScript trong Rails

Giả sử bạn có form tạo task với remote: true:

<%= form_with model: @task, remote: true do |f| %>
  <%= f.text_field :name %>
<% end %>

Controller xử lý:

def create
  @task = Task.create(task_params)
end

private

def task_params
  params.require(:task).permit(:name)
end

Tạo file view phản hồi dạng JavaScript: app/views/tasks/create.js.coffee

$('#task-list').append "<li>#{@task.name}</li>"
$('#task_name').val('')

Lưu ý: Rails tự động render file .js.coffee này làm phản hồi cho request AJAX.

CoffeeScript và Node.js

Node.js là nền tảng sự kiện không đồng bộ, rất phù hợp để xây dựng ứng dụng thời gian thực. CoffeeScript có thể chạy trực tiếp trên Node.js nhờ module coffee-script.

Cài đặt và chạy

Cài CoffeeScript toàn cục:

npm install -g coffee-script

Tạo file server.coffee:

http = require 'http'

server = http.createServer (req, res) ->
  res.writeHead 200, { 'Content-Type': 'text/plain' }
  res.end 'Hello from CoffeeScript!'

server.listen 3000
console.log 'Server running at http://localhost:3000/'

Chạy bằng lệnh:

coffee server.coffee

Kết hợp với Express và Socket.IO

Cài các gói cần thiết:

npm install express socket.io coffee-script connect-assets jade

Tạo file app.coffee:

express = require 'express'
http = require 'http'
socketIO = require 'socket.io'

app = express()
server = http.createServer(app)
io = socketIO(server)

app.set 'view engine', 'jade'
app.use express.static('public')

app.get '/', (req, res) -> res.render 'index'

# Xử lý WebSocket
io.on 'connection', (socket) ->
  console.log 'Client connected'

  socket.on 'addTask', (task) ->
    io.emit 'taskAdded', task

server.listen 3000

Phía client (assets/js/app.coffee):

socket = io()

$ ->
  $('#add-btn').on 'click', ->
    task = { name: $('#task-input').val() }
    socket.emit 'addTask', task

  socket.on 'taskAdded', (task) ->
    $('#task-list').append "<li>#{task.name}</li>"

Với connect-assets, bạn chỉ cần dùng helper != js('app') trong Jade để nhúng file đã được biên dịch.

Xử lý trạng thái cộng tác thời gian thực

Sử dụng khái niệm "room" trong Socket.IO để phân nhóm người dùng:

socket.on 'joinRoom', (roomName) ->
  socket.join(roomName)
  socket.room = roomName

socket.on 'newItem', (item) ->
  io.to(socket.room).emit 'itemAdded', item

Phía client đồng bộ dữ liệu khi tham gia phòng:

socket.on 'syncItems', (items) ->
  localStorage.clear()
  for item in items
    localStorage.setItem item.id, JSON.stringify(item)
  renderList()