renyuanz (RenyuanZ)

「大型 Q&A」有人对开发 Shopify App 感兴趣吗？

renyuanz — Sun, 19 Sep 2021 14:22:21 +0800

从疫情开始，海外电商成倍速增长，电商独立站成为了一个新的赛道。Shopify 作为电商独立站建站行业的佼佼者，最近几年有点猛，生态也越做越好了。做 Shopify app 也可以像 iOS App 那样收费，尤其是前几个月 Shopify Unite 大会宣布取消了开发者收入前一百万美元的佣金，更是利好独立开发者和小团队，这个行业还是早期，但是已经出了很多亿级融资的 toB SaaS 公司。

Shopify 在 Ruby 社区里更是灯塔一般的存在，我觉得很大程度上也是因为 Rails 社区里这么多年商业模型的沉淀和极高的生产力。我个人认为这是一个很不错的契机去盘活 Ruby 社区在国内的影响力，因为 Ruby 可能在 toC 场景有着一些天生的劣势（性能不佳），但是却在 toB 场景有着无可匹敌的优势（生产力高）。我虽然现在没有在工作中运用太多 Ruby（我现在以前端和 Nodejs 为主），但是依旧从心底爱着 Ruby 这门语言，所以想来社区里做个分享问答，大家有关于 Shopify app 开发、海外电商、海外 SaaS 相关的问题都可以向我提问，知无不言

9/20 补充：发现有些朋友会私信我，而我有时候回的比较慢，你们也可以加我的微信：zrylise，注明：Ruby China

Sappagram：用代码在线生成微服务架构图

renyuanz — Wed, 09 Sep 2020 11:02:12 +0800

Sappagram

一个在线通过代码生成微服务架构图的网站。

Demo：https://sappagram.herokuapp.com

背景

公司最近在收集各技术团队的痛点，有同事提了一个 —— 项目增长过于粗放，缺少架构图很难理解微服务下各个服务的角色和作用。于是我谷歌了一下，搜到一个 python 的库，可以通过代码生成架构图。https://github.com/mingrammer/diagrams

但是我不太熟悉 python，装环境装了半天，心想别人碰到这么好用的库，但是不熟悉 python 而流失了那多可惜，有一个 web 服务多好啊。

于是就有了 Sappagram

功能

目前只有一个，就是有一个代码编辑器，把 Diagrams 的代码（示例看这里： https://diagrams.mingrammer.com/docs/getting-started/examples ）放到编辑器里，然后点“submit”等待一会儿就可以看到生成的架构图了。

它支持几乎所有云服务的节点，也可以使用自定义节点，总之用起来非常简单！

暂时还没有开源（为了快速上线，代码写太烂了。。），后面会考虑开源的～

写了个 Ruby China 的 GraphQL API

renyuanz — Tue, 01 Sep 2020 23:09:17 +0800

上个周末想试用下 Typescript 和 Fastify（一个 node.js 的框架），想找个什么项目练练手，于是就动起了给 Ruby China 写 GraphQL API 的念头。

Live demo:https://ruby-china-graphql-api.vercel.app/api/graphql

项目开源在 Github：https://github.com/renyuanz/ruby-china-graphql-api

完成度大概是 30%，只接了一部分的 GET 接口：

Query

topics: [Topic!]
topic(id: ID!): Topic
me: UserMe!
nodes: [Node!]
node(id: ID!): Node
users(limit: Int): [User]

有什么特别的地方：

基于 Fastify，性能快
用 Typescript 和 graphql-codegen 自动从 Schema.graphql 生成 resolvers 类型
Oauth2 集成，修改配置后可以直接适用于任何基于 homeland 搭建的项目
魔改了 GraphiQL，增加了一个登录入口

如果你觉得这个项目对你有启发或者有帮助，欢迎给个 star～

(转载) 在 Rails 中集成 Vuejs 的四种方法

renyuanz — Tue, 17 May 2016 23:10:02 +0800

英文原版：chrisvfritz/rails-javascript-integrations

在 Rails 中集成 Vuejs 的四种方法

为什么做？

模块化的视图层让 UI 开发变得异常简单。但开发大规模的 UI 组件并在 Rails 项目中集成一个现代的 JavaScript 框架却有一些棘手。

怎么做？

这个项目用四种不同的方法集成了 Vuejs 来完成一个简单的 todo list :

scoped-jquery: 这是我最不推荐的方法。但是，如果你的团队重度使用 jQuery，这可能是一个最简单的方法。
vue-simple: 这是一个非常适合现有项目的方案，因为 Vuejs 能很好的与 jQuery 类的库协作。这个方案只需要 1 分钟的配置，非常有效率。
vue-browserify: 推荐给大部分新项目的方案。它大概会花你半小时的配置时间，但是这个方案提供了一个 UMD module 解决方法，可以方便的设置热加载等特性，最棒的是，这个方案非常通俗易懂，如果你还接受不了 webpack 的话，我建议你选这个。
vue-webpack: 推荐给想用 webpack ~~爱折腾~~的人。

具体步骤？

有两种方法，第一种是查看四种方案依次与前一种作比较的 diff：

master..scoped-jquery: Adds the todo model and API, with a single JavaScript file.
scoped-jquery..vue-simple: Converts the scoped jQuery to a much simpler Vue component.
vue-simple..vue-browserify: Moves all JavaScript to a new frontend folder managed by Browserify. Components are also organized into more advanced components in .vue files.
vue-browserify..vue-webpack: Bypasses sprockets and all view-related Rails features, now managing the entire UI in the frontend folder through Webpack.

或者，直接看各种方案与master的 diff：

有没有 React 的版本？

我在过去的一年里大量使用了 React，是 React 给我打开了一扇新的大门，但是我想说的是 React 能做的 Vue 实现起来更简单。而且，Vue 2.0 就要发布了，新版本的特性让 React 仅存的一些优点也荡然无存了，所以我还是推荐你使用 Vue

最近在项目里用了 Vue，正好发现了这个，分享给大家。

关于 Turbolinks 5 和 jQuery 的一些疑惑

renyuanz — Mon, 07 Mar 2016 00:01:32 +0800

最近在做一个新项目，于是尝试更新了 Turbolinks 5，说实话，坑的数量和之前一样多，而且坑的位置还不同了（因为 API 重写了），再加上我一直对 Turbolinks 似懂非懂的，几度让我抓狂到怀疑人生。

我来描述一下我遇到的问题：

一些故事背景

我使用了一个购买的 bootstrap 主题，里面含有一些基本的 JS，比如折叠菜单按钮，我使用了压缩之后的版本
一些 jQuery 的插件，geocomplete 和 dataTables
Turbolinks 5 + jQuery.turbolinks

Application.coffee 的内容如下

#= require jquery
#= require jquery_ujs
#= require jquery.turbolinks

#= require theme.min
#= require plugins/jquery.dataTables.min
#= require plugins/jquery.geocomplete
#= require cocoon
#= require data-tables
#= require maps

#= require turbolinks
#= 顺序应该是没问题的，我参考了ruby-china的源码和jQuery.turbolinks的文档

值得一提的是（可能是）：theme.min.js 中已经打包进了 jQuery，我不确定在这里引用两次会不会有问题。

然后，比如说折叠菜单、dataTables 的初始化都是这样做的：

jQuery(function() {
  App.init(); // App 来自于 theme.min.js
});

jQuery(function() {
  BaseTableDatatables.init();
});

// 这些函数都是在各自的JS文件的结尾处

我遇到的问题是：

这些 JS 绑定的事件都只在页面读取的那一刻有用，当点击某个链接后 Turbolinks.visit() 或使用浏览器 Back / Forward Button 后，这些事件均不再运作。

尝试过和想到的解决方案：

把 javascript_include_tag 放到 body 标签结束之前，但是这个“土方法”似乎在 Turbolinks 5 行不通了，而且这也是官方不建议做的方法。
把 jQuery.turbolinks 去掉，重新把这些事件绑定在 $(document).on("turbolinks:load", function(){ ... }) 上，但是很显然，有一些功能就被重复绑定了。
应该有一个专门负责处理这些会被重复绑定事件的 API，比如 $(document).on("turbolinks:before-cache", function(){ ... })，参考这里，但是说实话我没有理解怎么“解绑”事件。

说实话，JS 真的是一门怎么写都不爽的语言啊……但是现在的应用越来越依赖 JS 了，所以我还是想把这里面的门道弄清，希望各位前辈不吝赐教！