Get best of the week

Ruby on Rails框架对Fullstack开发的新见解

是否可以认真讨论全栈开发？如果您针对前端和后端的大型框架，那么谈论全栈似乎令人怀疑。我建议fullstack从Ruby on Rails以及更简单的在经典网页上实现交互性的原理的角度来研究该术语。我向您概述了Ruby on Rails框架中提供的或与其相关的前端功能。

图片


Ruby on Rails是一个专注于快速开发的MVC框架，并且非常注意保持项目内的一致性（因此不会“很快”“迅速”出现）。它为后端和前端开发提供了许多工具。在经典的全筹集方向上，由于对其发展的无知和对已用资金滞后的误解，导致了短暂的遗漏。本文的目的是强调全栈方法的发展以及在其中出现了许多有趣的可能性。

Web打包器


Webpacker是Ruby on Rails附带的宝石。

Webpacker提供了Webpack上的包装器：用于连接和启动工作配置的命令。实际上，Webpacker为Ruby on Rails中的前端工作设定了标准，促进了最新JavaScript功能的使用和现代的代码处理原理（结构，模块化，汇编等等）。

Webpacker定义了入门所需的常规配置以及应用程序的结构，从而提高了确定性并简化了不同开发人员对项目的理解。对于JavaScript代码，将分配app/javascript/包含主文件的文件夹app/javascript/packs/application.js。

Webpacker添加的文件和文件夹
config/webpacker.yml
config/webpack/
config/webpack/development.js
config/webpack/environment.js
config/webpack/production.js
config/webpack/test.js
package.json
postcss.config.js
babel.config.js
.browserslistrc
node_modules/
bin/webpack
bin/webpack-dev-server
app/javascript/
app/javascript/packs/
app/javascript/packs/application.js

Webpacker默认在创建新应用程序的过程中启动并执行其设置。您可以使用提供的列表中的 Stimulus，Vue，Typescript或其他配置立即创建应用程序：

rails new myapp --webpack=stimulus

或在创建应用程序后安装其他配置：

bundle exec rails webpacker:install:stimulus

使用Ruby on Rails框架开发Frontend =使用最新的JavaScript开发方法。使用现代JavaScript标准的所有便利都与Ruby on Rails很好地集成在一起。提供了用于使用Webpack的必要配置，这使您可以减少对项目正确组织的干扰，并专注于使用熟悉的环境解决常见的任务。

涡轮链接


Turbolinks是Ruby on Rails附带的JavaScript库。

Turbolinks的优先任务是减轻服务器上的负载并减少导航到应用程序URL时的“接缝”。通常将此功能与SPA进行比较，因为它给人的印象是在浏览器中重新呈现内容，而不是页面之间的普通过渡。

Turbolinks的工作原理：不是通过标准转换到新地址，而是通过ajax在“后台”满足对该地址的请求，在页面之间导航，将响应加载到JavaScript中，然后用新页面替换页面内容。在此过程中，伴随着特殊事件，这些事件使您可以向页面之间的过渡添加功能并返回上一页。例如，
  • 开始过渡到不同的地址：turbolinks:click, turbolinks:before-visit, turbolinks:visit;
  • 新页面的请求的或处理：turbolinks:request-start, turbolinks:request-end;
  • 或在显示新页面的过程中turbolinks:before-render, turbolinks:render, turbolinks:load。

此外，Turbolinks具有进度条，可缓存已加载页面的历史记录，并允许您指定未更新的页面元素。

动作电缆


ActionCable是Ruby on Rails框架的一部分。ActionCable可以使用Web套接字。要列出服务器上的通道，一个文件夹app/channels/与主文件channel.rb，并提供connection.rb。要实现与这些通道的连接-一个app/javascript/channels/包含文件index.js和文件夹consumer.js。

最好立即通过示例来熟悉ActionCable的可能性。只需几步即可实现最简单的Web套接字连接及其帮助。

  1. 创建频道文件

    应用程式/频道/ hello_channel.rb
    # app/channels/hello_channel.rb
class HelloChannel < ApplicationCable::Channel
  def subscribed
    stream_from "hello_1"
  end
end

  2. 创建对此频道的订阅
    应用程式/ JavaScript /频道/ hello_channel.js
    // app/javascript/channels/hello_channel.js
import consumer from "./consumer"

consumer.subscriptions.create({ channel: "HelloChannel" }, {
  received(data) {
    console.log("Data received", data);
    document.body.innerText += `\nHello, ${data.name}!`
  }
})


至Web套接字的连接已准备就绪。

现在，要检查它，我们需要一个简单的页面和一个发送动作。为此，创建一个控制器并将其地址添加到路由中

应用程序/控制器/ hello_controller.rb
# app/controllers/hello_controller.rb
class HelloController < ApplicationController
  def index
    render :html => "Hello page...", :layout => true
  end

  def new
    ActionCable.server.broadcast("hello_1", name: params[:name])
    head 200
  end
end


配置/routes.rb
# config/routes.rb
get "/hello" => "hello#index"
get "/hello/new" => "hello#new"


我们启动应用程序，转到地址127.0.0.1haps000 / hello并打开浏览器控制台，在其中您可以看到通过Web套接字记录来自服务器的消息。

接下来，我们发送行动邮件请求：

curl http://127.0.0.1:3000/hello/new?name=World

并查看/ hello页及其控制台中的输出。

表单助手和Rails-ujs


值得注意的是Ruby on Rails框架的一些不是新的但完善的功能。其中包括表示和表格的助手。帮助程序的最初方便之处在于，它们促进了标记与模型，配置和其他后端组件的集成。与常规标记相比，表单助手的优势在于能够快速列出表单字段，而无需考虑将其绑定到模型属性的详细信息-使用助手，它们之间的关系将自动形成。该片段显示了具有控制器参数和模型属性的绑定表单字段的示例：

应用程序/视图/文章/new.html.erb
<%# app/views/articles/new.html.erb %>
<%#      %>
<%= form_with(model: Article.new) do |f| %>
  <div>
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>
  <div>
    <%= f.label :text %>
    <%= f.text_area :text %>
  </div>
  <%= f.submit %>
<% end %>


配置/语言环境/ ru.yml
# config/locales/ru.yml
#       
ru:
  activerecord:
    attributes:
      article:
        title:  
        text:


配置/ application.rb
# config/application.rb
#        config/application.rb
config.i18n.default_locale = :ru


应用/控制器/articles_controller.rb
# app/controllers/articles_controller.rb
class ArticlesController < ApplicationController

  def new
    #  new   
    # rails -     
  end

  def create
    #        
    @article = Article.create(article_params)

    #    -    ,
    #    url  
    #   ,   
    redirect_to @article
  end

  private

  def article_params
    #      
    params.require(:article).permit(:title, :text)
  end
end


您可以在此处和此处了解有关此示例的更多信息。

Rails-Ujs


Rails-ujs是Ruby on Rails框架针对不引人注目的JavaScript的核心部分。
Rails-ujs为页面元素提供了几个附加选项，这些元素可以更改或扩展其工作方式。

远程选项-设计用于访问服务器（链接，表单）以使请求异步的元素。链接示例：

<%= link_to " ", new_article_path, remote: true %>

要显示此查询的结果，需要进行其他操作，例如，将处理程序添加到远程事件：中ajax:success, ajax:error, ajax:complete。

确认选项-允许您在执行操作之前请求确认操作。

<%= link_to "", article_path(article), method: :delete,
  data: { confirm: ' ,     ?' } %>


Disable_with选项-允许您在操作后停用项目
<%= form.submit data: { disable_with: "..." } %>

此外，Rails-ujs具有几个方便的功能。以下是其中一些：

Rails.fire(obj, name, data)-事件调用函数
Rails.ajax(options)-通过XMLHttpRequest进行包装
Rails.isCrossDomain(url)-验证属于另一个域的
Rails.$(selector)url-通过document.querySelectorAll进行包装您可以

使用以下命令将它们连接到代码

import Rails from "@rails/ujs"

刺激物


刺激-Ruby on Rails开发人员的JavaScript框架。

Stimulus是稀有的框架之一，并且以其自己的方式独特，因为它使用新的JavaScript方法实现前端开发，而它并不试图控制您的所有操作，也不将前端与后端分离。

刺激的基本任务是将处理程序绑定到事件。根据Stimulus的说法，源代码必须放在控制器类上，并且它们的方法应用作处理程序。默认情况下，app/javascript/controllers/具有主文件的文件夹分配给项目中的激励控制器index.js。在这里我们可以添加控制器，为此，我们需要创建一个带有后缀的文件_controller.js，例如，articles_controller.js。接下来，Stimulus加载器将导入此类文件，并将控制器连接到页面上的相应块。

Stimulus中的控制器具有其他功能：初始化控制器对象（initialize），访问块内targets对象（，目标）的助手，将控制器对象附加到块（connect）并从其断开连接（disconnect），访问块的数据属性（this.data.get）。以下是用Stimulus编写的活动/不活动状态块的示例。

app / views / home / show.html.erb
<%# app/views/home/show.html.erb %>

<%#   home   %>
<%#      (  ) %>
<div data-controller="home"
    data-home-active-text="Activated" data-home-deactive-text="Deactivated">

  <%#    text  home  %>
  <p data-target="home.text"></p>

  <%#   action click  home %>
  <button data-action="home#click"></button>

</div>



应用/ javascript /控制器/ home_controller.js
// app/javascript/controllers/home_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  //  
  static targets = [ "text" ]

  initialize() {
    //      
    this.activeText = this.data.get("active-text");
    this.deactiveText = this.data.get("deactive-text");
  }

  connect() {
    //   /
    this.active = this.data.get("active") == "true";
    //  
    this.refresh();
  }

  disconnect() {
    //     
    this.element.setAttribute("data-home-active", !!this.active);
  }

  click() {
    //  
    this.active = !this.active;
    //  
    this.refresh();
  }

  //    
  refresh(){
    //     
    this.element.style.background =   this.active ? "none" : "#EEE";
    //  
    this.textTarget.innerHTML =   this.active ? this.activeText : this.deactiveText;
    //   
    this.textTarget.style.color = this.active ? "black" : "#777";
  }
}


尽管保留了在经典页面上实现交互功能的旧原则，但使用Stimulus的开发方法仍得到了显着改进：源代码的结构以新的方式构建，更改了处理程序与事件的绑定，并提供了其他设备。由于具有这些便利性和简便性，Stimulus框架使您能够快速而有能力地构建大型前端。

此外，值得强调的是，Stimulus与Ruby on Rails的其他功能很好地结合在一起-有用的出现几乎出现在每个捆绑软件中。

刺激和Webpacker


Webpacker提供了用于创建具有连接的激励的应用程序的命令：

rails new myapp --webpack=stimulus

或将其连接到已创建的项目：

bundle exec rails webpacker:install:stimulus

刺激和JavaScript


Stimulus提倡使用现代JavaScript开发原则来实现页面上的交互性。借助Stimulus，前端解决方案以模块化方式构建，OOP用于事件处理程序，并且代码经过精心设计。使用定位工具和激励控制器，可以方便地控制与复杂图形组件的块元素的连接，这些组件来自第三方库或独立编写（日历，自动编译器，列表，树等）。因此，Stimulus是从过时的前端工具切换并通过使用现代纯JavaScript获得必要的生产力的最简单方法之一。

刺激和Ruby on Rails


使用Stimulus推荐的代码结构，您将继续以与Ruby on Rails相同的方式来编写JavaScript。您还可以声明控制器，还可以将操作绑定到方法。借助Stimulus，前端开发变得类似于后端，这使得在本地和本地的工作变得更加容易。

刺激和动作电缆


使用激励控制器中的initialize和connect方法，可以将Web套接字绑定到整个页面而不是整个页面，而不是绑定到单个页面，并精确地处理传入消息。通过独立的频道切换，在一页上组织多个并行流变得越来越容易。

刺激和Turbolinks


一旦Turbolinks加载页面，就会激活刺激；无需其他操作即可将刺激连接到页面的块。

Turbolinks不仅有助于页面的加载，还可以在转换时缓存其内容。当您从历史记录返回到缓存的页面时，与加载新页面时一样，将自动激活Stimulus。如果要在断开控制器与本机的连接之前保存一些值，则可以使用方法disconnect-然后，在返回并连接控制器时，它将能够恢复其最后状态。在第一个使用Stimulus的示例的代码中，您可以看到断开连接（disconnect）时如何将值固定在控制器块的data属性中this.active，而连接（connect）时如何将其提取回来。

页面返回是一种使用应用程序的有用方法。例如，使用表单时，可能有必要在另一页的目录中填写/编辑值，然后返回并选择新数据。

另一个例子：假设我们需要在网络聊天设置页面上编辑或查看值。对于我们来说，当通过对话断开控制器与本机的连接时，记住上一条消息的标识符将非常有用，这样在返回时，首先请求丢失的新消息，然后通过Web套接字打开连接。

因此，页面历史记录的返回可以用作使用Web应用程序的便捷方式。

刺激和助手形式


刺激与标记紧密配合，并在助手的帮助下，数据很容易嵌入html块中，因此，部分数据可以加载到块的data属性中并传递给控制器​​。

应用程序/视图/文章/ show.html.erb
<%#       app/views/articles/show.html.erb %>

<%#      %>
<% article_data = article.attributes
      .slice("id", "created_at", "updated_at", "author", "title").to_json %>

<%#   div    content_tag %>
<%= content_tag :div,
    :data => { controller: :articles },
    "data-articles-attributes" => article_data do %>
  <%# ... %>
<% end %>


app / javascript /控制器/ article_controller.js（代码段）
//   
//   initialize  app/javascript/controllers/articles_controller.js
initialize() {
  this.attributes = JSON.parse(this.data.get("attributes"));
  //   
  // ...
}


刺激和Rails-ujs


使用Stimulus和远程选项，您可以将控制器直接连接到ajax事件并处理查询结果。使用Rails-ujs声明链接，并在其上附加刺激处理程序。

与远程选项和刺激处理程序链接
<%= link_to " ",
  article_path(article, format: :html),
  data: { remote: true, action: "ajax:success->articles#showArticle" } %>


当您单击此链接时，将向rails控制器发出异步Ajax请求以articles_controller.rb执行show操作。收到肯定响应后，将触发一个事件，并将ajax:success调用showArticle控制器中的方法app/javascript/controllers/articles_controller.js

控制器showArticle方法应用程序/ javascript /控制器/ Articles_controller.js
showArticle(e) {

  //      
  const xhr = e.detail[2];

  //    
  this.showFormTarget.innerHTML = xhr.responseText;

  //  
  this.showFormTarget.style.display = "block";
}


下一步是什么？


这些工具与Ruby on Rails框架一起，为全栈开发打开了新视野。而且，所描述的工具相对简单，不需要漫长的尝试-成功项目所需的一切都浮出水面。

借助Ruby on Rails框架，使用现代，快速的全栈开发工具构建Web应用程序，尽情享受吧！

More articles:


All Articles