Explore Rails 5.1 new feature via an simple project
栏目: Ruby on Rails · 发布时间: 6年前
内容简介：Explore Rails 5.1 new feature via an simple project
Rails 5.1即将发布，虽然同Rails 5相比，这只是一个0.1的小版本，但我看来，Rails 5.1的新的功能却非常重要：在JavaScript世界建构和模块管理 工具 突飞猛进了3～4年后（grunt, gulp, browserify, npm, webpack, yarn），一向喜欢稳定的Rubyist们（喜欢折腾的都跑去javascript, go和Elixir了。。），在大神 DHH 和女神 Liceth 以及其他众神的帮助下，迎来了和node.js国的最终和解： Yarn 和 Webpack 已经正式成为了 主厨推荐 。
本文和其他介绍 Rails 5.1 Whatsnew 稍有不同的地方在于，我试图通过一个新的项目探索Rails 5.1的特点。
product hunt 是一个功能简单的Rails应用，仅仅实现了产品的维护，但在功能方面，探索了yarn下对新javascript框架的使用，还有集成测试。
具体来说，使用了比较小众的 milligram CSS框架 ，输入自动提示使用了零依赖的 awesomplete ，使用基于Chrome的集成测试。
Yarn
Yarn同npm相比，优点很多，yml格式的yarn.lock文件显示依赖关系清晰易读，安装速度快，完全不需要再使用asset pipe line对已有的javascript模块进行二次封装，省事省力，省开新gem。环境准备也相当容易，在国内（必须）用 淘宝源 即可。
brew install yarn yarn config setregistry 'https://registry.npm.taobao.org' |
设置完毕后，就可以直接使用yarn添加依赖了。
yarn add milligram |
使用CSS前端框架，直接引用即可：
/* app/assets/stylesheets/application.css */ *= require milligram |
// app/assets/stylesheets/milligram.sass @import milligram/src/Color @import milligram/src/Base @import milligram/src/Button |
使用javascript库多做一步：
// app/assets/config/manifest.js //= link awesomplete/awesomplete.js |
<%#app/views/products/_form.html.erb%> <%= javascript_include_tag "awesomplete", async: true -%> |
Webpack
Webpack是可选的，如果是 majestic monolith 的Rails应用的话，肯定不会用，但是现代的前后端分离风潮下，至少Rails 5.1让这个前后端分离变得无比容易，比之前的 react_on_rails 方案容易好多。
jQuery的依赖去除
由于Javascript一众MVC框架的崛起，Rails 5.1在前端方案上给予了开发者更多的选择权，我试了在没有jquery的情况下开发使用 vanilla-js 开发，虽然时不时还需要查一下 对应jQuery的用法 ，但这样做还是值得的，微信小程序的卖点就是即用即走，但如果能将网页做到轻量，何尝不是即用即走？况且网页发布还不用走审核流程。
在Rails下使用vanilla js其实也不是什么都没得用， rails-ujs 始终是存在的，所以还是可以直接使用Rails.ajax方法来发起远程调用：
window.addEventListener('input', function (e) {
if (e.target.id == "product_name") {
Rails.ajax({
type:'GET',
url: e.target.getAttribute('data-url'),
dataType: 'script'
});
}
}, false);
|
System Test
Rails 5.1对集成测试也有了官方方案，现在出厂即可跑集成测试。集成测试在测试自动提示这样的特性的时候还是很方便的，官方出厂的默认配置基于selenium-webdriver驱动的Chrome，使用之前需要安装驱动：
brew install chromedriver |
require 'application_system_test_case'
class NewProductTest < ApplicationSystemTestCase
test 'create a new product' do
visit '/products/new'
fill_in 'product_name', with: 'L'
page.has_selector?('ul > li > mark')
fill_in 'product_name', with: 'Le Wagon'
page.has_no_selector?('ul > li > mark')
fill_in 'product_tagline', with: 'Change your life: Learn to code'
click_button 'Create Product'
# Should be redirected to Home with new product
assert_equal product_path(Product.last), page.current_path
assert page.has_content?('Change your life: Learn to code')
end
end
|
这里第一次在product_name填入‘L'，应该有自动完成的提示出现，完全输入后，则没有，这些都可以通过Capybara的浏览器DSL做检测，从而在集成测试中一并测试好，相比之前的单个controller测试，效率提高不少。
其他特性。
其他的特性：Encrypted secrets、Parameterized mailers、Direct & resolved routes等，参见 Rails 5.1 Release notes ，演示项目中没有包括这些功能，这里就略过了。
本文不足
测试方案还想使用 phantomjs和poltergeist ，但是始终没有成功，有兴趣的同学可以尝试并提Pull Request。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- Explore Rails 5.1 new feature via an simple project
- Explore Rails 5.1 new feature via an simple project
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
