掘金 AMA:腾讯 Omi 框架作者--dntzhang 聊前端开发、谈学习路径和技术进阶

6,295 阅读17分钟

第二十期 AMA 掘金团队腾讯 Omi 框架 ( github.com/Tencent/omi ) 和 Cax 渲染引擎作者,AlloyTeam 开源负责人之一 dntzhang(张磊)做了为期三天的 Ask Me Anything (AMA) 活动(活动已结束)。 我们在此精选了一些来自用户的提问及 dntzhang 的回答。

关于 dntzhang

腾讯 Omi 框架(github.com/Tencent/omi) 和 Cax 渲染引擎作者,AlloyTeam 开源负责人之一。

dntzhang 是 2009 年接触的前端,一干就是十年。日月流转,岁月杀猪,细数过去十年,创过业,当过老师,做过游戏,办过工作室,做过独立开发者,也炒过股,做过直销,各种折腾,没赚到钱,甚至亏损,但收获颇丰。体验了世态炎凉,感受过资本贪婪,眼看生活黑暗没有尽头,却能在混混沌沌中看到希望。在 2015 年初举家从北京迁移到了深圳,加入腾讯。来了腾讯之后,已是一双儿女的父亲,变得越来越保守和求稳,不敢再大动作折腾,就只折腾技术。dntzhang 热爱编程且一直在一线编程,希望再干一个十年。

前端高速发展这十年,从刀耕火种(各种模板引擎,各种模块化框架,各种打包工具各种批处理)到现代化统一科技(webpack,jsx,babel,typescript,web components,小程序云开发),微信小程序更加扩大了前端的边界,将开发体验和用户体验做到了前所未有的高度,这一批技术的背后是一批伟大的公司(谷歌、脸书、腾讯、微软),是一批优秀工程师日夜打磨,是一厢让世界更低成本运作、让世界更美好的愿景。新生事物的产生都有其背后设计的哲学,不该只学习技术本身,更应了解其产生的动机和原因,这样在面对新生事物和学习之时能够更加从容。

提问目录

社区小伙伴精选提问--技术相关

前端熟练掌握原生js真的是重中之重吗? -@LX在掘金

您好,我想问一下前端熟练掌握原生js真的是重中之重吗?有人说看js能力定工资水平是不是真的?找工作是只会用各种框架就行还是必须熟悉底层原理

js能力占前端技能树的很小一部分了,所以js能力定工资一定是片面的。定工资最主要的因素是上一家的工资,以上一家工资为基准,给予一定比例的提升作为工资(前提是通过面试)。框架底层原理还是要知道个大概,对性能优化,举一反三,用好框架,选合适的框架,造个更好的框架都有帮助。

Webgl的应用场景有哪些? ─ @pureJy

目前你的工作中,Webgl的应用场景有哪些

目前我接触的工作来看还是很少,上次在线上环境使用 webgl 还是用来兼容安卓不支持 filter 的情况下在 webgl 里处理图片模拟高斯模糊效果。不过既然渲染模式可以切换,甚至很多 2d 都使用 webgl 渲染的话,场景应该是非常多的。当然还有QQ里的勋章墙是我前同事做的,酷炫的 3d 勋章,不过模型是外包给别人设计的,同事只是 tween + three.js + 事件交互包装了一下。

可视化方向该从何学起?-@ysxhd

可视化方向该从何学起呢,svg?canvas?还是看炫酷的demo,学three.js D3这种框架?

我不知道可视化方向到底是什么方向?但是一定不是精通可视化框架的使用,而是撸一个可视化引擎。比如你列举的svg canvas webgl 共性的 matrix 变换是否了解?比如 canvas 和 webgl 里的事件绑定怎么处理?像素级别事件和box级别事件怎么处理?2d 和 3d的事件绑定有什么差异?有什么共性?比如滤镜怎么做?原理是什么吗?高斯模糊有几种方式?各有什么差异?比如threejs里的group嵌套体系是怎么叠加属性的?贝赛尔曲线相关原理和作用?贝塞尔曲线包围盒计算?贝塞尔曲线相交检测?vector2d 和 vector3d 所有的方法的几何意义?盛金公式是干什么的?这个公式在可视化里的使用场景是什么?这些也许就是方向。

对于大数据量,您推荐使用svg吗?-@猪猪是天才

大佬,对于大数据量,您推荐使用svg吗?对于频繁操作dom有什么好建议?谢谢🙏

可以先试试 svg,撑不住再试试 canvas。频繁操作 dom 的解决办法可以借鉴 dom diff或者 vdom diff的解决方案,用数据驱动diff再局部更新视图,操作 dom 变成操作数据。

非技术相关-- 个人观点

想问一下大公司喜欢做框架的原因是什么?钱多?-@mouren

你好,想问一下大公司喜欢做框架的原因是什么?钱多?

相反,钱少,或者准确点为了省钱,节约人力成本,让更少的人可以创建更大的价值。大公司技术人员很多,当一个框架能减少重复性劳动,提高公司整体运作效率,公司肯定会投入人力物力来研发框架。当然很多框架都是个人发起,你可以说他是有晋升需要,也许有改变世界的宿愿,当然这些都不是使用框架者该关注的,框架使用者最应该关注的是框架本身技术和设计哲学,关注它能给你或者你的项目带来什么价值亦或是那么一丁点启发,就算你不使用它。而该框架到底是增加了世界的运行成本还是降低了世界的运行成本是框架作者或团队会去操心,不用使用者或者围观者操心,如果框架重复了,或者没有价值,会慢慢从大众视线消失。

我是自学前端的,就是各种学自己不会的,有何建议 -@codeXiu

我是自学前端的,就是各种学自己不会的,没听说过的,现在流行的。最后接触的面广了,但是深度不深。想重新再学一遍或者巩固一遍却有点眼高手低。能不能给点建议或者是主要的方向。谢谢

所以要了解新生事物产生的动机和设计哲学,并且学以致用+兴趣驱动。主要方向我已经列举文章里,现代统一科技,用什么学什么,爱什么学什么。

非科班硕士,工作晚,见识的世界太少,感觉被年轻人超越,能给一些人生建议吗? -@songlairui

我是非科班硕士,工作晚,见识的世界太少,感觉瞬间被年轻人超越,看到你们这么丰富的履历,我很羡慕。能给一些人生建议吗

硕士起点会更高一些,不用后悔工作晚。最近面了几个硕士(95-98年出生)都很优秀,虽然前端技能不足,但是基础技能很扎实,职业生涯一定会发展得比我好。做过决定就不要后悔,人生建议给不了,自己还没过好这一生。

中大厂招人最看中的是什么? -@NEPT

应届生求职中,怎么拿到一份前端offer?中大厂招人最看中的是什么?你没有工作的时候(假设),是怎么提升技术的?

社招看基础和经验,应届看基础(沟通表达、数据结构与算法、数学(我偏爱问线性代数、高数等)、算法设计、参赛经验、在校成绩等)、计算机原理、计算机网络。关于怎么提升技术,我个人的习惯是:有空的时候会给自己虚构一个比较有挑战编程任务在规定的时间完成,然后写一篇文章总结一下。

在平时工作中pc端为主,而且有的技术很老旧,涉及面也不广,请问下要如何自我提高一下呢?有什么学习建议吗?-@caiweijian

大佬您好,在平时工作中pc端为主,而且有的技术很老旧,涉及面也不广,两年前端开发好像并没有学到什么东西,请问下要如何自我提高一下呢?有什么学习建议吗?

准确来说,pc的项目比移动端交互和展示都要复杂一些。所以不要认为pc项目没有技术含量,当然如果pc项目依然还使用老掉了牙的技术栈,这确实会成为跳槽或者提高的瓶颈。但是,工作之余可以搞些移动端项目,做做小程序什么的能有不小收获。

数据可视化这一块的职业发展? -@MytLoy

你好,想请教一下:数据可视化这一块的职业发展发现

就前端这个行业整体来看,应该没有专门这样的岗位,但是面试是加分项。而加分的不是你因为精通使用 echarts d3 g3 什么的,而是理解他们设计的哲学,以及底层引擎的渲染管线等。

请问您是如何看待前端的?-@circular

当总做了十年的前端工作了,跟随时间的推移,前端发生翻天覆地变化。这里有3个问题,1.请问前端是什么?2.为什么需要前端?3.前端在整个项目中的定位是什么?

这个问题有点追根溯源的感觉了。前端是什么?我理解就是entry,用户交互的界面和为用户提供服务的入口。这也就解释为什么需要前端,没有entry就没法到达提供的服务。未来的趋势很明显,端+云,目前初见雏形的比如小程序云开发模式,小程序承载端的能力。小程序云开发一定程度上扩大了前端的职业范围,一个前端一门语言搞定前后端一切,这是的很好趋势。前端未来的定位和竞争力依然是深挖视觉、交互、体验,未来 serverless 普及,大量传统的后端也会扑向前端一起开发,前后边界越来越模糊,一个方法的调用直接上云。总之趋势就是:一人多端,前后通吃。

您认为数据可视化的发展潜力在哪呢?-@黑化的橙以汁༎ຶД༎ຶ

大佬好😃😃 您认为数据可视化的发展潜力在哪呢 或者说数据可视化以后如何更多地与需求和业务相结合呢?

潜力没看出多少。他只是前端技能树的一部分,是面试前端的加分项,图表类可视化比纯数字展示更加人性化和直观,当然其他应用比如3D机房监控,3D地铁,VR AR看房,全景图(当然这是伪3D)、模型预览等也属于可视化范畴,这些更加实用,也有很多应用在使用,比图表要有技术含量,但是涉及到的技能和专业游戏建模和开发没有太大区别了。

中级前端工程师应该掌握哪些技能。 -@小英雄雨来

大佬好,我一定多多关注。 请教问题如下: 中级前端工程师应该掌握哪些技能。 问题描述:我是17年毕业的前端,现在的目标是正在从初级工程师迈向中级工程师,但不知道中级工程师应该掌握哪些重要技能,应该怎样学习。比如去看vue,react源码有意义吗,比如webpack应该深入掌握吗,中级工程师具体应该掌握哪些东西呢,掌握到什么程度呢

在腾讯,中级前端(2.1-2.3)能够承担前端核心模块的设计和开发工作。如果具体技能,我文章中列举的都包含,具体看源码有没有意义,一定是有的,但是要看收益的比例,比如你是为了性能优化还是更好得使用框架或者了解设计思路看?为了看源码而看源码是没有意义,为了成为中级前端看源码更没有意义。webpack 不仅要会配置,至少能写些 webpack 插件,理解 webpack 设计哲学和插件体系的设计。

工作和考研如何抉择?-@icebns

您好,我是一名二本在校生,课余学习前端一年了,现在我面临的问题是:已经明确希望将来从事前端工作了,还要不要去考研。不考研的话担心自己学校实力不强,面试机会少,考研又不知道选择什么样的专业。大概就是这样,希望能被翻牌,感谢!

先工作还是先考研简直就是老婆和老妈掉水里先救谁一样的问题了。我的观点是:家里有矿就继续学习(修行),工作的同时伴随着失去自由。如果是普通家庭先工作,或者边工作顺便考个研?当然研究生起点会更高,但是获取知识不一定非要在学校或者考研一个途径,哪里不可以学习。证明自己的方式不仅仅只有研究生文凭一种。

各种折腾的情况下为什么还重新回到了前端行业? -@不想当架构的前端不是好厨子

您好,请问您是在创过业,当过老师,做过游戏,办过工作室,做过独立开发者,也炒过股,做过直销,各种折腾的情况下为什么还重新回到了前端行业。 我现在做前端小有三年,过两年也到30了,对于自己未来的职业规划有所迷茫。想尝试更多的行业,但是又怕一事无成。

辞职穷三月,换行穷三年。虽然折腾过很多东西,但是本质没有离开前端,比如我们工作室游戏是用 js 写的,独立开发的游戏也是 js 写的,当老师也是教 div + css,炒股和直销不用全职的。所以劝你别换行,选择不三思,事后两行泪。

编程时的思路或者结构上的思路? -@hackLi

我想知道的是你编程时的思路或者结构上的思路

问题划分最小单元,逐个击破

现在的大前端如此的火,单前端来说分支也挺多,如何在步入工作后准确定位自己,找到自己最想要发展的方向去努力?-@

您好,我是大三在校生,请问一下,现在的大前端如此的火,单前端来说分支也挺多,如何在步入工作后准确定位自己,找到自己最想要发展的方向去努力?在追求的道路上可以不以给一些意见或建议?

走正统到道路吧~~ 先页面重构(html+css),再学习脚本语言(js、ts),再综合前面所学加一个组件化框架进行组件化开发,再工程化(这里主要是使用 webpack ,node 等)。再学习 nodejs,也算是一门后端语言了、再图形图像可视化,再各个阶段都可以兴趣驱动深入,持续学习。

专题 -- Omi

omi-UI 有支持小程序计划吗?taro-UI能通用吗? -@distupid

omi-UI 有支持小程序计划吗?taro-UI能通用吗

omiu 支持小程序的问题 Omi 团队正在规划中,taro ui用不了,taro是react语法,和 omi 语法不一样。

omi的小程序和微信的原生小程序,两个一样么? -@lishax

请问,omi 的小程序和微信的原生小程序,两个一样么?还是说omi指的小程序是native?不太懂😅

一样的。Omip开发小程序只是把jsx和css写的omi组件编译成wxml和wxss等,最后发布上线和原生小程序本质是一样的。

omi解决了前端的哪些痛点呢? -@蓝月萧枫

omi解决了前端的哪些痛点呢?

JSX 与 Web Components 很好的融合,并提供了Web Components向下兼容(omip)和 ssr(omis) 的解决方案,会持续跟进小程序和小程序云开发,提供优秀的开发体验(比如omip、mps 都是 omi 团队汗水的结晶)。

与Taro相比觉得Omi的优势在哪里?-@Haply

Omi目前只支持微信小程序及H5应用,而Taro支持一套代码可以打出多端(微信、支付宝、百度、字节跳动)小程序、H5、React Native应用,与Taro相比觉得Omi的优势在哪里?

Omip 是基于 taro 也支持其他端,只是我没试过。

omi框架是不是重复造轮子?-@小宣同学

omi框架是不是重复造轮子? omi与vue,react有什么理念上的不同? 相比于virtual dom,web component有什么优缺点。

Omi 既是 virtual dom 又是 web components,很妙。

小宣同学: 我记得web components是用shadow dom,这个shadow dom 相比virtual dom有什么优缺点

0mi渲染用的shadow dom,diff 和 create都是基于 virtual dom,shadow dom 和 virtual dom没有可比性,各司其职。

延伸阅读 -- mps - 原生小程序支持 JSX 和 Less

mps 是什么?为什么需要 mps?先列举几个现状:

  • 目前小程序开发使用最多的技术依然是原生小程序
  • 原生小程序的 API 在不断完善和进化中
  • JSX 是表达能力和编程体验最好的 UI 表达式
  • JSX 可以表达一切想表达的 UI 结构也就能够描述任意 WXML

所以,就有了 mps。 让开发者直接在原生小程序使用 JSX 写 WXML,实时编译,实时预览。更多介绍见《腾讯 Omi 团队发布 mps - 原生小程序支持 JSX 和 Less》


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

往期 AMA