2019DevFest | 从互联网前端到2B交付型前端-探索面向交付的实用前端技术栈

2019年11月23日，由天津GDG发起，天津多个技术社区主办的“天津人工智能开发者峰会暨天津技术社群联合峰会”在天津渤龙山庄酒店举行。本次大会内容丰富，涵盖人工智能、大数据、互联网、物联网、区块链、工程开发、智慧工业、汽车智造、航空航天等多个领域，一览群智技术VP杨瀚文，与来自谷歌、阿里、商汤、戴尔的技术大牛一起，全领域、全方位、高品质给天津开发者带来一手技术硬货和优质交流平台。

演讲主题《从互联网前端到2B交付型前端-探索面向交付的实用前端技术栈》

企业服务目前正成为科技领域越来越热门的业务方向，无论是头部的互联网公司还是新兴的AI公司，都越来越多的把服务目标聚焦在大企业、政府，银行，公安等大客户身上。为大客户提供技术产品，与互联网公司内部的产品研发，在流程上有巨大的不同，这些不同之处给技术团队，特别是具备浓厚互联网基因的技术团队，带来许多新的挑战。作为产出直接跟客户接触的前端工程，在这个变化过程中如何积极应对，给出解决方案，这次的主题将会给出我们在探索过程中的一些经验。

以下部分为关于主题的采访内容。

提问者：DevFest赵利云

受访者：一览群智杨翰文

01

ASKKING

在您的理解中互联⽹前端和 2B 交付型前端有哪些不同呢？

跟互联⽹公司中产品研发相⽐，2B 交付型前端所要⾯对的情况还要是很⼤的不同的，我们可以从⼈和事两个⻆度来考虑这个问题。从人的角度讲，跟前端打交道的⼈的⻆⾊会有⽐较⼤的变化，在互联⽹公司中流程⼀般⽐较固定，前端基本上都是跟公司内部的同事打交道，⽐如产品经理、设计师、后端⼯程师等，相对来说，这些还都算是⽐较熟悉的⼈。⽽在 2B 交付型项⽬中，情况会复杂的多，⼀般来说⼤型的 B 端交付项⽬除了客户所在的机构，还会有第三⽅公司配合⼀块来交付项⽬，⽽在交付过程中，前端⼯程师要接触到的⼈的⻆⾊会多很多，⾃家的同事有销售、售前、项⽬经理等，客户⽅的业务⼈员，第三⽅公司的项⽬经理、技术⼈员等，对前端⼯程师的沟通能⼒和包容性都提出了更⾼的要求。

从事的角度讲，互联⽹公司主要是给⾃家产品做研发，⽽交付型项⽬更多的帮助客户完成他们需要的产品，从需求、流程、研发环境⼏个⻆度讲都有⽐较⼤的不同之处：

1）需求这块，互联⽹公司的研发需求基本都来⾃于⽤户的反馈、运营、产品的新思路等，⼀般来说想的会相对清楚⼀些，在研发周期内的需求变化也不会太⼤。⽽在 2B 交付项⽬中，由于参与提需求的⼈⽐较多，⼜要综合考虑像招投标、成本、现场条件、客户上级单位的意⻅等各种因素，因此需求在整个研发过程中会处在⼀直剧烈变化的状态，这对整个项⽬管理和前端技术的灵活性都提出了更⾼的要求。具体到 UI 需求层⾯，⼀般互联⽹公司的 UI⻛格相对统⼀，很容易抽象出统⼀的前端控件，⽽交付项⽬中，不同类型的客户，不同类型的项⽬，对UI 的要求是完全不⼀样的，这⾥要求我们在前端也要具有类似后端的中台能⼒，能够快速响应各种不同类型的客户需求。

2）流程上，互联⽹公司⽆论是采⽤瀑布模式或者敏捷模式，都会有⼀个相对完整稳定的流程，更加聚焦研发⼯作本身。⽽交付型项⽬从⼤的阶段来讲，研发团队会参与到售前、交付、售后运维⼏个阶段，每个阶段的聚焦点会有⽐较⼤的不同。售前或者 POC 阶段，偏重验证可⾏性和展示能⼒，时间较短，要求相对来说也⽐较简单，是要求团队有快速完成实施的能⼒。

3）交付研发阶段，⼀般来说时间更⻓，整个过程实际上是⼀个产出跟客户预期不断碰撞，并且逐步达成⼀致的过程。这个阶段前端相对来说是跟客户直接接触的排头兵，需求在前端这块会发⽣频繁的变化，要求前端在实现过程中就要考虑后续调整和修改的成本如何才能达到最低。

4）研发环境方面，互联⽹公司对研发和部署环境⼀般都有完全的掌控，但客户现场则会有各种各样的限制，像一览群智目前交付的项⽬⼤部分都跟数据有关系，⽽数据是客户最宝贵的资产。所以，通常⼤客户的数据都会在⼀个独⽴的离线环境中；也就是说，我们的研发和部署⼀般来说都会在两个独⽴的环境中进⾏，研发阶段在自己的电脑上，使用⼀个可以联⽹的环境中进⾏，充分利⽤公司已有资源。⽽部署时则考虑如何把对联⽹的依赖去除，实现完全离线的部署⽅案。

请问⽬前有哪些针对 2B 前端场景的技术或者⼯具栈呢?

针对 2B 前端场景⾥在需求、流程、环境这⼏个⽅⾯的问题，我们的主要思路可以总结为三点，技术中台化、运维自动化、流程敏捷化。

中台是最近被提的⽐较多的⼀个概念，⼤中台⼩前台的理念，就是通过⼀个平台，让现场的⼩团队能够有效的得到公司本部⼤团队的资源和⻓期技术积累的⽀持。本质上讲就是根据⽬标场景和公司本身的技术积累，形成⼀个覆盖组件、界⾯、⽪肤的库，并且通过类似PaaS 平台的⽅式让现场的团队能够⽅便的使⽤。

前端技术的中台化，在⼤公司中已经实践了⼀段时间了，像阿⾥推出的 Fusion，已经⽐较好的定义了⼀个标准的前端中台应该包含的要素。我们的公司由于⼀直采⽤的技术路线都是ue，之前也⼀直是基于 elementUI 在做开发，因此我们没要直接转型到 react 来使⽤ Fusion，正好最近 ElementUI 也再次强化了对主题定制的⽀持，因此我们开始基于 ElementUI 的主题变量体系开始积累我们⾃⼰的各种场景的主题⻛格。⽬前已经有通⽤的⽩⾊、暗⾊调主题，以及适⽤于公安⼤屏展示的主题，更多的场景我们也随着项⽬的展开在收集整理中。

在我们公司，前端⼯程师的⼯作范围是覆盖了从 UI 到基于 nodejs 的服务端开发，nodejs 相关的⼯作则成为了公司整体微服务架构的⼀部分。由于采⽤微服务架构，实际上服务端的单个⼯程规模不会太⼤，⽬前我们都会采⽤KOA 或 Express 这些较为轻量的框架作为基础来开始⼀个新的⼯程。⽽服务的治理我们则采⽤K8S 和 Sevice Mesh，⽽为什么会选择 K8S，也是因为我们在考虑运维⾃动化的时候，需要有⼀个有⼒的应⽤程序的⽣命周期管理⼯具，⽽基于K8S 的微服务管理框架也恰好可以解决我们在微服务架构这块的问题。

谈到运维⾃动化这块，由于实施现场随时都在发⽣的需求变更，上线验证，因此让部署过程尽量⾃动化可以有效的提⾼实施效率。这⾥我们使⽤的⼯具包括 GitLab、Jenkins、K8S、Docker。通过这⼏个⼯具的配合，我们可以实现当⼯程师更新 git 的发布分⽀的代码时，后续整个流⽔线会⾃动启动，完成测试环境的部署，同时打包出可以⽤于部署到客户环境的容器镜像。

基于上⾯这些技术和⼯具，我们最终要实现的就是研发流程的细粒度的敏捷化。⼀般来说，

⼀个较⼤规模的项⽬虽然整个交付周期会达到半年或⼀年，甚⾄更⻓时间，整个交付过程还是需要不断有中间版本来跟客户确认，⽽敏捷开发的项⽬管理模式已经是被业界验证过的有效的⽅法，可以有效的驱动团队产出不断逼近客户的预期。在实施敏捷项⽬管理过程中，我们除了采⽤类似 Scrum 的流程，也尝试了不同的项⽬管理⼯具，⽬前在⽤⼀款叫作 leango 的产品，其泳道设计以及像燃尽图、⼯作量评估等功能仍为有效的帮助我们在⽇常的项⽬管理中做更好更⾼效。

前端技术在我们的⼀些特殊场景中也发挥了巨⼤的作⽤，⽐如我们有⼀个客户想实现不同系统的数据联合查询，但整个授权过程只能在浏览器中进⾏，因此我们想到了使⽤本身基于浏览器内核的 electronjs 开发了⼀个客户端来满⾜客户的需求。这也帮助公司成功签下这个客户的整套项⽬。

我们公司所在的⼈⼯智能和⼤数据，有很多数据可视化和数据标注需求，这⾥也涉及到前端两个「⾼精尖」领域，画图和编辑器。对于创业公司以及⼀般的中型公司，我并不建议从底层开始⾃研框架，因为会涉及到像 canvas、svg、webgl、编辑 HTML，这些领域的技术细节都⾮常⾮常的多，坑也⾮常多，而业界已经存在很多实现的⾮常好的开源⽅案可以直接使⽤，像 echart, visjs, ueditor 等可以直接拿来应⽤到项⽬中。

在 2B 业务场景中，前端部分经常被认为不属于产品核⼼模块，存在感较低，前端开发者们该 如何找准定位，使前端在产品中发挥更⼤的价值呢?

这里有一个我前一阵子一直在思考的问题：到底什么是⼀个项目的核心模块？近年来 AI⼤热，毫⽆疑问 AI 是⽬前各种项⽬的核⼼模块。

⽽前⼏年热⻔的⼤数据技术，如 Hadoop，Spark 这些，则成为了项⽬的标配。再往前⼏年，⼤数据技术如⽇中天之时，Web 前后端技术则是标配。⽽前端技术，则是在 21 世纪初的那⼏年，BS 架构刚刚兴起之时，也作为核⼼模块出现过。只是历史在⼀次次重演，前端这个⻆⾊也从核⼼⾛向了标配。

所以我们看⼀下本质，前端技术在项⽬中承担的⻆⾊主要是⽤户界⾯的实现，是客户最终看到的东⻄，也是客户在使⽤过程中接触的最多的东⻄。虽然现在⼤部分场景下前端技术不能作为核⼼模块成为卖点，但⾼质量的前端实现，绝对可以让交付过程更加顺利通畅。

那么，从对项⽬的贡献来，说前端还是占了大比例的。现在基本上前后端的分离成为⼀个基本的技术架构事实，⼤量的业务逻辑是放在前端来实现的，在⼈⼯智能和⼤数据领域，数据的可视化对前端⼯程师的复杂编程能⼒也提出更⾼的要求，⽽ nodejs 和 electronjs 等技术更是有效的拓展了前端的能⼒边界。因此，我作为⼀个前端出身的技术 leader，也更愿意在我们的各种项⽬中充分的发挥前端的各种能⼒，就像上⾯提到的⽤ electronjs 来实现⼀个客户端的案例，前端技术有时候确实也能帮公司签下更多的客户。

02

ASKKING

基于⽬前的互联⽹就业环境，有没有⼀些建议给有意选择前端⽅向的毕业⽣呢?

⾸先，我认为在选择⼀个职业⽅向时，最主要的依据还是兴趣。兴趣是保证在⼀个职业⽅向上能够⾛的⾜够远的必要因素。因此，我会建议在选择职业⽅向时，⼀定要想清楚⾃⼰对这个领域是否有⾜够的兴趣⽀撑你⼀直⾛下去。

前端与其说是⼀个⽅向，不如说是⼀种实现个⼈兴趣和理想的⽅式和⼯具，⽐如我个⼈⼀直对做产品有浓厚的兴趣，为什么会选择前端这个⽅向，是因为我发现在我构思好⼀个想法后，需要⽤⼀些技术⼿段把它实现出来，⾮常幸运在毕业的时候知道了前端这样⼀个岗位，并尝试做了这⽅⾯⼯作，来逐步实现⾃⼰的⼀些想法。

其次，⼀旦选择了这个⽅向，就⼀定要沉下⼼稳扎稳打的学习和实践。刚开始这的确是⼀个⾮常痛苦的过程，看着别⼈⾮常熟练的编写代码，实现各种功能，快速的定位和解决问题，⾃⼰却找不到感觉，很容易对⾃⼰的选择产⽣质疑。这个时候要相信只要肯下功夫，结果⼀定不会太差。我有一个同事，⽐我还要⼤好⼏岁，之前是在百货⼤楼负责楼层，他⾃学了前端的⼀些知识，以外包的形式进⼊到阿⾥，当时跟我在⼀个团队。当时⽔平基本上也就是会写写样式，完全不会写 JS 代码的状态，我记得2010年的时候他的月薪也就1500，跟当时正式的应届毕业生还是有一定差距的；但他是⼀个⾮常积极乐观的⼈，在技术学习这块也⾮常努⼒。差不多在两年左右，他就从外包转成了正式的阿⾥员⼯。后⾯的发展也⾮常好，现在在一览群智任技术总监，在技术领域也做着很多有趣的事情。

总之，前端这个⽅向还是⼀个⾮常有潜⼒，价值在不断提升的⽅向，如果你也是⼀个对产品有热情，想做出点什么的⼈，那选择这个岗位作为你的想法落地的途径是⾮常合适的。

-  T  A 

 L  K  -

IMPORTANT GUESTS

嘉 宾 访 谈

—

2 0 1 9 . 1 1 . 2 3

Mr.

 Yang 

互联网前端老兵，一览群智技术VP。曾任36氪产品技术总监，负责36氪媒体公司产品、设计、技术团队。曾任人人网高级架构师，雅虎北研高级工程师，阿里巴巴高级前端工程师。