瞎扯淡 Stimulus + SJR + Turbolinks 真的超级好用

jicheng1014 · June 04, 2019 · Last by Rei replied at June 28, 2019 · 5369 hits

之前一直前后端分离,偶尔写写 react,

最近因为想偷偷懒,小项目就还是走了 rails web 端,

现在真心 rails web 端改变了很多,

webpacker 解决了以前绝大多数前端库问题。

以前特别迷信前后端分离,后端 rails api, 前端 react, 干啥先上一套全家桶,

现在再来看,中小型项目其实用 stimulus 来写也非常方便,stimulus + sjr + turbolinks 一样效果非常好,

关键的是操作一点都不复杂。纯粹的 js + html + ror 知识。

原来觉得 js 生命周期啥的不好控制,现在看准一块,写个 stmulusjs controller 隔离出来,在小范围随便瞎折腾就好。

当然也不是说 react 全家桶不行,

在复杂界面上,我觉得 react 还是挺好用的,

关键是怎么定义 "复杂" 界面的概念,

在状态变化低于 3 个左右的一个界面中,使用 react 我觉得反而不如 timulus + sjr + turbolinks 方便

另外我以前的误区就是 要上就上全家桶,啥都还没干,先搭前端项目架子。

其实很多时候并没有想明白为啥要上全家桶

react-router 在非 app 类 web 的情况,完全可以使用 server 自身的路由,

redux 在组件关联性少的情况下,作用不算太大

在逻辑复杂的地方,单独引入一个 react 控件即可,在 head 里加载一下 react.js , 处理具体的某个节点,也不算丢人

未必就非得 body 底下插个空 div 纯 react 网站

不用 Rails 我也用这套。

“状态变化低于 3 个左右的一个界面中”是啥意思?能举例说明下吗?

React 现在是有点臃肿了。如果只是做个绑定,CDN 纯引个 VueJS 也比较简单

Reply to cqcn1991

"在状态变化低于 3 个左右的一个界面"

这是我自己的一个使用惯例

就是 一个 UI 模块中,有包含 3 个以上的状态,任何一个状态的变动都会引起新的 ui 变动

其实这个的定义是来自 react 的本质,就是 数据 决定 UI,

比如登录窗口 一个地方,有 用户名 清空 有 密码控制显示 有没填写密码警告 没填写用户警告 , 这种状态就比较多 (>3), 比较复杂,用 react 组件写,逻辑就比较清晰,只需要关注 state 就好. 当然 你用 stimulus 去操作这些也可以,只是会疲于在各个 dom 里去隐藏或者显示啥的,比较麻烦一点 逻辑中混用的 ui 操作比较多

但是类似于 点击后加载一个数据,或者点击之后加载个报表,点击之后读取 搜索条件 去搜索 这种状态就只有加载和未加载,直接上 stimulus + SJR + turbolinks 就特别轻松,无脑写就好

我觉得 Elixir / Phoenix LiveView 比起 stimulus + SJR + turbolinks 更加简单好用。问题是 High Latency 情况下怎样处理我还没有时间去研究

Stiumlus 是 Rails 前端最后一块拼图:以服务端渲染为底,轻型交互用 Stimulus,重型交互用 Webpakcer + 任何前端框架,可以满足大部分的需求。

还在用 jquery 一把梭的羞愧路过😳

Reply to gaicitadie

Stimulus 混搭 jQuery 爽歪歪,感觉自己无所不能

webpacker+stimulus+jQuery 确实不错,小步创新,用的舒服,jQuery 可以去掉,但是目前我用 bootstrap 4,依赖 jQuery 的,不用白不用啊。。

StimulusJS + JQuery 非常爽。应对一些小任务开发速度非常快。

还有 flutter 全家桶呢😄

社区讨论 stimulus 的本身不多,还是挺遗憾的。但是用起来确实非常爽,就是因为太简单了,反而不知道怎样去跟其他人介绍这东西

Reply to jicheng1014

Stimulus 刚出没多久的时候做了一次线下分享,讲完之后场面冷冷清清,然后我问还有人写前端么,结果没人举手。

用过一段时间,没有想象中的好,比较鸡肋。

简单应用,用不用 stimulus 区别不大,大不了把 turbolinks 去掉,省的调试起来麻烦,还要写模板标记。

复杂一点的,由于担心越做越复杂,估计都会考虑用 react 之流。

Reply to nine

stimulus 和 turbolinks 本身都是轻量的框架,但是组合起来实现了 SPA 类似的体验,并且可以重用服务端渲染的很多优点。为了可能的复杂性直接上 react 这类框架,相对需求本身往往增加了巨大的复杂度,在我看来很多应用都过度工程化了。

Reply to Rei

了解,我也是一直想把 Stimulus+Turbolinks 用起来,但是一直也没有找到合适的使用场景,可能新闻站、博客、论坛这种会比较适合,但是除了个人练手,现在哪家公司也不会花人力重头写一个这样的应用。做活动页模板的话,通常也不需要后端或者全栈的参与,主要是前端在工作。做后台应用的话,就是复杂项目了,这本身也是 Rails 拿手的,然而复杂应用的前端,可能就要上 react 之流会合适点。

至于复杂,前端现在确实很恶心,但可能也没想象的那么复杂,可能只是 Rails 社区对前端研究不多,不太会组织资源。

Reply to Rei

我是希望十几行也不要写(我是真不会写)... 最好声明一下完事... 拖拉拽也是浪漫

Reply to jasl

最好还有 IDE 支持……

Reply to Rei

嗯,主要还有一点原因比较重要,忘了写了。

是作为一个从 IE6 一路 hack 过来的伪前端,SJR 我一直用的不是太顺畅。SJR 把很多东西划分的太碎了,控制起来太费劲,需要记忆和查找,修改后容易相互影响。Stimulus 虽然把 js 作用域分开了,但 CSS 还是没有解决(因为它诞生的目的也不是为了解决 CSS 的问题),而且多了 SJR。

这样 JS,HTML,CSS,SJR,就分别散落在各个角落,支离破碎的感觉,很糟糕。

而组件化的颗粒度是我想要的。把 CSS JS HTML 封装到一个组件(甚至文件)里,而组件之间样式、行为互不干扰,修改微调起来相当方便,安心。

好用啊 stimulus

Reply to IChou

最近在学习 stimulus,stimulus 和 rails 结合真的是很棒的选择。

Reply to monsterooo

我是用 stimulus 解决了以前困扰我的各种 turbolinks 的问题 以前遇到各种重复绑定的,现在都靠 disconnect 解耦

Reply to Rei

如何区分轻交互和重交互

怎么我用 stimulus 写一两个简单的分享活动页面,感觉首次加载也很卡···😂 没用透

你可以单独引入这个 js 的 没必要编译一个大的 application.js

Reply to FrankFang

我还不能清楚的定义,只能举个例子,Trello 那样的交互是重交互,Basecamp 那样的是轻交互。

Reply to stephen

如果可以发地址出来,那么可以一起调试下是哪里慢。

Reply to stephen

是因为打包文件的 js 太大了吧。你看看你打包的 js 大小是多少呢?

Reply to Rei

项目很久了,没线上 demo。不过打算新项目的后台使用这套组合,如果一套由 Stimulus + SJR + Turbolinks 写的类似 iview 的东西,那就牛了···😍

jicheng1014 in Rails UJS + Stimulusjs + Turbolinks 5 = ❤️ mention this topic. 28 Aug 09:35
You need to Sign in before reply, if you don't have an account, please Sign up first.