我的2020，在非常时期的非常努力

希望这次文笔比去年有些进步吧，我真不是奔着礼物来的，你们看我淳朴的眼神……

去年的故事延续

去年开发的小程序，今年疫情期间临危受命，访问量暴增，1月31日当天，累计用户从3000多达到了17000多，当天访问次数三万多次。各个基层单位纷纷自觉转发，一下让我感觉受宠若惊了。

出名以后，我得到了一些现金奖励，于是我正义凛然的砍掉了广告模块。绝对不是因为三万多流量只有60块钱广告费，我是那种唯利是图的小人吗？广告对用户体验太差了，我当然是真心为用户体验考虑……（领导豪气冲天，再次感谢）

外包开始

八月份开始，迫于一些外部原因，我准备接点外包试试，看能不能赚到钱。下了个Boss直聘，撩了几个老板，联系我的人还比较多。根据之前的技术积累，我觉得vue是我比较喜欢，也比较有把握的方向，价格倒是次要的。简单的了解之后，我加入了一个全员兼职的团队，第一天发给我一个测试题，随便写写就OK了，第二天就开始正式接手。

这个项目是一个比我大两届的校友接的，所以价值观、能力上，都比较认可，容易建立信任，这个是很重要的因素。项目是预付款制，接到手没几天，就打过来一些钱，给我打了强心剂。第二笔是一个多月以后打的，那时候是项目最艰难的时候，关键时刻全靠钱撑着啊！最后尾款是项目结束以后给的，不知道因为什么拖延了半个月，我也不想去猜原因，但是给我了，我就很感激了。因为我在项目中的角色变化，所以加了很多钱。

技术方面，项目分为演示版和正式版。技术结构就是传统的BS，vue + elementui做前端，Java后端。因为需要先给客户演示，所以临时搞了个演示版，但是演示版数据都是mock，而且客户并不知道其实演示版也是临时做的，老板的合作伙伴，对客户说，这个系统都是提前做好的。所以从接手的一瞬间开始，项目就算delay了。WTF……

吐槽太多怕暴露身份，下面说说我在项目里的收获吧。

干货：vue的组件化

第一次用vue做一个比较大的工程，基础结构都已经有人写好了，比如公共的请求api，后端接口文档，都是很齐全的，基本上是开箱即用。但正是因为vue上手简单，恰恰容易导致乱炖式的代码结构。一个页面，如果有10个弹窗，很多人都会选择写在一个文件里，这样组件之间的调用，会变得特别容易，只要上下翻翻就行了，比如：

<template>
  <div>
    <input>
    <button>
    
    //弹窗a
    <dialog-a>
      aaa
    </dialog-a>
    //弹窗b
    <dialog-b>
      aaa
    </dialog-b>
  </div>
</template>
        

这样写，有且仅有一个好处，就是简单，各个组件之间不需要做通信。但是一旦弹窗很多，form里很大，比如我们的金融类系统，表格非常多，整个文件会很快到达好几千行的规模。

同时，在另一个页面，如果需要用到这个页面的一部分，也只能复制粘贴过去。如果a页面改了一个变量名，b页面经常会遗漏。这不仅仅是代码优雅的问题，是bug数量会无法控制，项目会完不成的问题。所幸当时整个前端，在我加入的时候，基本上只有我自己开发，所以核心页面，我都在一开始就准备用组件化来实现。虽然后来遇到了一些不得不复制粘贴的情况，但是总体上还是组件化的，我觉得这是项目能完成的关键所在。

项目完成以后很久，我才了解了一些react框架。这时我才意识到，vue在组件化这方面，确实有一些阻碍。尤大在技术分享中，也曾提过，vue和react比，更像是提供给设计人员的框架。vue之所以成功，是在技术层面牺牲了中大型项目的可维护性，但是提高了易学易用性。

在组件化这方面，react像是降维打击。在代码越来越多以后，数据和展示分离的方式，就变得越来越难以维护了。我举一个简单的例子，有两个组件，A和B。

vue实现

组件化的时候，A的数据需要传给B展示和修改，然后在A中，还需要使用。B在修改数据以后，需要emit回去，A中需要监听处理。我们的项目中，因为表单还不算太大，最多只嵌套了两层组件，这时候代码逻辑已经达到我能理解的极限了。

当然，我只是对两个框架进行了简单的对比，并不能代表vue不好用。我也没有react的实战经验，react里的坑我也不了解。这里，我只是对jsx这种技术路转粉，当初因为保守，一时难以接受新语法，现在回头看看，还是要拥抱变革啊！

react实现

干货：测试

测试这块，算是个遗憾吧！因为项目里貌似只有我用过python爬虫测试过api，而我当时又比较懒，也没想到后端并不稳定。如果当时用一些时间，写个爬虫，每天跑一遍所有后端接口，我们的项目能至少提前半个月完成。很多时候代码出bug，不知道是前端还是后端问题，又因为都是兼职开发，前后端时间不同步，经常一个小问题都要拖一天，没法定位。

如果前后端分离开发的话，大家一定要做一个Python爬虫来跑后端接口，这样随时掌握接口变化，前端代码写起来才会胸有成竹。

最后推荐一个前端自动化测试工具吧，playwright-python，以前我用过nightwatch/mocha等，都是觉得代码量太大，配置太繁琐，没用起来。前几天看到公众号有推送这个，感觉终于是有了个靠谱的工具了，开箱即用，又有微软撑腰，大家可以尝试一波。

结尾

从八月中旬开始接这个项目，到十一月中旬才算脱离项目组，算算大概三个月吧。每天都是下班开始，忙到凌晨一点左右。人为财死鸟为食亡，古人诚不我欺。好在项目结束的时候，作为前端负责人，和老板、后端负责人一起，坐了我人生中第一次飞机，也是第一次去深圳，去给客户交接后续运维工作。算是一次公费旅游吧，去大城市，看看深圳如今的样子。

作为一个即将脱离行业的中老年程序员，再次走进这个行业中，去给那些刚刚毕业的，满脸稚嫩的95后，讲我吭哧瘪肚做出的这么个项目，我的内心充满焦虑和不安（而且我的PPT是现场写的）。尤其是，我们三个头一次用无线投屏，我甚至提前准备了一个VGA转接头，那一刻我意识到：我真的老了。

我们把代码结构用一天时间给他们做了交接。如释重负之后，第二天我们去深圳大湾区逛了一圈，步行走到港珠澳大桥。这个城市，不适合我这种没什么干劲的人，在听说了当地房价之后，我甚至对那里的年轻人产生了一种同情。也许他们会笑我没什么追求，但是这一次，围城里的我，真的不羡慕围城外的生活。

兄弟们，明年见吧！愿2021少一些996，大家多一些薪水。

本文参与了 SegmentFault 思否征文「2020 总结」，欢迎正在阅读的你也加入