前端的业务发展方向

future

可以思考下:5 年后的前端会是什么样的?

这有助于我们将眼光放得长远一些。

团队

关于人员晋升,建议可以由一个 T4 带着几个 T3,然后将某件事情做成(比如下面的某个方向),然后这个 T4 和他带的 T3 一起升级。不然如果 T3 自己认领一个事情,事情小了,没有形成足够影响力,不好评估贡献度,事情大了搞不定,都不利于其晋级。

晋升的关键,要看你的产出(yield)影响力(impact)

如果你做的东西和事情,能够延伸到你们组之外,被公司其他业务部门用到,甚至被外面的人广泛用到,那么晋升应该是问题不大的。

以团队为单位的晋升考核,可以按照如下流程进行:

graph TD
B[制定团队目标] --> C{团队目标是否实现}
C -->|已实现| D[主管提名]
C -->|未实现| E[来年再战]
D --> F[陈述你在该项目中的贡献案例]
F --> G{评审团评审}
G --> |通过| H[晋升]
G --> |未通过| I[来年再战]

一、后端开发的基础建设和推广

构建后端业务所需的流程、规范、工具等基础建设,以及前端人员转后端开发所需的培训和文档资料。

通过 Node+TS,让前端人员也可以进行业务型的后端开发
这个学习成本很低,且现在技术和相关的基础建设也很好了,而我们的大部分产品业务,都是简单的业务,目前做这个应该是很适合的。
目的:
1、解决人员招聘问题(前端从业人员多)
2、节约服务器成本(Node 针对我们的常规业务,同样的服务器资源能支撑更多的并发,是比 PHP、Java 等更加节约服务器资源的;这个之前有做过性能测试)

如何量化结果:

1、统计业务部门的业务开发人员的入职数量,同期对比

2、统计节省的服务器资源

二、3D 可视化的研究+应用
考虑到普通用户的电脑目前还无法支撑 3D 效果,因此这个是面向 2B 的方向,比如大屏。
政府、国企、基金公司、上市公司、券商、高校等等,这些出于面子工程,都有大屏需求,因此这块市场还是有的。且我们可以做标准化大屏,一次开发,多次售卖,这样成本更低。
且大屏的开发成本、技术要求并不高,这是一个性价比很高的方向;难点就是要打通销售环节,保证有源源不断的需求。
另外目前公司在涉足医疗方向,在医疗上,3D 模拟仿真也是有需求的。
目的:
1、创造直接的营收

如何量化结果:

1、针对大屏,可以统计销售额

三、可视化运营工具
我们公司发出去的自己写的新闻资讯,内容、排版、样式,都比较古朴,已经落后于主潮流了。
我们调研过公司的每个部门的运营人员,他们都希望能够有一个可视化运营工具平台,可以帮助他们快速生成高质量的运营文章。
因此这个也是可以搞的,类似外面的语雀、秀米等平台。不过我们做的话,肯定要区别于他们。
另外现在还有比较流行的“数据新闻”,通过漫画形象的方式来讲解新闻和概念,这也可以作为一个尝试方向,也是可以平台化、工具化的。
目的:
1、提升运营页面的表现力,打败竞品
2、节省人力成本(如果一个运营人员一天能生产 1 个文章,那么通过这个工具,希望一天能生成 N 个文章)

如何量化结果:

1、通过用户调研、评论等,定性统计生成的文章是否比竞品更具有竞争力

2、通过分享率、页面阅完率、用户留存率等,定量统计生成的文章是否打败对手

3、统计节省的运营人员成本

节省的成本 = (自己手动生成一篇文章所需的时间 - 通过平台生成一篇文章所需的时间) _ 生成的文章数量 _ 运营人员单位时间的平均成本

四、动效
目前移动端的手机性能逐渐上来了,可以尝试下动效了。
比如通过微动效增加页面元素的趣味性,特别是交互相关的元素;或者通过动画的形式,将一些复杂的概念和逻辑,以容易理解的形式传达给用户,比如并购重组的过程、贸易战大事件的整个时间轴、公司高管关系、股权穿透关系等等。
目的:
1、降低用户理解成本和提升页面趣味性,打败竞品

如何量化结果:

1、通过用户调研、评论等,定性统计生成的文章是否比竞品更具有竞争力

2、通过分享率、页面阅完率、用户留存率等,定量统计生成的文章是否打败对手

五、组件库
提供与业务结合的复用组件。
这个要区别于 Echarts,Echarts 是通用组件,现在已经发展这么好了,我们是铁定追不上他们的;我们要做的是 Echarts 所没有的、和我们公司具体业务结合的组件库。
目的:
1、节省人力成本,提高功能的质量

如何量化结果:

1、统计节省的开发人员成本:

节省的成本 = (自己手动开发该功能所需的时间) _ 组件被使用的次数 _ 开发人员单位时间的平均成本

2、统计应用了组件库的业务、产品数量

六、与其他部门合作产品
比如安全这块,可以和李晓栋他们合作,出安全类的独立产品(安全类产品对于前端也是有很大需求的,各种监控页面),推出去卖。这也是扩展新的业务。
比如云这块,可以和王海波合作,出云服务相关的产品,也是和安全类似的套路。
目的:
1、创造直接的营收

如何量化结果:

1、统计销售额

七、Saas

我们目前的产品,还是依赖于终端在售卖的,不管是 2C 的统一版、新版、Mac 版,还是 2B 的 ifind 客户端。

而现在的趋势是 Saas,比如各种项目管理工具(JIRA)、辅助工具(Proces On),甚至一些竞品(萝卜投研、短线宝等),都不在以客户端作为载体,而是直接提供浏览器可访问的形式进行销售。

而且现在网速越来越快,电脑手机的性能越来越高,制约用户的网络问题、物理硬件问题已经越来越小了,Saas 的服务体验比前几年要好很多了。

那么我们是否也可以开始这方面的尝试,逐渐考虑将我们的终端服务化?

目的:

1、革新产品模式,降低用户使用成本,提升营业额

如何量化结果:

还没想好;如果是当成 WEB 独立产品出售,则可以统计销售额。

八、打通全公司的信息管理系统(MIS)

参考百度的AMis系统,一个中等复杂页面的开发只需要 20 分钟。

整合全公司的管理系统,并通过可视化配置/脚手架等方式来提升新功能的开发效率。

这些偏后台的页面,其操作流程都是类似的,功能也是有限可枚举的,可以将流程和功能抽象出来。

可以通过TS+Vue+中台/Serverless快速将这一套构建起来。

目的:

1、降低开发维护成本

2、提升质量,减少安全漏洞和 BUG

3、解决权限问题,增加管理上的可控性(现在很多后台权限不严格或者很乱,一个新人就有非常大的权限)

百度开源的渲染器

如何量化结果:

1、针对生成页面的功能,可以统计节省的开发人员成本:

节省的成本 = SUM(自己手动开发该功能所需的时间) * 开发人员单位时间的平均成本

2、权限问题,还没想好怎么量化结果,可能可以和历史权限事故数做个对比

九、公司的 BI 建设

BI 领域,前端有很大的应用场景。目前这块是 CBAS 在做的,不知道做得怎么样了。

如何量化结果:

1、还没想好

十、数据高维可视化

十一、管理系统

公司的人力资源管理系统、Boss 的人员管理工具等。

现在是被动接受需求去做,其实可以考虑主动去结合 Boss 的管理理念,进行产品化。

如何量化结果:

1、定性评价:用户(Boss)的反馈

十一、其他
比如,前端性能监控、前端安全、视频剪辑、对外宣传、Serverless、机器学习等等

个人

如果有同事想单枪匹马晋升,那就只能做一些本部门遇到的难题了。

比如之前统一版客户端升级 Chrome,有几百个老项目要修改代码,可可搞了一个自动修改代码的工具,极大节省了人力资源,这种我感觉就可以算。

比如 F10 的开发人员,可以将解决“F10 中各种关系难以理解”这个当成一个晋升点,通过更好的可视化、交互方式,将股权关系、高管关系等等做得非常好。

或者 ifind 的开发,将产业链做得炫酷吊炸天。

还有和语音的结合,参考百度在 QConf 分享的 VSL(Voice Specific Language)。

诸如此类,我感觉应该可以作为 T3 的晋升案例材料。

其他同事的想法

MLJ:

1
2
3
4
5
6
1. 前端自动化测试通用系统.
2. 结合手炒的真机测试平台, 进行前端测试系统搭建.
3. 前端内外网调试打包解决方案.
4. THS前端技术博客
5. 前端性能监控
6. js组件库内网打包自动上传到thsi.cn上面

LLH:

1
2
3
4
5
6
7
8
9
10
大方向:效率、长期维护性、安全、用户体验、团队生态氛围

1.【进行中】前端监控平台(异常、性能、行为采集)
2.【进行中】视觉体系 —— 文档规范 + 多框架组件库(vue+react)+ 设计组件(PSSketch)+ 主题构建体系(覆盖各产品线)
3.【进行中】ICON 管理平台 - 根据业务线管理 icon,提供给设计人员和开发人员 (类似 Iconfont)+ css资源
4.【进行中】可视化模块搭建项目平台 - 结合脚手架和组件可视化构建项目
5.【进行中】反爬虫(长期策略迭代 + 代码加密混淆技术)
6.【排队中】技术博客
7.【排队中】埋点管理生成平台 —— 平台化管理每个项目的埋点并自动生成JS代码 + 结合自动化测试校验
8.【尴尬中】NodeJS 中间件/组件/cli工具等

CY:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1. 前端自动化测试通用系统.
目的: 解决前端项目测试时间长, 重复工作多, 前端项目自动化测试流程缺失的问题, 前端功能自动化监控缺失的问题;
考核标准: 使用这套方案的部门个数; 减少自测环节的bug数. 发现线上的bug数, 测试环节发现的bug数; 用例个数; 系统运行次数;
2. 结合手炒的真机测试平台, 进行前端测试系统搭建
目的: 解决前端开发虚拟机环境的真机环境调试问题; 提高前端自测质量和效率.
考核标准: 使用这套方案的部门个数; 使用这套方案的开发人数和次数; 减少的线上bug数;
3. 前端内外网调试打包解决方案
目的: 解决前端开发内外网环境自测链路过长繁琐, 以及多人协作的前端项目只有一个外网环境导致自测冲突的问题; 提高前端开发的工作效率, 并且保证代码安全问题.
考核标准: 接入使用调试打包的系统的部门和项目个数; 开发使用次数; 减少多少自测时间;
4. 同花顺前端技术博客和日常内容更新维护
目的:解决人员招聘问题,提升同花顺品牌知名度
考核标准:协助blog的建设、个人收录的文章访问量和转发量到xx级别
5. 前端性能监控
目的: 监控前端项目线上质量(首屏速度, 资源加载速度performance, 404资源监控error); 统一公司各个部门的性能监控平台, 统计公司各个网页的性能异常数据; bugly;
考核标准: 接入的公司项目个数; 发现性能异常问题个数;
6. 项目中js、css等资源内网打包自动上传到thsi.cn上面的插件或者CI/CD模板
目的: 解决公司前端目前手动上传到thsi.cn的问题.
考核标准: 接入的公司项目个数; 上传资源数;
7. 前端网页资源(URL)小流量方案(灰度发布)
目的:解放产品->开发->测试->上线 整体流程缓慢的节奏,进行敏捷迭代 产品->开发->产品->小流量成功走上线流程 or 小流量失败结束项目
考核标准:使用小流量的项目达到x个,每月新增y个