阅读 3122

掘金 AMA:听 better-scroll 作者 -- 黄轶 聊前端规划、性能优化和前端开发

第二十五期 AMA 掘金团队请来了 better-scroll 的作者 -- 黄轶 做了为期三天的 Ask Me Anything (AMA) 活动(活动已结束)。 我们在此精选了一些来自用户的提问及黄轶的回答。

关于黄轶

黄轶,Zoom 公司前端架构师,曾就职于滴滴和百度,毕业于北京科技大学,开源库 better-scroll 的作者,慕课网老师

本文的提问目录

社区小伙伴精选提问

对技术的看法

大佬对flutter怎么看? -@爱学习

大佬对flutter怎么看

flutter 现在风头正盛,但仍然不够完善,还需要经历业务的考验吧~ 可以关注一些主做移动端的公司,比如滴滴、阿里、腾讯、头条等大厂在这方面的应用实践吧。

前端会向哪个方向重点发展呢?目前前端部分还有什么痛点需要解决呢? -@程简

黄老,这几年的前端趋势是mvvm、组件化、工程化以及typescript,您觉得接下来的近几年前端会向哪个方向重点发展呢?目前前端部分还有什么痛点需要解决呢?期待您的解答,感谢!

前端往深入做通常是几个方向,复杂应用(比如 web doc 这种规模的)、数据可视化(2D、3D)、前端工程化、架构。

痛点如目前非常火的多端框架,本身是值得探索的一个方向,但是由于各个端的标准和实现不一致,导致目前的状态是调试困难,坑多。

另外,感兴趣的话也可以把视野放更广一些,比如可以关注 AI,入门机器学习等等。

老师怎么看待未来桌面应用例如electron的发展前景? -@zoomdong

老师怎么看待未来桌面应用例如electron的发展前景?

electron 让前端工程师开发桌面应用更加容易,但它本身还是桌面应用,需要安装,大部分企业还是会更倾向于 web 的方式吧。另外,我觉得 PWA 可以多关注喔。

如何对现有的传统项目进行前后端分离? -@大志_前端

你好,请问下如何对现有的传统项目进行前后端分离?前后端分离的一个开发流程是怎么样的会比较好?

举个例子吧(由于一些敏感信息,就不举 Zoom 的实际例子了,部分类似) 首先列举一下传统项目的痛点:

  1. 技术老旧(ES5、jQuery、没有模块化、组件化、没有使用 MVVM 框架、没有成熟的构建方案)
  2. 项目复杂(有上百个页面,所有页面集成在一个大的 web 工程里,前后端耦合) 3.不能独立部署,发布效率低

再列举一下前后端分离重构的技术挑战: 1.在现有项目下难以引入先进的前端开发方式(纯 Vue 开发、webpack构建) 2.不可能一次性重构所有页面,成本高、风险大

接下来分析一下老项目的特点,结合一张图来看(图片在最下方):

  1. 多页,点击左侧的导航都 会跳转到一个新的页面
  2. 服务端渲染,基于模板渲染,并且左侧、头部和底部是公用模板。
  3. 右侧业务独立,每个页面右侧业务都不一样,渲染不同的模板。

最后说一下重构的设计思路:

  1. 按页面粒度重构
  2. 页面的右侧红框部分提供一个占位符节点,这个节点用 Vue 渲染,实际上就是执行一段 JS 代码。 (这里拿 Vue 举例,其它框架类似)。
  3. 执行的 JS 代码放到单独的仓库中维护 ,这样可以拥有最先进的开发方式和体验(TS/ES6、Webpack、模块化、组件化、任意MVVM 框架)。
  4. 上线只需要去构建执行 JS 的仓库,打包后的 JS、CSS 等代码可以独立发布到静态资源服务器,同时更新配置文件 。
  5. 主框架对应的模板会通过配置文件读取它应该加载的静态资源

以上只是针对这类场景的重构方案,作为架构师就需要能够分析当前项目的痛点、特点,结合场景提出合理的解决方案。

前后端分离是目前比较主流的开发方式,它从物理上把一个项目的开发拆为前端和后端,前端和后端可以并行开发项目,通过约定异步 API 接口完成数据的交互。

请问在前端性能优化这一块有何建议? -@Gerry0808

大佬您好,本人坐标合肥,最近在用vue重构之前AngularJS 1.x项目。新项目表单表格等都是基于配置,随之而来会带来首页响应时间较长,请问在前端性能优化这一块有何建议?(ps:系统偏业务数据处理,且用户高度可配置,目前首屏7s左右,后续可能还要增加)

性能优化还是需要先分析性能瓶颈的,通常可以配合 chrome 开发者工具去定位。通常首屏可能会造成性能的问题,如果是 ssr,可能服务端压力大,关注请求到服务端响应的时间。如果非 ssr,要看首屏加载的静态资源大小,通常可以考虑用按需加载来减少加载的体积,另外如果页面靠接口数据渲染,也需要去关注接口的响应时长。另外还有一个预渲染的方案,就是类似骨架屏的思想,先在 html 中输出一些占位符(如base64图片),让页面加载后立刻渲染出东西,让用户有一个等待预期,然后在 JS 渲染页面后移除占位符。

对非技术问题的看法

没有牛逼的项目,怎么走上前端架构之路? -@1号小白

小公司没有什么大公司背景,没有牛逼的项目,怎么走上前端架构之路

首先,你需要能快速响应公司的业务需求,成为一名熟练工。然后可以思考开发过程中有没有什么痛点,能不能通过技术的手段,比如开发一些工具和插件来提升开发效率,在这个过程中,你可以去调研业内有没有成熟的轮子,轮子能不能满不满足你的需求,可以对轮子做研究甚至去做贡献,这个过程你会接触到学习到很多不曾接触到的知识,积累沉淀下来。另外,你也需要多花业余时间去学习,学习的方向是你工作相关的技术栈,学精学通。

等自己有一定能力了,不妨去投简历到心仪的大公司,刚提到的这些经历可以成为简历的亮点。进入大公司后,你会遇到更多的挑战,业务规模、开发效率、性能、稳定性等等都会有更高的要求,在你不断去面对挑战,解决问题的过程中,你自然就会慢慢成长了。当然,进入大公司后你可能一开始也可能是一颗螺丝钉,但是你自己是可以多花时间,对自己接触到的工具链做研究,主动承担一些有挑战的任务,如果你的能力得到了认可,你就会有机会接触到更多有挑战的任务。能够分析出问题的痛点,提出一些适合场景且合理的解决方案,就是前端架构师通常做的事情。

我以上说的,会有很多时候都需要跳出自己的舒适圈,并且需要付出更多的时间和努力,勤思考,多总结。所以,想成为前端架构师并不容易,加油吧~

在成长期是如何提升技术的? -@小宣同学

最近就准备用您的better scroll了,主要想咨询一下您关于个人成长的问题。我目前的工作只是做一些套皮的webapp,或者一些爬虫类的应用,对比朋友,总感觉做的东西上不了台面,拿不出手。而且个人技术上,在性能优化,bug数量上也有了瓶颈。我就想问大佬你是如何突破瓶颈的。第二,如何平衡理想和现实的差距。第三,能否分享一下您在成长期是如何提升技术的,我总感觉我找不到方向,什么名词都知道,但什么都不会

1.突破瓶颈通过就需要跳出舒适圈,做一些需要解决,但你目前并不擅长的问题,需要你跳一下才能搞定。

2.放平心态,多和自己比较,而不是和他人比较。

3.可以看图 2 (黄老师的自我介绍图)的具体介绍,我主要是兴趣驱动,对某个正在使用的技术会钻研的比较深入,喜欢研究它的实现原理,彻底搞懂它。在钻研的过程中会也学习到很多知识,积累沉淀下来。

如何做职业生涯规划呢 -@王子林

你认为如何做职业生涯规划呢?从前前端几年了,感觉处于瓶颈期,目前比较迷茫,目标不明确。

通常做技术往上 2 条路。1.纯技术路线:架构师技术专家 2. 技术+管理路线。

先找准你的方向,如果对技术感兴趣,建议走 1 路线,否则就走 2。

对于管理,我不是很擅长,我的经验就是首先你自己的技术要过硬,让底下人认可你,其次就是思考怎么发挥团队的最大价值,为团队小伙伴谋福利,关注他们的成长等。但是无论哪条路线,你的技术一定要好,而且我是不太建议工作个 5,6 年就转纯管理,时间太短,即使做了也不要落下技术。

所以你目前还是需要精进技术,突破瓶颈通过就需要跳出舒适圈,解决一些需要你跳一下才能搞定的问题,最好是能找到你目前工作中的一些痛点,通过技术的手段去解决。我看你在字节跳动,也可以关注一下其他团队做的事情。

我知道头条有一个非常牛逼的大佬-张袁炜,他是我在百度时期的导师,你也可以找他交流下😀

Vue应该如何进阶和提升 -@Wongchisum

老师 我想请问Vue应该如何进阶和提升呢? 总感觉自己处在一个业务仔的技术水平

  1. 做复杂的应用,思考不同场景在 Vue 下如何解决,并搞清楚 Vue 的边界职责(即 Vue 能做什么,不能做什么)。
  2. 了解一下周边生态工具如 vue-router、vuex 的实现原理,尝试去写一些简单的轮子,比如自定义指令、插件等。
  3. 阅读源码,了解 Vue 的核心原理实现。
  4. 参与 Vue 或者周边生态工具源码的共建。

初级前端如何进阶 -@軟涙

大佬 初级前端如何进阶 感觉瓶颈了

突破瓶颈通过就需要跳出舒适圈,做一些需要解决,但你目前并不擅长的问题,需要你跳一下才能搞定。比如做一些复杂的应用;去深入研究你工作中使用到的某个技术栈的原理实现;通过技术手段去解决工作中的一些痛点。另外也可以多看一些经典的书籍和一些进阶的视频课程学习。

不过,如果你在一个初阶水平,可以提升的空间还是很大的,应该很难到瓶颈的呀~

忙于业务,还是基于老的框架,如何能提升自身? -@whj768702

大佬,天天加班严重,忙于业务,还是基于老的框架,如何能提升自身?感觉很困惑

首先需要提升自己的开发效率,思考一下能不能抽象一些通用的模块和组件等,开发过程中有没有痛点,有没有能通过工具而不用人解决的问题,如果你能发现一些问题并通过技术手段解决,那么已经是一个提升了。

其次,老的框架是否需要升级,如需要,如何平滑升级,如何做到升级对现有业务影响最小,如果影响很大,思考一下现有项目的组织方式是否合理。如果把上面这些问题都想清楚,并解决,也是一个提升了。

再次,我每天做的业务,接触到的一些工具链和技术栈,我是否已经对它们的原理深入掌握了,出现 Bug 和坑我能否快速定位和解决,如果现有轮子不能满足需求的时候,我能不能快速造一个出来,做了这些又是一个提升。

最后,如果觉得公司对技术重视程度不够,也可以考虑换一个坑。

你以前刚接触web前端时,每天看几本书?通过啥方式提升? -@十年磨一剑

你以前刚接触web前端时,每天看几本书?通过啥方式提升?

我看的前端书并不多,也远达不到一天几本,经典的红宝书和犀牛书我有反复的看过,前期基本就是一个编码 - 看书 - 编码 - 看书的节奏。另外,我也比较推荐看一下广度相关的书籍,比如《http 权威指南》、《精通正则表达式》、《Head First 设计模式》《代码整洁之道》 等

想推动vue ssr的方案,有种推不动的无力感,我是否需要通过辞职来改善 -@AppleSun

公司之前还有ftp切图的,现在总算有前后端不分离的做法了,但是老板觉得前端效率太低了, 现在有一个新项目,我想推动vue ssr的方案,做了不少功课,但是 老板的意思好像觉得前端写的太慢了,有种推不动的无力感,我是否需要通过辞职来改善

前后端不分离是一个人把所有活都做了么,你给老板提方案的时候,是否列举了现状的痛点,以及你的方案的优势呢,另外写优势最好有数据支撑,比如效率可以用 ”人/天“ 的单位。然后就看你的老板是不是讲道理了,如果完全的主观认为前端写的慢,那我觉得还是非常不靠谱的。

怎么培养自己的架构思维? -@梦与清河

黄老师,请问应该怎么培养自己的架构思维呢?

这个需要长期的经验积累的,说几个关键词吧,借鉴、思考、总结,交流。 借鉴是站在巨人的肩膀上,比如可以学习张云龙大佬的博客:github.com/fouber/blog

思考是多去想我怎么设计才是最合理,能否解决当前业务的痛点,如何做到开发时对开发者友好,上线时对用户友好。

总结就是每次经验用文字记录下来,积累和沉淀。这个时候也可以多思考思考,有没有哪些地方是不合理的,有没有更好的方案。

交流就是把一些案例分享出去,和大家一起探讨和交流,碰撞一些不一样的思维火花。

现在多端统一开发框架这么多,有没有学习的建议 -@TheShining

现在多端统一开发框架这么多,有没有学习的建议

首先思考一下你的业务是否需要多端框架,比如 App、h5 和小程序需要一样的设计吗,答案是很多情况下是不一样的,从产品设计上来说,App 通常是最完善的功能,h5 保留主要功能,而小程序多半是一个快速入口。

其次目前多端框架多半不成熟,如果是核心业务,务必谨慎使用,很多情况下,大公司也会在一些偏运营展示的简单业务中使用这类多端框架。

最后,一定要做技术选型,那么就从技术栈、框架维护力度,以及社区的活跃度几个方向权衡吧。

如何完善自己的工作流,这种包括了项目初始化、本地开发、联调、测试、上线等各个环节,是如何探索出来的呢? -@RandyHo

关于前端开发,如何完善自己的工作流呢,目前的工作流十分原始,流程是明确需求-项目开发(开发环境/正式环境)-测试-上线。如果在大厂面试,工作流这块比较吃亏。 像黄老这种包括了项目初始化、本地开发、联调、测试、上线等各个环节,是如何探索出来的呢?

这些都是在大厂训练出来的,其实程序员更多的应该去思考一个需求从产生 - 落地的各个环节,现在大部分人能做到从一个项目的开发-上线各个流程的属性,其实在 Zoom 我们会从产品的设计开始,自己会去设计产品应该如何实现,用户需要什么样的功能,从 owner 的角度去设计和开发,并负责产品的测试和上线,这才是工程师应该有的素质。所以即使在一个有很多产品经理的公司,工程师也可以多参与产品的设计和讨论喔。

可以分享一下组建团队的时候 你是怎样考虑自己要选择的队员 ,以及如何对他们的工作进行分配和评估的 -@唐锋

黄老师 你在滴滴的时候你是你们团队的第一个人 ,团队都是你组建起来的吗, 可以分享一下组建团队的时候 你是怎样考虑自己要选择的队员 ,以及如何对他们的工作进行分配和评估的

是第一人,不过后来没有做 leader,有些事情就不便这里说啦。我可以分享一下我后来做 WebApp 前端架构团队负责人是如何招人的,主要看候选人是不是符合团队的整体气质,比如我们团队是一个爱折腾技术,喜欢分享的团队,如果候选人在这方面突出,肯定是大大的加分项。

工作分配主要是看他们每个人的情况,通常一个人会负责一块业务,同时也有相关的技术方向。会把一些基础的开发工作分配给应届生,因为他们是需要大量做业务的阶段,会把一些有挑战的工作分配给一些有潜力的同学,让他们快速成长。另外我们团队还有很优秀的同学,会主动承担和负责一些技术方向,这些我都非常鼓励的。

特别篇:better-scroll

维护和新版问题

一条没有梦想的咸鱼 提问:最近使用better-scroll,发现一个bug。横向滚动轮播。设置passthrough vertical,竖向滑动会触发元素上的tap事件(如果手指只是竖向画,没有触发横向滚动)。git上还有很多issue没解决啊😄。大佬你是不是太忙了。还有你的vue教程很赞👍

better-scroll 目前主要是我之前滴滴团队的小伙伴在维护,最近主要在搞 2.0 的重构,正式版也快发了吧😀,如果确定是 bs 的 bug 可以按 issue template 去提喔,会处理的~

本期 AMA 社区小伙伴的整理文

感谢「全栈修炼」从开发角度整理了下本期的 AMA,阅读传送门:juejin.im/post/5d0ba0…


由于篇幅原因,本期只摘录了部分问题,黄老师也回答了超多其他的技术、非技术问题,欢迎去他的 AMA 下面交流技术哟,传送门

往期 AMA

关注下面的标签,发现更多相似文章
评论