back即刻后端Newsletter

IFTech BE Weekly #2

2020/10/16 12:48

国庆长假刚刚结束一周，于是又见面了。

虽然这个专栏的名字是BE Weekly，但实际要看近期是否有足够多有趣的东西，实际更新周期可能在两周一次，内容也不一定全是Backend领域的，比如这次就有挺多前端相关的分享和讨论。

对内容有任何想法和建议也欢迎回信来反馈呀

虽然都知道typescript的类型系统很强大，但这个演示ts 4.1版本新特性的demo还是让人惊叹

wong2: GitHub - codemix/ts-sql: A SQL database implemented purely in TypeScript type annotations.
https://github.com/codemix/ts-sql

npm cli 发布了大更新7.0，甚至直接支持了yarn.lock

panqianyu: https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/
The GitHub BlogThe GitHub Blog
Presenting v7.0.0 of the npm CLI - The GitHub Blog
We’re releasing v7.0.0 of the npm CLI, which includes exciting new features such as Workspaces, automatically installed peer deps, and more!
Renzh:
Workspaces: a set of features to the npm CLI that provide support to managing multiple packages from within a singular top-level, root package
package-lock v2 and support for yarn.lock: Our new package-lock format will unlock the ability to do deterministically reproducible builds and includes everything npm will need to fully build the package tree. Prior to npm 7 yarn.lock files were ignored, the npm cli can now use yarn.lock as source of package metadata and resolution guidance.
Renzh:
打击lerna和yarn

adblock 插件的分享

xidong: 哪个版本的adblocker最好用啊
panqianyu:
https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm
chrome.google.comchrome.google.com
uBlock Origin
Finally, an efficient blocker. Easy on CPU and memory.
xidong:
现在各种版本实在太多了，这个好在哪里啊
panqianyu:
开源，干净
xidong:
试试看 谢谢
呆唯:
给一个对比，比较商业化的
https://adguard.com/zh_cn/welcome.html
web插件是免费的
xidong:
可以连续选择elements吗
呆唯:
adguard不行
WangSiyuan:
uBlock的性能也是adblock的好多倍
xidong:
好用。。
xidong:
现在很多网站屏蔽adblocker也很严重，希望ublock可以漏网之鱼。特别是英国对媒体网站
WangSiyuan:
给个例子呢
xidong:
我之后打开了发你，泰晤士/每日电讯这些吧
WangSiyuan:
一般做法屏蔽adblocker的做法：

  • 创建一个必然会被adblock的元素。比如 <div id="ad">
  • 检查这个元素是不是被屏蔽了
  • 如果发现这个元素被删了/隐藏了，基本就说明你装了屏蔽插件
  • ...

👍1
xidong:
https://m.jstore.site/product/5f742615d00565001850022d 推荐了
呆唯:
…

后端和前端的友好交流

回合一

WangSiyuan： https://remirror.io/
现在remirror做的真好，基于prosemirror和react，用typescript开发的。
今年2月份我做新的Hedwig编辑器时还不太成熟。（感兴趣的也可以看看这个基于prosemirror的block编辑器(内部地址隐去)，demo: https://hedwig-editor-demo.surge.sh/
感觉基于prosemirror做的编辑器，稳定性真的好，Bug也少。
formula:
狼外公当初考虑过DraftJS吗
WangSiyuan:
考虑过，放弃了..
formula:
可以讲讲原因么，小宇宙这边的ShowNotes编辑器用了DraftJS，考虑是看起来自定义程度很高而且和React很亲和
formula:
不过Bug很多，主要是涉及到IME的部分
WangSiyuan:
回顾一下9个月前...
今天在试slate.js，纯react.js写的。0.4x版本很稳定了。
但是作者20多天前开始彻底重写slate.js -> slate.ts了。。。各种api和底层数据结构全变了。
社区里的所有插件几乎全不能用了...
如果当时Slatejs稳定的，可能会用它。
Draft.js我当时看是觉得定制差，而且我看的时候Draftjs维护频率不高，似乎最近fb又开始维护了。然后还是0.11.x，很可能会有api重构，就很难...

Newsletter的需求：

  • 输入或者粘贴markdown语法的文本，能自动转成对应样式。粘贴google doc/word的文本，也能自动转成类似markdown的样式
  • 类似notion/medium的，选中文字后，出现一个toolbar，里面设置样式。
  • 可能会往里插入其它组件：比如embedded twitter之类的。

本来一开始也排除了prosemirror，但后来看到remirror和基于vue的tiptap (https://tiptap.dev/ )，tiptap几乎完整的满足了我的需求。所以就把这个从vue转成react写了。
我觉得的Prosemirror的优势：

  • 作者靠谱，codemirror、acorn(js parser)的作者。
  • Prosemirror的api非常稳定
  • Prosemirror的架构很好。比如contentEditable很多坑，他有一个prosemirror-view把这层的坑填平了，再这个基础上基于view/model/schema来开发编辑器。
  • 模块化非常好
  • 几乎没遇到过bug。感觉它IME处理的也不错
  • substack基于prosemirror

另外，basecamp的trix也很好，把contenteditable当成一个I/O设备处理，这个思路也使得它的Bug很少。缺点是定制化有些麻烦，基于coffeescript写的
formula:
上次看slate.js和draft.js有一样的bug，很好复现。在中文输入法状态下随便输入什么，全选，然后再输入点东西就会崩溃
https://www.slatejs.org/examples/richtext
WangSiyuan:
绝了。。。。。
WangSiyuan:
https://hedwig-editor-demo.surge.sh/
试了一下，我这个没这个问题...
formula:
最后选draft.js是发现知乎编辑器体验还可以，不过处理了常见的IME bug，所以当时感觉问题不大
formula:
https://podcaster.xiaoyuzhoufm.com/editor
WangSiyuan:
Atlassian全家桶好像也在用ProseMirror：Jira/Confluence/Bitbucket/Stride/Hipchat...
纽约时报也在用。
再加上codemirror的成熟度，就觉得prosemirro不错。
而且prosemirror无所谓什么框架，schema的概念也非常适合存到数据库里(不想存html/或者raw markdown)
formula:
draftjs存的倒也不是html。
ProseMirror这些写插件的时候就不能写React了吧？这是让我觉得会痛苦的点
WangSiyuan:
比如要在正文里渲染一个React组件，它有一个 nodeViews 参数，在这里写react组件就行。
随便找了一个例子：https://github.com/johnkueh/prosemirror-react-nodeviews
formula:
像tooltip这些也可以吗？
WangSiyuan:
这种吗？
image

formula:
是的
WangSiyuan:
这种还挺好处理的。我这里就是这样。这个renderMenuBubble是一个函数，里面有编辑器当前的一些状态（比如selection的位置，被选中的区域，都有哪些inline元素），然后我在这个函数里来决定要不要显示就好。
image
formula:
学习了
WangSiyuan:
定义一个节点类型就很方便。比如我这里定义了一个代码块。
出现三个反引号，会自动转成代码块。
从别的html里粘贴过来，因为dom里包含了 ，也会转成代码块。
按快捷键 Shift+Ctrl+\ 也会转成代码块。
并且，这个代码块里面的内容，是 test* 也就是纯文本。
image
WangSiyuan:
如果用remirror的话，和react集成的会更好些。
https://remirror.io/docs/guide/hello-remirror
formula:
没有全选的Bug 太好了
WangSiyuan:
恩，至少prosemirror我还没遇到什么Bug。有Bug的基本都是我自己写出来的。。。
formula:
FB吃💩
xxj 杨学昊:
💩

回合二

xxj 杨学昊:
最近又用了一下recoiljs，非常好用。个人觉得适合组件树很深，但是又不想花时间去关心去优化状态更新有没有不小心导致多余的组件被更新的case（这一点在react eu2020 recoil上用一个类似figma编辑器一样的画布应用来举例子的）。缺点也比较明显，因为和react强绑定而且必须用hooks，所以在非组件里区更改状态之类的。
https://github.com/facebookexperimental/Recoil
WangSiyuan:
所以在非组件里区更改状态之类的。
这个是什么意思？是说必须用hook，没办法在组件外改状态吗
xxj 杨学昊:
对的，比如我有一个js文件里面是类似socket代码监听某个事件的时候去修改状态这种，redux直接store.dispatch就行但是recoil不行。看见相关issue在讨论了，好像有非常麻烦的解决办法= =
WangSiyuan:
对，我刚刚也想到这个场景了。或者electron的render process和main process的通信
xxj 杨学昊:
还有就是 比如我在根组件获取用户信息并且放到状态里，这个场景因为根组件的代码在<RecoilRoot>之外所以也不行。。。
xxj 杨学昊:
只有在正常组件里用起来很爽，要等他再发展一下了
WangSiyuan:
恩...recoil方便生成patch和snapshot吗
xxj 杨学昊:
好像是有的，可追溯
WangSiyuan:
比如一个多人协作的App。
A操作了 -> 产生一个patch -> 发给B -> B apply这个Patch。
C进来以后 -> 直接apply snapshot
WangSiyuan:
看到了，可能是这个：https://recoiljs.org/docs/guides/persistence
xxj 杨学昊:
那还挺牛逼的
WangSiyuan:
之前用mst的时候，patch/snapshot这个太好用了。还可以有middleware去拦截
xxj 杨学昊:
学到了

一些有趣的工具分享

zengxian: https://retool.com/ 这个看着挺不错的，拖拽组件来生成一些内部工具前端

大核桃: https://vika.cn/
airtable的国内版
Renzh:
有点东西https://vika.cn/template/tpc000/tplfmkWm9t2fl/fodijRlqVita3

好笑的

WangSiyuan: https://twitter.com/Baconbrix/status/1315999130951573504?s=19

Evan Bacon 🥓Evan Bacon 🥓 @Baconbrix
pro tip: alias any to TODO to make people think you plan on fixing it later.