关于前端:五年有余离开前留点文字忆往昔

2016年退出，2021年来到，五年无余。
有过美妙，也有过无奈，辞别数云之前整顿一下，留点文字忆往昔。

人力问了我两个问题

提出到职后，人力问我为什么会抉择来到。
我顿了下，很平静的说道：“以前晚上醒来，会想着明天要去做什么事件，而且是那种特地想要去实现的事件。”
“可是，当初的晚上却在懒床。”

人力笑出了一个我懂的表情，而后问了另外一个问题：“五年多的工夫里，你最大的播种是什么？”
思考了半分左右的工夫，直视着人力说道：“忍受”。

在人力诧异的眼神中，我想起了许多。

技术不进则死

在 2015 年开始保护博客的时候，就在博客治理端中写着一段 22px 的自勉：技术不进则死，即然抉择，请保持！

遐想 2016，只写过 jQuery 和react demo的我在面试时，更多展示的还是基于 jQuery 的各种伎俩。
直到有一天，刚把 angular1.x 脏查看搞明确的我，猛然间发现各大社区都在欢庆 angular2 的横空出世。

本着技术不进则死的自我勉励，连忙照着示例写了一个 demo。
看着这个 angular2 的demo，心田满是 MMP：“这特么就不是同一个框架好吗？”
略微一犹豫，工夫就过来了几个月。在上海团队再次扔过去一个我的项目的时候，框架竟然是 React+angular1.x 的混搭。

只有 React 字母编写 及React demo 开发教训 的我，不得已开启了 React 的学习之路。
又是一套不同的前端语法糖，又是一套不同的前端思维。期间在翻阅各大社区时，偶然间发现了前端框架的占有率折线图：看上去 vue 2.0 势头也很猛哎？

脑袋只有一个，压哪个？

学哪个框架

2016 年下旬，老夫 jQuery 一把梭的时代曾经成为了过来式 (伪装这里有张图.jpg)，angular1.x 也渐显颓丧。看着那本九成新的 精通 angularjs，开启了自问模式：[Angular2, React, Vue2]，先学哪个？
摸着自已稍微后移的发际线，通知自已这个问题很重要。不仅要在网上收罗万相，也要在同行里发动探讨。
一翻折腾之后，惊的一身冷汗：在 2016 年的某一天，Angular4.0公布了。

一念之间，想到了 java ssh 框架之一的 struts。彼时的我还是一名java 粘贴工程师，糊涂之间经验了某个我的项目从struts1 降级到 struts2 的悲惨历程。
那一次，struts给我留下了闭包式的回顾。许久未能痊愈的我，便投身到据说相当美妙的前端行业。

此时此刻，恰如彼时彼刻。
如业界多位大佬所言及的论调：前端能够摸着后端过河。

办法有了，就开始摸吧。
要说摸后端过河，那必定首选后端架构师。巧如拍戏，那次年会我和架构被分到了一个标间。

于是，我问了几个问题：

• 当年的 struts2 当初还有我的项目在用没？
• 当初的后端用的什么框架，这套框架后续变动如何？
• 当年的后端框架是否也呈现过百花齐鸣？
• angular这种断崖式版本，还值不值得学习？

架构的答复，汇总下只有六个字: 万变不离其宗。

以实现业务逻辑为目标，针对性的学习框架；以原生 JS 为基线，全面晋升技术能力。

原生 JS 才是外围

下面有提到在 2016 年面试的时候，展现了基于 jQuery 的各种伎俩。在这些伎俩中，最次要的便是一款表格组件: GridManager。

2016 年初，立了个 Flag: 移除 GridManager 对jQuery的依赖，革新为纯原生 JS 实现。

这是一个大胆的尝试，也是一次瓶颈期的自我冲破。后续在学习各个框架的 API 时，总能很快的了解其背地的实现逻辑。

而后，我做了另外一件事：将 GridManager 中的根底办法抽取为 js 类库，命名为 jTool，以此向经典的 jQuery 致敬。

jTool是一个相似于 jQuery 的 j s 类库 ，蕴含了罕用的jQuery 的办法，如：Event，Ajax。

做为泥腿子出身的程序员，jTool 的编码过程并不顺利，回想起来有以下几个起因：

• 技术思维固化，在前端框架异军突起的 2016，jQuery的 DOM 思维尚未扭转。
• 编码过程中波及到很多原生 API，须要常常查找文档；磕磕绊绊的编码岁月里，MDN 全程陪伴。
• 因为定位为类库，所以会对代码重复雕刻；然而重复雕刻有个更加艰深的名词：需要变更。

期间也有过退却的想法，特地是在周末的凌晨：解决不掉睡不着的 BUG，跳动的工夫和家人一直的督促，身材的窘迫和第二还要去公司打罐头的生存压力。焦躁感上来了，把电脑一扣。上个厕所吸根烟，又打开了电脑。

当 2017 后的某一天，将 jTool 引入 GridManager，随着npm run start 顺利展示的那一刻，冲动的把成绩到处展现，以至于遗记了有些人不是同行。

jTool, 集体编码路上的里程碑。

兴许这种有指标的学习形式，才是适宜我的形式。

明天在整顿这个文章的时候，有了一个感悟: 让 jQuery 走向败落的起因可能并不是那些框架，原生的 javascript 才是 jQuery 的掘墓者。

随着 ECMA 的每次提案，javascript都在一直的排汇着 jQuery 的价值。其它框架，又何尝能够逃脱这个魔咒？

岁月催人老，一沉睡来 Angular12 了。

工程化思维

来数云之前，只应用过 gulp，仅是那种字面意义上的应用。接手的我的项目以gulp 为主，尽管过后不太明确这些 task 的甬道思维，但同行者众，互相学习。

2016 年的 6 月，我和个陕西妹子结对编程，写了第一个基于 webpack1 + angular1.x + es5 的我的项目。<br/>
尽管不久后公司勾销了结对编程，但反动友情长存，革命者尚众，前端人员互相分享着教训:

• es5 -> es6 hi, babel
• eslint 代码校验
• jenkins 前端公布工具
• jasmine+karma 单元测试
• mock 写个假接口自已调
• node 写个真接口自已调
• linux 边写边忘
• ……

至于webpack, 一众人等从 1 升到 2，再升 4，最升 5。而后，分道扬镳。

对于工程化，我当初的了解: 用于服务外围代码的工具及代码即为工程化，蕴含但不限于构建、校验、单元测试、公布、服务器接管。

对于工程化，同一个团队应该放弃对立。

印像最深的一件事

到公司不久后，接手了一个我的项目的重构工作。首次看到这个 jsp 我的项目时，立即就晋升了我对麻雀虽小五脏俱全的认知。

遐想当年，正在配置 jdk 和idea的切图仔一转头与项目经理四目绝对，项目经理意味深长的说了句：“这我的项目每年双 11 都会解体，曾经 5 年了……”。躲闪过项目经理关爱的眼神，冒出来一个想法：我当初跑路还来的急不？

一闪而过的想法之后，是扭转这个现状以证实自已的机会。
将我的项目跑起来后，发现性能问题有点罄竹难书的意思，较大的几项如下:

• jsp未实现前后端拆散
• 无模块化概念
• 接口调用频繁，且这些淘宝接口的调用须要免费
• 超多的 setInterVal
• ……

对这种领有肯定年龄的我的项目，渐性优化的步骤如下：

• 搭建一个新的前端我的项目，过后采纳的webpack2 + angular1.x + es6
• 将原我的项目通过 iframe 嵌套入新我的项目，此时我的项目能够残缺的运行
• 以一级菜单为单位，进行渐性重构
• 革除历史遗留代码，保障外围性能清晰
• 提供静态数据缓存计划，对非必要性接口只在首次加载时调用
• 搭建 CDN，将公共资源替换为CDN 资源
• iconfont整顿，尽量不应用图片
• 解决 index.html 缓存问题
• 罕用数据的加载机制调整为预加载
• 查看火焰图，查找 js 性能瓶颈并优化
• 寻求产品、后端、测试配合，期间要学会忍受

五年前认为对研发人员来讲技术能力最重要，五年后认为团队合作更重要。

我眼中的治理

刚到数云不久，在 项目经理. 张 和前端经理. 郑 的提携下，素来没有治理教训的我被安顿到了前端组长的地位，治理一个 4 集体的小团队。
那是一段糊里糊涂的摸索期，项目经理. 张 通知我:“少写一些业务把精力放到其余的事件上，比如说人员成长，公共组件”。

然而，在除了业务代码以外的事件，我其实是找不到脉络的。

直到起初 大领导. 蔡 亲自下场领导(批评)，才多少找到些方向。随着工夫的推移，五段年华成为往事。

在这些往事里，有几个想法值得记录：

• 领导常常会说：“我心愿你能把问题提前抛出，而不是等到了截止日期再让我晓得”。然而，当你在提前抛出问题前，最好想想是否真的没有了任何的解决方案。
• 上司的工作安顿该当互相穿插、松弛有度，互相穿插是为公司负责，松弛有度是人员成长的前提。但若你抉择松弛有度，那么来自下面的压力须要你单独承当。
• 协调人员时，部门内能够齐全依仗职位，部门外却必然须要一些人缘。所以少做亏心事，是自已的锅就请站直了背好。
• 治理很难做到一碗水端平，因为人是有感情的。

忆往昔，往往意犹未尽。

拾掇行囊，向着今天登程。
个人简介: 只有保持，蚂蚁也能移走愚公门前的那座山。

传送门

• GridManager 请不要悭吝 star
• jTool
• 集体博客