152019.10

小评 Svelte.js 框架

Svelte是2019年才火起来的新前端框架,它的热度虽然不如react和vue,但是确实很热,大有冲击RAV之后第四大框架之势。对它的文档进行阅读之后,我来说一说自己的一些看法。这些看法不一定成熟,毕竟没有使用它开发过项目,但是话说回来,目前在国内,使用它进行前端项目开发的可能性仍然停留在观望阶段,没有一家公司会尝试一个不一定发展很久的框架。

Svelte的第一眼真是非常爽。你说它像vue不错,但是它比vue更爽:

<script>
let a = 0
</script>

<div on:click="{() => a ++}">{a}</div>

如此漂亮的语法,简直像是重新定义了HTML。而且这个写法和我当初写virtual dom框架的初衷一样,感觉相见恨晚。

但是,当我发现它发明了新语法$:之后,就有些开始不是很舒服了。

$: b = a + 1

这个语法要实现的是vue里面的计算属性,它具有依赖响应的效果,当a发生变化时,b也会随之发生变化。但是,为了计算属性的效果,我觉得可以忍,毕竟不麻烦。

当发现它来发明了新的循环语法时,我有点开始不适应了。

{#each books as book}
<div>{book.name}</div>
{/each}

这……感觉回到了php模板时代,怎么说好呢?有点拒绝。

再到后面,它的事件冒泡居然要声明:

<div on:click>
<Inner />
</div>

如果不声明,事件不冒泡。此时,我内心有种MMP的感觉,这是反人类么。。。

随后的文档中,出现了各种奇淫巧技,我心想啊,未来这东西还能维护吗?其中store部分,蹭了rxjs的热度,提供了多种模式的存储器,把数据管理搞出了越来越难理解的高度,也是大写的服。

Svelte虽然想要做出点什么不一样的东西出来,但是我个人觉得,有点太过了,像玩具一样,不具备可长期维护的可能性。而且它依赖编译,和vue不同,vue可以直接运行时,在html文件中引入后就像jquery一样,马上可以撸。总体上而言,svelte除了一开始让人眼前一亮外,没有超出vue所提供的功能,很难说服开发者从vue转向svelte。更别提react了。

在我看来,react仍然是最好的框架,除了jsx之外,它完全遵循js本身的运行原理,没有解析器去自己实现一套语法(jsx是语法糖,可以不用,写原生代码)。也正因为如此,它才有可能是未来10年都可能持续可维护的代码,对于开发者而言,他可以很容易从一个文件中读懂所有的逻辑,因为它本身就是js,没有其他需要理解的知识(jsx除外),而vue即使很简单,也需要了解它的模板语法。

不过,svelte也不是没有可取之处,例如它的编译,竟然可以在浏览器中完成(看它的在线教程编辑器),可见他们团队在编译这个中间环节下了大功夫,才能在撰写语法上如此优雅。

01:10:11 已有0条回复
132019.10

Purgecss:移除无用的css

092019.10

在 nautil 中发明 react 双向绑定的功能,原来早有前人实践过了,而且还是 react 官方博客发布。从思路和用法上几乎一样,只是官方方法仅支持 input 等表单组件,而无法满足自定义组件的使用。不过,值得骄傲的是,我发明的 createTwoWayBinding 函数还是有不错的思想,而且借助了 Proxy 的力量。总之,自己以为很牛叉的东西,可能前人早都做过了,我们总是在炒冷饭中自鸣得意。

14:05:22 已有0条回复
072019.10

babel remove class static properties

在开发 nautil 过程中我发现,react 本身会在 production 模式下去掉 prop-types 的校验,但是在我们自己写的业务代码中,会给每个 class 增加 propTypes,于是找到了一个 babel 插件,这个插件可以去掉 react 组件类中声明的 propTypes 这个静态属性。于是我想直接用这个插件,可以删除 nautil 中的 props 属性吗?最后发现是不以的,这个插件写死了被移除的属性是 propTypes,所以,我必须自己写一个插件来实现这个功能。经过对该插件的改造,我增加了一个 properties 参数,可以实现移除任意类的静态属性。并且发布到了 npm,你可以在这里了解。

21:05:27 已有0条回复