• DOM 不是什么见不得人的事情,就好像一个人只用 ORM 不关心 SQL,我会怀疑他能否写出高效的查询,遇到问题能不能自己解决。

  • New Suspense SSR Architecture in React 18 https://github.com/reactwg/react-18/discussions/37

    React 也在发展类似的技术:

    • SSR 不用说了。
    • hydration(水合),给 SSR 的 HTML 附上交互逻辑,Stimulus 的功能。
    • lazy loading,Turbo Frame 的功能。
    • Streaming HTML,这个不太一样,React 还是一个请求响应内更新,Tubo Stream 可以通过 ActionCable 主动从服务端发起更新。

    这些在 React 都还是前沿技术,也不难理解为什么有人觉得 hotwire 难了。

    前端框架可以让开发忽略一些细节,但是 Web 是一个整体,如果一直割裂看待前端和后端,早晚遇到瓶颈。

  • 全栈是殊途同归,不信请看:

    https://staging-cn.vuejs.org/guide/scaling-up/ssr.html

    什么是 SSR?

    Vue.js 是一个用于构建客户端应用的框架。默认情况下,Vue 组件在浏览器中生成和操作 DOM 作为输出。然而,我们也可以将相同的组件在服务端渲染成 HTML 字符串,直接返回给浏览器,最后再将静态的 HTML“激活” (hydrate) 为完全交互式的客户端应用。

    一个由服务端渲染的 Vue.js 应用也可以被认为是 “同构的” 或 “通用的”,因为应用的大部分代码同时运行在服务端和客户端。

    区别是你愿意用 JS 全栈,还是 Rails 全栈。

  • 我也刚开始学,看上去就像 stimulus + react,而且是基于 web component。

  • 从技术上看,顶楼的方法没问题。stimulus 负责绑定服务端渲染的组件,react 负责客户端视图渲染和行为,他们是互补的关系。lit 综合了两者的优点,似乎是更好的选择, 我未来也打算试用 lit。

    从管理上看,选择的技术要符合团队的技术栈,只要团队都能接受就行。现实上全栈的人难招,市场上前端几乎代表着前后端分离了,如果业务需要团队在一年内扩展 100 人,那么只能适应现状走分离路线。但对于小公司,未来一年最大问题是是否存活,开发人员只有几个人,每个人什么都干,那么全栈是比较好的选择。

  • importmap 最大作用是让 rails 默认创建的时候不依赖任何打包工具,有打包需求的还是应该用打包器。

  • 第一个问题,没有加载成功是指找不到这个带 hash 的文件,还是加载了文件但是内容报错?尝试以下操作:

    • 检查 assets 下面的目录有没有其他 application.js 文件导致了被覆盖,删掉它。
    • 重启 rails 进程,添加新目录的时候 assets pipeline 需要重启才能识别。
    • 清除 public 目录下已经生成的 manifest.json 和 assets 目录
    • 升级 sprockets。
    • 用 propshaft 替换 sprockets https://github.com/rails/propshaft

    或者直接在 builds 目录新建一个 foo.js,然后在页面引用看看是否工作,可以排除很多其他干扰。

    第二个问题涉及 ES Module 的工作方式,根据每个 js 库的情况不同要分别处理,最好是引用的库自己有关于 esbuild 的说明。

    例如找不到 jQuery 的问题,是因为这段代码:

    import 'jquery'
    

    这是引用了文件,但没有导入模块到这个上下文。要使用 jquery 里的 $ 或者 jQuery 方法,需要这样:

    import $ from 'jquery'
    

    但是这个 $ 只能在 application.js 这个文件的上下文用,jquery.qrcode 和其他依赖 window.jQuery 对象的库依然找不到,这时候可以把 $ 绑定到全局:

    import $ from 'jquery'
    
    window.$ = window.jQuery = $
    

    我猜想你的 webpacker 配置设置了:

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    });
    

    就是做了类似的事。

    es module 也是这几年才成为事实标准的,有的库不一定做了相应的适配,得逐个看情况处理。所以这个切换并不是很容易的。

  • 用 docker 可以把所有系统依赖包括 ruby, postgres, redis 都写成配置文件(docker compose),难度大大低于单独处理每个依赖,最难的地方就在于第一步:开始学习。

    我曾经通过微信指导让一个朋友在 windows 主机上通过 docker compose 运行单独给他写的应用。

  • 你写博客是为了什么? at 2022年05月08日

    这是把论坛当博客用了。

  • 内容太少了,而且排版不良,建议参考招聘板块其他帖子。

  • @jinxin238357 已禁言

  • 这名用户发送了很多巨魔回复,警告一次,如果不改正将会禁言。其他人无需跟他互动。

  • chatwoot 是个好的开源商业案例啊,他们 2017 年发布的时候没什么关注,2019 年快要放弃了就开源了,结果火了。现在关注的人多,也有商业模式。

  • 感觉我中枪了呢,毕竟我也在 Twitter 做调研,也搞了个 XX 笔记,也还没赚到钱。

    不知道楼主是不是已经创业成功了,有什么经验或者点子能分享,不然我不知道楼主吐槽这个有什么意义。

    能被大多数人需要的东西,肯定有大公司做了,而垂直领域需要的东西,需要跟这个领域有接触,除非之前就在这个领域工作,否则很难凭空想出来。

    从自己的需求出发,事前做调研,已经是较务实的做法了。按我实际经验,程序员可不会留面子说 “不错”,大多数都是说 “不需要”,“别人都能做,你有什么优势”。

    创业成功的人 >>> 事前调研的人 > 事前不调研的人 >>> 干说不练的人。

  • 想请教一个 ror 的问题 at 2022年04月18日

    foreign_key 主要看业务,需不需要数据库外健保证数据一致性。例如订单引用了产品,但是产品被删除了,订单处理就会出异常,这样就需要外健保护。

  • 想请教一个 ror 的问题 at 2022年04月16日

    像是 test fixture 里面的数据引用了不存在的对象。

  • 是的。生产环境均衡负载用云服务的,静态文件用 CDN。nginx 也可以这么用。基于文件共享的方案不适合容器。

  • 我在用 atom,但是进入维护模式了。新选建议 vscode。

  • 给博客换了套新评论系统 at 2022年04月06日

    楼主你好,我正在运营一个技术写作社区 GeekNote(https://geeknote.net/

    GeekNote 最近新增了一个新功能,可以让独立博客维持自己发布模式的前提下,方便的转载到 GeekNote,获得更多展示和评论。

    概括来说是这样:

    • 用过往一样的方法在独立博客上编辑和发表文章。
    • 到 GeekNote 通过 RSS Feed 抓取更新,在草稿箱中编辑和发布文章。
    • 文章获得更多展示和评论,并且提升独立博客的搜索引擎权重。

    我希望 GeekNote 能成为独立博客扩大自己受众的平台,不知道有没有兴趣尝试一下?

    功能的详情在 https://geeknote.net/GeekNote/posts/476

  • 你需要看这个文档了解 gem 的目录结构 https://guides.rubygems.org/

    特别是 https://guides.rubygems.org/gems-with-extensions/ 关于怎么调用 C 的库

    搞懂 gem 的结构后看 ruby-pg 是怎么做的,然后看华为 db 跟 postgres 有什么不同,它们有没有提供 C 库,有的话用华为的 C 库替换 ruby-pg 的 C 库部分。

    如果华为 db 是基于 postgres 开发的话,应该可以基于 ruby-pg fork 一份来修改。

  • Turbo Stimulus 中遇到 问题 at 2022年04月04日

    这是原生 JavaScript 的问题

    window.__audioEl.addEventListener("timeupdate", this.onTimeUpdate, true)
    

    这里 onTimeUpdate 的上下文是 windowsthis 指向的是 window

    要改成:

    window.__audioEl.addEventListener("timeupdate", this.onTimeUpdate.bind(this), true)
    

    顺便提一下你将来会遇到的问题,怎么解绑:

    
    connect() {
      // ...
      this.onTimeUpdateHandler = this.onTimeUpdate.bind(this)
      window.__audioEl.addEventListener("timeupdate", this.onTimeUpdateHandler, true)
    }
    
    disconnect() {
      window.__audioEl.removeEventListener("timeupdate", this.onTimeUpdateHandler, true)
    }
    
  • 不明情况下关闭 ssl 校验很危险,如果这是网络被劫持了呢?

    看楼上 yum 命令也出错,感觉系统已经被玩坏了,建议重装。

  • 虽然想回答楼主提问,但仔细想想我找不到合适的推荐。

    一般阅读源码出于这样的目的:

    1. 发现 bug 了,查找是上游问题还是自己问题。
    2. 自己实现一个功能遇到瓶颈,参考同类实现。
    3. 有几个类似的 gem,根据源码哪个实现比较优雅来选择。

    如果楼主没有遇到我同样的问题,推荐了也学不到什么。

  • 其实我偏好的代码是这样:

    <div class="tab">
      <a href="#" class="tab__item tab__item--active">
        Tab Item
      </a>
      <a href="#" class="tab__item">
        Tab Item
      </a>
      <a href="#" class="tab__item">
        Tab Item
      </a>
    </div>
    

    如果是 tailwindcss 应该用 @apply 整合组件样式。

    如果不用 @apply,那就得用上某种组件库,例如后段的 viewcomponent,前端的 vue,react。这是解决一个问题又引入一个问题。我越来越觉得 tailwindcss 不是一个好模范。