The document discusses frontend frameworks for Rails 6, comparing the asset pipeline and webpack. It covers problems with the asset pipeline like slowness and lack of ES6 support. Webpack solves these issues through its module bundler capabilities and loaders/plugins. Stimulus.js is presented as a simple option to manage state in the browser via data attributes. React with Redux is discussed as another option but challenges mixing their state with Rails are noted. Integrating frameworks like React, Angular, Vue, Stimulus and Svelte with Rails via Webpacker is mentioned. Examples of React/Redux and Stimulus usage are provided.

1. 从 Assets Pipeline 到 Webpack，
Rails 6 的前端⽅方案们
From assets pipeline to web pack,
the Rails 6 frontend frameworks
过纯中 @Eric-Guo

2. 演讲路路线图 - Talk Roadmap
The Rails 6 new FrontEnd choice Asset Pipeline
WebpackCore FE problem
View
Reuse the view
Server Side Rendering
React Component
Jquery plugin
Solve mix problem
Turbolink
State
Sync State
form_encode
API
Redux
DOM
stimulus.js
Bootstrap
My Framework
React
stimulus.js
Bootstrap
CoreUI
Real code review
SignIn form
(turbolink)
Chart drill down
(echart with stimulus.js)
Tableau style
(react-pivottable)
Mix them all
Rails as API onlyJWT

3. -https://guides.rubyonrails.org/asset_pipeline.html
The asset pipeline provides a framework
to concatenate and minify or compress
JavaScript and CSS assets.

4. -https://guides.rubyonrails.org/asset_pipeline.html
The asset pipeline provides a framework
to concatenate and minify or compress
JavaScript and CSS assets.

5. concatenate
Processors (Autoprefix)
Transformers (CoffeeScript)
compress
Compressors (Uglify)
https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md

6. Assets pipeline usage
//= require activestorage
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

7. Assets pipeline usage optimization
https://github.com/thape-cn/website/commit/dff05e24c59e5d62f7de8b33e9cebd02a2861247#diff-a9c3bd311eab80c9ebe6a69830f9ad02L20
//= require activestorage
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require admin/infos
//= require blackapp

8. Assets Pipeline Problem
• JS wrap gem
• Webpack solution
• Yarn usage without webpack
• https://github.com/Eric-Guo/product_hunt
• Slowness
• Do not use require require_tree and require_self in your SASS/
SCSS files.
• ES 6 Support
• Sprocket 4 and ruby-babel-transpiler
https://ruby-china.org/topics/38832#为什什么要使⽤用%20webpacker

9. solution

10. https://webpack.js.org/concepts/
Webpack is a static module bundler for
modern JavaScript applications.

11. Webpack

12. Webpack concept
•Dependency graph
•Entry
•Output
•Loaders
•To load other file type, except .js
•style-loader: Add CSS to the DOM by injecting a <style> tag
•css-loader: interprets @import and url() and resolves them
•sass-loader: compiles Sass to CSS, using Node Sass
•vue-loader: .vue to .js, .css, .css.map
•Plugins
•serve the purpose of doing anything else that a loader cannot do! (yes, it’s on the
official document!)

13. Webpacker

14. WEBPACKER QUICK LOOK
• Start in Rails 5.1+
• Current V4 same version of Webpack 4
• Guide to switch from Sprockets to Webpacker
• The missing guides
• https://github.com/rails/webpacker/tree/master/docs

15. const importAll = (r) => r.keys().map(r)
importAll(require.context('images', false, /.(png|jpe?g|svg)$/i));
import "regenerator-runtime/runtime";
import "@stimulus/polyfills";
import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;
import "bootstrap"
import "@coreui/coreui"
Legacy application.js support IE11
The @ scope indicates package ownership
import "stylesheets/application"

16. Legacy application.scss file
~ to tell webpack that this is not a relative import:
import "stylesheets/application"
@import "variables";
@import "~@coreui/coreui/scss/coreui";
@import "custom";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
# Extract and emit a css
# config/webpacker.ymls
extract_css: true

17. Assets Pipeline
Webpack
Javascript source file app/assets/javascripts
Sass source file app/assets/stylesheets
Output folder public/assets/
Javascript source file app/javascript/
Sass source file app/assets/stylesheets (same)
Output folder public/packs/

18. Assets Pipeline
Webpack
Sprockets concatenates
Webpack adds unique dependencies
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

19. Webpacker official frontend framework
• React
• Angular with TypeScript
• Vue
• Elm
• Stimulus
• Svelte
• CoffeeScript
• Bootstrap
• Erb
https://github.com/rails/webpacker#integrations

20. My frontend framework
• React
• Redux
• Taro
• Stimulus
• Easy integrating Turbolinks and echarts
• Middle code solution
• Bootstrap
• CoreUI / Cybros as backend
• Low code solution

21. cybros / Bootstrap login with JWT AUD
https://github.com/jasl/cybros_core/pull/16/commits/fdbf67161c32b54864a0f7f581b4285aa16b0c5c
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function() {
const sign_form = document.getElementById("user-sign-in")
if (sign_form != null) {
sign_form.addEventListener('ajax:beforeSend', function(event, settings) {
const xhr = event.detail[0];
xhr.setRequestHeader('JWT_AUD', 'cybros_core');
});
}
});

22. cybros_core / Bootstrap State
• Cybros not integrated jQuery
• Low code means low level code instead of small amount of code 😂
• Need to fully understanding @rails/ujs
• Need reading ujs source code
• Many js component available
• Bootstrap: Modals, Toast, Dropdown, Navbar, Carousel, Popover
• CoreUI: Aside menu
• Most solid/popular CSS framework

23. Stimulus with echarts

24. Stimulus with Turbolinks is SPA
<div class="row">
<div class="col-lg-12">
<div id="project-milestore-chart"
data-controller="project-milestores"
data-action="resize@window->project-milestores#layout"
data-project-milestores-x_axis="<%= @deptnames_in_order.to_json -%>"
data-project-milestores-milestore_rate="<%= @milestore_rate.to_json -%>"
style="width: 100%;height: 350px;">
</div>
</div>
</div>

25. 1 import { Controller } from "stimulus"
2
3 let projectMilestoreChart;
4
5 export default class extends Controller {
6 connect() {
7 projectMilestoreChart = echarts.init(document.getElementById('project-milestore-chart'));
8
9 const xAxisData = JSON.parse(this.data.get("x_axis"));
10 const milestoreUpdateRate = JSON.parse(this.data.get("milestore_update_rate"));
11
12 const option = {...
13 };
14
15 {…}
16
17 projectMilestoreChart.on('click', drill_down_contract_detail);
18
19 projectMilestoreChart.setOption(option, false);
20 setTimeout(() => { projectMilestoreChart.resize(); }, 200);
21 }
22
23 layout() {
24 projectMilestoreChart.resize();
25 }
26
27 disconnect() {
28 projectMilestoreChart.dispose();
29 }
30 }
function drill_down_contract_detail(params)

26. $(“#project-milestore-modal")
.html(‘<%= j render partial: "modal", locals: { rows: @rows } -%>');
$("#project-milestore-modal").modal();
{
if (params.componentType === 'series') {
if (params.seriesType === 'line') {
const department_name = xAxisData[params.dataIndex];
const month_name = $('#month_name').val();
const sent_data = { department_name, month_name };
const drill_down_url = '/report/project_milestore/detail_drill_down';
$.ajax(drill_down_url, {
data: sent_data,
dataType: 'script'
});
}
}
}
Enable the drill down echart
function drill_down_contract_detail(params)

27. Stimulus.js / eChart State
• Writen by Sam Stephenson (who write prototypejs 15 years
ago)
• No UI render support
• SSR (Server Side Rendering using Rails render method)
• Easy to integrated 3rd party js package.
• 99.9% reliable with Turbolink.
• Minority population

28. Where are our STATE now?
The Rails 6 Asset Pipeline
Webpack
View
partial render
React
jQuery plugin
Turbolink
State
form
Restful API
Redux
DOM
stimulus.js
Bootstrap
React
stimulus.js
Bootstrap
CoreUI
(turbolink)
(echart with stimulus.js)
(react-pivottable)
JWT

29. Rails MVC
• State at DB
• Stateless in Browser
• No ajax

30. React with Redux
Store
MiddlewareUI
Action
Action
New
state
Redux-Thunk
Redux-Saga

31. Store
MiddlewareUI
Action
Action
New
state
State in
Browser
State in DB
Mix the React and Redux with Rails
will cause two state problem

32. React in Rails options
• Do not using Redux
• react-rails gem
• See bluedoc.io as example ❤ 李李华顺
• Using Rails as API only.

33. React-Redux with Rails API
• Book code
• React 进阶之路路 Blog 实现
• https://github.com/Eric-Guo/the-react-way-in-blog
• Frontend
• Todo App example
• https://github.com/Eric-Guo/react-redux-loginform/commits/pangu_backend
• Backend
• devise-jwt
• https://github.com/Eric-Guo/rails-pangu/tree/react-redux-loginform-backend

34. My Rails 6 Frontend Framework
Options Pro Cons State Storage
jQuery Quick and Short No state concept DOM
Stimulus.js Simple and modest Less popular data-*
React High salary Hard to learn Redux
Taro
Wechat MP+H5+React
Native
Unknown Redux
jQuery
Stimulus.js
React
Taro

35. jQuery
Stimulus.js
React
Taro
Mix them all

36. Reference
• RailsConf 2019 - Webpacker vs Asset Pipeline by Danielle Gordon
• webpack (1)——核⼼心概念的理理解
• Rails 6 template
• https://github.com/jasl/cybros_core
• Rails 6 API temple
• https://github.com/paiyou-network/rails-pangu
• 《React 进阶之路路》