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国的最终和解: YarnWebpack 已经正式成为了 主厨推荐

本文和其他介绍 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。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ACM国际大学生程序设计竞赛题解

ACM国际大学生程序设计竞赛题解

赵端阳//袁鹤 / 电子工业 / 2010-7 / 39.00元

随着各大专院校参加ACM/ICPC热情的高涨,迫切需要有关介绍ACM国际大学生程序设计竞赛题解的书籍。《ACM国际大学生程序设计竞赛题解(2)》根据浙江大学在线题库的部分题目,经过分类、筛选、汇编,并进行了解答(个别特别简单或者特别复杂的题目未选择),比较详细地分析和深入浅出地讲解了解题的方法和用到的算法。题目的类型包括基础编程、模拟、字符串处理、搜索、动态规划、回溯、图论、几何和数学题。 ......一起来看看 《ACM国际大学生程序设计竞赛题解》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具