经常有朋友抱怨说找不到好工作,平时工作也没接触啥高难度场景,基本都是写写页面,面试的时候即使前端基础背的烂熟,能够手写算法题,在三面或者交叉面那也拿不到高层级。这里我总结一个相对通用的前端发展套路。
第一阶段:大杂烩
项目初期都是怀着一颗精雕细琢的心,发誓好好维护项目,过不了多久就会发现项目越来越大,页面越来越多,组件库、lodash
、big.js
、query-string
等各种包都引入进来。如果有新项目,可能也就直接放一个目录里,前端路由区分一下。做了几个月,打包速度越来越慢,保存一下,等一分钟再去看下页面效果,效率低的一比。同时也会遇到改动A组件或者页面,不小心把B页面搞挂了。
一般这时候工程复杂度和业务复杂度都上来了,项目负责人会去代码切割,懒加载等方式减小静态资源的体积,加快加载速度,静态资源上传cdn
等方式优化速度,同时会引入一些埋点SDK
,jserror
上报SDK
,通过数据分析页面性能,设置告警,前端报错第一时间通知到开发者,而不是用户上报了错误才去解决。前端的机会在编写这些SDK
,搭建分析系统。开源的库或者商业的解决方案都可以。
第二阶段:分家
项目越做越大,虽然代码切割能解决用户加载的问题,但不能解决前端打包速度慢的问题,这个时候就需要拆分了,再有新业务也不能再放进去了。怎么拆分呢?
- 业务函数库:比如与业务强相关的金额处理,数据格式转换等,类似
lodash
,但里面都是业务函数,一般项目都会放一个utils.js
文件,可能有的同学是新项目直接复制一份。抽出npm
包的好处在于:- 统一升级,好维护
- 方便写单侧,发包之前必须过单侧
- 可以生成文档,方便新同学使用
- 业务组件库:可能基础组件库会选择
antd
、iview
等成熟的开源产品,但是基本还是会有一些不一样的UI风格和特殊业务组件,一般会放在src
的components
目录下,拆分项目必然会复用到业务组件,所以抽出一个业务组件库很实用,好处如业务函数库一样。 - 脚手架:可能每个公司都有一个
webpack
配置工程师,如果拆分了7,8个项目,webpack
配置总不好自己维护,最好有一个脚手架规范了项目目录,lint配置,打包配置等等各种配置,脚手架一键创建模板工程,封装好打包、开发、测试等命令,后续统一升级。 有了这几个工具,就很方便的去分家了,随着业务拆分,往往带来前端团队的拆分,归属到业务线。
第三阶段:统一
随着团队拆分,各个业务都会配置自己的后端、设计、测试人员,由于业务类型不一样,所以还是会出现不同的UI风格和特使组件,这个时候每个业务部门就都需要一份自己的组件库或者函数库了,复制一份改改貌似也不太好,所以需要抽离出一个cli
工具,类似create-reate-app
,一键生成一个函数库模板,业务组件库模板,提升效率。
分开团队后,团队之间的交流可能会变少,之前约定的一些流程可能需要做一些工程上得限制,比如打包、发布、CodeReview、灰度,都需要做一个平台来做,之前可能打包都是在本地,但是每个人电脑没办法确保npm
版本,node
版本等一直,两个人可能打出来的东西会不太一样,所以需要在服务器打包,并且支持各个应用多人同时打包。打完包后,需要一个平台统一做CodeReview
,描述你要发布的内容,谁来做测试,谁验收等,CodeReview
后并且验收后,需要灰度发布,毕竟没办法保障功能都是OK的,全量发布后,造成的影响会很大,可以按照用户维度或者商家维度去发布,这个灰度发布的平台也需要做出来,按照比例缓慢发布,有问题立马撤销灰度。
除此之外还会有一些研发效率工具需要前端来搭建,比如前后端分离后,联调的问题,总不能用前端页面来测试后端接口,让后端接口来测试前端交互,这样会导致联调效率很低。最好有数据mock
平台来造假数据,前端用mock
接口测交互,后端写单侧保障接口。
第四阶段:创新
业务逐渐稳定后,就需要做一些创新,比如天天写活动页,是不是可以做一个页面搭建系统,前端抽离出N个组件,可以组装成页面。需要新的而活动页,运营同学通过拖拽方式,搭建一个页面,后端同学提供数据源来配置数据,快速生成一个活动页。
如果是做saas
软件的话,肯定会遇到大客定制的需求,在通用版本里面直接写if 大客户id来实现总不是什么好事情,可以把页面拆成组件,通过配置加载组件生成页面,每一个大客户维护一份配置,也可以自定义开发组件,同时只需要修改配置文件就会生效。
......
创新玩法视公司业务而定,只要肯动脑子,肯定能探索出更NB的玩法。
这几个阶段相对比较套路,里面的点也说的不深,如果有疑问,可以和我交流。下面无耻的打个广告。钉钉团队招人啦!
职位描述
- 负责钉钉审批/CRM/智能填表/智能办公应用平台的前端开发工作。智能办公应用是帮助企业实现数字化管理和协同的办公套件,是拥有亿级用户量的产品。如何保障安全、稳定、性能和体验是对我们的一大挑战。
- 负责智能办公应用开放能力建设。针对纷繁的业务场景,提供合理的开放方案,既要做到深入用户场景理解并支撑业务发展,满足企业千人千面、千行千面的诉求,又要在技术上保障用户的安全、稳定和体验。需要既要有技术抽象能力、平台架构能力,又要有业务的理解和分析能力。
- 智能办公平台基础建设。保障链路的安全和稳定。同时对如何保障用户体验有持续精进的热情和追求。
职位要求
- 精通HTML5、CSS3、JS(ES5/ES6)等前端开发技术;
- 掌握主流的JS库和开发框架,并深入理解其设计原理,例如React,Vue等;
- 熟悉模块化、前端编译和构建工具,例如webpack、babel等;
- 了解服务端或native移动应用开发,例如nodejs、Java等;
- 对技术有强追求,有良好的沟通能力和团队协同能力,有优秀的分析问题和解决问题的能力。
有意向的老哥可以发简历到我邮箱:d3VxaS53bEBhbGliYWJhLWluYy5jb20=(base64解码)