StimulusReflex:使用Ruby on Rails构建现代的反应式Web界面

2020-11-23 08:30:45

StimulusReflex是使用Ruby on Rails制作现代的反应式Web界面的新方法。

通过拦截用户交互并将其通过实时Websocket传递给Rails,我们扩展了Rails和Stimulus的功能。这些交互由更改应用程序状态的Reflex操作处理。当前页面将快速重新呈现,并使用CableReady将更改发送到客户端。然后将页面变形以反映新的应用程序状态。整个往返过程使我们能够在20-30毫秒内更新UI,而不会出现闪烁或昂贵的页面加载。

这种体系结构消除了全栈前端框架带来的复杂性,而又不会放弃高性能的反应式用户体验。借助StimulusReflex,小型团队可以比以往更快地完成大型工作。我们邀请您探索单页应用程序(SPA)的另一种替代方法。

通过选择器变形,您可以智能地更新DOM中的目标元素,该元素由重新生成的局部和ViewComponents提供。

没有任何变体可以提供闪电般的快速RPC机制来启动ActiveJob并向外部进程发出信号。

有一个方便的图表显示了Morphs的工作方式。在下面的链接后面找到所有文档和示例。

如果您可以专注于自己的产品,而不是现代JavaScript引入的技术噪音,那不是很好吗?使用StimulusReflex,您可以以较小的团队更快地交付项目,并重新发现编程的乐趣。

我们的在线JavaScript有效负载大小压缩了一个很小的40kb ...其中包括Stimulus,ActionCable,StimulusReflex和CableReady。

尽管StimulusReflex是一种与众不同的方法,很难与流行的SPA框架进行直接比较,但每个人似乎都同意的一件事是,其Todo List实现的规模很小。这是数字:

并非每个人都拥有最新的iPhone。我们正在将HTML交付给客户端,每个设备都可以显示HTML,而无需框架来呈现JSON的UI。我们为开发人员降低了复杂性,同时使连接速度较慢且功能较弱的设备的人更容易访问您的站点而不会耗费大量电量。

StimulusReflex Expo收集了越来越多的类似示例,这些示例展示了不同的用例以及其背后的源代码。

道道道道道道道理

在项目中安装ViewComponent后,可以在Reflexes中使用组件化视图,而无需进行任何配置。 💯

如果还安装了出色的ViewComponentReflex,则可以将组件的状态持久化到用户的会话中。您组件的每个实例都将维护自己的本地状态。这为您的UI提供了无缝的连续性-甚至在进行整页Reflex更新时也是如此。手,见手套。 🖐️+🧤

只需要看一些事情:查看ViewComponentReflex Expo的实时演示。

我们喜欢Rails。在15分钟的视频中,大卫·海涅迈尔·汉森(David Heinemeier Hansson)的“建立博客”(Build a Blog)吸引了该框架的老总,让人感到敬畏和怀疑。 Web开发似乎不可能如此简单,高效和有趣。我们正在谈论开发人员效率和幸福指数增长。 Rails如此成功,以至于几乎所有框架都从中借鉴了思想,模式和功能。

自从早期以来,景观已经发生了很大变化。现在的应用程序更加雄心勃勃。对本机UI速度的追求催生了越来越复杂的新技术。现代单页应用程序已将服务器的许多职责推给了客户端。不幸的是,这种新方法牺牲了开发人员的经验,而该经验曾经很有趣且富有成效,可以替代高复杂度且仅获得少量收益。

在他的2018年ElixirConf主旨演讲中,克里斯·麦考德(Chris McCord)(Elixir的Phoenix框架的创建者)介绍了LiveView,这是SPA的替代产品。他的演讲捕捉了与Rails早期一样的希望和激动。

我们爱长生不老药和凤凰。对于需要使用功能性语言的类似Rails的约定的人,Elixir成为了一个最佳选择。社区很棒,但是它仍然很小并且相对利基。

StimulusReflex最初受到LiveView的启发,但我们正在制定自己的路线。我们的目标一直是使使用Rails构建现代应用程序成为最高效,最愉快的选择。我们想激发我们的朋友与其他工具和技术一起工作,以评估诸如StimulusReflex之类的概念如何在其生态系统和社区中发挥作用。

到目前为止,一切正常!现在我们不仅有20多个开发人员积极地为StimulusReflex做出贡献,而且还启发了诸如SockPuppet for Django的项目。