Setting up ember.js with rails

Ember.js là một client-side framework với mục tiêu tập trung cho phát triển các ứng dụng single-page application. Đi theo khái niệm Convention Over Configuration, Ember cũng giống như rails giúp cho các lập trình viên tập trung vào vấn đề thật sự đó là trương trình tạo ra: the application. Công cụ được sử dụng nhiều nhất để chạy một Ember ngày nay đó là ember-cli. Ember-cli là một công cụ với những tính năng tuyệt vời cho phát triển ứng dụng với ember.js như asset pipeline và ES6. Nhưng ngay cả khi với những tiện ích mà ember-cli đem lại như vậy, bạn chỉ muốn giữ lại workflow và sử dụng Rails framework để chạy ember.js Bài viết này hôm nay sẽ giới thiệu và hướng dẫn cài đặt và sử dụng Ember trong Ruby on rails application.

Installtion##

Để cài đặt ember trong ứng dụng của bạn, chỉ đơn giản là khai báo thêm vào file Gemfile.

source 'https://rubygems.org'
source 'https://rails-assets.org'

gem 'rails', '4.2.0'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'ember-rails'
gem 'ember-source', '~> 1.9.0'
gem 'rails-assets-jquery'

sau đó chạy lại bundle installl

Setting up the project##

Bây giờ chúng ta có thể tạo ra Ember app bằng câu lệnh rails generate. Với tùy chọn -n để chỉ ra namespace cho ứng dụng của bạn

$ rails g ember:bootstrap -n MyApp
    insert  app/assets/javascripts/application.js
    create  app/assets/javascripts/models
    create  app/assets/javascripts/models/.gitkeep
    create  app/assets/javascripts/controllers
    create  app/assets/javascripts/controllers/.gitkeep
    create  app/assets/javascripts/views
    create  app/assets/javascripts/views/.gitkeep
    create  app/assets/javascripts/routes
    create  app/assets/javascripts/routes/.gitkeep
    create  app/assets/javascripts/helpers
    create  app/assets/javascripts/helpers/.gitkeep
    create  app/assets/javascripts/components
    create  app/assets/javascripts/components/.gitkeep
    create  app/assets/javascripts/templates
    create  app/assets/javascripts/templates/.gitkeep
    create  app/assets/javascripts/templates/components
    create  app/assets/javascripts/templates/components/.gitkeep
    create  app/assets/javascripts/mixins
    create  app/assets/javascripts/mixins/.gitkeep
    create  app/assets/javascripts/adapters
    create  app/assets/javascripts/adapters/.gitkeep
    create  app/assets/javascripts/codeplane.js
    create  app/assets/javascripts/router.js
    create  app/assets/javascripts/store.js
    create  app/assets/javascripts/adapters/application_adapter.js

Trong file app/assets/javascripts/application.js, xóa đi cái khai báo cho jquery-ujs và turbolinks và khai báo ember app

//= require jquery
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require ./my_app

Chúng ta cũng phải tạo một controller/action để khởi động Ember app EmberController#bootstrap và view trống tương ứng app/views/ember/bootstrap.html.erb

class EmberController < ApplicationController
  def bootstrap
  end
end

Tiếp theo là setup ứng dụng rails routes. Ember có hỗ trợ history.pushState, có nghĩ là mỗi khi bạn truy tới một route, thanh địa chỉ URL sẽ thay đổi thay vì sử dụng cấu trúc #!. Bạn sẽ cần một khai báo route để bắt tất cả các route này bằng cánh khai báo trong config/routes.rb như sau

Rails.application.routes.draw do
  root "ember#bootstrap"
  get "/*path" => "ember#bootstrap"
end

Cuối cùng chúng ta có thể tạo view cho chương trình app/assets/javascripts/templates/index.hbs và xem chúng hoạt động

<h1>Ember</h1>
<p>Fuck yeah! It works!</p>

Cuối cùng chạy ứng dụng bằng rails server và trên http://localhost:3000, bạn sẽ thấy được kết quả trả về tương tự như dưới đây! Trên đây là giới thiệu về cài đặt và chạy một ứng dụng Ember.js cùng với rails framework. Trong bài viết tiếp theo sẽ trình bày tiếp về xây dựng một ứng dụng tương tác với Ember.js và Rails, chi tiết hơn về Ember hoạt động như thế nào trên rails và viết test cho Ember app