掘金 AMA:騰訊 Omi 框架作者--dntzhang 聊前端開發、談學習路徑和技術進階

清蒸不是水煮發表於2019-04-03

第二十期 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,小程式雲開發),微信小程式更加擴大了前端的邊界,將開發體驗和使用者體驗做到了前所未有的高度,這一批技術的背後是一批偉大的公司(谷歌、臉書、騰訊、微軟),是一批優秀工程師日夜打磨,是一廂讓世界更低成本運作、讓世界更美好的願景。新生事物的產生都有其背後設計的哲學,不該只學習技術本身,更應瞭解其產生的動機和原因,這樣在面對新生事物和學習之時能夠更加從容。

掘金 AMA:騰訊 Omi 框架作者--dntzhang 聊前端開發、談學習路徑和技術進階

提問目錄

  • 社群小夥伴精選提問--技術相關
    • 前端熟練掌握原生js真的是重中之重嗎? -@LX在掘金
    • Webgl的應用場景有哪些? ─ @pureJy
    • 視覺化方向該從何學起?-@ysxhd
    • 對於大資料量,您推薦使用svg嗎?-@豬豬是天才
  • 非技術相關-- 個人觀點
    • 想問一下大公司喜歡做框架的原因是什麼?錢多?-@mouren
    • 我是自學前端的,就是各種學自己不會的,有何建議 -@codeXiu
    • 非科班碩士,工作晚,見識的世界太少,感覺被年輕人超越,能給一些人生建議嗎? -@songlairui
    • 中大廠招人最看中的是什麼? -@NEPT
    • 在平時工作中pc端為主,而且有的技術很老舊,涉及面也不廣,請問下要如何自我提高一下呢?有什麼學習建議嗎?-@caiweijian
    • 資料視覺化這一塊的職業發展? -@MytLoy
    • 請問您是如何看待前端的?-@circular
    • 您認為資料視覺化的發展潛力在哪呢?-@黑化的橙以汁༎ຶД༎ຶ
    • 中級前端工程師應該掌握哪些技能。 -@小英雄雨來
    • 工作和考研如何抉擇?-@icebns
    • 各種折騰的情況下為什麼還重新回到了前端行業? -@不想當架構的前端不是好廚子
    • 程式設計時的思路或者結構上的思路? -@hackLi
    • 現在的大前端如此的火,單前端來說分支也挺多,如何在步入工作後準確定位自己,找到自己最想要發展的方向去努力?-@
  • 專題 -- Omi
    • omi-UI 有支援小程式計劃嗎?taro-UI能通用嗎? -@distupid
    • omi的小程式和微信的原生小程式,兩個一樣麼? -@lishax
    • omi解決了前端的哪些痛點呢? -@藍月蕭楓
    • 與Taro相比覺得Omi的優勢在哪裡?-@Haply
    • omi框架是不是重複造輪子?-@小宣同學

社群小夥伴精選提問--技術相關

前端熟練掌握原生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

相關文章