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

[ClassicOldSong]

大家好，我又来了

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

• 在线 Demo
• GitHub Repo

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

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

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

[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.

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