SingUI - 用纯原生 JS 写现代前端

[ClassicOldSong]

大家好，我又来了

这次发帖据上次的玩具贴已经过去一段时间了，SingUI 的用法和功能上已经发生了很大的变化。各位前端大佬们可以感受一下施了魔法的纯原生 JS 能做成什么样。

• 在线 Demo
• GitHub Repo

这个项目起初只是想做一个可行性验证，想看看在不魔改 JS 语法 /语义的情况下用纯 JS 可以把现代前端开发做成什么样，然后发现可行性还挺高，就稍微完善了一下。目前还没有文档，如果有人觉得这个项目有意思的话我会考虑写一份比较完善认真的文档。

目前未压缩体积为 3.9KB ，gzip 完仅为 1.5KB 。

欢迎各位来试用体验以及 Star ，以及提出宝贵的建议～

[YunYouJun]

所以其实是纯运行时的方案吗？
很有意思，我总感觉有那么可能一种场景需要这种方案，但是又没想到具体有什么必须的。

[angrylid]

感谢分享。这下我领悟到了 JSX 和 Vue 模板的优越性了。

[ClassicOldSong]

@YunYouJun 纯 runtime ，没有任何形式的 parsing/compiling

使用场景比如。。。出门在外只带了个 iPad 但突然要写个页面。。。。。

其实我是想用在嵌入式 JS 运行时的。。

[codingBug]

html 烫手吗？

[X_Del]

挺有趣的，抱着气一下楼上和楼主的心态写了这个 Demo：

https://stackblitz.com/edit/singui-demo-1uarbb?file=index.js

[ClassicOldSong]

@codingBug 烫手，闭合标签写起来想打人

@X_Del 挺好的啊，侧面证明了这套思路的完备性，而且有机会解决有人提出的视觉 hint 的问题（虽然又再次引入了 parsing ）。。我还在琢磨怎么套个自定义的 markdown 解析器上去好往里面插可编辑的代码块

[SuperMild]

如果不执着于纯原生的话，可以看看这个 https://github.com/ahui2016/mj.js

在 jquery 的基础上，非常简洁地实现组件化，组件之间可以交流，组件可以有自己的方法，而且语法完全是 jquery 的语法学习成本接近零。

由于本质上就是 jquery ，因此当然可以直接用于生产。

[bojackhorseman]

@SuperMild 哈哈，应该有很多人跟我一样 jQuery 基本处于不看文档完全不会的地步，这种情况显然是 vue 和 react 更合适

[ClassicOldSong]

@SuperMild 恕我直言，类似思路的东西太多了，从我开始跟其他人讨论 singui 开始这已经是第二个了。。。。这种形式有几个问题：一是全是“.”，二是组织结构的时候必须用一堆逗号双引号太局促，而我想试试看把纯 js 写成类似 jsx 的组织方式会怎么样。而且这种形式不够 self-contain ，即无法在一个 code block 内完成对一个元素 /组件自身的描述。以及内容复用的问题，singui 可以做到类似 hooks 的使用形式，轻松实现组合式编程。

[ClassicOldSong]

@SuperMild 我这种做法不是没有问题，比如用于组织 UI 的代码辨识度过低就是一个挺头大的事情

这一点我没想到更好的方法，毕竟项目初衷就是使用纯 js ，避免产生对字符串的 parsing 。如果各位有更好的思路的话欢迎提出讨论

[huxiaofan1223]

很新奇，但感觉过度创造了。

[ClassicOldSong]

@huxiaofan1223 可以 share 一下怎样算不过度吗。。我真的没想到写起来更方便的形式

[ClassicOldSong]

@X_Del 帮你整理了一个更可用的版本（ x

https://stackblitz.com/edit/singui-demo-w2quet?file=index.js

[huxiaofan1223]

@ClassicOldSong 前端主要是模板来写的吧，你这个写的方式很难让大众接受。。就看 Tailwand 来说，开发难度可能不大，但是就很多人用。尽量避免手敲样式，前端可能就很舒服了吧

[makelove]

其实 jsx/html 比这种好读多了，闭合标签可以知道是闭合的哪个，而一堆)]}谁知道谁闭合谁

[ClassicOldSong]

@makelove 你们写代码都不带缩进的吗。。。。

[makelove]

@ClassicOldSong 有缩进不也只能手动眼睛配对，看到 ) 是结束哪个组件还要往上看，ui 刚好是嵌套多的地方
类似于函数式编程后面几十个))))))，谁受得了

[shunia]

这个 demo 看的我脑子嗡嗡的，我觉得最大的问题是不具有统一性，没办法一眼就看出来如果我自己要实现一个东西应该怎么写。
你这个如果把 tag() 方法实现成参数是 object 其实就是 vue ，比如 tag({ setup });
如果实现成正常传参就是 react, 比如 tag(props, { });
你刚好卡在缝里选择了传入一个方法，在下佩服。

[ClassicOldSong]

@shunia 不要把方法当方法，当成作用域隔离区块就行了

不然你没有发现 attr/prop 明明是全局声明的，却可以在恰当的时候指向恰当的 tag 吗

而且这些方法可以直接抽出来变成 hook ，灵活性相当强

没必要把思路框在已有的范畴里。。。

[w4ngzhen]

我还准备用 canvas 直接画各种控件哈哈哈哈。

[2i2Re2PLMaDnghL]

@makelove 只有 lisp 是最后一堆 ) 吧
而且括号是服务于语法解析器的，实际眼 parse 中可以直接忽略括号的存在。似乎一些现代编辑器的 Lisp 语法插件会把括号都呈现灰色。只要写的时候不乱写（就算写的时候缩进乱来也能自动排版）那只需要看缩进就能知道层次，这就和 Python 是一样的了。

[makelove]

@2i2Re2PLMaDnghL 然而括号服务于人眼。如果用 python 这类缩进来写 html 这类高度嵌套的东西那一定是很难受且很易错的，甚至不小心删除了些空格看不出来但意义大变了

[2i2Re2PLMaDnghL]

@makelove 我刚说了『人眼根本直接忽略括号』，你要直接提出相反观点至少摆点论据；不然咱就在这边各说各的呗？
而且我不知道哪个语言的括号服务了人眼，C 语言的括号都不服务于人眼，indentation 清楚地多。
删除了空格看不出来这论点就更诡异了，空格的变化比括号明显得多，它意味着那个熟悉的锯齿上出现了裂纹。人眼天然地非常适合图案模式的识别。

[ClassicOldSong]

@makelove 那很不巧我还真设计了个基于缩进的模版语言，服务于我之前写的另一个框架 https://ef.js.org

[makelove]

@ClassicOldSong 我说这话因为我有体验，几年以前还在用 python 时基于 python 的 [] 操作符重载搞了个不用编译的 html 模板语言，用下来就是那感觉，看得眼花，所以弃了。react 为什么要不惜麻烦搞个 JSX 语法而不用 js 本身语法也是因为 html 的语法可读性确实最佳。

[PEAL]

之前我尝试过用原生 js 写一些好玩的项目，能写是能写，不过为什么三大框架这么火是有原因的，原生写的真的太累了
贴一下那个项目： https://frame.peal.cc/

[ClassicOldSong]

@PEAL 所以我搞的这玩意只是纯 runtime 且没有破坏 /改变任何 js 语义，但本质上跟纯手写原生 API 还是有很大区别的

@makelove 我倒不认为是可读性的问题，JSX 本身的局限性太大了还要用的很大原因是。。。复制来就能用

[shunia]

没看懂你说的啥意思，我理解了你的设计意图，我的意思是佩服你选择了一个这样的设计，实现了一个“一定要避开 vue 和 react 的设计”的设计。
我的牢骚其实只有第一句，就是看得人头疼。代码框架没必要从设计的“优雅性”“独特性”上做文章，简单易用的话方便传播，性能优秀的话也可以获得大众的青睐。你提供的这个设计让人看不到从使用者角度的角度来说的优点。
你好像有点看不上 react 使用了 jsx 语法，react 本身是否优秀不谈，但是 react 正是靠这个简单易懂的语法才让大众更容易接受的，如果它不推广 jsx 语法，让大家伙都套一堆 creeateElement ，估计 vue 早一统天下了。
vue 就更别说了，要不是他让大家直接写 html 和 css ，在国内是不可能获得巨大支持的。

当然你这看起来是个实验性质的项目，讨论上面那些没什么意义，但是我觉得既然是讨论也可以说出来。
那么认真说这里我觉得最大的问题真的还是需要让人易书写易理解。
比如 attr/prop 的实现你可能觉得很取巧很优秀，但是我其实之前评论的时候有写但是删掉了，就是觉得因为这种写法不存在归属感，会让阅读代码的人非常消耗精力。这个其实有一点点像 hooks ，使用起来省事，但是在复杂情形下阅读非常消耗精力。

[ClassicOldSong]

@shunia 关于 jsx ，我本来的设计意图就是想用纯 js 实现类似 jsx 的效果（不是等价实现）。之所以没有选择传参的原因是 jsx 的 attr 用法混杂，没办法单独表示 prop ，class 甚至要写成 className ，事件处理方面就更不用说了。。。其灵活性是远超 jsx 本身的，比如 https://stackblitz.com/edit/singui-esm-demo?file=index.js

attr 和 prop 其实还有更显式的用法 useAttr 和 useProp ，最新的 demo 里也有一点体现，不过没说清楚的情况下的确不太容易让人看明白

看得头疼的问题一方面是习惯了目前类 html 模版的形式，另一方面的确是视觉 hint 基本没有。全都是函数的确很难识别，这一点我真的没想到更好的方法。

我目前在打算整一套无编译无打包的工作流，上面的 esm demo 同时展示了这一点。不过这还没达到我预期的目标，所以需要转译的方案基本上是不会考虑的。如果有更好的能够兼容现有用法且能够改善视觉提示的方案的话也欢迎来开 issue 讨论

[shunia]

@ClassicOldSong #29 今天看到一个框架 solid.js： https://www.solidjs.com/ ，似乎完美实现了你的设想的方案。

[ClassicOldSong]

@shunia solid 依旧需要编译，所以不是一个思路的东西

[shunia]

@ClassicOldSong #31 哪个部分需要编译？

[ClassicOldSong]

@shunia solid 默认 JSX 啊。。。浏览器又不原生支持 JSX 语法。。。而且用 tag 的方式写逻辑也是我极度避免的操作

另外，就算能用 htm 之类的库来代替 JSX ，那也是运行时编译了。

[shunia]

@ClassicOldSong #33
https://www.solidjs.com/guide#no-compilation%3F
Dislike JSX? Don't mind doing manual work to wrap expressions, worse performance, and having larger bundle sizes? Alternatively, you can create a Solid app using Tagged Template Literals or HyperScript in non-compiled environments.

我其实完全没搞懂你坚持的点到底是啥，既然没搞懂我就不打扰了，最后一次回复了。希望你的作品成功。