一人两年前端的自我总结

写这篇文章的目的

作为两年的前端狗来说,我所会的还很少,所以我也无法在字里行间中给各位带来啥子的技术提升,这篇文章的目的也只是对我这两年的工作总结,我也只是在找一个答案而已.

有人会说,一个菜鸟学什么大牛写技术总结,是的😂,文章很多地方都存在问题和缺陷,这也是我为什么写出来的原因,所以还请大家可以尽可能的批评我的不足,我一定不(肯定)改.

下面正文…

什么是前端

我在面试的时候经常被问到这个问题

一直以来,前端都是是在技术鄙视链的下游,下面是网上某个项目的技术栈实现

…可能真的不需要前端什么事了.

对于大多数人来说,前端的工作就是撘页面,其实没有错,10年以前的前端工作确实是就是对原型图的还原,html+css+js就构成了当时互联网的大壁江山,这既是前端的局限性也是前端的特殊性,这既是那个时代的骄傲,却也是那个时代的无奈,前端的编程语言从诞生开始就充满了焦躁和不安,10天创造出的语言就像是培训速成班的学生那样,缺胳膊断腿而不自知.

智能机的出现引领了客户端和后端的繁荣,可怜的我们既无法像后端那样零距离接触业务,支撑着公司的希望,也很难像客户端那样,给用户带来更好,更流畅的应用体验,享受着流量红利.我们夹在中间啥也不是,我们只能借助着混合开发,把自己和用户拉的更近一点.

后来node出现了,我们似乎看到了救世主,我们终于可以写后端了,node的诞生催发了一系列前端工具和包管理器的产生,前端的开发流程开始变的复杂,webpack, gulp, jest, lerna, babel, npm…, 因为这些,前端界也开始有了前端架构这样的资深角色,我们终于可以鼓起勇气说自己不再是切图仔了,是吗,是吧,新技术的诞生使我们可以承担的更多的角色,我们会写一部分的接口api来充当一部分后端的角色,我们也有能力写一些RN的原生应用来换发前端的活力,我们还能用Electron来表示自己也是优秀的软件工程师,甚至,我们甚至还有自己的os系统(没人会用的…)来表示但凡能用js写的终归会用js写的.

不过,我们一直在追求的难道不是极致的用户体验吗,难道不是用户即用即走的无负担操作,难道不是Chromeos中所倡导的一个入口的理念.所以,你说前端是什么.

我两年都做了什么

迷茫

我并非计算机科班出身,也非毕业211大学,只是一名学设计的普通本科生,可能很多前端和我一样,都是半路转行,转行的那年,我花了三个月的时间补充前端知识,为啥学前端而不是java,python啥的,说实话,当时觉得前端入门简单,会一些html,css,和基础的js就行了,学完之后,写了写简历就开始投了,工资要的很低(当时并不是奔着高收入去的),在上海面试了几家,有一家还是外企,蹩脚的英语交谈后,我还是收到了sorry的回复,然后就没然后了.我已经开始思考自己的选择是否正确,开始迷茫前面的路.

公司入坑

在上海找不到工作,房租又贵,年末的时候我就回老家了,补看了一段时间的js基础后,大概是一月底的时候,我重拾简历,往返与上海杭州之间,最后,进了杭州的一家公司,前端人不多,一共加起来就三人,还有一个兼做后端开发的,三月份的时候公司准备在facebook上投放一些h5的星座类游戏,我并没有接触过手机端的内容,当项目经理问我用什么技术的时候,我也只是因为看过angular.js的一些内容,就贸然的建议使用该技术,虽然这个框架在那时比较流行,但我现在仍明白为啥当时的小伙伴会认同这个技术适合这个项目,两个星期后,唯一的小伙伴离职了,兼职做后端的哥们也完全开始做后端了,刚入行的我就开始成为这家公司的’前端专家’了,有人劝我离开,一个人做没什么意思,的确,一个人写前端确实很难,也很坑,因为你没有交流的对象,你没有老师带着你,你也不知道项目的开始到发布到落地的整个流程,你只能自己摸索前进,这是件痛苦的事.

我还是拒绝了朋友的建议,我打算自己独挑大梁,后来我用一个月的时间重写了星座类的项目,用了zepto工具,搭配原生js,我把页面的大小降低了60%,这令我额外的开心,于是我开始在网上找各种手机端的优化建议,把它实施到自己的项目中,最后写了通用的模板组件,通过配合后端ssr渲染,设置不同的游戏类型输出,中间也遇到了facebook的浏览器的各种兼容问题,因为这个还学会了科学上网,开始从翻阅百度到翻阅google的路程.

游戏的项目进行了四个月,因为投放的效益所带来的转化率不高,老板打算停止这个项目,我竟然傻到向老板建议重新优化来获得更高的转化率,老板笑笑,拒绝了.这个项目也就黄了.

ERP是个开始

公司的业务在8月份的时候进行了调整,后端的业务剧增,前端这边除了一些活动页外,并没有很大的需求,我也开始利用上班的时间开始大量吸收前端的内容,利用公司的资源,尝试不同的技术,并期望利用这些技术能够做对公司有利益的事,月底的时候,运营人员开始不断抱怨erp不好用,我便提议重头构建一个erp系统,框架用了当时的新贵-vue,首先打一个webpack的构建工具,重构原有的登录系统,权限系统,分好业务模块,将原有的功能以iframe的形式嵌入,这些大概花了将近一个半月的时间.

没办法,因为原先的系统是后端做的,后端走了,所有的接口定义我都需要自己看,于是我花了三周的时间学了基础的java和springboot,然后整理接口定义,参数.大家不要学我…😢

基础功能完成后就上线给运营和产品用了,剩下的业务模块采用渐进式的方式重写(一个人写好苦),当时并没有什么前端架构的意识,甚至代码习惯也差,脚手架的功能缺失,文件夹放置随意,服务分离,git提交随意,大小写混用,发布无流程等等,这也是小公司的缺陷,如果没人带,你会走很多弯路,现在回头看自己写代码,简直就要崩溃.项目一直在持续,业务功能也随着公司的扩大不断增加,除了原先的帖子素材相关模块,往后陆陆续续增加了数据中心,产品编辑,H5样板编辑,广告分析,社交管理等等一系列模块,大概有20多个业务产品,每个产品大概有7,8个功能模块,页面打开开始变慢,每次更新后打开页面就会等待几十秒的加载,原先的东西等待新一轮的重构.

重构风云

其实之前的东西不算重构,只是把一个很不好的东西变成了有些不好的东西,第二年的年初,我便打算重构ERP系统和监控平台,我开始思考如何有效的开发管理一个企业的ERP系统,如何让使用者零感知使用状态.服务心态从而驱动技术的革新是我这一年最大的体会.

差不多花了两个多月的时间重构了大部分的业务模块,重构替换了react,原因是vue和typescript太不友好了,复杂的前端体系必须是以强类型为基础的,弱类型带来魔法效果弊端远远大于益处.其实对于ts还是要谨慎对待,因为加入了ts会大大增加了业务代码的繁琐和难度.

除了框架的改变和强类型的加入,我重新构建了脚手架,增加dll打包模式,搭建jenkins平台,采用自动化构建发布,增加单元测试,用express搭建中间层实现了GraphQL,同时抽离了axios模块将其接口封装并缓存接口请求结果,自定义了form表单,chat和table三块比较常用的业务模块(好不喜欢ant的Form),将业务模块异步加载,优化渲染模式.

在而后的几个月,公司的大体前端的技术栈也慢慢形成,以React为核心的企业运营系统和以express为核心的中台系统.

再次迷茫

公司在一月初打算尝试境外电商的项目,但是对市场的把握不大,不想浪费过多的时间在研发上,于是找我谈话希望我开发一个webApp来试水,我欣然接受,却也是没底,对于客户端的内容我不熟悉,这又是开拓型的产品,后来公司听取了我的建议招了一个有webApp经验的前端,项目最终还是用了react作为技术栈的实现,项目前后花了将近一个月,工程这边加上联调测试的时间差不多20天,项目在历时2个月后宣告失败,失败的最大原因是物流问题没打通,用户经常投诉.还有一部分原因是webApp的sku出现了线上与线下的不匹配,页面交互这些问题都没有得到及时的反馈.物流问题我无法解决,但前端的问题,是我的责任.后来看到小菜大佬的前端架构图,我才发现自己有多么的不足,迷茫又开始了,直到写完这篇文章的最后,我想,我还在找答案.下面的是个人对自己学习的看法,希望获得大家的意见和建议.

感悟

学框架还是在学用框架

从三大框架,到三大框架的衍生,再到各个大厂的开源库,前端有一大部分被框架所笼罩,我们的学习时间也大部分花在了学习使用各种框架上,甚至很多的培训班都已教授框架的使用来作为课程的目的,这对吗,这显然不对,就是好像你会开飞机就代表你会飞吗,我也曾经将大部分时间放到学习使用各种框架上,后来我渐渐的发现各种框架的底层思想都是大同小异,虽然实现方式不同,但思想无非是那几种:组件化,虚拟dom,diff算法,模板语法糖,异步更新,ioc等等,这点上vue做的很好.真正无感知.

很多人觉得使用vue是很low的一件事,一些面试官甚至都不屑讨论vue,但其实只要看了源码,就会发现,这里面的黑魔法实在是太棒了,你甚至可以用到自己的项目中,一个框架的好坏不是在他的api多么的复杂炫酷,而是他所能解决的业务场景和为此付出的代价.

其实大家工作一年以后应该都会明白这点:

我们不应该是框架的搬运工.而是代码的艺术家

但有时候也是无奈,业务的繁忙,频繁的跳槽,这都很花精力,我们没有时间去了解底层的东西,我也这样,问题是我们应当解决它,适当的把一部分精力集中到某个你认为比较重要的项目上,极致的追求其业务架构,代码结构,语言规范和性能极限,因为这样你才会深入到程序的底层.去重新认识和了解它,还有,不要频繁的跳槽,决定你的价值的是你的能力而不是公司.

了解新技术

浏览器内核在不断的优化变强,前端的技术也在日新月异,了解最新的前端技术也是一名合格前端必须的素质,GraphQL,PWA,WebAssembly这些固不必说,大家也都了解,相信也在一些项目运用,其实我对这些技术都是后知后觉的,往往是知乎上或者掘金上的一些文章提到,我才会去了解.其实我们应该具有更多的主动性,当然,第一个了解这些技术的不能代表什么,但至少说明你的敏锐度很高,我是十分欠缺的,看一些国外的技术文章还得边翻译边查名词的解释,不过一段时间后,你会发现这对自己的帮助很大,你会发现一些很有意思的,这边提供一些网站供大家认识:

1. DailyJs
2. CodeBrust
3. serviceworke
4. Echojs
5. frontendfront
6. 掘金
7. 饿了吗前端
8. 前端外刊评论
9. Github

当然这里的新技术不应当仅仅是前端的东西,如果是跨行取利的童鞋,最好去补充一些基础的计算机知识,了解一下计算机的构成,了解一下1+1的物理层实现原理,这些对业务上没帮助,但这些有助于你学习和了解其他一些语言,没错,如果你致力于去成为一个合格的程序员,你应当去学习一些中高级语言,甚至是低级语言,学学c和BASIC语言,会让你更加了解os的,当然你也可以选择比较火的python和java,只要你愿意任何新语言都是你开启计算机的新大门.

我的路线:

JavaScript -> Java -> C -> BASIC -> node
           -> nginx    
           -> mysql              -> mysql/MongoDB    
                   -> 数据结构和算法

学完C类语言和一些基本的数据库,也可以尝试使用下R语言,但请记住,如果您的目标仍是前端工程师,请不断加强你的js基础,无论你在学习和使用任何一种语言,都请不要放弃JS.

最后献给诸位: 编程是一种修行，应用修行的产物，也是我们与世界交流的方式.