一个相对通用的前端发展套路

335 阅读7分钟

经常有朋友抱怨说找不到好工作,平时工作也没接触啥高难度场景,基本都是写写页面,面试的时候即使前端基础背的烂熟,能够手写算法题,在三面或者交叉面那也拿不到高层级。这里我总结一个相对通用的前端发展套路。

第一阶段:大杂烩

项目初期都是怀着一颗精雕细琢的心,发誓好好维护项目,过不了多久就会发现项目越来越大,页面越来越多,组件库、lodashbig.jsquery-string等各种包都引入进来。如果有新项目,可能也就直接放一个目录里,前端路由区分一下。做了几个月,打包速度越来越慢,保存一下,等一分钟再去看下页面效果,效率低的一比。同时也会遇到改动A组件或者页面,不小心把B页面搞挂了。

一般这时候工程复杂度和业务复杂度都上来了,项目负责人会去代码切割,懒加载等方式减小静态资源的体积,加快加载速度,静态资源上传cdn等方式优化速度,同时会引入一些埋点SDKjserror上报SDK,通过数据分析页面性能,设置告警,前端报错第一时间通知到开发者,而不是用户上报了错误才去解决。前端的机会在编写这些SDK,搭建分析系统。开源的库或者商业的解决方案都可以。

第二阶段:分家

项目越做越大,虽然代码切割能解决用户加载的问题,但不能解决前端打包速度慢的问题,这个时候就需要拆分了,再有新业务也不能再放进去了。怎么拆分呢?

  1. 业务函数库:比如与业务强相关的金额处理,数据格式转换等,类似lodash,但里面都是业务函数,一般项目都会放一个utils.js文件,可能有的同学是新项目直接复制一份。抽出npm包的好处在于:
    • 统一升级,好维护
    • 方便写单侧,发包之前必须过单侧
    • 可以生成文档,方便新同学使用
  2. 业务组件库:可能基础组件库会选择antdiview等成熟的开源产品,但是基本还是会有一些不一样的UI风格和特殊业务组件,一般会放在srccomponents目录下,拆分项目必然会复用到业务组件,所以抽出一个业务组件库很实用,好处如业务函数库一样。
  3. 脚手架:可能每个公司都有一个webpack配置工程师,如果拆分了7,8个项目,webpack配置总不好自己维护,最好有一个脚手架规范了项目目录,lint配置,打包配置等等各种配置,脚手架一键创建模板工程,封装好打包、开发、测试等命令,后续统一升级。 有了这几个工具,就很方便的去分家了,随着业务拆分,往往带来前端团队的拆分,归属到业务线。

第三阶段:统一

随着团队拆分,各个业务都会配置自己的后端、设计、测试人员,由于业务类型不一样,所以还是会出现不同的UI风格和特使组件,这个时候每个业务部门就都需要一份自己的组件库或者函数库了,复制一份改改貌似也不太好,所以需要抽离出一个cli工具,类似create-reate-app,一键生成一个函数库模板,业务组件库模板,提升效率。

分开团队后,团队之间的交流可能会变少,之前约定的一些流程可能需要做一些工程上得限制,比如打包、发布、CodeReview、灰度,都需要做一个平台来做,之前可能打包都是在本地,但是每个人电脑没办法确保npm版本,node版本等一直,两个人可能打出来的东西会不太一样,所以需要在服务器打包,并且支持各个应用多人同时打包。打完包后,需要一个平台统一做CodeReview,描述你要发布的内容,谁来做测试,谁验收等,CodeReview后并且验收后,需要灰度发布,毕竟没办法保障功能都是OK的,全量发布后,造成的影响会很大,可以按照用户维度或者商家维度去发布,这个灰度发布的平台也需要做出来,按照比例缓慢发布,有问题立马撤销灰度。

除此之外还会有一些研发效率工具需要前端来搭建,比如前后端分离后,联调的问题,总不能用前端页面来测试后端接口,让后端接口来测试前端交互,这样会导致联调效率很低。最好有数据mock平台来造假数据,前端用mock接口测交互,后端写单侧保障接口。

第四阶段:创新

业务逐渐稳定后,就需要做一些创新,比如天天写活动页,是不是可以做一个页面搭建系统,前端抽离出N个组件,可以组装成页面。需要新的而活动页,运营同学通过拖拽方式,搭建一个页面,后端同学提供数据源来配置数据,快速生成一个活动页。

如果是做saas软件的话,肯定会遇到大客定制的需求,在通用版本里面直接写if 大客户id来实现总不是什么好事情,可以把页面拆成组件,通过配置加载组件生成页面,每一个大客户维护一份配置,也可以自定义开发组件,同时只需要修改配置文件就会生效。

......

创新玩法视公司业务而定,只要肯动脑子,肯定能探索出更NB的玩法。

这几个阶段相对比较套路,里面的点也说的不深,如果有疑问,可以和我交流。下面无耻的打个广告。钉钉团队招人啦!

职位描述

  1. 负责钉钉审批/CRM/智能填表/智能办公应用平台的前端开发工作。智能办公应用是帮助企业实现数字化管理和协同的办公套件,是拥有亿级用户量的产品。如何保障安全、稳定、性能和体验是对我们的一大挑战。
  2. 负责智能办公应用开放能力建设。针对纷繁的业务场景,提供合理的开放方案,既要做到深入用户场景理解并支撑业务发展,满足企业千人千面、千行千面的诉求,又要在技术上保障用户的安全、稳定和体验。需要既要有技术抽象能力、平台架构能力,又要有业务的理解和分析能力。
  3. 智能办公平台基础建设。保障链路的安全和稳定。同时对如何保障用户体验有持续精进的热情和追求。

职位要求

  1. 精通HTML5、CSS3、JS(ES5/ES6)等前端开发技术;
  2. 掌握主流的JS库和开发框架,并深入理解其设计原理,例如React,Vue等;
  3. 熟悉模块化、前端编译和构建工具,例如webpack、babel等;
  4. 了解服务端或native移动应用开发,例如nodejs、Java等;
  5. 对技术有强追求,有良好的沟通能力和团队协同能力,有优秀的分析问题和解决问题的能力。

有意向的老哥可以发简历到我邮箱:d3VxaS53bEBhbGliYWJhLWluYy5jb20=(base64解码)