252021.9

前端框架发展脉络与趋势预测

前两天做了一个视频,聊了前端框架的话题,包括上一期robust也聊了前端框架的话题。对前端框架的发展的梳理,我觉得已经做的不错了。

本文再简单总结一下。

我把整个前端框架的发展,分为3个大阶段,其中黄色的框是jquery为王的阶段,典型框架有angularjs, backbone等,这一阶段的框架实际上也是数据驱动,比如angularjs和backbone,所以,我们不能用数据驱动来划分它们和后来的react、vue的区别。

绿色的框这一阶段有两个特征,一个是react、vue大行其道,另一个是类似babel、webpack这样的工具是开发工作的基础。在16、17年时,流行起来一句话,叫“学不动了”,意思是前端发展太快,冒出来很多东西,其中包括了对新框架的谈笑。但是,从上图可以看出,其实在这一阶段(上图中没有列举出类似cyclejs这类框架),并没有像上一个阶段一样那么多框架林立,而是被react、vue、angular统治,所以,有的时候,我们的感觉和实际的情况有一些差别。和上一个阶段不同,这一个阶段react作为主导框架,追求的是某种极客层面的快发体验,特别是react,在runtime上探索出了时间切片等。但是,react持续在runtime上下功夫,或许会错过下一个阶段。

蓝色框是第三个阶段,也是我们当下正所处的阶段。这一阶段的特征是基于编译的框架开始大行其道。以svelte为典型,vue3跟进,框架们都在想办法,让开发者在源码中使用比较特殊且体验更好的语法来写组件,然后通过编译器,把这一写法转化为运行时放到浏览器中跑。甚至,像alpine这类框架,直接在运行时进行解析和运行。这种基于编译的模式(实际上,angular2+的模板语法也是这种模式),可能是接下来这段时间前端框架的主要方式。

09:25:33 已有0条回复
162021.9

windows10 C盘后面有一个恢复分区,无法扩展C盘的解决办法

今天公司给装了一个新的500G的盘,导致我电脑瞬间多出很大一块空间。而看着越来越小的C盘,想到我以前也有拿D盘补C盘的操作,这次我索性把整个D盘干掉,来一个500G的C盘,岂不是爽歪歪。网上搜索了一下方法,windows自带的磁盘管理工具就可以满足,于是开开心心的打开磁盘管理,把D盘删了,然后按照指示,右键C盘扩展卷,然后,M的,这个选项是灰色的,用不了……

这么尴尬吗?我一看,在C盘后面还有一个很小的分区,写着“恢复分区”,大概是系统故障的时候跑一个特殊的小系统来做引导的吧。这个我没意见,但是你为啥插在C盘和D盘之间??磁盘管理工具又不能把它和D盘调换个位置。难道就这么卡住了?

又搜索了一下,https://www.diskgenius.cn/ 这个工具可以调整磁盘,于是下载下来试试。折腾了一下,发现可以采用一种变通的方法来处理。它可以调整磁盘大小,而且很诡异的是,调整磁盘大小时使用拖拽的形式,两边都可以拖,这就可以直接通过这个能力,把哪个“恢复分区”搞到最后面,把空出来没有的部分和C盘连在一起。

通过上面这个地方调整“恢复分区”大小,进入之后可以看到如下界面:

通过拖动的方式,把这个分区搞到最后面去,这样把空的空间留了下来。

这样愉快的调整完“恢复分区”之后,我想,继续用这个软件调整C盘的大小,结果,同样的方法提示这个磁盘加密,没法搞。难道没办法了?

这时,我又突然想到,回磁盘管理工具试试,在磁盘管理工具中使用右键扩展卷功能,竟然成功了。于是,我就有了一个接近500G的C盘,爽歪歪~

23:29:48 已有0条回复
142021.9

搭建起自己的vscode在线版本

我有一台服务器,放在那里特别久了没怎么用,今天在下班地铁上突然想到,我可不可以在平板上写代码?搜了一圈发现还是要上vscode在线版才行。于是回来就开始撸。

code-server超级简单,一个安装脚本解决:curl -fsSL https://code-server.dev/install.sh | sh,完成后修改~/.config/code-server/config.yaml,再运行code-server命令,就可以开始在线写代码了。为了安全,该用export PASSWORD="xxx"来配密码。

之后解析了一个域名过去,nginx代理转发,这个也很简单。

然后用certbot搞定https,这样就完整搭建了整个vscode在线版本。

另外,在我的pad上,竟然发现edge打开一片空白,而华为自带的浏览器打开迅速。再使用“添加到桌面”,code-server提供了PWA,直接全屏玩,真挺用心了。

00:21:00 已有0条回复
132021.9

JS角度看什么是多态?

多态的简单解释是,调用相同的接口传入相同的参数,由于被调用的设备不同产生了不同的副作用/效果。例如同样是console.error,在chrome浏览器里面和在nodejs的command inline interface里面,效果就不同。基于这一特性,我们可以对接口进行抽象,简单的例子如下:

interface Person {
sing(song: object): string;
}

function sing(person: Person, song: object): string {
return person.sing(song)
}

上面的代码里面,我们创建了一个sing函数,它接收person这个对象,并调用它的sing方法。由于类型的约束,接收的person一定会有sing方法。但是,这个person.sing这个方法会做什么事呢?对于sing这个函数它并不知道,它只是调用了person的sing方法而已。所以,我们基于多态实现person。

class Person1 implement Person {
sing(song: object) {
const { lyric } = song
console.log(lyric) // 打印到屏幕上
return lyric
}
}

class Person2 implement Person {
sing(song: object) {
const { lyric } = song
Audio.paly(lyric) // 播放声音
return lyric
}
}

两个类实现了相同的Person接口,但是在实现的时候,又使用了不同的副作用,这就是多态。

那么,多态有什么用呢?对前端有什么影响呢?

第一点,是代码写法上的变化。

以前我们喜欢extends来得到一个具体的类,比如 class Person 有一个 sing 方法,我们通过 extends 来覆盖这个方法。这也就意味着,你的代码里面,一定会引入原来的 Person,并且原来的 Person 里面的 sing 方法一定会在最终打包的代码里面,虽然它永远都用不到。而新的写法是在调用函数的时候,把类的实例传入进去,这把引入模块的工作交给函数外部去做,这就让到处这个函数的模块的代码瞬间减少了。

第二点,是架构设计上的变化。

以前我在架设react项目时,会以View作为入口,应用的一切都是先有View,在View中去引入需要用到的Model等其他模块,这也就意味着,应用以View为顶层入口,所有的代码层层引入,绑定在了一起。现在,我们利用多态,换一个角度。我们让开发者自己写入口,这个入口我们称为Controller,我们提供的框架不是让View去使用Model,而是反过来,让Controller去使用View,让Model去使用View。这个场景下面,View必须按照接口约束提供接口给Model使用,这个时候,我们写Model就可以反过来考虑控制View(这里的Model是指ViewModel)。这种转变非常神奇,从框架层面,它颠覆了传统前端的开发方式。

10:39:36 已有0条回复
082021.9

之前一直想买一个Pad,但老婆觉得太贵没必要就一直没有买。昨天实在没忍住,在得到老婆允许后,一咬牙就买了这一台matepad。我主要的想法是想基于手写笔做一些事情,例如记笔记,上网课。昨天拿到手后开始调教,现在已经感觉差不多了。手写笔非常有感觉,可以随便涂涂画画,但实际上用来写作的话,速度比较慢,因为辩识手写肯定有一个误差,而且写完一个字的速度没有打字来的快,所以在需要大量字的时候我还是倾向全键盘输入。

07:10:14 已有0条回复
022021.9

《软件方法(上)》

自己团队的难处与众不同,奇特的困难降临在他们身上,偏偏别人得以幸免。

--http://www.umlchina.com/book/softmeth_pre.htm

14:12:11 已有0条回复