未来属于声明式编程

声明式编程 (Declarative Programming)是一种编程范式。现实世界中,我们大部分编码都是命令式的。

举个最常见的例子,对于用 JavaScript 来构建 UI, React 是声明式的。
// 普通的 DOM API 构建 UI

const div = document.createElement('div')
const p = document.createElement('p')
p.textContent = 'hello world'
const UI = div.append(p)
// React 构建 UI
const h = React.craeteElement
const UI = h('div', null, h('p', null, 'hello world'))

所有的 DSL (HTML, XML, SQL) 都是声明式的,你写出一条 SQL 语句,只是为了告诉数据库你要什么,然后数据库就会给你对应的数据,而不是通过数据库的 API 去取。
SELECT * FROM Products WHERE name='Alipay'

Apple 在今年 (2019 年) 也推出了 Swift UI, 在 WWDC 的 Swift UI 相关的 Session 里也多次提到声明式 UI 开发的威力

声明式编程的潜力在于:

解放人力成本,你只要「声明」你要做什么,具体怎么做,由运行时解决。

函数式编程就是声明式编程的一种,在函数式编程里的尾递归性能,就取决于运行时,而不是靠程序员去手动优化。React 里你只要描述你的 UI, 接下来状态变化后 UI 如何更新,是 React 在运行时帮你处理的,而不是靠程序员优化 diff 算法。

我们可以认为 Serverless (尤其是函数计算) 在运维领域获得了声明式的好处 —— 我们定义好了函数,我们只要告诉平台我们需要调用这个函数,那么如何进行计算资源分配、如何对代码做分布式部署,都不需要程序员考虑。

运行时帮你完成工作,除了可以节省人力成本外,还降低了程序员出错的概率 —— 因为写的代码越少,出错的概率就越小。人是最不可靠的,我们应该尽量把工作交给计算机。

「声明」是「描述」而不是真正「执行」

在纯函数式编程语言里面,一切都是声明式的,是纯 (Pure) 的,没有副作用(Side Effect)的。

Haskell 是一个纯函数式的语言,像在控制台输出文本这种方法(putStrLn)就是一种副作用。在 Haskell 里 putStrLn "Hello World" 本身不会真正地输出 “Hello World“, 而是返回一个 IO 类型,来说明他是一个副作用。但它如何被执行,取决于运行时。

Elm 和 Haskell 一样,副作用也只是返回一种类似 Haskell 中的 IO 类型。在 Elm 中叫做 Cmd.

以上说的这些,可能太过抽象。所以我用前端的同学们应该都知道的 redux-saga 对此作更具象的解释。也可以解答为什么我虽然不喜欢 Redux, 但认为 redux-saga 是一个的很不错的库。因为他利用 redux 的 middleware 机制和 generator 巧妙地实现了类似 Haskell 的 IO.

下面我将用 官方文档的例子 做解释。

比如,以下是一个有副作用的函数:
import { call } from 'redux-saga/effects'

function* fetchProducts() {
  const products = yield call(Api.fetch, '/products')
  // ...
}

显然,Api.fetch() 是副作用,它会发送网络请求。但是,在 redux-saga 里面,你不应该直接执行这个函数,而是使用 call 告诉 redux-saga —— 你要执行 Api.fetch , 参数为 /products.

所以,事实上这个函数没有被命令式地被执行,而是由 redux-saga 决定如何执行。

如果你在外部直接调用 fetchProducts(), 你会得到一个 Generator Iterator. 然后通过 next() 得到你 yield 的值。所以你可以这样去测试你的程序:
const iterator = fetchProducts()

// expects a call instruction
assert.deepEqual(
  iterator.next().value,
  call(Api.fetch, '/products'),
  "fetchProducts should yield an Effect call(Api.fetch, './products')"
)

也就是说,你要测试的是「你有没有告诉程序你要执行的副作用,以及执行的参数是什么」。和命令式编程不同,因为命令式的程序在你执行函数时会真实地执行这个 Api.fetch,你必须用测试框架里类似 mockFn 的手段去 mock 这个函数进行测试。

fetchProducts() 只有在 Redux 环境里,才会真正地执行副作用(在这里就是 Api.fetch 发送的网络请求)。

所以,声明式的编程是非常易于测试的

可视化编程是一种声明式编程

我们探索可视化编程,是因为我们一直期望通过拖拽就能完成开发,其实就是期望我们完成任务仅仅需要通过声明,而不是写命令式的代码。当然这是一种理想的状态。

DSL 是最常见的声明式编程形式。我一直在布道 GraphQL, 因为它把网络请求变得声明式了:
query {
 posts {
  id, title, content
  }
}

把网络请求变成声明式的好处有很多,其中一个就是它可以被放到各种各样的环境被执行。想象一下,我们可以打造一个可视化的应用搭建工具,在命令式编程的场景下,我们如果要做出如「点击按钮发送请求,得到响应后触发另一个 UI 更新」,就需要编写命令式的代码:
async function onClickButton() {
 // 手动发送请求
 const result = await fetch('/api')
 // 手动更新 UI
  table.dataSource = result
}

如果是 GraphQL, 我们可以把每一条 GraphQL 语句单独看作一个对象,他可以被任何组件触发,它的结果也可以被任何组件订阅。这样一来,在可视化的搭建工具里,程序员要做的是:

1. (声明式地)编写 GraphQL 查询语句
2. (声明式地)为组件(比如某个按钮)绑定 onClick 事件为触发某条查询语句
3. (声明式地)为组件(比如某个表格)绑定某条查询语句的响应值对应哪些组件的属性值

当然现实世界的应用不是那么简单,但已经是跨出了很大一步。

Conclusion

未来为什么属于声明式编程,因为我们在不断地努力提高开发效率,声明式编程显然是提效的最佳手段。React, Flutter, SwiftUI, GraphQL 的出现是最好的证明。最近听到内网太多人在提 Serverless, 我想说,提升开发效率,我们应该去想如何尽量让开发者声明式地编写代码,而不是只去想我们在 Serverless 上能做什么。

via Randy's Blog

Invalid media: image
井底之蛙的一片天空

有次和朋友提到移民的想法,他说,为什么不考虑日本呢?我的回答是,我对日本没有特别的情感。朋友说他正相反。然后他问道:难道你的童年没有看日本动画吗?

我的童年除了阅读,大部分信息的获取来源于电视机。我从电视机看过的日本动画不少 —— 在 CCTV 少儿频道看《四驱兄弟》,在 TVS (南方卫视) 看《哆啦 A 梦》,在华娱卫视《通灵王》、《军曹》,在本港台看《游戏王》,在翡翠台又看了不计其数的,就不一一列举。

我从这些动画片里感受不出日本文化,一是因为都是中文的配音,二是基本上我看的都是虚构类作品,无法从中了解到日本的文化生活。只有翡翠台偶尔播出一些配音的日本真人电视节目,让我了解到日本的街道和风景是如此模样,但仅此而已。

不过我却很能理解我的那位朋友,因为我对另一片土地 —— 香港 —— 有一样的感受。

电视机把我和香港的距离拉得很近。白天有「卡通片」,傍晚有儿童节目,每晚六点半,可以看《六点半新闻报道》,知道香港、国际在发生的事。7点半后,有《东张西望》看娱乐新闻。紧接下来就是八点档和九点档的电视剧。

我是看香港电视剧和电影、听「广东歌」长大的。聊起亚视的「柒事」,我们一样会大笑。现在不看电视,但还有 YouTube. 走在香港街头,我一个广东人,和香港人又有什么太大的区别呢。

最大的区别可能是,我很羡慕香港人。香港人可以有不同的政见,可以自由表达自己的观点,有权发声争取自己(或别人)应有的权利,可以大声对别人讲:「香港系有言论自由咖」!不用担心「讲错嘢」。而我不能。

香港不能失去这些。我愿意在这样的地方生活。香港是我的精神家园。

撇开身份认同,在政治上,香港回归早已经是国际社会公认的。我自己作为中国人,一直为中国有这样的香港感到庆幸。因为这代表中国人还能有另一种作为中国人的方式。

而我,很惭愧,虽同讲广东话,但在内地,也只不过是一只知道自己是井底之蛙的井底之蛙罢了。

王小波说「井底之蛙也拥有一片天空」,对我来说,这片天空就是香港。

衷心祝福香港。

via Randy's Blog
人生是不断取舍的过程

如果问工作以来我悟出的最重要的观念是什么,那就是,人生是一个不断取舍的过程。

我们总是在作自己未来的规划和目标的时候说,我想要什么,而忽略了问自己一个问题,「我愿意为此舍弃点什么」。我们逃避了残酷的事实 —— 我们每天只有 24 小时,我们什么都想要,但这是不可能的。

意识到这一点,有利于我们做很多的决策,而且对很多让你感到可惜的事都释怀了。

有人总是会在年初列下自己的读书清单,但直到年底,发现自己一本都没有读完。这是很多人懊恼和焦虑的来源 —— 为什么我总是无法履行自己的规划?

过去我总会把原因归咎于没有做好时间管理,但后来我顿悟了,在列下读书清单时,并没有问自己这样的问题 —— 你愿意为读书带来的精神收益,而舍弃点什么?

如果你在制定任何规划时都这样问自己,那么,你就会在每一次决策前明确这一点:这件事于你而言到底有多重要?如果阅读于你而言比看美剧重要,你就要作出取舍:把你看美剧的时间,花在阅读上。

如果你认为做得到,那么就让它正式成为你的规划。如果你做不到,那么就不要让它成为你的规划。何必为自己制定一个无法完成的计划呢?它除了为你带来无意义的焦虑,无一用处。

宁愿看美剧而放弃阅读并不可耻,活得明白是最重要的。只要这是你权衡后作出的取舍,那么你就不会为此而感到焦虑。

我在《健身一年》里提到,一年前我下定决心开始健身,当时我问自己:我能为健身舍弃什么?

健身需要耗费每周四天每次 2 小时的时间,这些时间我可以用来写代码,做音乐,阅读。我愿意舍弃他们吗?

经过权衡后,我决定舍弃他们。于是我获得了一些健身的成果,同时我再也不为放弃了大量的阅读、写代码、做音乐的时间而焦虑。因为我早就知道,如果我想要获得健身的成果,这些是必须放弃的。

不必为「我没有时间 xxx」而感到可惜,因为你没时间做的事,不过是在为你更想做的事让路而已。(除非你把时间都花在偷懒上)

每个人有不同的活法,对待事件的优先级也不尽相同。只要认识到「吾生也有涯」的局限,你就可以从每一年底的「责怪自己没有做到什么」转变成「为自己做到了什么而感到高兴」。人生因此也变得简单得多 —— 你只要保证自己不是在虚度光阴即可。

就像即使我现在惧怕婚姻,若是将来某一天也选择了婚姻,那一定是比起婚姻让我失去的,我更想得到婚姻给我带来的。

via Randy's Blog
我在学校学到的东西

今年身边的朋友陆陆续续毕业出来工作了,偶尔有机会的时候会聚在一起聊聊,然后谈到各自的就业情况。我发现有很多朋友还不知道自己想从事的职业是什么,因此也不知道自己未来会怎么样,先做着现在能做的。

因为我的经历特殊,有人也会对我开玩笑说真不知道读书有什么用,还不如早点出来工作。我知道以我朋友的受教育程度来说,这肯定只是玩笑,他们不可能是「读书无用论」者,所以我也会附和着笑。

虽然这只是句玩笑话,但是确实令我回顾了一下我从我的在校生涯中得到了什么东西。

我首先想到的是英语。我的小学是从一年级开始就有英语的课程,所以我接触英语的时间很早。我自认小学四年级以前我还是个很乖的学生,上课认真听讲,作业按时完成。所以我的语数英成绩都很不错。从小培养了「语感」,使得我一直以来可以低障碍地读写英文。这对我的编程学习、职业生涯都有很大的意义。懂英文让我可以亲自融入整个开源社区、技术社区,可以直接在 YouTube 听别人在 Conference 的 Talks, 吸取别人的思想。而不是等别人翻译过来。我认为能低障碍地读写英语是技术人成长很重要的条件。

尽管我对现阶段的英语教育方式仍然存疑,我还是认为在基础教育里,英语是必不可少的。

我的价值观和人生观,是我于在校生涯之中建立的。不过不要误会,这些都不是学校的课程直接赋予我的,而是学校这个「象牙塔」,让我可以有充分的时间去读书、学习和思考。我虽然在班上是「差生」,但我敢说我是最爱学习和读书的。这句话要是被我当年的老师看到,估计他要笑个半死,但这是事实,不可否认。我在学校不用供车供房工作赚钱,我可以把一整天的时间花在读书上,我在我读的所有书里懂得了我应该成为一个什么样的人、我应该努力让自己拥有什么样的品格才能算是一个「好人」。

另外,我很多技术书籍都是在学校读的,比如《JavaScript 高级程序设计》,我读了很多遍。不是我自己想读那么多遍,而是当时我带回学校的就只有这一本书,我一个月才回家一次。那一个月我只能天天都读他。这本书我每读一遍都有新的发现。

出来工作以后我还能像这样把一本好书读这么多遍又读这么认真吗?可以,但是很难了。

我高中的时候,最喜欢上语文课。语文课本选的文章其实挺好的,比如说有《棋王》,以及很多《古文观止》里面的文言散文。偶尔发个新试卷,我也很开心,因为一张语文试卷有两篇阅读理解。我高中读的很多书,都是在试卷里和练习册里发现的,新的练习册一发下来,我就把所有的阅读理解都看一遍,看到哪篇我觉得不错的,我就看是节选哪本书,然后就去图书馆借回来。另外,写作文大概是我在学校里唯一的思考输出的方式了,因此我很珍惜每次写作文的机会,我把自己的所思所想全写进文章,以至于每次都很低分,因为离题万里。我的语文老师对我很包容,他知道我想什么,我很感谢他。

有人会说,你把学校说得那么好,你自己怎么就辍学了呢。

我认为,一个人在结束学校生涯以前,必须先弄清楚两个问题。一个是,**在离开学校以后,你在社会上是以一个什么样的角色存在?**另一个是,**你是否已经为迎接这个角色做好了充分准备?**学校的意义就是给你时间想清楚问题一,然后给你条件完成问题二。

我在学校里,早已弄明白了这两个终极问题。我在社会上,将会以软件工程师的角色存在,并且我已经有能力胜任这个职位。往小的说,我能为我所在的公司创造价值,往大的说,我要为整个社区作出贡献。所以(在一所不怎么样的)大学对我来说已经不那么重要了,我希望早点投身社会创造价值。

很多人就是因为在学校的时候从来不思考这两个问题,所以是「光着身」离开学校的。你是想创造价值,还是想做着不喜欢的工作然后满足于 奶头乐 ,其实都由你自己决定。

以上,就是我在学校学到的东西。

延伸阅读

《科学的方法, 公正的态度,果断的决心》--- 竺可桢

via Randy's Blog
多研究些问题,少谈些框架

当我问应聘者「你有什么问题想问」的时候,大多数应聘者会问我前端应该怎么学。我每次都会很真诚地按照面试过程对他们的了解尝试给他们一些建议。从多次的交流当中,我倒是慢慢地了解到了前端领域里很多普遍的问题。

前端有很多不同的框架和库。 我上大一的时候,有一门课叫网页设计,前几个课时教 HTML, 又教一个课时 CSS, 再教一个课时 JavaScript. 然后是 jQuery. 当时我很气愤,学生连 DOM 是什么都还没搞清楚,就要他们用 jQuery,这不是误人子弟吗。我后来想明白,学校大概已经把 jQuery 看作是饭碗了。

把库和框架看作饭碗是无可厚非的, 我们不能苛刻地要求所有程序员都对软件开发抱有发自内心的热爱。但是急功近利地学习框架,绝对是举步维艰的。胡适说「多研究些问题,少谈些主义」,在编程上,我认为需要多研究些问题,少谈些框架。

框架是我们达到目的的便捷手段,我们使用 React, 更要知道为什么使用它?它的本质是什么?它解决了什么问题?所谓「格物致知」,不「格物」,如何「致知」呢?

via Randy's Blog
2017 年终总结

Preface

我的 2017 过得很平淡,可能是因为出来工作已经是第二年了。

今年比较特别的是身边的朋友都大四了,参加了一些毕业拍照。大家都陆陆续续地开始找工作,面试。偶尔在朋友圈看到朋友拿到 offer, 也会替他们感到开心。

有很多朋友开始请教我一些出来工作的经验,面试的技巧、offer 怎么选择、租房的经验等等。被问到这些问题的时候我也会很开心。因为以前上学的时候,学业成绩不好,我在班上除了搞搞笑,对身边的同学来说并没有多大的「用处」。

4 月份的时候上台拿了 16 年的优秀新人奖,但是 17 年整一年没有做出很出色的成绩。慢慢失落地发现在很多事情上,技术并不是那么重要,它只不过是一种手段而已。

在年底,和 @EGOIST 一起创办了 StickerOverflow. 成功地让国内的开发者能买到高质量的技术贴纸。

今年想得比较多的是应该如何用自己的能力去帮助更多的人。想过去做培训,想过回大学给以前班的人开个交流会,想过写书。最后都搁置了,因为我后来发现,「助人」有时是一件很一厢情愿的事。

除了技术外,这一年有很多新的尝试,上台唱歌纪念张国荣,参加了唱歌的比赛,做了一期音乐电台节目。在新的一年,还想尝试去经营一个音乐博客,让更多人发现被忽略的优秀粤语流行音乐和歌手。

新年计划

2018 年的计划是多写写代码,多玩玩音乐,读更多书,换一间大些的房子,买一辆车。

有次和朋友聊天,她说,你知道自己想要做什么,又能把它做到,还能靠它养活自己。你千万不能变得世俗啊,如果你也变得世俗,我会觉得这个世界,真的就是那样了。

via Randy's Blog

Invalid media:
image
image
高中时的地下刊物

一个月前一位初中朋友 Bunny 发了一篇 《年少的文字》,讲起了初中的我们搞地下刊物的事,让我想起了那段时间这本刊物的一些点滴。

这份刊物叫《新视觉》。当年要做这份刊物,是因为那段时间,我读了很多民国时期的文学作品,还读了李开复的那本《世界因你而不同》,使我开始对政治、教育有了不一样的看法。

当时的我认为文字只有背负了政治的责任,才能称得上文学。所以看不起很多「当代文学」。我对当代文学的定义是 —— 1990 年以后出现的文学。

班里一个女性朋友很喜欢郭敬明,我却对此嗤之以鼻。于是我给我朋友传教似地讲了很多诸如为什么我们需要关心政治、我们应该读些什么书、我们需要什么样的教育等等这样的话题。但是她不以为然,认为我越俎代疱。

我想,我应该做一份刊物,来传达我的理念。因为「不识字的上人的当,识字的的上印刷品的当」。

就这样,我拿了一沓我们学校标准的信签纸,开始做了起来。我把这份刊物叫做《新视觉》,是源于白话文运动时,陈独秀所创的《新青年》。我认为这份刊物的目标,是为了提倡新思想,以摘抄严肃文学作品的形式,启发班上的同学,应该从现在起,去寻找自己的目标,自己想要的是什么,未来想做的是什么。而不是把所有时间,都花在试卷和娱乐上。

为了传达这份理念,我在首期的《新视觉》的第一页,认真地誊写了 Robert Frost 那首诗 —— The Road Not Taken.

我现在已经记不清当时摘抄了哪些具体的文字了,只记得抄过王小波、李敖、韩寒、胡适等等。

这份全手写的刊物开始在班上互相传阅,并不是因为内容深刻,而是因为形式新鲜罢了。我为了这份刊物可以维持下去,「聘请」了上文提到的女同学作为编辑,也接受所有同学的来稿。

接受同学的来稿后,刊物渐渐成了班级的一部分,甚至每一期都会有人催我「出版」。当时的「出版」形式,则是收集来稿,用钉书机装钉成册。

同学的来稿很有意思,有人开始做起了小说连载。而我还是做一些摘抄,顺便构思一些虚构类的讽刺文章。同时 Bunny 开始把手写的刊物改革成了真正的印刷品——每周回家录入然后打印出来。

因为刊物带有媒体属性,班级上一些事件也会被刊登到里面去。例如校运会,我们做了一份校运会特刊,报道了校运会的情况、现场照片。

虽然刊物在班上火了,但我并不是太开心,因为这本刊物慢慢偏离了我的初衷。我向 Bunny 提出要做一本《新视觉》的子刊物,就叫做「16 度」(我们是 16 班),把小说连载、读者来信这些内容都放到里面,《新视觉》只做严肃文学。

于是 Bunny 开始打造《16 度》,而我继续负责《新视觉》。发展到后来,《16 度》其实有很多地方和《最小说》变得很相似,是同学们饭后的话题、减缓考试压力的地方。很多人在上面连载小说。不生产的内容的,也会来留言,说自己对某篇文章的读后感。而这份带有意识形态的《新视觉》很快就没有再连续出版下去了。

以上是我对这份刊物仅剩的几乎所有回忆,手写的稿早就在初中一次搬课室的过程中丢失了。谁会想到这些东西未来会被这样津津乐道呢。这确实是一个遗憾。

via Randy's Blog

Invalid media:
image
image
image
养猫随想

我是个很怕负责任并且不感性的人,养一只猫对我来说,是一种很大的责任。

传闻说猫的智商相当于 2~3 岁的小孩,所以我会把养她当作是在养我的小孩,每个月要花钱换猫砂,去超市要顺便买些罐头,偶尔也想去宠物店看看有什么好玩的玩具。养猫和养小孩的区别,我想大概就在于前者的过程中不需要担负教育的责任。教育很难。

我外甥女今年刚好是 3 岁,有时候我也觉得和猫很像:见到什么都要摸摸看,甚至打翻。

对于猫打翻东西,一般来说,主人都会生气。但是我想,3 岁的小孩打翻了东西,其实是监护人的责任。既然家里多了这个不懂事的小孩,易打翻的东西就不该让她碰到。出现事故,自己要先反思。

她不会完全信任我,她吃东西,我路过,她有时还是会立刻跑开。帮她滴清耳液的时候,她看到我拿着瓶子也会跑开。但有时候我觉得她也很信任我,每次回家,不管她的时候她都要一直叫,非要爬过来腿上让我摸才停。养猫有趣的地方就是这里,你要向一种时刻保持警惕的生物身上获得信任。

第一次带她去医院打疫苗,在医院里我和几个素味谋面的猫主人狗主人竟然可以自然地打成一片,互相交流育宠经验,然后让自己的宠物见一见对方的宠物。大家都像妈妈们互相交流育儿经验似的。

有时候在路上看到走过的流浪猫,会想要不要把它养了,让她有个伴。但是想想,我确实还没有做好二胎的准备。

前段时间发烧,在搞保险报销的时候,我想如果可以给宠物也买保险,我也会给她买一份。

养一只猫不容易,何况养一个人。所以养猫之后,有时我会留意街上怀孕的路人,想她们是不是做好了准备,去承担这份责任呢。这需要一份勇气和担当,还有深思熟虑。

鲁迅在《热风》里谈到孩子,他说,「中国的孩子,只要生,不管他好不好,只要多,不管他才不才。生他的人,不负教他的责任。虽然“人口众多”这一句话,很可以闭了眼睛自负,然而这许多人口,便只在尘土中辗转,小的时候,不把他当人,大了以后,也做不了人。」

因此我很怕,我没有准备好,没有想好要怎么做教育。我要先把猫照顾好,才有信心去养一个人。

以上。

via Randy's Blog

Invalid media:
image
image
image
image
image
做技术要自信

我很久以前就把博客的评论直接去掉了,原因是大多数评论毫无营养,如果我发技术类的文章,评论都是「围观」,「膜拜」之类的内容。偶尔有人会通过微博私信问我技术,开头都是很客气,称呼我「大神」,然后声称自己很「菜」。总的来说,就是把自己的地位拉得很底,误以为这是一种谦虚。

「大神」这类的称呼一开口,会把两个人的距离感拉得特别长,就像闰土叫了迅哥儿一声「老爷」。我没有觉得自己很厉害,反而是越学越自卑了。我总结了这些视我为「大神」的网友,不过是经验比我少一些, 或者思考的东西比我少一些而已。

于是我回想自己刚接触编程的时候,也很喜欢逛 BBS, 看一些版块上有些许知名度的网友,发自己的新作品,心里很是羡慕,觉得他们技术很强,是无法触及的。我只能静静地看着,不断地思考他们做出来的功能是怎么实现的,然后翻书找。实在找不到,也会回回贴,发发站内信,请教一下实现的思路,不过基本是没有人会回复我的,因为那时年轻,提问的方式很蠢。渐渐地,我的经验也因为自己做的 side project 日积月累了出来,慢慢地也成了一些人口中的「大神」。

如果说这其中的成长有什么秘诀,我认为是自信:遇到自己不懂的问题时,永远相信自己可以通过不断的学习和查阅资料得到解答,并使解决问题的经验成为自己的一部份。

妄自菲薄会让人变懒,认为自己永远达不到别人的高度而放弃努力。很多人因为不自信,开始依赖别人,把自己活成配角,又苦恼自己不成长。我通常会建议他读一读《提问的智慧》,学会自己先思考问题。我从前也很害怕问比我富有经验的开发者问题,因为我害怕自己的提问很蠢。因此每次提问前,会先梳理好问题梗概,我做了什么去解决这个问题,最后才小心翼翼地把问题发出去。其实往往在梳理问题的过程中,自己就把问题想通了。

所以做技术要自信,不要做伸手党,要多思考。开源不是所谓的「大神」才能参与的,你也可以参与,从读代码开始。每一个你眼中的「大神」都不是生下来就会编程,他们只是善于自己解决问题,并坚信自己能解决问题,最后成功解决问题。

via Randy's Blog
从 React 谈 Web UI 开发

此前我在 Twitter 上这样表达过对 React 的理解,但是 Twitter 篇幅有限,所以在这篇文章里,我要做更详尽的阐述。

我从前不喜欢 React, 是因为写 React 的 render function 不像写 template 一样方便,尤其是存在复杂的判断渲染的时候,Vue 的 template 一个 v-if 就搞定了。而在 React 里写,需要把这个判断写成 function, 然后条件判断 return 哪一个 view. 这是我最初对 React 的偏见所在之一。

然而经过自己的实践和思考,加上阅读一些文章,我发现以前的想法是错的。我在使用 React 的时候,没有做到 Thinking in React. 从而对 React 产生了不解和困惑。

有很多人把 React 当成框架来用,这是用不好 React 的根本原因。很少人认真思考 A JavaScript library for building User Interface 背后的含义,把 React 用得一团糟。

何谓 For Building User Interface? 意思就是,这个库仅仅是用于构建 UI 的,这是 React 本质要解决的问题。我甚至和很多人说,事实上 React 本身是不是 React 已经不重要了,重要的是我们写 UI 的思维。React 这个 library 本身仅仅是用来实现这个思维的手段。React 提供的,是优秀的 DOM diff 算法,和一套 Component system。换成代码来说,也就是:
(state) => View

这是 React building UI 的核心思想,所有的组件,就是接受 state, 返回一个 View. 这样看上去比较抽象,比如我们有一个 Clock 组件:
const Clock = (time) => `
&LTdiv id='clock'>
 &LTspan>It's now: &LT/span>
 &LTspan>${time}&LT/span>
&LT/div>
`

Clock 是一个 function, 接受一个 time 参数,返回的是一串 HTML String. 在程序里,我们可以给一个 Interval, 每秒传一个当前的 time, 得到一个新的 HTML String, 然后 apply 到某个 DOM 上。
const $app = document.getElementById('app')

setInterval(() => {
  $app.innerHTMl = Clock(Date.now())
}, 1000)

这样的实现是能达到目的的,但是问题在于,每次 innerHTML 时,整个 #app 的 DOM 树会被重新渲染。

我们都知道,DOM 更新的花费是昂贵的。整个 DOM 树,实际上只是一个 span 在不断变化,所以我们需要 DOM diff 算法来得知到底哪一个 DOM 节点才需要被更新,从而节省开销:
const Clock = ({time}) => (
  &LTdiv id='clock'>
    &LTspan>It's now: &LT/span>
    &LTspan>{time}&LT/span>
  &LT/div>
)

const $app = document.getElementById('app')

setInterval(() => {
  ReactDOM.render(&LTClock time={Date.now()} />, $app)
}, 1000)

在 React 里,把 props 传入,返回一个类似 HTML 的结构,然后 render 到指定的 DOM 节点上。这里 React 会算出哪个节点应该被更新:

我们这样手动去 setInterval 然后 render 未免有点傻,我们可以更改 state (也就是通常用到的 setState) 自动地让 React 随着 state 的改变而重新 render. 这里的 time 就是一个 state. 这叫做 Reactive.

Functional Programming 里有 Pure Function 的概念。Pure Function 之所以 Pure, 是因为不存在 side effect. 举个例子,我们写一个求和 function:
function add (a, b) {
  return a + b
}

这个求和函数就是一个 pure function. 因为函数内部没有对 input 做任何改变,并且返回一个新的值。我传 1 和 1,得到的永远是 2.

Pure Function 的好处是利于维护和测试。要测试一个 Pure Function, 仅仅是传不同的值,预言对应的返回值。

现在回头看 React 的 Component, 也可以算是一个 Pure Function——接收不同的 props, 然后 render 对应的 View. 上面 Clock 的例子,props 和返回的 View 是映射关系。

光是 state => View 还不够,在构建 UI 的时候,我们希望 state 改变的时候,立即 rerender 整个 View, 也就是我们经常用到的 setState().

这样就很容易理解为什么我说 React 仅仅是实现构建 UI 思想的手段,因为构建 UI 的思想总结起来就是:

1. State 是 Reactive 的 (比如 React 的 setState)
2. state => View (依靠 DOM diff)
3. View 组成 Component
4. 管理 state (依靠第三方的 state manager)

无论是 React 还是 Vue, 大抵都是这样的思想。Vue 1 还不完全是,Vue 2 就更接近了,只是后者写法既可以写得像 template, 又可以写直接写 vdom.

而开发者常常感到困难的地方实际上是上面的第 4 点——管理 state. 写 React 写得痛苦,大部分原因是用把 library 当成 framework 去用,把处理 state 的逻辑瞎写到 View 层中去,也就是所谓的 Dump Component.

改变 state 是 side effect, 我们应该把它从 View 层中分离出去。我多次提到,View 层真正要做的,仅仅是根据 state 返回对应的 View. state 的变化逻辑,应该在给 state manager 库去做,例如 Redux, Mobx. 下面我用 Mobx 作为例子:

https://jsbin.com/fumerup/edit?js,output

如果没有接触过 Mobx 不用慌张,只需要知道,Mobx 的 Observable 变化时,被 observer 包装的 React 组件会重新渲染。使用 state manager, 明显地分离了 View 和 side-effect:

测试这样的程序,首先为 side effect 的逻辑做测试,再为 View 做测试。View 的测试在这里就十分简单了,给他传一个 store 实例,借助 enzyme 之类的 testing utilities 预言不同的 action 得到的返回 View.

React 是 Reactive Programming 在 Web User Interface 上实现的手段,它只不过是一个库,提供了reactive render, component system 和降低开销的 DOM diff 算法. 把 React 换掉,只要不是手动操作 DOM, 其它的框架也不过大同小异。重要的是理解它背后的思想。说到底,前端开发在解决什么问题,用什么样的方式解决问题,在使用任何框架和库之前先把这两个问题思考明白,就不会认为前端难学了。

via Randy's Blog

Invalid media:
animation
animation
animation
image
Back to Top