algolia 搜索需求，做的快自闭了...

Posted 2022-07-05 一百个Chocolate

大家好，我是 Chocolate。

6 月份，别说，做需求那真的是做的快自闭了，今天咱们重点聊一聊这次接触 algolia 搜索这玩意。

提到搜索现在就很烦，6 月份穿插着做这个搜索功能，为啥说很烦呢，先例举一下：

• 前端项目比较老，原生 html css js 来做
• 提过来的需求有点离谱
• 设计提供的设计稿实现起来挺困难的

前端配置问题

那咱们就逐个聊吧：
首先是前端项目配置问题，尽管 algolia 支持，提供了 js 版本的库，叫做 Autocomplete，官方文档的搜索效果也是用这个来做的，并且还提供了相关搭建介绍。但是让我去实现起来是真的麻烦啊，在 js 文件里边写 html，你敢想吗？

其次会存在很多重复代码，当然这里重复不是指一模一样的代码，一样的当然会抽出来，这里只是形式一样，但你就是得写。

可能你要问了，js 怎么写 html 啊？

简单…用模板字符串拼接就行了，好在 algolia 提供了一个 html方法，将 html 文件放在 html 中就可以了。

这样子做不好的点就是不好进行模块拆分，代码直接写在一块，还是写在 js 里边的，突然想到写 jsx 才是真的爽。在实际码代码的时候，代码文件比较长，还需要滚动查看上下文，这也是我不太喜欢的开发方式。

平常能拆分细一点的尽量拆开，这样一屏就能看到主要代码，也方便分屏开发。

总结这点，对于老的代码去做一些新的东西，写起来确实很费劲，效率不是很高，那这时候可能就会有小伙伴提问了，项目比较老，可以换新的呗，想用 react 直接换。这就是下面第二点咱们要聊的了：

需求太离谱

第二点，提过来的需求有点离谱。先回答上述末尾问题，尽管是一个静态页面，表面上看着不难，但我不清楚项目里面会有什么特殊的内容，比如原本采用的是原生来做的，如果我换了 react，是不是得重新看一下相关库，有些页面可能还进行了埋点等，所以这里面有过往大部分需求存在，潜在风险还是挺大的。另外，就是当初产品说没多少时间给我来做，因为我算是接手的，之前由另外一个前端做了几周，发现做不出来了才转给我。

按照时间来看的话，留给我的开发时间就不多了，但最终结果是，还是穿插着搞了一个月，有这时间我完全可以替换新的框架了，呜呜…

再来说一下这个需求，因为不太清楚之前是怎么进行评审的，就说这些功能可以做，后面当我翻阅文档之后，才发现有些功能还真就不好做，还需要一定人力成本，搜索的话其实对于前端来说应该不是很难的点，渲染出来搜索页面即可，这里主要是数据的获取，algolia 内置帮你做好了搜索结果匹配的功能，只需要你提供好相关数据就好了，这就涉及到爬取数据了，目前我们这边后端同学不会 Python…

没办法，大学那会自己玩过，硬着头皮自己学了一遍，花费了几天终于算是写出了一个完整的爬取代码，数据对于这个需求还凑合。

那么，前后端看起来应该都没啥问题了，为啥还能搞一个月呢？那就得看第三点了：

设计稿交互，难！

第三点，设计提供的设计稿实现起来挺困难的。开始的时候，我一直以为设计师们看了 algolia 官方的效果，后面做了一版之后发现并没有，而是根据某网站实现效果来做的，所以在上一点我就提到不清楚之前是怎么评审的，在设计这块他们认为这些都能做，但之后我翻阅文档评估之后，发现还真就不好做。

完全是两套风格了，产品和设计这块也出现了沟通上问题，有些排版显示可能也不是产品最开始考虑想要的效果。所以最终我去做的时候页面实现就出现了割裂效果。

经过好几次沟通，这里要说一下，当时情况是好几个人来到了我的工位身后，那场面，整个一片区域都是在说这个搜索的事情。这期间改了好几次设计稿，最终的最终还是运营和设计相互都进行了妥协，按照 algolia 官方的交互效果来改动，最后这件事情终于结束了。

让我整理一下

这段过程，可谓真是累啊，也算是给自己开发路上多了一些要考虑的东西，在这里和大家分享一下吧：

1.比较重要的需求，尤其是需要提供方案的，一定要多了解这个背景，评审的周期可以拉长一点，我倒是觉得这个页面包括这个数据获取对我来说并不是痛点，这是可以花费时间来解决的，痛点在于做出来的成果和期望有较大的差距，而导致这过程出现大部分还是沟通上问题，其实沟通的成本才是这个需求应该反思的。

2.尽量不要去接手半成品需求，先不考虑甩不甩锅问题，转到自己手上了，那还是先主动多问一下，评估一些风险情况，如果有遇到难点，还是得主动提出来，做不了就是做不了，毕竟实现的是我们自己，其它人员不会去考虑你的框架或者代码新旧的问题。

3.也许这是一个大的挑战，但经历过之后会发现对你的成长帮助还是挺大的。

是失去了还是得到了

接着来说上述最后一点吧，这一个月还是觉得学了挺多东西，比如自己研究了 algolia 这个网站，对于大部分文档内容都阅读了一遍，大概清楚这里边有哪些坑，比如某些功能他们做出来就是为了他们付费功能而铺垫的，这也是必要的，这网站当然不是给你白嫖的，还是会有一些增值服务的，而就是这种增值服务，可能就是我们想要的。

比如这个爬虫功能，当初我还特意去咨询了客服（通过翻译来进行英文交流），官方提供了爬虫功能，确实看起来很好，不过将美元换算了一下，一年大概花费 12w，这笔巨资完全是没必要的，当时我也是被这价格吓到了，和组内说了一下，有点坑，感觉自己写个爬虫也凑合，也许我们爬取的内容不需要用到这么高级。

之前也提到，为了数据爬取，自己学了一手 Python，对于简单数据获取这块，自己也能写一些了，另外，代码肯定是不能放在本地的，我需要有一个定时任务，比如每周一早上 7 点自动执行一下爬取代码来更新最新的搜索数据，这里我就又学了一手 CI，将脚本准备好，交给 CI 帮我自动完成，这种新颖感觉真不错，发现这是真的香，在很多场景都能用到，以后一些重复劳动还是交给机器方便。

末尾

那么，对于搜索这一块我就聊这么多了，有失也有得，失去了很多耐心，付出了很多，但终究还是得到了许多，这份经验值我加上了~

本文首发于个人公众号「小狮子前端」，喜欢可以来关注一下，至于点赞大家都懂的哈。

这次就定个小目标吧，20 赞咱们下期很快见面，我还有许多内容要分享呢~