毕业3年, 工作5年多, 大部分的前端技术栈都研究和使用过, 从最早的 jquery, zepto, angular 到vue, react, 再到小程序, 混合app开发, 研究心路及其曲折和复杂. 不过经历了痛苦之后也有很多收获, 逐渐从一个职场小白到前端leader, 前几个月公司还给了期权, 最后还是毅然离开, 接下来就来分享一下笔者学习前端的心路历程.
一. 从大学实习过渡到第一份前端工作(小白阶段)
在大学笔者就开始了职业选择, 先是在大一大二研究了设计, 把流行的设计软件ps, ai, sketch, cdr都研究了一遍, 本来以为自己未来会成为一名设计师, 结果大三出现了转折. 在大三研究了几个月的前端之后成功的进入一家公司实习, 当时用的jquery开发官网, 因为当时jquery生态非常熟悉了, 交给我的工作又不是很难, 我也就成功度过了实习期, 觉得前端也就那样.
后面因为实习和在校有不错的经历, 笔者成功进入了员工达到3万+的所谓的“大公司”, 刚入职的一个月里由于公司用的vue和typescript, 这块自己又不是很熟悉, 所以吃了很多苦头, 瞬间碰壁的感觉真是“爽歪歪”. 那个时候我们主要做ERP系统, 业务比较复杂, 需要有很强的技术功底和逻辑思维能力, 所以笔者也是哪里不会补哪里, 跟着自己的师傅从最基础的开始, 写页面. 这个阶段(也就是小白期)主要需要掌握的技术点如下:
- js面向对象编程
- js组件化设计思路
- vue基本使用以及如何写好可复用的vue组件
- js常用工具库如lodash, moment 基本使用
- 如何编写js插件(常用的jq插件编写, js原生插件写法)
- 如何做到html5的语义化结构化, 如何使用oocss(面向对象的css)编写css
- git版本管理工具的使用和分支管理流程
由于实习期间都是用的jq和jq插件, 所以当时只能算个api调用工, 在第一份工作经历中让我学到了很多企业级产品的开发规范. 后面因为自己所在的事业部濒临倒闭, 自己手里又没什么活, 就主动辞职了. 笔者后面也将自己的工作总结整理出来了, 希望可以帮助到大家:
使用原生javascript手写一个类jquery库 徐小夕：前端开发中79条不可忽视的知识点汇总
二. 真正的互联网公司(小白成长期)
后面去了一家纯互联网公司, 我主要参与的是游戏板块和小程序的开发, 也就是当时18年比较火的《贪吃蛇大作战》, 当时听说有3亿多用户, 心里很激动, 但是小程序当时只是了解了点皮毛, 所以又进入了一轮水生火热中. 在开发者游戏内的H5页面,过程中, 确实让我学到了很多js和css3实现的动销效果, 因为游戏应用对交互和适配要求很高, 所以一方面我疯狂的补充css知识, 一方面思考js逻辑.
在做小程序的时候, 也是费劲了周折, 当时小程序对es的支持还不是很好, 所以代码里既有es6的语法,也有es5的, 记得之前涉及的技术点有 canvas画图, 支付接功能, 语音识别接口, 直播api等. 具体知识点总结如下:
- css3 布局(flex, grid), 动画(transition, animation), 媒体查询(@media)
- js实现页面适配和兼容方案
- 熟悉使用vue开发WEB工程
- 熟悉小程序基本开发流程和常用api使用
- javasript实现H5游戏的基本思路和方案
虽然技术在飞速提升, 但是加班非常严重, 现在如果有人问我: 还记得武汉凌晨1点的样子 ? 我会直接说: 4点的样子更美.
这段时间也积累的很多知识, 笔者也有总结, 还有很多总结至今还在我的草稿箱里.
徐小夕：如何用css3实现惊艳面试官的背景动画（高级附源码）？
三. 进阶中高级前端工程师(中高级成长之路)
由于之前的积累和对技术的追求, 笔者决定来上海看看. 后面也是花了几天找到一个还算不错的上市公司, 开始了技术之旅. 由于公司有很多产品, 有千万级用户的内容平台, 也有针对B端企业Saas系统, 但是公司前端技术栈基本采用了React, 由于之前都是偏 vue 的, 所以又得重头学起, 但是我们主管对我印象还行, 给了我一周时间熟悉项目, 后面我发现 react 其实使用模式和 vue 很像, 而且之前对写js逻辑已经非常熟悉了, 所以学 react 的 jsx 非常顺利, 到接手内容平台只花了3天时间.
公司对技术要求还是非常高的, 因为要承载接近百万的日活, 所以对性能, 页面体积做很大的投入, 后面还接了神策大数据, 阿里监控等, 当时感觉自己欠缺的东西还是太多了.
由于之前有H5开发经验, 我既参与内容平台的开发, 也负责公司混合app的开发, H5活动页的开发, 当时自己心很大, 感觉啥都想学, 周六日也泡在公司, 从此慢慢建立起了一套时间管理体系(被自己折磨的). 虽然期间也发生过很多故事, 但是依然是在成长, 同样自己也做了很多总结以及知识点梳理:,如下:
- 混合H5开发的一般模式, 与 native 的通信机制
- react基本开发模式以及如何做优雅的组件开发
- 如何做WEB性能优化
- 如何使用神策埋点监控并分析你的app
- 如何使用ssr技术
- 如何做好前端工程化
这些知识点需要一定的时间去消化, 笔者先后也总结了很多, 如下:
徐小夕：js基本搜索算法实现与170万条数据下的性能测试
以上还有很多没有一一列出来, 感兴趣的可以在我的公号《趣谈前端》或者我的知乎专栏中学习.
四. 高级前端工程师(独当一面阶段)
后面经历了很多事情之后(就当是技术天花板吧), 决定跳槽到一家做人工智能的小公司, 当时的leval为A2(每个公司评级不一样), 也就是高级工程师. 在公司的3个月里, 从零搭建起了公司的前端体系, 包括组件库, 前端工程, 工具库, 脚手架等, 由于成功开发出了公司中台项目的渲染引擎, 后面得到总监的认可把我直接提拔为公司的前端leader, 陆陆续续开始参与招聘,面试, 管理团队, 研发和攻克新技术等, 此时的我对技术生态有了更丰富和深入的认知.
今天终于有时间继续更新了, 技术人的一生还是很不容易的. 我们接着从高级前端工程师说起. 笔者在入职之后遇到的第一个难题就是做技术选型. 因为公司之前没有一个完整的前端体系和架构, 所以需要从已有的产品业务和后端架构来分析, 什么样的技术选型比较合适. 刚开始是打算用 Vue 生态去构建, 也就是我们比较熟悉的 Vue + Element + vue-router + vuex这套, 因为我们核心产品是中后台产品, 所以一般的中后台产品快速开发比较适合用这套方案, 但是由于笔者之前待得公司技术栈用的是react和angular, 所以笔者花了一天时间做了份react和vue框架的技术调研:
再结合公司项目架构, 属于业务高复杂, 多系统协同互通模式, 后期很可能会演变成微前端架构, 当时vue对这块还没有很好的解决方案, 综合考虑笔者还是选择了灵活度更高的react.(现在想起来react确实没选错~), 这里附上一个笔者总结的微前端的模式架构图:
笔者也总结了一篇关于微前端的文章, 大家可以参考学习一下:
徐小夕：如何快速开启前端团队的微前端架构?
在确定好技术选型之后, 就要开始基项目架构的搭建和代码规范了. 目前是有两种方案:
- 采用市场上已有前端脚手架工具搭建前端项目和整体架构
- 自己利用webpack4 + babel + nodejs搭建项目工程
第一直觉是采用的第二种方案, 因为这样对项目的把控能力更灵活更可控, 笔者也做了一份webpack4和gulp4搭建项目的总结, 大家可以学习参考一下:
徐小夕：用撸单页/多页脚手架(jquery,react,vue,typescript)
由于中台项目的复杂性, 我们还要采用一个比较成熟的状态管理库来管理公共状态, 目前React生态比较成熟的解决方案有:
- redux + redux-thunk(同步+异步)
- redux + redux-saga(同步+异步)
- dva
- mobx
在对比了这几个库之后, 笔者决定尝试用dva(当时自己也没用过, 笔者之前的经历一直都是thunk或者saga), 对于dva又出现了比较成熟的集成解决方案umi, 研究了umi之后发现确实已经满足公司已有业务的需求了, 所以笔者后面的技术方案都采用umi来做了. 所以最后确定的方案如下:
umi + react16.7 + dva + antd3.0(后面由于出现了, 所以又迁移到).
笔者目前就先写到这, 后续会继续更新此文章, 包括
- 如何解决项目难题
- 如何利用nodejs为前端工程师和赋能
- 如何优化nodejs性能
- 如何开始serverless之旅
- 如何如何做好一个有影响力的开源项目
- 如何在职场上快速成长
希望能对大家有所帮助.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
