我做前端這 10 多年來(lái)的感悟

正文如下

本文是第十一屆 - 前端早早聊女生前端職業(yè)發(fā)展專(zhuān)場(chǎng)，也是早早聊第 71 場(chǎng)，來(lái)自 螞蟻金服體驗(yàn)技術(shù)部的高級(jí)前端專(zhuān)家 — 沉魚(yú) 的分享。

沉魚(yú)畢業(yè)于浙江大學(xué)，2008 年的時(shí)候加入了阿里集團(tuán)，之后又入職了螞蟻集團(tuán)。她先后作為 Node Web 框架 —— Chair 的核心開(kāi)發(fā)、Basement Baas 服務(wù)的技術(shù)負(fù)責(zé)人、九色鹿的技術(shù)負(fù)責(zé)人以及現(xiàn)在云鳳蝶的技術(shù)負(fù)責(zé)人。她今天帶來(lái)的話(huà)題是《我做前端這 10 年來(lái)的感悟》。那么接下來(lái)，我們把時(shí)間交給我們的沉魚(yú)小姐姐。

一、關(guān)于我

剛剛主持人已經(jīng)給我做了一個(gè)簡(jiǎn)單的介紹，那這個(gè)地方我就不多講了。我的經(jīng)歷也比較簡(jiǎn)單，現(xiàn)在是在螞蟻集團(tuán)的體驗(yàn)技術(shù)部做企業(yè)級(jí)應(yīng)用設(shè)計(jì)研發(fā)平臺(tái) —— 云鳳蝶的技術(shù)負(fù)責(zé)人。其實(shí)我做前端不止 10 年了，已經(jīng)有 12 年了。這 12 年里發(fā)生了挺多的事情，所以也借著這個(gè)場(chǎng)合，跟大家一起回顧一下，這段時(shí)間里前端的整體發(fā)展。

二、前端簡(jiǎn)史

? 我們來(lái)看一下前端簡(jiǎn)史。這一小段的內(nèi)容，其實(shí)并不是從很客觀(guān)的角度去看前端的發(fā)展，更多是結(jié)合我個(gè)人的工作經(jīng)歷來(lái)講這些事情。

1、2009 年

? 先看一下 2009 年，國(guó)內(nèi)成立了第一個(gè)前端團(tuán)隊(duì)。大家剛剛?cè)绻辛粢獾街鞒秩说慕榻B的話(huà)，會(huì)發(fā)現(xiàn)其實(shí)我是 2008 年入職淘寶的。那么那個(gè)時(shí)候我的主管是怎么發(fā)現(xiàn)我的呢？我當(dāng)時(shí)在一家公司里面工作，工作之余還寫(xiě)博客，還會(huì)畫(huà)一些跟程序員相關(guān)的有趣的小漫畫(huà)。我估計(jì)大概是因?yàn)槁?huà)吸引了非常多的人的眼光，然后就這樣進(jìn)了淘寶。大家可以看一下左邊這張圖，是 2008 年中秋節(jié)時(shí)淘寶網(wǎng)的首頁(yè)截圖。在這張圖上，我基本上是達(dá)到了人生的巔峰。大家不要誤會(huì)哈，這不是我作為一個(gè)前端的巔峰，而是我作為設(shè)計(jì)師的一個(gè)巔峰。當(dāng)時(shí)才剛剛流行做節(jié)日 Logo 沒(méi)有多長(zhǎng)時(shí)間，那段時(shí)間正好我們的設(shè)計(jì)師沒(méi)空，這個(gè)時(shí)候我們的部門(mén)老板就說(shuō)了，沉魚(yú)你會(huì)畫(huà)漫畫(huà)對(duì)吧？那你要不要給我們畫(huà)個(gè)中秋節(jié) Logo 呀？我想來(lái)想去，那就畫(huà)吧！畫(huà)了之后這個(gè) Logo 就真的上線(xiàn)了，被非常多的人看到。這個(gè)絕對(duì)是我在前端這個(gè)行業(yè)里面，做為設(shè)計(jì)師的一個(gè)高光時(shí)刻了。

大家可能也覺(jué)得奇怪，你一個(gè)前端，你干嘛畫(huà)畫(huà)？實(shí)際上 2008 年我入職淘寶網(wǎng)的時(shí)候，淘寶是沒(méi)有一個(gè)專(zhuān)業(yè)的前端團(tuán)隊(duì)的，所有的前端同學(xué)都在體驗(yàn)技術(shù)部，Title 應(yīng)該是叫交互設(shè)計(jì)師，我們跟設(shè)計(jì)師是在一個(gè)大團(tuán)隊(duì)的。實(shí)際上那個(gè)時(shí)候很多的頁(yè)面布局還使用 table 這樣古老的技術(shù)，使得我們的設(shè)計(jì)師中也有不少人能夠自主做一些網(wǎng)頁(yè)。那個(gè)時(shí)候前端的同學(xué)更多的是專(zhuān)注在像淘寶首頁(yè)這樣一些比較重要的頁(yè)面上，而一些活動(dòng)頁(yè)面之類(lèi)的，就會(huì)由設(shè)計(jì)師同學(xué)從頭至尾地完成。直到 2009 年年初的時(shí)候，我們公司才正式劃撥出了一個(gè)前端團(tuán)隊(duì)，據(jù)我所知也是國(guó)內(nèi)第一個(gè)前端團(tuán)隊(duì)。于是 2009 年我們才正式有前端這個(gè)行業(yè)。

大家看一下右邊的這張圖，是我剛剛截的淘寶網(wǎng)現(xiàn)在的首頁(yè)。如果我們仔細(xì)地看一下這兩張頁(yè)面，會(huì)發(fā)現(xiàn)除了頁(yè)面變得更寬了、能適應(yīng)更大的屏幕了、設(shè)計(jì)也更符合當(dāng)下的審美了，似乎并沒(méi)有發(fā)生什么太大的變化。如果單從這兩個(gè)頁(yè)面來(lái)看的話(huà)，確實(shí)是這樣，雖然我們使用了各種各樣的新技術(shù)讓頁(yè)面瀏覽起來(lái)更加順暢。但實(shí)際上前端的發(fā)展遠(yuǎn)不止于此。

2、2008 年 ~ 2012 年

? 其實(shí)任何一個(gè)行業(yè)在最初時(shí)期的發(fā)展都是非常慢的，所以在 2008 年到 2012 年這 4 年期間，前端的整體工作都非常的簡(jiǎn)單，我們可以簡(jiǎn)單地歸結(jié)成為“瀏覽器大戰(zhàn)”和“前端框架”這兩個(gè)關(guān)鍵詞。

“瀏覽器大戰(zhàn)”可能對(duì)于一些比較新的同學(xué)來(lái)說(shuō)，都已經(jīng)不是很有體感了，因?yàn)楝F(xiàn)在 Chrome 一統(tǒng)天下，包括 2018 年微軟也宣布了使用 Chromium 作為他們的瀏覽器的內(nèi)核，所以 PC 時(shí)代的瀏覽器的兼容性問(wèn)題已經(jīng)徹底解決了。但是在當(dāng)時(shí)，大家對(duì)瀏覽器的兼容性問(wèn)題是非常頭疼的。大家看一下左邊這個(gè)圖，有 10 來(lái)種瀏覽器，這還不是一個(gè)完全枚舉。所以對(duì)于那個(gè)時(shí)候的前端同學(xué)來(lái)說(shuō)，最頭疼的事就是要處理前端兼容性的問(wèn)題。而要命的是，當(dāng)時(shí) IE 仍然是市場(chǎng)上的主流，而且它作為一個(gè)主流，卻又特別的不標(biāo)準(zhǔn)，實(shí)現(xiàn)的很多東西都不標(biāo)準(zhǔn)，性能也很差。所以 Diss IE 也成為當(dāng)時(shí)程序員的一個(gè)日常活動(dòng)。中間這幅圖當(dāng)時(shí)是比較流行的一幅程序員漫畫(huà)，大家可以看一下 IE 大概慢到了什么樣的程度。因?yàn)楫?dāng)時(shí)的條件特別的惡劣，所以程序員在不斷地跟這些我們現(xiàn)在看來(lái)有些可笑的問(wèn)題做著斗爭(zhēng)。

那個(gè)時(shí)候也是非常拓荒的時(shí)期，我們還缺乏一些基本的基礎(chǔ)設(shè)施 —— 前端框架就是非常重要的基礎(chǔ)設(shè)施。那個(gè)時(shí)候，國(guó)內(nèi)各大廠(chǎng)商都在開(kāi)發(fā)自己的前端框架，在淘寶我就參與了 Kissy 的開(kāi)發(fā)工作；實(shí)際上百度、360 以及新浪都有自己的前端框架。當(dāng)時(shí)這些大廠(chǎng)之間的前端交流是非常頻繁的，所以在有一次交流之后，我回來(lái)就畫(huà)了右邊這幅漫畫(huà)，調(diào)侃了一下當(dāng)時(shí)各大廠(chǎng)的前端框架，沒(méi)想到當(dāng)時(shí)這幅漫畫(huà)就成為了一個(gè)爆款，特別多的程序員看了這個(gè)漫畫(huà)。我們也覺(jué)得這種狀態(tài)好像不是很正常，但是當(dāng)時(shí)的前端并不像現(xiàn)在這樣，有這么開(kāi)闊的行業(yè)視野，所以大家在這個(gè)局里面困了挺久的。大家也看到，2008 年到 2012 年是整整 4 年時(shí)間，這 4 年不能說(shuō)毫無(wú)發(fā)展，但是發(fā)展得真的非常慢。

3、2013 年

? 轉(zhuǎn)機(jī)出現(xiàn)在 2013 年之后，我覺(jué)得整個(gè)前端行業(yè)走上了一個(gè)快車(chē)道。大家可以看一下左邊的這張截圖，一看就非常土，2009 年的一個(gè)手機(jī)淘寶頁(yè)面，當(dāng)然我當(dāng)時(shí)有參與它的開(kāi)發(fā)。這么土的一個(gè)頁(yè)面 —— 我們剛剛說(shuō) PC 時(shí)代結(jié)束了兼容性的問(wèn)題，而移動(dòng)時(shí)代其實(shí)才剛剛開(kāi)始 —— 哪怕是 2009 年這么土的一個(gè)頁(yè)面，它也有非常多得兼容性問(wèn)題要考慮，可能都是大家意想不到的。比如說(shuō)，那個(gè)時(shí)候所謂的智能手機(jī)，其屏幕寬度差異是非常大的，我們?yōu)榱舜_保每一行的文案都不折行，實(shí)際上需要采集當(dāng)時(shí)市面上所有主流手機(jī)的屏幕尺寸，然后去做文案字?jǐn)?shù)的適配。實(shí)際上在 2020 年，手機(jī)淘寶已經(jīng)發(fā)展得非常好了，它跟 PC 沒(méi)有什么太多的區(qū)別。

但我們的發(fā)展過(guò)程也不是一帆風(fēng)順的，特別是在早期的很長(zhǎng)一段時(shí)間里，手機(jī)淘寶的地位可能都類(lèi)似于一個(gè)附屬品，或者說(shuō)一個(gè)補(bǔ)充的存在。直到 2013 年，整個(gè)公司都覺(jué)得這樣下去不行了，我們必須要加速移動(dòng)業(yè)務(wù)的發(fā)展。所以當(dāng)時(shí)出了一個(gè)非常有名的事件，叫做阿里的“無(wú)線(xiàn) All In”事件。當(dāng)時(shí)公司調(diào)派了非常多的人員、資源去做無(wú)線(xiàn)手機(jī)淘寶。那一仗算是打勝了，勝得比較驚險(xiǎn)。

但是要說(shuō)業(yè)務(wù)真正地漲起來(lái)、形成 Mobile First 這樣的用戶(hù)心智，可能也要到 2015 年左右了。當(dāng)時(shí)有一件印象特別深的事情，因?yàn)槲覀兊膬?nèi)網(wǎng)里有非常多的人，好幾萬(wàn)人，所以大家也經(jīng)常會(huì)在上面做一些自己的產(chǎn)品營(yíng)銷(xiāo) —— 幾萬(wàn)人也是不能忽視的對(duì)吧~ 是在 2012 年還是 2013 年的雙 11 大促的時(shí)候，無(wú)線(xiàn)手機(jī)淘寶的 PD 就在內(nèi)網(wǎng)發(fā)言說(shuō)今年雙 11 大家都來(lái)用無(wú)線(xiàn)淘寶吧。因?yàn)槟莻€(gè)時(shí)候，不知道大家還有沒(méi)有印象，秒殺特別火，就是一塊錢(qián)秒一個(gè)特別貴的東西。我們無(wú)線(xiàn)淘寶的 PD 說(shuō)快來(lái)用無(wú)線(xiàn)淘寶的頁(yè)面吧，咱們服務(wù)器水位可低了，秒殺一定不會(huì)卡。所以大家可想而知，在那個(gè)時(shí)候，哪怕是我們做成了“無(wú)線(xiàn) All In”的那個(gè)時(shí)候，用戶(hù)量也還沒(méi)有大到一定的程度，但是趨勢(shì)已經(jīng)非常明顯了。而現(xiàn)在，大家基本上已經(jīng)全部都是人手一個(gè)手機(jī)這樣的情況了。在這個(gè)事情里面，我們很容易就能看到，哪怕我們?cè)诮裉炜磥?lái)是一些巨變的事件的發(fā)生，也不是一朝一夕的事情。就像我們?cè)?2009 年的時(shí)候，就已經(jīng)開(kāi)始做手機(jī)淘寶了，到 2013 年無(wú)線(xiàn) All In，再到市場(chǎng)完完全全以無(wú)線(xiàn)為主，這中間有足夠多的時(shí)間去做反應(yīng)（準(zhǔn)備）。所以很多的時(shí)候，我們只要踏準(zhǔn)了時(shí)代發(fā)展的脈搏，就有足夠的時(shí)間去做相應(yīng)的對(duì)策。

那么為什么說(shuō)在無(wú)線(xiàn)端，瀏覽器兼容性的問(wèn)題才剛剛開(kāi)始呢？是因?yàn)橐婚_(kāi)始的時(shí)候，我們做的是 Native App，這個(gè)時(shí)候 iOS 跟 Android 的程序員是非常稀缺的。很多前端在這段時(shí)間里就轉(zhuǎn)做了 iOS 跟 Android 開(kāi)發(fā)。但是這兩個(gè)領(lǐng)域吧，它們的人員培養(yǎng)成本非常高，而且研發(fā)成本也不低。在現(xiàn)在這樣飛速發(fā)展的時(shí)代，如果所有的東西都用這兩個(gè)技術(shù)去開(kāi)發(fā)的話(huà)，成本是非常高昂的。所以慢慢地 H5 又重新走上了歷史的舞臺(tái)。因?yàn)?Web 技術(shù)的成本特別低，所以我們嘗試在無(wú)線(xiàn)的 App 里面加入 H5 的頁(yè)面，來(lái)處理一些非核心頁(yè)面的研發(fā)。慢慢地，小程序又出現(xiàn)了，這個(gè)時(shí)候大家就已經(jīng)知道了，今天的無(wú)線(xiàn)、今天的手機(jī)端，真正重要的是那幾個(gè)無(wú)線(xiàn)流量的入口，而小程序可能也是非常重要的一個(gè)入口。于是 Web 研發(fā)技術(shù)又重新回到了歷史的舞臺(tái)。當(dāng)然最核心的那些 App 以及最核心的那些頁(yè)面還是會(huì)用原生的 iOS 跟 Android 來(lái)開(kāi)發(fā)。

大家可以看到，這個(gè)頁(yè)面下面還放了一個(gè) PWA，不知道有多少同學(xué)見(jiàn)過(guò)它，或者對(duì)它有體感。它是一個(gè)希望能用 Web 技術(shù)做 Native 應(yīng)用的解決方案，是 Google 家的產(chǎn)品。到目前為止還沒(méi)有看到 PWA 特別大規(guī)模流行的趨勢(shì)，但它其實(shí)已經(jīng)出來(lái)蠻多年了，大家可以關(guān)注一下。這幾個(gè)技術(shù)的此消彼長(zhǎng)，其實(shí)是蠻有意思的事情。

4、2015 年

? 時(shí)間飛快地來(lái)到了 2015 年，由于之前“無(wú)線(xiàn) All In”的事情，從很多團(tuán)隊(duì)調(diào)派了人手，集中人力去做了這么一件大事，所以作為團(tuán)隊(duì)留守的一些成員來(lái)說(shuō)是比較傷的，因?yàn)闃I(yè)務(wù)被裁撤，人員也減少了。但是我們團(tuán)隊(duì)有一部分同學(xué)留下來(lái)了，我是其中之一，我們?nèi)匀辉诿?PC 端的一些可能性。這個(gè)時(shí)候其實(shí)新一代的研發(fā)框架已經(jīng)逐步地生長(zhǎng)起來(lái)了，最早的是 2010 年的 Angular 以及 2013 年 React.js 和 Vue.js。在這幾個(gè)框架當(dāng)中，我們并沒(méi)有猶豫太久。在 2015 年的時(shí)候我們團(tuán)隊(duì)就決定要使用 React。原因比較簡(jiǎn)單，因?yàn)?React 可能比 Angular 好用，比 Vue 靈活。但是這個(gè)不牽涉語(yǔ)言之爭(zhēng)，僅僅是我們團(tuán)隊(duì)的一個(gè)選擇哈。

在那個(gè)時(shí)候，我們并沒(méi)有太長(zhǎng)的時(shí)間去喘息或者迷茫，很快我們又忙起來(lái)了，為什么呢？因?yàn)?2015 年被稱(chēng)為 toB 元年，那一年發(fā)生了很多的事情，我們就發(fā)現(xiàn)其實(shí) toB 的業(yè)務(wù)也非常地繁茂、非常地有前景。所以這個(gè)時(shí)候我們也發(fā)布了我們第一個(gè) toB 的 UI 組件庫(kù) —— Ant Design，簡(jiǎn)稱(chēng) AntD。它從最初的一個(gè)非常單一的 toB 組件庫(kù)發(fā)展到今天，已經(jīng)集合了可視化解決方案、業(yè)務(wù)場(chǎng)景化模板以及 Mobile 組件庫(kù)，變成了一個(gè)非常大的家族。在去年的時(shí)候，我們的 GitHub 倉(cāng)庫(kù)的 Star 數(shù)也已經(jīng)超過(guò)了 Google 的 Material Design，成為了 GitHub 上同類(lèi)開(kāi)源項(xiàng)目當(dāng)中 Star 數(shù)最高的項(xiàng)目。Ant Design 對(duì)我們來(lái)說(shuō)其實(shí)還是做得挺艱難的，從 2015 年開(kāi)始一直到現(xiàn)在，我們還是在大力維護(hù)它。

這個(gè)項(xiàng)目的 Owner 就在我們隔壁組，叫偏右。我有的時(shí)候也會(huì)調(diào)侃他說(shuō)，你說(shuō)你們的 Ant Design 這么多人用，它的競(jìng)爭(zhēng)力到底是什么？他就非常干脆地甩給我兩個(gè)字：好看。沒(méi)錯(cuò)，很多時(shí)候我們常常強(qiáng)調(diào)要有大局觀(guān)、要有全局的視野，但是我們手上的活兒也不能落下，就是因?yàn)檫@個(gè)東西它真的好用，能契合到我們工作當(dāng)中的一些場(chǎng)景，它就非常地有生命力。?? 除了剛才提到的 toB 的前端框架，那段時(shí)間大數(shù)據(jù)也開(kāi)始嶄露頭角了，所以相關(guān)的可視化的圖形庫(kù)也非常多，包括百度的 Echarts，螞蟻的 DataV。最早的時(shí)候大家可能會(huì)用這些圖表來(lái)做一些可視化的用戶(hù)行為分析，包括 CNZZ 還有 Google Analytics 這樣的東西。但是慢慢地行業(yè)就逐漸向深水區(qū)發(fā)展了。

在 Keynote 的右上角是我們的一個(gè)業(yè)務(wù)分析場(chǎng)景，這個(gè)場(chǎng)景特別復(fù)雜，可能會(huì)有數(shù)十萬(wàn)個(gè)節(jié)點(diǎn)要去操作，這樣復(fù)雜的場(chǎng)景，又給技術(shù)帶來(lái)了新的挑戰(zhàn)，比如說(shuō)：數(shù)十萬(wàn)的節(jié)點(diǎn)的計(jì)算如何保證性能，如何呈現(xiàn)能保證向用戶(hù)有效地傳遞信息等等，這些新的問(wèn)題都有待我們?nèi)ソ鉀Q。實(shí)際上我們的業(yè)務(wù)越來(lái)越復(fù)雜的話(huà)，就會(huì)推動(dòng)技術(shù)進(jìn)一步的發(fā)展。

而 Keynote 的右下角是一張非常漂亮的大圖，是可視化發(fā)展的另一個(gè)分支，這個(gè)分支比較高端，叫大屏。大屏上的東西特別漂亮，一般來(lái)說(shuō)大家會(huì)在企業(yè)的接待處或者政府機(jī)關(guān)看到這種大屏，它其實(shí)是有幾面墻那么大的。它對(duì)視覺(jué)的要求是非常高的，大家可以看到它非常精細(xì)。最近也在流行一個(gè)形容這一類(lèi)大屏的詞，叫做數(shù)字孿生，就是用數(shù)字化去打造一個(gè)跟我們生活當(dāng)中一模一樣的城市，通常都會(huì)用于做交通管控或者金融管控，這種時(shí)候大屏就會(huì)非常有用。這類(lèi)大屏之所以足夠特殊，就是因?yàn)槠胀ǖ碾娔X根本就跑不起來(lái)，它是需要有特殊的機(jī)器來(lái)承載的。

剛剛說(shuō)的這兩件事，其實(shí)我是一行代碼都沒(méi)參與，都是我們隔壁組的同學(xué)做的事。?? 那這段時(shí)間我干嘛去了呢？我在做這件事。因?yàn)殡S著 2009 年 Node.js 的發(fā)布，前端逐漸有了一些想象力，就是能夠去做一些后端的事。倒不是說(shuō)沒(méi)有 Node.js 就做不了，你可以用 PHP，也可以用 Java，但是對(duì)于前端來(lái)說(shuō) Node.js 有天然的親和力，因?yàn)橛?Node.js 的話(huà)，你的前后端語(yǔ)言是一樣的，有很多問(wèn)題你自己就可以解決。

雖然 Node.js 一直都被作為一個(gè)玩具般的存在，但實(shí)際上它已經(jīng)發(fā)展了很長(zhǎng)的一段時(shí)間，包括 2010 年的時(shí)候 Express 框架發(fā)布、socket.io 發(fā)布，2011 年的時(shí)候 LinkedIn、Uber 上船，2013 年的時(shí)候 Ebay上船。2013 年還發(fā)生了一件比較特殊的事情，那就是激進(jìn)派的 Web 框架 Koa 誕生了，它的誕生給大家?guī)?lái)了一些新的思路和啟發(fā)。所以我們團(tuán)隊(duì)在 2014 年的時(shí)候就開(kāi)始計(jì)劃要去做一個(gè) Node.js 企業(yè)級(jí)的 Web 框架。

大家看中間的這一張圖，這是我們當(dāng)時(shí)的代碼提交的記錄圖，可以看到至今還是非?；钴S的。這個(gè)框架叫做 Chair，我在這個(gè)框架里面主要是參與打通跟現(xiàn)有技術(shù)體系的連通的這一部分。下面的叫做 egg，是 Chair 的一個(gè)開(kāi)源版本，也就是說(shuō)對(duì)于其他公司的同學(xué)來(lái)說(shuō)，如果他想用這個(gè)東西的話(huà)，他可以基于 egg 來(lái)做自己的企業(yè)級(jí) Web 框架。那么在這個(gè)框架上，我們的第一仗是什么呢？在當(dāng)時(shí)流量最 Top 的支付寶收銀臺(tái)頁(yè)面上，我們把它用上去了。

實(shí)際上這個(gè)過(guò)程是非?？部赖模紫扔蟹浅６嗟募夹g(shù)問(wèn)題要去解決，比如性能、安全性。比如說(shuō)你說(shuō)性能不好對(duì)吧？實(shí)際上 Node.js 非常擅長(zhǎng)的就是 IO 密集型的處理，所以我們可以去做 Benchmark，看看到底是 Java 的性能好，還是 Node.js 的性能好，這些問(wèn)題都是相對(duì)容易解決的。比較難的是，當(dāng)時(shí)我們是沒(méi)有一個(gè)配套的研發(fā)流程的；我們也需要融入現(xiàn)有的研發(fā)體系，因?yàn)楝F(xiàn)有的研發(fā)體系完全是寄生在 Java 之下。其實(shí)很長(zhǎng)一段時(shí)間里，前端都沒(méi)有自己的發(fā)布流程，前端同學(xué)寫(xiě)完了一個(gè)模板語(yǔ)言之后，他需要把腳本提交到倉(cāng)庫(kù)里面，由 Java 的同學(xué)去做最后的發(fā)布。另外還有一個(gè)更深遠(yuǎn)的問(wèn)題，那就是要考慮相關(guān)研發(fā)人員的培養(yǎng)。因?yàn)榇蠹叶贾?，在大學(xué)里面大家都是受過(guò)相關(guān)技能教育的，所以對(duì)于學(xué) C、學(xué) Java 的同學(xué)，他可能從學(xué)校一畢業(yè)出來(lái)就帶著這樣的技能；但是到現(xiàn)在為止 Node.js 也不是一門(mén)大學(xué)里的常駐課程。所以這個(gè)非常難。

當(dāng)時(shí)這件事難點(diǎn)非常多，但是其他的就不細(xì)講了，就講講當(dāng)時(shí)我參與的那部分工作。當(dāng)時(shí)我主要是做了兩類(lèi)工作。

一類(lèi)是跟現(xiàn)有的 Java 服務(wù)器打通的工作，跟Java 服務(wù)器打通是非常麻煩的事情，你經(jīng)常需要去解析它的 RPC 請(qǐng)求，你需要知道它的協(xié)議是什么…… 所以在這段時(shí)間里，我寫(xiě)了很多的協(xié)議解析代碼，包括一些像 Java IO 這樣的協(xié)議解析，讓它能夠真正地跟 Node.js 端連通起來(lái)，讓我們能夠真正地連上生產(chǎn)端的各種各樣的服務(wù)。

另外一個(gè)當(dāng)時(shí)非?，F(xiàn)實(shí)的困難就是，我們除了現(xiàn)在在 Keynote 上看到的這個(gè)支付寶收銀臺(tái)頁(yè)面，實(shí)際上還有大量的業(yè)務(wù)，如果我們希望這個(gè)東西能夠大量使用的話(huà)，我們不能把這個(gè)業(yè)務(wù)里面的代碼全部推倒，都重新手寫(xiě)一遍，我們不能這樣折騰這個(gè)業(yè)務(wù)。當(dāng)時(shí)我們?cè)?Java 體系里面使用的是一個(gè)叫 Velocity 的模板，這個(gè)模板它壞就壞在它太靈活、太高級(jí)了，它跟現(xiàn)在的 Vue 這樣的模板語(yǔ)言是完全不一樣的東西。它可以說(shuō)是非常接近編程語(yǔ)言的一個(gè)模板語(yǔ)言。那怎么辦呢？當(dāng)時(shí)我們就寫(xiě)了一個(gè)轉(zhuǎn)換解析器，把 Velocity 的模板語(yǔ)言轉(zhuǎn)換成了 nunjunks 的模板，實(shí)際上 Velocity 模板語(yǔ)言的能力是 nunjunks 的超集，我們?cè)谵D(zhuǎn)換過(guò)程中，還做了非常多的功能檢查，在轉(zhuǎn)換完成后，還會(huì)提示開(kāi)發(fā)者在這個(gè)過(guò)程中發(fā)現(xiàn)了多少問(wèn)題是需要人工轉(zhuǎn)換的。

通過(guò)這樣一系列的努力，我們能夠真正地在既有體系里面跑起來(lái)了。所以如果大家做一個(gè)新東西時(shí)希望證明自己的話(huà)，最好的方式就是去做一個(gè)標(biāo)桿項(xiàng)目。當(dāng)時(shí)我們拿流量最高的支付寶收銀臺(tái)頁(yè)面去做，還好最后做成了。2014 年的種子在后面就開(kāi)花結(jié)果了，到了 2015 年的時(shí)候，這個(gè)框架基本上受到了比較廣泛的認(rèn)可。?? 其實(shí) 2015 年還發(fā)生了很多的事情，大家可能也不是很記得。其實(shí) 2015 年也是釘釘發(fā)布的第一年，在這一年里，有一個(gè)關(guān)鍵詞叫做 Electron，Electron 是一個(gè)能讓 Web 開(kāi)發(fā)的同學(xué)用 Web 開(kāi)發(fā)相關(guān)的技術(shù)做 Native 應(yīng)用的一種技術(shù)，它最早其實(shí)是 GitHub 的 Atom 編輯器的副產(chǎn)品 —— 它一開(kāi)始確實(shí)是個(gè)副產(chǎn)品，而后面就變得獨(dú)立起來(lái)了。

在這方面有兩個(gè)我覺(jué)得比較好的應(yīng)用：一個(gè)是支付寶的小程序 IDE，它最早也是用 Electron 來(lái)開(kāi)發(fā)的；一個(gè)就是我們的釘釘。大家都知道其實(shí)很多開(kāi)發(fā)釘釘?shù)耐瑢W(xué)，早期都是做“來(lái)往”的，所以里面有非常多前端的同學(xué)。后來(lái)大家轉(zhuǎn)向釘釘之后，要做 Native 的App，大家是沒(méi)有那么多的經(jīng)驗(yàn)的，人又特別缺乏，我們又希望能夠盡快做一版出來(lái)校驗(yàn)一下，看看是不是能得到市場(chǎng)的認(rèn)可。所以那個(gè)時(shí)候一幫前端同學(xué)就用 Electron 技術(shù)把釘釘?shù)牡谝话娼o做出來(lái)了。雖然最終釘釘?shù)陌姹具€是換成了 Native 的版本，但是實(shí)際上 Electron 的版本也運(yùn)行了很長(zhǎng)一段時(shí)間，直到最后被大家反饋有比較多的性能問(wèn)題。但是實(shí)際上這也是見(jiàn)仁見(jiàn)智的，很多時(shí)候大家在說(shuō)了一大串性能有問(wèn)題的時(shí)候，我們經(jīng)常會(huì)舉一個(gè)例子：你去看看 VS Code，VS Code 慢嗎？VS Code不慢，VS Code 可是用 Electron 來(lái)做的。所以很多時(shí)候我們也要看這個(gè)技術(shù)到底被用得怎么樣，這也是很重要的。?? 2015 年還發(fā)生了這件事，如果不提那就肯定是漏掉了。Alpha Go 掀起了一場(chǎng)全民人工智能的浪潮，這波浪潮直到今天還在繼續(xù)。其實(shí)早在 2015 年的時(shí)候，我們就有一些團(tuán)隊(duì)在跟進(jìn)這個(gè)領(lǐng)域了，但是這里我要說(shuō)的是，人工智能研究和人工智能應(yīng)用完全是兩件事。如果想要做人工智能研究的話(huà)，基本上除了重新回去讀個(gè)書(shū)可能還有點(diǎn)機(jī)會(huì)之外，剩下的應(yīng)該就沒(méi)機(jī)會(huì)了。因?yàn)檫@個(gè)行業(yè)的競(jìng)爭(zhēng)其實(shí)非常激烈，絕對(duì)得是人中龍鳳 —— 這個(gè)詞用得一點(diǎn)都不夸張，一定是人中龍鳳才能來(lái)做這件事。

但人工智能應(yīng)用會(huì)越來(lái)越廣泛，它的門(mén)檻也會(huì)越來(lái)越低。我們?cè)谶@方面做了一些應(yīng)用上的嘗試，包括 2015 年阿里的智能設(shè)計(jì)平臺(tái)，以及 2018 年的智能設(shè)計(jì)稿轉(zhuǎn)代碼平臺(tái)。這兩個(gè)平臺(tái)都是貼著營(yíng)銷(xiāo)大促這個(gè)場(chǎng)景在跑，因?yàn)楫?dāng)時(shí)在雙十一或者 6.18 大促期間的 Banner，或者這種推薦產(chǎn)品的圖，它們的量級(jí)已經(jīng)達(dá)到了上億級(jí)別，這已經(jīng)根本不可能靠人工去做了，所以我們只能向技術(shù)要產(chǎn)能。所以大家想到了這樣一些辦法。還有一個(gè)就是我們團(tuán)隊(duì)現(xiàn)在在做的，螞蟻企業(yè)級(jí)應(yīng)用設(shè)計(jì)研發(fā)平臺(tái)?？赡艽蠹視?huì)說(shuō)，這看起來(lái)不就是一個(gè) IDE 嗎？它是怎么個(gè)人工智能法呢？這里我們先按下不表，待會(huì)再說(shuō)。

5、2018 年

? 2015 年真的是技術(shù)發(fā)展非常蓬勃的一年，當(dāng)然雖說(shuō)很多技術(shù)可能在更早的時(shí)間 —— 比如說(shuō) 2008年、2009 年 —— 就已經(jīng)出現(xiàn)了，但是對(duì)于我而言，我覺(jué)得特別重要的那些技術(shù)，可能都是在 2015 年、2016 年那兩年感知到的，那個(gè)時(shí)候技術(shù)真的是出現(xiàn)了一個(gè)大爆發(fā)，而且出現(xiàn)了非常多的能很好地落地到業(yè)務(wù)里的應(yīng)用。這些技術(shù)現(xiàn)在仍然還在發(fā)展，但是近幾年非常繁榮的可能是我們的 Web IDE 和 Web Editor。

這是我截的一個(gè)我們公司內(nèi)部的一些相關(guān)產(chǎn)品的圖，非常多，至少有 10 個(gè)，肯定還有很多我不知道的，就像前一個(gè)分享講師講的他們的 IDE，那個(gè)我就不知道。

大家可以從左到右看一下，最早的是大屏可視化數(shù)據(jù)分析類(lèi)的產(chǎn)品，這個(gè)是跟著大數(shù)據(jù)的浪潮來(lái)發(fā)展起來(lái)的；然后到中間人工智能的這一波浪潮，Data Works 大數(shù)據(jù)開(kāi)發(fā)以及 Pai 人工智能可視化開(kāi)發(fā)；到第三列的支付寶小程序 IDE 和我們的 H5 & 小程序建站 IDE，最年輕的兩個(gè) IDE 是我們的 Cloud IDE 也就是云 IDE，以及云鳳蝶企業(yè)級(jí)應(yīng)用設(shè)計(jì)研發(fā)平臺(tái)。

除了這些程序向的 IDE 之外，還有一些其他的復(fù)雜 Editor 的出現(xiàn)，即下面以語(yǔ)雀為例的富文本編輯器以及電子表格等。所以如果我們今天回頭來(lái)看整個(gè)前端的發(fā)展，會(huì)發(fā)現(xiàn)實(shí)際上是非常迅猛的。很多工作年限比較短的同學(xué)，甚至都無(wú)法想象在 2008 年我們前端面臨的是那樣的一個(gè)場(chǎng)景。所以業(yè)界不是有句名言嘛，說(shuō)凡是能用 JavaScript 做的東西，最終都會(huì)用 JavaScript 做一遍，包括現(xiàn)在的 IDE 都是用 JavaScript 在寫(xiě)了，所以還挺神奇的。

6、2020 年?

大家可能會(huì)說(shuō)，你們前端這么牛，你們?cè)趺床簧咸?？其?shí)確實(shí)上天了，大家可以看一下，2017 年 NASA 就已經(jīng)上船 Node.js 了；在剛剛過(guò)去的 Space X 的發(fā)射中，大家也發(fā)現(xiàn)他們使用了前端的相關(guān)技術(shù)來(lái)做觸控大屏。當(dāng)然這條推文僅供大家?jiàn)蕵?lè)一下，因?yàn)檫@條推文其實(shí)并不是 Space X 的工作人員發(fā)的，而是 Google 的一個(gè)程序員發(fā)的。這里引發(fā)了大家比較多的討論，我覺(jué)得有些回復(fù)比較有趣：有人說(shuō) node\_modules 有沒(méi)有讓飛船超重??？大家可以看一下截圖的回復(fù)中間，有一個(gè)老爺爺，它其實(shí)是 JavaScript 的創(chuàng)始人，他仍然很活躍，經(jīng)常做的事情之一就是反駁別人說(shuō) “JavaScript 就是個(gè)玩具語(yǔ)言”。這一頁(yè)給大家?jiàn)蕵?lè)一下。

發(fā)展到現(xiàn)在，其實(shí)我們會(huì)發(fā)現(xiàn)，首先前端的領(lǐng)域性越來(lái)越廣了，在最初的前端行業(yè)里面，大家所要知道的東西就是 CSS、JavaScript、HTML，以及一些周邊的東西，但是并沒(méi)有像現(xiàn)在這樣有那么多重要的東西能夠去玩；另外一個(gè)是，它的難度確實(shí)是越來(lái)越高了，大家會(huì)發(fā)現(xiàn)整個(gè)前端的工作是一路向上延續(xù)的，從寫(xiě)頁(yè)面到寫(xiě)編輯器，到移動(dòng)端的瀏覽器內(nèi)核，一路在向上，在向上的過(guò)程中對(duì)事情有更多的把控力。這兩個(gè)趨勢(shì)非常明顯。那么對(duì)于我們而言，我們要想的是，我們作為今天的前端，是不是可以滿(mǎn)足于做的那些頁(yè)面？答案肯定不是，我們要去看前端的后續(xù)發(fā)展中下一個(gè)浪潮在哪里，我們要踏對(duì)浪潮的脈搏，可能才會(huì)有更好的下一輪發(fā)展。

這個(gè)大概是我對(duì)前端過(guò)去這 12 年的簡(jiǎn)單總結(jié)。這個(gè)總結(jié)其實(shí)是非常個(gè)人的，有一些關(guān)鍵技術(shù)也沒(méi)有出現(xiàn)在今天的分享當(dāng)中，比如說(shuō) IoT，比如說(shuō) Web Assembly 等一些技術(shù)，相關(guān)的同學(xué)也可以去關(guān)注一下。

三、專(zhuān)注當(dāng)下

? 講完歷史，總還是要講一講當(dāng)下。我當(dāng)下在做的工作也比較有趣，叫做云鳳蝶，是螞蟻的企業(yè)級(jí)應(yīng)用設(shè)計(jì)研發(fā)平臺(tái)。

1、云鳳蝶是什么

? 大家可以看一下屏幕上的截圖，左邊是我們的設(shè)計(jì)界面，右邊是我們的編碼界面?？雌饋?lái)這個(gè)東西真的是有點(diǎn)平平無(wú)奇對(duì)不對(duì)？它看起來(lái)就是一個(gè)很普通的 IDE。沒(méi)錯(cuò)，如果從外觀(guān)上來(lái)看確實(shí)是這樣，但是我希望大家不要以貌取人 —— 不要以貌取 IDE。在接手這個(gè)產(chǎn)品的時(shí)候，我們其實(shí)是有明確的問(wèn)題要解決的。

2、問(wèn)題與挑戰(zhàn)

? 那問(wèn)題是什么呢？就是在螞蟻，中后臺(tái)應(yīng)用是最主要的業(yè)務(wù)之一，占比大概 1/3。1/3 是什么概念？今天在螞蟻里，整個(gè)正式的前端研發(fā)以及合作伙伴的總數(shù)應(yīng)該已經(jīng)超過(guò)了 1200 人，大概是這樣的一個(gè)量級(jí)，1/3 就是四百多人，四百多人大概在干這個(gè)事，所以我們是急需要去在這方面提效的。但是提效只是其中的一個(gè)方面。

大家可以看一下左邊的這張漫畫(huà)，說(shuō)的就是前端學(xué)習(xí)曲線(xiàn)，我覺(jué)得社區(qū)里有一位同學(xué)畫(huà)得特別好，一開(kāi)始是最簡(jiǎn)單的，等到發(fā)展到后面這個(gè)人已經(jīng)吃不消了，能看到有那么多的技術(shù)棧，這從很大程度上來(lái)講也確實(shí)是事實(shí)。我們說(shuō)今天的前端技術(shù)雖然發(fā)生了很大的變化，整體的技術(shù)難度也變大了，招到好一些的前端同學(xué)是非常難的事情，所以我們希望能夠降低門(mén)檻。

剛剛提到的是高效能，而另外一個(gè)就是高質(zhì)量。這個(gè)可能大家不是很理解，因?yàn)橐话銇?lái)說(shuō)中后臺(tái)業(yè)務(wù)能跑就行了。屏幕中間就是一個(gè)非常典型的例子，也是我們公司內(nèi)部的一個(gè)中后臺(tái)產(chǎn)品的截圖。但是我們剛剛提到過(guò)一點(diǎn)，即 2015 年是 toB 業(yè)務(wù)的元年， toB 的業(yè)務(wù)在最近幾年是越來(lái)越受重視的，包括螞蟻的很多重量級(jí)的業(yè)務(wù)也都是 toB 類(lèi)的業(yè)務(wù)，包括螞蟻 Block 鏈、Ocean Base、mPaas 等一些平臺(tái)，所有這些會(huì)讓我們對(duì)中后臺(tái)的整體質(zhì)量提出更高的要求。

當(dāng)然其本身的業(yè)務(wù)也非常復(fù)雜，復(fù)雜到什么程度？我之前跟一個(gè)同學(xué)聊天，說(shuō)到他們負(fù)責(zé)的一個(gè)簽約類(lèi)的產(chǎn)品，其中的簽約表單，大家可以想象一下有多少字段 —— 800 個(gè)字段！800 個(gè)字段，我覺(jué)得作為一個(gè)人其實(shí)都很難填完，這 800 個(gè)字段，大家想象一下怎么在頁(yè)面上合理地顯示出來(lái)？所以復(fù)雜度也是非常高的。就這樣的背景下，我們決定要去做云鳳蝶這樣一個(gè)產(chǎn)品，解決這類(lèi)的問(wèn)題。

關(guān)于這個(gè)產(chǎn)品，我們最初想了很多問(wèn)題，大家回想一下剛剛我說(shuō)的 Web IDE 的那一頁(yè)，十幾個(gè) IDE 中有一個(gè)叫 Cloud IDE，有一個(gè)叫云鳳蝶的 IDE，這兩個(gè)是成對(duì)的。Cloud IDE 是一個(gè) Pro Code 的 IDE，大家可能覺(jué)得這個(gè)才是正統(tǒng)，那云鳳蝶是什么？—— 云鳳蝶是編程界的拼多多。一說(shuō)到拼多多，大家都覺(jué)得很“Low”對(duì)不對(duì)？其實(shí)我也被這個(gè)事很困擾了很長(zhǎng)時(shí)間，因?yàn)榇蠹叶加X(jué)得這個(gè)云鳳蝶好像挺牛的，里面有挺多核心技術(shù)的，但是一說(shuō)到要招人？“不來(lái)不來(lái)，我要去Cloud IDE?！贝蟾攀沁@樣的狀態(tài)，就讓人很苦惱。但是慢慢地也就釋然了。為什么？因?yàn)槲野l(fā)現(xiàn)最近拼多多市值過(guò)千億了，這件事還是挺厲害的，而且我查了一下，黃崢?biāo)闶俏业膸熜?—— 都是浙大畢業(yè)的。

行！我就做編程界的拼多多也沒(méi)問(wèn)題！因?yàn)楹芏鄷r(shí)候越 “Low”越有市場(chǎng)，當(dāng)然這個(gè)“Low”不是說(shuō)逼格 Low，而是說(shuō)我們能不能真正切準(zhǔn)用戶(hù)的訴求，知道他們的痛點(diǎn)，然后把解決問(wèn)題的方式、難度降到最低，這樣的話(huà)我們能夠最大限度地覆蓋非常多的受眾，這個(gè)可能才是產(chǎn)品本身的價(jià)值所在。在這樣的前提下，我們定了一些原則。首先這個(gè)東西一定要足夠簡(jiǎn)單、足夠“Low”，我們要讓非常多的人能夠用這個(gè)產(chǎn)品；但同時(shí)它的功能要足夠強(qiáng)大，不然沒(méi)有辦法覆蓋商業(yè)級(jí)產(chǎn)品對(duì)質(zhì)量的要求；另外一個(gè)就是，無(wú)論是什么樣的重復(fù)性工作，終歸是臟活累活，我們希望這樣的臟活累活能夠更多地交給機(jī)器去做，而人應(yīng)該去做一些更有創(chuàng)造力、更有挑戰(zhàn)的事情；再就是我們現(xiàn)在可能還處于孵化過(guò)程的一些能力，那就是它不僅僅是一個(gè)前端的 IDE，我們希望它是一個(gè)集設(shè)計(jì)、前后端一體化的設(shè)計(jì)研發(fā)平臺(tái)。

當(dāng)我們把產(chǎn)品定位想清楚了之后，做起來(lái)就不糾結(jié)了。而且事實(shí)證明我們想的這個(gè)東西確實(shí)能給大家?guī)?lái)一些驚喜。今天因?yàn)闀r(shí)間的原因，不會(huì)跟大家非常細(xì)地去講這個(gè)產(chǎn)品我們打算怎么去設(shè)計(jì)、它未來(lái)的發(fā)展是怎么樣，而是跟大家講講我們?cè)谧鲞@個(gè)產(chǎn)品的過(guò)程中的一兩點(diǎn)思考。

3、思考一：像做 PPT 一樣做應(yīng)用

? 首先大家都知道，可視化建站或者說(shuō)可視化拖拽這個(gè)概念其實(shí)并不新鮮了，在八幾年、九幾年的時(shí)候，就已經(jīng)開(kāi)始有第一代產(chǎn)品在嘗試了，但是無(wú)論怎樣，幾十年過(guò)去了，還有很多產(chǎn)品前赴后繼地來(lái)做這件事，這說(shuō)明了什么？說(shuō)明兩個(gè)問(wèn)題：一個(gè)是這個(gè)問(wèn)題沒(méi)有被徹底解決，否則就不會(huì)有那么多后來(lái)者；另外一個(gè)就是這個(gè)領(lǐng)域可能真的是有需求的，不然也不會(huì)有那么多人去做。

那么我們希望它到底“Low”到什么程度，它的門(mén)檻要低到什么樣的程度才能讓設(shè)計(jì)師和 PD 這樣的角色能參與進(jìn)來(lái)呢？我們首先定下來(lái)的原則就是，我們要像做 PPT 一樣去做應(yīng)用。什么叫像做 PPT 一樣去做應(yīng)用呢？大家可以看一下左邊這個(gè)小圖，這個(gè)是市面上常見(jiàn)的一些同類(lèi)產(chǎn)品的拖拽方式，這個(gè)拖拽方式是基于 Flex 布局的技術(shù)，所以當(dāng)你拖出來(lái)一個(gè)東西到畫(huà)布里面去的時(shí)候，通常只能上下位添加或者左右位添加。當(dāng)你想要對(duì)這里面的東西做一些排版的時(shí)候，實(shí)際上是要經(jīng)過(guò)一系列非常復(fù)雜的操作，才能夠把它擺到想要的位置，這是現(xiàn)有的一些產(chǎn)品。

那么在云鳳蝶上怎么做這件事呢？大家看一下，這個(gè)真的是像做 PPT 一樣做應(yīng)用，就是想擺哪就擺哪，沒(méi)有什么布局的概念。實(shí)際上這個(gè)技術(shù)并不算是云鳳蝶的首創(chuàng)，因?yàn)樵谝恍┦謾C(jī)端的可視化建站產(chǎn)品當(dāng)中，已經(jīng)使用了這個(gè)技術(shù)，但是在手機(jī)端做這個(gè)事難度就低很多了。為什么說(shuō)它難度很低？首先它不需要去考慮彈性布局的問(wèn)題，因?yàn)槭謾C(jī)端雖然說(shuō)屏幕尺寸有一些差異，但只要做一個(gè)全屏幕的等比縮放這事就解決了，根本不存在布局問(wèn)題。而沒(méi)有布局問(wèn)題的話(huà)，我們也不需要去識(shí)別這些元素之間的父子關(guān)系。但是這兩個(gè)問(wèn)題在 PC 端都是非常大的問(wèn)題，經(jīng)常會(huì)有人開(kāi)玩笑說(shuō)，把一個(gè)專(zhuān)業(yè)的開(kāi)發(fā)擋在前端門(mén)外的往往都是 CSS。這雖然是一句玩笑話(huà)，但也足以說(shuō)明布局問(wèn)題的復(fù)雜性。所以我們?cè)诓季值臅r(shí)候，需要考慮的問(wèn)題非常多。最終我們決定用這種非常簡(jiǎn)單的方式來(lái)讓大家使用。比較眼尖的或者說(shuō)經(jīng)驗(yàn)比較豐富的同學(xué)可能會(huì)看出來(lái)，這個(gè)像做 PPT 一樣的體驗(yàn)，效率是沒(méi)有左邊這張小圖的高的，但是實(shí)際上是有解法的，而且我們正在解。

這就是我們整個(gè)產(chǎn)品的底座，它奠定了整個(gè)產(chǎn)品的基調(diào)。那么結(jié)果如何呢？結(jié)果就是大家確實(shí)買(mǎi)單了，不僅有前端的同學(xué)來(lái)用，還有后端的同學(xué)，更神奇的是，我們還發(fā)現(xiàn)有人拿我們這個(gè)做線(xiàn)上 PPT，很神奇，我們看了一下，做的還蠻好的。所以說(shuō)，當(dāng)你的產(chǎn)品力達(dá)到一定程度的時(shí)候，大家對(duì)這個(gè)產(chǎn)品的想象力可能會(huì)超乎大家最初對(duì)它的期望。

4、思考二：開(kāi)放的組件體系

? 另外一個(gè)點(diǎn)就是豐富的精品 UI 資產(chǎn)。大家都知道我們?cè)谧鰬?yīng)用研發(fā)的時(shí)候，最重要的兩個(gè)東西是什么？一個(gè)是 UI 組件，另外一個(gè)是數(shù)據(jù)連接。UI 資產(chǎn)其實(shí)就是 UI 組件這方面，通常來(lái)說(shuō)同類(lèi)產(chǎn)品做這個(gè)選擇都會(huì)非常艱難，要么就是一個(gè)封閉的資產(chǎn)體系，也就是說(shuō)我有 100個(gè) 組件，你就只能用這 100 個(gè)組件，而好處是這 100 個(gè)組件我會(huì)把體驗(yàn)打磨得非常好，而一旦組件不滿(mǎn)足要求，那完蛋，只能退到 Pro Code。還有另外一種嘗試叫做開(kāi)放的組建體系，云鳳蝶是走了這條路。

說(shuō)到開(kāi)放的組件體系，什么叫開(kāi)放？意思是說(shuō)凡是在 Pro Code 的世界里開(kāi)發(fā)的組件，都可以通過(guò)簡(jiǎn)單的導(dǎo)入操作在云鳳蝶里面使用。這個(gè)聽(tīng)起來(lái)非常的好，對(duì)不對(duì)？我們沒(méi)有必要重復(fù)造輪子，所有在 Pro Code 世界里非常好的東西，我們都能拿過(guò)來(lái)用。但實(shí)際上要讓用戶(hù)能夠用得這么簡(jiǎn)單，難度是非常大的，因?yàn)橐粋€(gè)小小的 npm 組件的導(dǎo)入，就有非常多的工作要做。比如說(shuō)組件規(guī)范是什么？如何解析這個(gè) npm 組件？解析后要不要做構(gòu)建？構(gòu)建！因?yàn)槲覀儾豢赡芟?Pro Code 里一樣，在用戶(hù)發(fā)布的時(shí)候說(shuō)，等一等我跑個(gè) 10 分鐘構(gòu)建。一般來(lái)說(shuō)我們希望它是秒級(jí)發(fā)布的，所以我們需要提前把構(gòu)建的工作做好。再比如一個(gè) npm 組件的屬性編輯怎么做？這些其實(shí)還都只解決了我們手工操作的問(wèn)題。我們最終希望，一個(gè) Pro Code 的同學(xué)，他每天寫(xiě)這些組件、發(fā)布這些組件，我們能不能讓他發(fā)的時(shí)候就直接發(fā)到我們這個(gè)平臺(tái)上來(lái)，這樣的話(huà)無(wú)論是用 Pro Code 寫(xiě)代碼，還是用云鳳蝶做搭建，它都可以用，這是一個(gè)非常好的想法，所以我們最近也在做研發(fā)鏈路的打通。

在組件的世界里面，其實(shí)有一個(gè)最讓大家頭疼的事情就叫做版本升級(jí)，很多產(chǎn)品的版本碎片化非常嚴(yán)重，包括我們自己的 Pro Code 的很多組件庫(kù)也是這樣。在云鳳蝶中我們就定了一個(gè)原則，那就沒(méi)有版本碎片，我們是強(qiáng)制用戶(hù)升級(jí)的，我們用了一個(gè) Codemod 技術(shù)，把所有的組件無(wú)縫升級(jí)了，用戶(hù)看到提示的時(shí)候，只需要無(wú)腦點(diǎn)升級(jí)就可以。這其實(shí)是非常好的嘗試，我們?cè)谶@些嘗試的過(guò)程當(dāng)中，也跟 Pro Code 的同學(xué)有一些交流、溝通，甚至有一些反哺。比如說(shuō)后續(xù) Pro Code 的同學(xué)可能也會(huì)嘗試做版本的 Codemod，我們也能反推 Pro Code 的一些組件規(guī)范的提升。這個(gè)時(shí)候開(kāi)放的組件體系就真正地把 Pro Code 跟 Low Code 融合在一起了，我們能夠共享其中的產(chǎn)出。

5、思考三：數(shù)據(jù)驅(qū)動(dòng)的智能研發(fā)

? OK，說(shuō)到了第三點(diǎn)，就是基于數(shù)據(jù)連接的智能研發(fā)，因?yàn)榕K活累活、重復(fù)工作沒(méi)有人想做第二遍，但現(xiàn)狀是 —— 我不知道小廠(chǎng)怎么樣 —— 反正我們大廠(chǎng)這類(lèi)問(wèn)題蠻多的，大家可能每天都在跟表單、表格做斗爭(zhēng)，我指的是中后臺(tái)業(yè)務(wù)線(xiàn)的同學(xué)們。往往我們面臨的業(yè)務(wù)還蠻復(fù)雜，有時(shí)候要做一個(gè)表單的話(huà)，往往是以星期為單位去計(jì)算開(kāi)發(fā)工作量的。但實(shí)際上摸著良心問(wèn)一問(wèn)，做這個(gè)東西能有多大成就感？可能大家也覺(jué)得沒(méi)有那么多成就感，對(duì)不對(duì)？畢竟還有那么多好玩的事。

所以我們就希望讓機(jī)器去承擔(dān)這一類(lèi)重復(fù)勞動(dòng)，包括設(shè)計(jì)。大家可以看一下我們現(xiàn)在在做的一個(gè)能力：這是一個(gè)表單，選擇了一個(gè) API 之后，你可以選擇要填寫(xiě)的字段，然后它會(huì)根據(jù) API 的元信息以及它的 API結(jié) 構(gòu)自動(dòng)生成這個(gè)表單。當(dāng)然這是一個(gè)非常簡(jiǎn)單的演示，大家可以看到，該有的校驗(yàn)、排版之類(lèi)的全部都是機(jī)器一鍵自動(dòng)生成的。?? 所以這能給我們的整個(gè)研發(fā)帶來(lái)非常多的便利、節(jié)約非常多的時(shí)間。但是它做起來(lái)也是非常坎坷的，因?yàn)榇蠹叶贾?，一旦說(shuō)到智能化，大家的想法是非常多的，有些人覺(jué)得是個(gè)銀彈，也有人覺(jué)得不那么靠譜。所以我們最初在決策到底用哪種智能化的方式的時(shí)候，也是經(jīng)歷過(guò)非常多的掙扎的。我們到底是從 API 直接到產(chǎn)物，還是去解析設(shè)計(jì)稿到產(chǎn)物？

最終我們決定從 API 到產(chǎn)物。為什么？因?yàn)橹泻笈_(tái)應(yīng)用研發(fā)的設(shè)計(jì)是有一定的規(guī)范性的，我們并不會(huì)每天看到很多花里胡哨的中后臺(tái)研發(fā)，而且在表單、表格這樣的主流場(chǎng)景當(dāng)中，涉及的規(guī)范性就更加明顯了，沒(méi)有那么多的設(shè)計(jì)創(chuàng)新。另外，在 API 上有元數(shù)據(jù)的話(huà)，就有非常多的業(yè)務(wù)信息，這些是通過(guò)圖片生成代碼無(wú)可比擬的優(yōu)勢(shì)。而且還能省略設(shè)計(jì)師的設(shè)計(jì)工作。所以我們最后決定，直接就從數(shù)據(jù)接口生成產(chǎn)物。而在使用哪種 AI 技術(shù)上面，當(dāng)時(shí)大家也是有過(guò)一些爭(zhēng)議的，最后我們還是使用了專(zhuān)家系統(tǒng)這樣的比較簡(jiǎn)單的方式，這個(gè)方式的效果是比較好的。

大家可以看一下，這張圖是我們?nèi)ツ晗掳肽甑臅r(shí)候做的第一版技術(shù)原型，左邊的是人工設(shè)計(jì)的版本，右邊是云鳳蝶設(shè)計(jì)研發(fā)的版本，大家會(huì)有比較明顯的體感，會(huì)發(fā)現(xiàn)云鳳蝶的版本更加精致一些。確實(shí)是這樣，不是說(shuō)人工設(shè)計(jì)的質(zhì)量不好，而是 toB 的業(yè)務(wù)更多是理性的設(shè)計(jì)，要去做這個(gè)東西的話(huà)，往往可能有三、四百條設(shè)計(jì)規(guī)則在那等著你，作為一個(gè)人，是不擅長(zhǎng)去記這些東西的，而這些恰恰是機(jī)器擅長(zhǎng)做的。

比較搞笑的是，我們從去年年初的時(shí)候開(kāi)始孵化，上半年產(chǎn)出的結(jié)果非常矬，后來(lái)下半年的時(shí)候，覺(jué)得這樣下去不行了，得改進(jìn)。然后就跟設(shè)計(jì)師一起想，我們才能怎么做到最好，把這事給做好。當(dāng)時(shí)在會(huì)議室里，我們就說(shuō)這事要定個(gè)目標(biāo)對(duì)吧？總得定個(gè)目標(biāo)。沒(méi)人發(fā)言，那我就說(shuō)我們要不就定這樣一個(gè)目標(biāo)，我們把目標(biāo)定成，產(chǎn)出結(jié)果比一般的人工設(shè)計(jì)師質(zhì)量要高。這個(gè)時(shí)候大家都不說(shuō)話(huà)了，都覺(jué)得這可是設(shè)計(jì)啊，這玩意怎么可能比人工設(shè)計(jì)要高，頂多接近它。沒(méi)辦法，后來(lái)我們就說(shuō)，那我們先接近人工設(shè)計(jì)的標(biāo)準(zhǔn)吧，后來(lái)過(guò)了一段時(shí)間，我們把技術(shù)原型做出來(lái)，也就是大家在 Keynote 上看到的這張圖，頓時(shí)整個(gè)項(xiàng)目組的人都非常受到鼓舞。于是我們覺(jué)得，比人工設(shè)計(jì)的水準(zhǔn)要高絕對(duì)是 OK 的。后來(lái)事實(shí)證明確實(shí)是這樣，我們?cè)跇I(yè)務(wù)當(dāng)中確實(shí)很快就得到了業(yè)務(wù)的認(rèn)可。所以很多時(shí)候，大家想一些東西時(shí)，還是需要更大膽地去想。即便是設(shè)計(jì)這樣非常有難度的東西，這些在我們看來(lái)最不可程序化的東西，也許也是有跡可循的。

6、思考四：混合模式

? 第四點(diǎn)講一講 Pro Code 跟 Low Code 的混合研發(fā)。很多時(shí)候像云鳳蝶這樣的 Low Code 產(chǎn)品，雖然我們想了非常多的創(chuàng)新點(diǎn)，想了非常多的解決用戶(hù)痛點(diǎn)的點(diǎn)，但無(wú)論怎樣，“你就是個(gè)拼多多，我就愛(ài)用天貓，我就不用你拼多多”。怎么辦？這就不是技術(shù)問(wèn)題了，這是一個(gè)用戶(hù)信心建立的過(guò)程。

我們就做了一套方案，基于微前端的架構(gòu)，把 Pro Code 和 Low Code 的應(yīng)用給聯(lián)合起來(lái)，作為一個(gè)開(kāi)發(fā)者，他只需要隨心地去選擇合適他自己的研發(fā)方式就可以了。

我們看到下面這個(gè)是云鳳蝶自己的一個(gè)產(chǎn)品頁(yè)面，左邊是我們的 IDE，是用 Pro Code 研發(fā)的，右邊代表了所有一系列除 IDE 的其他頁(yè)面全部都是用云鳳蝶自舉的。這個(gè)時(shí)候確實(shí)也不適合用某種單一的研發(fā)方式來(lái)完成我們的研發(fā)工作，而兩者混合可能確實(shí)是最好的解決方案。這個(gè)解決方案實(shí)際上也解決了用戶(hù)信心的問(wèn)題。

比較有趣的地方是，一開(kāi)始用戶(hù)對(duì)我們信心不足，然后我們做了這個(gè)混合研發(fā)的架構(gòu)，一段時(shí)間之后我們發(fā)現(xiàn)云鳳蝶的智能表單、表格太受歡迎了，Pro Code 的同學(xué)也不想自己寫(xiě)了，他們說(shuō)云鳳蝶能不能做組件級(jí)的混合呀，在云鳳蝶上的某個(gè)組件，能夠嵌到 Pro Code 的代碼里面去，Pro Code 的 npm 包也能嵌到云鳳蝶里面來(lái)？OK，這個(gè)事可以做，這個(gè)事做完之后就變成了什么？對(duì)你來(lái)說(shuō)你無(wú)需考慮要選擇哪種研發(fā)方式，而是考慮哪種研發(fā)方式對(duì)你的業(yè)務(wù)確確實(shí)實(shí)是最合適的。那些常規(guī)的工作，可能確實(shí)用云鳳蝶就非常地快，能又快又好地做完。

雖然最初是因?yàn)橛脩?hù)信心不足，我們來(lái)做的這個(gè)事，但其實(shí)我們發(fā)現(xiàn)，當(dāng)用戶(hù)真正接受我們之后，100% 地使用云鳳蝶來(lái)研發(fā)的項(xiàng)目是非常多的。除了像云鳳蝶這樣本身有那么一兩個(gè)很特殊的 IDE 類(lèi)的復(fù)雜度很高的頁(yè)面，其他的頁(yè)面都非常適合用云鳳蝶這樣的產(chǎn)品來(lái)研發(fā)。

7、對(duì)未來(lái)的思考

? ? 今天我在這里講講可能覺(jué)得還挺順理成章的，但實(shí)際上過(guò)程是比較坎坷的，還不斷地被拷問(wèn)、被質(zhì)疑，走到現(xiàn)在可能才剛剛好一些。而對(duì)于企業(yè)級(jí)應(yīng)用研發(fā) —— 我們內(nèi)部經(jīng)常會(huì)說(shuō)中后臺(tái)應(yīng)用，這一類(lèi)其實(shí)大家都知道，就像水面下的冰山，往往一個(gè)對(duì)外的頁(yè)面對(duì)應(yīng)的是好多個(gè)內(nèi)部的系統(tǒng)，所以?xún)?nèi)部系統(tǒng)的量級(jí)是非常高的。而如果它有比較高的質(zhì)量，其實(shí)對(duì)員工的工作效率有很大的幫助。

左邊這張圖就說(shuō)明了適用云鳳蝶的范圍，我們把一個(gè)公司里面的應(yīng)用分位兩個(gè)維度來(lái)看，一個(gè)是它面向的用戶(hù)規(guī)模，從小到大是團(tuán)隊(duì)級(jí)、部門(mén)級(jí)、企業(yè)級(jí)到 toC；另外一個(gè)維度是它的交互特殊性。黃色區(qū)域都是非常適合用云鳳蝶這種研發(fā)方式來(lái)做的。云鳳蝶其實(shí)在上面還有一部分是混合研發(fā)的，就是剛剛和大家講過(guò)的。

那么對(duì)于未來(lái)的企業(yè)研發(fā)模式，我們認(rèn)為它是怎么樣的呢？就是右邊這張圖，上面是現(xiàn)狀，有大量的 Pro Design、Pro Code。云鳳蝶去年下半年發(fā)了第一個(gè)版本之后，去年大概有差一點(diǎn)不到 20% 的業(yè)務(wù)是由云鳳蝶來(lái)承載的。這對(duì)云鳳蝶來(lái)說(shuō)非常不容易，我剛剛講了，我們上面有 OB 這樣的業(yè)務(wù)在，所以要承載很多復(fù)雜應(yīng)用的研發(fā)是很大的一個(gè)挑戰(zhàn)。在去年數(shù)據(jù)里，有 40% 的產(chǎn)物是通過(guò)機(jī)器來(lái)做設(shè)計(jì)研發(fā)的，大概 60% 是人工。

我們希望未來(lái)大概是下面這張圖的樣子，首先 Pro Code 跟 Low Code 是能夠進(jìn)一步融合的，它們之間能產(chǎn)生實(shí)實(shí)在在的關(guān)聯(lián)。比如說(shuō)能把 Pro Code 產(chǎn)出的組件放到云鳳蝶里使用，同時(shí)云鳳蝶也有非常多的天然優(yōu)勢(shì)，它能夠非常精準(zhǔn)地收集用戶(hù)的需求以及用戶(hù)的使用數(shù)據(jù)，能夠給 Pro Code 的同學(xué)非常多的反饋，能促成一個(gè)良性循環(huán)，慢慢地 Pro Design 和 Pro Code 的這些同學(xué)會(huì)去處理越來(lái)越復(fù)雜的場(chǎng)景，對(duì)于常規(guī)的研發(fā)工作來(lái)說(shuō)，我們會(huì)慢慢收口到像云鳳蝶這樣的平臺(tái)上面，并且未來(lái)在云鳳蝶上可能有 70% 的工作是由機(jī)器去完成的，剩下的 30%，一部分是設(shè)計(jì)師來(lái)參與，一部分是工程師來(lái)參與。我們希望云鳳蝶能夠?yàn)橹泻笈_(tái)應(yīng)用研發(fā)提效，讓大家有更多的時(shí)間和機(jī)會(huì)去參與更加有挑戰(zhàn)的事情。

好，這就是我近期的一些工作和有趣的事情。

四、一些感悟

? 接下來(lái)跟大家講講做前端的一些感悟吧，比較少哈。?

1、認(rèn)識(shí)自己

第一個(gè)是知道自己有什么、要什么、可以舍棄什么。在大家的提問(wèn)里面，很多的同學(xué)都會(huì)關(guān)注自己要不要走管理，要不要學(xué)這個(gè)、學(xué)那個(gè)。實(shí)際上問(wèn)題很簡(jiǎn)單，那就是你要什么、可以舍棄什么。在我看來(lái)，管理是一件九死一生事情 —— 九死一生這詞不嚴(yán)重。為什么我說(shuō)它九死一生呢？因?yàn)橹辽?10 個(gè)人以上的團(tuán)隊(duì)才需要一個(gè)兼職的管理者，30 個(gè)人以上的團(tuán)隊(duì)可能才需要一個(gè)全職的管理者。當(dāng)你進(jìn)到管理行列的時(shí)候，完全是在另外一個(gè)賽道，可能跟你做技術(shù)的時(shí)候是兩碼事。比如說(shuō)要考慮到大家怎么開(kāi)心地工作、團(tuán)隊(duì)怎么建立、末位怎么汰換、怎么給團(tuán)隊(duì)立下發(fā)展方向、怎么向上溝通匯報(bào)。這個(gè)時(shí)候很多同學(xué)可能會(huì)說(shuō)，我們團(tuán)隊(duì)發(fā)展得比較快，沒(méi)有人帶團(tuán)隊(duì)，那我就得帶；或者說(shuō)我不帶團(tuán)隊(duì)的話(huà)我技術(shù)不行，我怎么辦呢？大家自己想清楚自己要什么就好了，如果僅僅是因?yàn)橛X(jué)得不帶團(tuán)隊(duì)了可能就沒(méi)有前途了之類(lèi)的，其實(shí)并沒(méi)有這個(gè)必要。我們團(tuán)隊(duì)就有非常多的高 P 的獨(dú)立研發(fā)者在公司里面工作，工作得非常好、非常開(kāi)心，他們也沒(méi)有帶團(tuán)隊(duì)，這其實(shí)是看個(gè)人的發(fā)展的。而且如果帶團(tuán)隊(duì)讓你感覺(jué)很痛苦的話(huà)，可能確實(shí)不帶團(tuán)隊(duì)會(huì)比較好一些，這是第一點(diǎn)。

2、發(fā)現(xiàn)和定義問(wèn)題

第二點(diǎn)就是學(xué)會(huì)發(fā)現(xiàn)問(wèn)題、定義問(wèn)題，至于怎么解決可以慢慢學(xué)。作為程序員，我們很多時(shí)候都是解決問(wèn)題的角色，我們學(xué)的都是解決問(wèn)題的方式方法。但是很多同學(xué) —— 特別是有了一些工作年限的同學(xué)，他們?cè)诠ぷ鞯倪^(guò)程當(dāng)中會(huì)慢慢地發(fā)現(xiàn)，很多時(shí)候發(fā)現(xiàn)問(wèn)題和定義問(wèn)題會(huì)更加重要。打個(gè)簡(jiǎn)單的比方，剛剛我在說(shuō)為什么要去做云鳳蝶？因?yàn)槲覀冇幸磺Ф嗳说那岸?，?1/3 在做中后臺(tái)應(yīng)用，急需解決研發(fā)效能的問(wèn)題以及門(mén)檻的問(wèn)題。那么說(shuō) 1/3 的人在做這個(gè)事，其實(shí)還是挺有體感的，但是如果你跟老板說(shuō)，我覺(jué)得現(xiàn)在前端研發(fā)的同學(xué)效能太低了，這句話(huà)可能很難讓老板 Get 到這個(gè)事。所以怎么去描述問(wèn)題很重要，包括怎么去發(fā)現(xiàn)問(wèn)題，因?yàn)楹芏嗟臅r(shí)候越往前走，你會(huì)發(fā)現(xiàn)問(wèn)題就不那么明顯了，甚至有可能很多時(shí)候大家都覺(jué)得這不是一個(gè)問(wèn)題，直到你做出來(lái)了，他們才說(shuō)原來(lái)你這個(gè)真的是很能解決問(wèn)題的東西呀。這個(gè)過(guò)程當(dāng)中，你可能經(jīng)常會(huì)被別人 Diss 或者會(huì)被懷疑，但是如果真的想清楚這事應(yīng)該怎么做的話(huà)，可以堅(jiān)定一些。

3、注重基礎(chǔ)

第三個(gè)是形成自己的知識(shí)體系，注重基礎(chǔ)知識(shí)的積累。這是我覺(jué)得對(duì)工作年限比較短的同學(xué)來(lái)說(shuō)最重要的事情。對(duì)于程序員來(lái)說(shuō)，我們還是要去把本職工作做好，把基礎(chǔ)打好，因?yàn)槿绻A(chǔ)不好的話(huà)，走到管理崗可能也只是一種偶然，很難走長(zhǎng)遠(yuǎn)。在知識(shí)體系里面，有一些是基礎(chǔ)知識(shí)，有一些是應(yīng)用級(jí)別的知識(shí)，應(yīng)用級(jí)別的知識(shí)就是你可能花兩三個(gè)月、快的話(huà)兩三個(gè)星期也能上手的這類(lèi)。但要能識(shí)別出來(lái)哪些是基礎(chǔ)的、哪些是應(yīng)用的。對(duì)于基礎(chǔ)知識(shí)可能往往要花非常多的心力或者精力去學(xué)習(xí)，但是一旦你學(xué)會(huì)了之后，它可能會(huì)讓你在很長(zhǎng)一段時(shí)間里都能受益。

4、無(wú)心插柳

第四點(diǎn)就是學(xué)點(diǎn)無(wú)用的東西、做點(diǎn)無(wú)用的事，見(jiàn)見(jiàn)無(wú)用的人。這個(gè)可能跟前面的鰻魚(yú)小姐姐的說(shuō)法有一定等同，就是你現(xiàn)在做的這些無(wú)用的事，在未來(lái)總會(huì)連成一串。確實(shí)是這樣，我回想了一下，在 2015 年參與開(kāi)發(fā) Chair —— 就是我們螞蟻的 Node Web框架 —— 這個(gè)項(xiàng)目的時(shí)候，我做的幾項(xiàng)工作。第一個(gè)是打通了跟現(xiàn)有 Java 服務(wù)體系，能做成這件事，來(lái)源于我工作了之后還花了比較多的精力去學(xué) Java。另外一個(gè)就是把當(dāng)時(shí) Java 的 Velocity 模板用機(jī)器編譯成了 nunjunks 模板，這個(gè)正好是因?yàn)橹皩W(xué)了那本龍書(shū) —— 叫《編譯原理》的那本龍書(shū)，學(xué)完了之后正好就用到了，這個(gè)東西如果要想現(xiàn)學(xué)的話(huà)可能就比較難了，因?yàn)槲耶?dāng)時(shí)斷斷續(xù)續(xù)看了半年。這個(gè)倉(cāng)庫(kù)大家可以看一下，右邊有一張截圖，就是我當(dāng)時(shí)的一些習(xí)題記錄放在了 GitHub 上，很多同學(xué)在進(jìn)入阿里之后就慢慢地不怎么更新了，我也是一樣的，沒(méi)辦法，工作太忙了。但是這個(gè)倉(cāng)庫(kù)的 Star 數(shù)是一直在漲的，因?yàn)槟憧赡苷也坏降诙萘?xí)題答案。今天趁著這個(gè)大會(huì)也想呼吁一下今天的聽(tīng)眾同學(xué)，如果有同學(xué)對(duì)這個(gè)東西比較有興趣的話(huà)，也歡迎成為這個(gè)倉(cāng)庫(kù)的維護(hù)者，因?yàn)槲覍?shí)在是忙到無(wú)力維護(hù)這個(gè)東西好多年了，但是我不斷地看到有人在用，不斷有人提 PR，我覺(jué)得荒廢掉挺可惜的。

5、準(zhǔn)求極致

第五點(diǎn)就是追求極致，最難的路可能是最好走的。如果我們選擇了一條比較容易的路，我們往往會(huì)面臨低質(zhì)量的競(jìng)爭(zhēng)；但是如果我們選了一條比較難的路，可能只是開(kāi)始比較艱難，但是會(huì)越走越開(kāi)闊。就像開(kāi)始講到云鳳蝶在選擇可視化搭建的畫(huà)布基礎(chǔ)的時(shí)候，我們選擇了一個(gè)看起來(lái)可能最難的自由拖拽的畫(huà)布，因?yàn)槲覀兿Ｍ脩?hù)能夠有一個(gè)像做 PPT 一樣的應(yīng)用研發(fā)體驗(yàn)，這個(gè)確實(shí)有非常多的技術(shù)難點(diǎn)要解決，當(dāng)然這個(gè)過(guò)程當(dāng)中 Bug 也搞了不少，也被用戶(hù)罵了不少，但是做到今天，我們真正覺(jué)得這條路是走對(duì)了，而且我們不斷地得到用戶(hù)的認(rèn)可。

五、書(shū)籍推薦

? 按照大會(huì)的慣例，需要給大家推薦一本書(shū)。我先說(shuō)一下，如果大家覺(jué)得大學(xué)沒(méi)有學(xué)好，那可能是因?yàn)榻滩谋容^渣，一定不要覺(jué)得是自己比較渣。這個(gè)我是深有體會(huì)的，因?yàn)楹芏啻髮W(xué)的課程我在工作了之后又重新學(xué)了一遍，學(xué)的時(shí)候我就換了教材。?? 這是我給大家推薦的幾本書(shū)。為什么是幾本書(shū)呢？因?yàn)檫@些書(shū)其實(shí)是有一定的關(guān)聯(lián)性的。上面的三本是《微積分》、《線(xiàn)性代數(shù)》跟《概率論》，這個(gè)可能是我們所有同學(xué)在讀本科的時(shí)候基礎(chǔ)的三門(mén)課程。下面是大家可能會(huì)覺(jué)得現(xiàn)在比較熱門(mén)的、同學(xué)們也比較想去了解的，是《數(shù)據(jù)挖掘》以及《人工智能》。很多時(shí)候大家會(huì)看到有一些所謂的人工智能的入門(mén)書(shū)之類(lèi)的，我建議大家如果真的對(duì)這兩個(gè)東西感興趣的話(huà)，可以看一看這兩本書(shū)。這兩本書(shū)都非常厚，但是《人工智能》這本書(shū)非常全面地講述了人工智能領(lǐng)域所有的東西，當(dāng)然有一些東西可能在今天看來(lái)比較過(guò)時(shí)，但仍然建議大家讀一讀，耐心一點(diǎn)把這本書(shū)讀完。這本書(shū)讀完了之后，對(duì)人工智能能帶來(lái)哪些好處，或者說(shuō)哪個(gè)方案會(huì)比較靠譜一些，你就會(huì)有比較堅(jiān)定的自己的看法，包括你要跟相關(guān)的同學(xué)去溝通，你是不會(huì)發(fā)怵的。然后另外一個(gè)就是《數(shù)據(jù)挖掘》，現(xiàn)在大家都用數(shù)據(jù)說(shuō)話(huà)嘛，所以數(shù)據(jù)挖掘也很重要。這本導(dǎo)論好就好在非常淺顯易懂，基本上所有的方式方法你都能看得懂、用得著。所以這兩本書(shū)非常推薦。

那為什么還推薦了上面的那一排基礎(chǔ)書(shū)呢？因?yàn)樵谌斯ぶ悄茴I(lǐng)域有一些基礎(chǔ)的算法，可能讓大家覺(jué)得最頭疼的就是這些東西，正好上面的那本《線(xiàn)性代數(shù)》對(duì)應(yīng)了人工智能行業(yè)非常多的基礎(chǔ)算法，可以說(shuō)是非常合適的一本人工智能算法基礎(chǔ)的入門(mén)書(shū)。如果大家有興趣的話(huà)，建議也看一看這本。包括上面的《概率論》也是一樣的，因?yàn)樵跀?shù)據(jù)挖掘的時(shí)候，概率有非常大的作用。好了，這就是今天我推薦的一些書(shū)，不要被這些書(shū)嚇到，雖然看著都很厚，但是其實(shí)看著還挺有趣。

六、加入我們

「加微信 codingdreamer 邀請(qǐng)進(jìn) Group，如果有興趣，可以直接在群里找沉魚(yú)小姐姐聯(lián)系投簡(jiǎn)歷哈」

好，到了最后了，這就是今天來(lái)跟大家聊的最大的動(dòng)力，所以希望大家有什么問(wèn)題的話(huà)也歡迎跟我交流，

七、Q & A

1、比較糾結(jié)，自己作為前端，不懂服務(wù)端的東西，而且平時(shí)工作也不太會(huì)涉及到服務(wù)端，自己想學(xué)一些服務(wù)端，但是又不知道如何下手，常常會(huì)陷入深深的自我懷疑，請(qǐng)問(wèn)沉魚(yú)小姐姐有沒(méi)有一些好的建議？

如果是早期的前端，可能基本上都是從自我懷疑當(dāng)中走過(guò)來(lái)的。我剛才講過(guò)沒(méi)有 Node.js 的時(shí)代，大家對(duì)服務(wù)端是很難插上手的。雖然可能有一部分同學(xué)會(huì)寫(xiě) PHP，但是如果 PHP 沒(méi)有用在你公司的生產(chǎn)環(huán)境里面，那也沒(méi)有太多的用武之地。

我覺(jué)得比較靠譜的、比較有可操作性的兩個(gè)建議是：

第一，看看你公司的整個(gè)服務(wù)端的架構(gòu)是什么，然后可以學(xué)一學(xué)跟公司服務(wù)端架構(gòu)貼近的東西，比如說(shuō)你的公司用的是 Java —— 可能大部分公司都是用 Java，有一些創(chuàng)新公司會(huì)用 Node.js，那么那就學(xué)學(xué) Java 唄。學(xué)一門(mén)語(yǔ)言在我看來(lái)是應(yīng)用級(jí)別的東西，所以應(yīng)該不會(huì)特別難才對(duì)。找到一些機(jī)會(huì)，然后學(xué)它、用它。

第二，我們要注重基礎(chǔ)能力的培養(yǎng)，比如說(shuō)你學(xué) Java，到底知不知道一個(gè) HTTP 請(qǐng)求是什么？HTTPS 請(qǐng)求跟它的區(qū)別是什么？最新的 HTTP2、HTTP3 到底是什么東西？因?yàn)檫@些東西包括多進(jìn)程、多線(xiàn)程之類(lèi)的，可能才是語(yǔ)言下面真正常用的那些知識(shí)。很多的同學(xué)在學(xué)語(yǔ)言的時(shí)候覺(jué)得暈，不是暈?zāi)莻€(gè)語(yǔ)言，而是因?yàn)槟莻€(gè)語(yǔ)言下面那個(gè)知識(shí)可能不是很牢固。所以第二個(gè)建議就是去學(xué)習(xí)一下這些相關(guān)的知識(shí)。

然后第三個(gè)建議就見(jiàn)仁見(jiàn)智了，去更有挑戰(zhàn)的地方。

2、你是如何掌握自己的時(shí)間的？如何掌握自己去學(xué)這么多東西？對(duì)于前端團(tuán)隊(duì)人比較少的情況，一般都是業(yè)務(wù)來(lái)推動(dòng)開(kāi)發(fā)，這種情況下應(yīng)該如何去處理，逐漸讓技術(shù)跟業(yè)務(wù)相互推動(dòng)？

“掌控自己的時(shí)間”，首先還是不得不說(shuō)一下，跟今天其他的分享嘉賓相比較而言，我的工作年限可能確實(shí)是比較長(zhǎng)的，所以我就有更多的時(shí)間來(lái)學(xué)東西。你工作五、六年你肯定沒(méi)有那么多時(shí)間學(xué)。另外一個(gè)，我確實(shí)比較珍惜早晨的時(shí)間，我通常會(huì)比較早就起。如果平時(shí)我們公司 9:00 上班的話(huà)，我可能 6:30 到 8:00 左右之間，大概會(huì)有一個(gè)半小時(shí)的時(shí)間會(huì)持續(xù)地學(xué)習(xí)一些東西，這段時(shí)間一定是不會(huì)被干擾的，是非常高效的一段時(shí)間。當(dāng)然現(xiàn)在說(shuō)起來(lái)有點(diǎn)臉紅，因?yàn)閹啄昵拔疑宋覀兗覍殞殻@個(gè)對(duì)女生來(lái)說(shuō)確實(shí)會(huì)有一些影響，但是也沒(méi)有太多的辦法，只能不斷地校準(zhǔn)自己的時(shí)間。

“對(duì)于前端人數(shù)比較少的團(tuán)隊(duì)來(lái)說(shuō)，通常都是業(yè)務(wù)推動(dòng)開(kāi)發(fā)”，對(duì)于大的前端團(tuán)隊(duì)來(lái)說(shuō)也是這樣的，沒(méi)有太多的區(qū)別。只是大家在這個(gè)場(chǎng)景下怎么去看待業(yè)務(wù)，比如你能不能在現(xiàn)有的業(yè)務(wù)里面看到一些更遠(yuǎn)的東西，這個(gè)很重要。其實(shí)我所在的團(tuán)隊(duì)可能是螞蟻特別大的一個(gè)前端團(tuán)隊(duì)，但是也有一些團(tuán)隊(duì)是前端是比較大的，比如說(shuō)我剛剛說(shuō)的有一個(gè)大數(shù)據(jù)開(kāi)發(fā)的 IDE，那個(gè)團(tuán)隊(duì)的同學(xué)，其實(shí)也是很厲害的，跟業(yè)務(wù)的大小有一定關(guān)系，但也并不是絕對(duì)的，有一些小團(tuán)隊(duì)他們可能做出來(lái)的東西也是很厲害的。另外如果說(shuō)，你實(shí)在覺(jué)得沒(méi)有太多的發(fā)揮之處了，比如說(shuō)你每天在家掃地，掃地機(jī)器人這玩意你要是能想到可能特別牛，如果要是想不到的話(huà)，可能還是在家每天掃地，覺(jué)得沒(méi)有什么價(jià)值感，可能確實(shí)得停下來(lái)想想自己想做的這個(gè)事的價(jià)值到底是什么。最后如果覺(jué)得還是想不清楚，跟別人聊了也很迷茫的話(huà)，建議去看一看其他團(tuán)隊(duì)，那些你覺(jué)得做得特別好的、有活力的團(tuán)隊(duì)，他們是怎么做的，或者說(shuō)換個(gè)環(huán)境也是 OK 的。

3、為什么是 API 到產(chǎn)物，而不是 UI 到產(chǎn)物？B 端跟 C 端的產(chǎn)品又有什么樣的區(qū)別？

在我們公司內(nèi)部有一個(gè)叫做 API 平臺(tái)的東西，集合了公司所有能用的 API 以及一些 API 的元信息，這個(gè)元信息雖然說(shuō)不全，但是在云鳳蝶里面是能夠補(bǔ)全的。元信息是什么？比如有一個(gè)叫做 userId 的字段，它可能是員工 id，當(dāng)你有這樣一些元信息的時(shí)候，你對(duì) API 的理解就會(huì)更加豐富一些，你從這個(gè) API 生成的產(chǎn)物，第一，它是集合了我們?cè)O(shè)計(jì)團(tuán)隊(duì)對(duì)整個(gè)設(shè)計(jì)規(guī)則的理解，也就是機(jī)器來(lái)做設(shè)計(jì)；第二，因?yàn)槲覀冎?API 上很多的元信息，所以更加能理解業(yè)務(wù)，能做出來(lái)直接可以做最后交付的東西。如果說(shuō)是 UI 到產(chǎn)物的話(huà)，那么你缺失了非常重要的業(yè)務(wù)信息，你只能根據(jù)它長(zhǎng)什么樣把這個(gè)頁(yè)面切出來(lái)，但實(shí)際上沒(méi)有辦法完成功能的閉環(huán)，同時(shí)你還需要設(shè)計(jì)師先去做設(shè)計(jì)的工作。但問(wèn)題也分具體場(chǎng)景，就是我剛才強(qiáng)調(diào)說(shuō)，中后臺(tái)研發(fā)不是對(duì)設(shè)計(jì)品質(zhì)要求不高，而是對(duì)設(shè)計(jì)的特殊性、交互的特殊性要求不那么高，因?yàn)楸韱文悴灰龀鲆粋€(gè)花來(lái)對(duì)吧？這個(gè)時(shí)候 UI 到產(chǎn)物，它也有很多的應(yīng)用場(chǎng)景，比如說(shuō)我們?cè)谧鲆恍┐黉N(xiāo)的時(shí)候，推薦寶貝、推薦產(chǎn)品這樣的東西，它的邏輯可能是偏少的，更多偏展示，這個(gè)時(shí)候 UI 到產(chǎn)物就比較好用。

B 端和 C 端的產(chǎn)品區(qū)別，籠統(tǒng)一點(diǎn)來(lái)說(shuō)，我覺(jué)得 B 端的產(chǎn)品更多是完成功能性的需求，對(duì)于設(shè)計(jì)的特殊性要求是沒(méi)有那么高的，但是并不意味著我們對(duì)品質(zhì)的要求就低。因?yàn)槟憧次覀冇心敲炊鄬?duì)外的商業(yè)的 toB 的產(chǎn)品，那就必然意味著它的要求是很高的。而且 B 端的邏輯可能復(fù)雜到難以想象，很多時(shí)候做 C 端的同學(xué)會(huì)覺(jué)得 B 端非常簡(jiǎn)單，就是做表單、表格，但是當(dāng)你面臨 800 個(gè)字段的表格、表單的時(shí)候，你要怎么搞？這個(gè)事情可能在 C 端是很難想象的。對(duì)于 C 端來(lái)說(shuō)，它同樣有非常多的挑戰(zhàn)，比如說(shuō)設(shè)計(jì)的新穎性、先進(jìn)性，包括 C 端的體量非常大，這個(gè)體量可能是 B 端沒(méi)有辦法去比的，這就得具體問(wèn)題具體看了。

4、身邊的程序員是否都大部分都堅(jiān)持了本行？有沒(méi)有其他人轉(zhuǎn)行的？轉(zhuǎn)行的同學(xué)又是去做了什么？

我認(rèn)識(shí)的大部分人可能都還是比較 Geek 的，所以很多人都還堅(jiān)持在寫(xiě)代碼的一線(xiàn)，包括一些高 P 的同學(xué)，也都在每天寫(xiě)代碼。但是也有轉(zhuǎn)行的，不是說(shuō)程序員這條路一定要一條路走到黑，大家可以根據(jù)自己的規(guī)劃去走。比如說(shuō)我們有認(rèn)識(shí)的一些同學(xué)可能覺(jué)得，沒(méi)問(wèn)題，我到 P6、P7，我掌握了整個(gè)前端研發(fā)一些基礎(chǔ)的東西之后，我出去創(chuàng)業(yè)，也有這樣的同學(xué)，其實(shí)過(guò)得還挺好的，可能比我們要滋潤(rùn)很多。但這個(gè)就看個(gè)人選擇了。還有一些做管理的，確實(shí)是少數(shù)，因?yàn)橄駝倓傉f(shuō)的，那個(gè)比例在那，比如說(shuō) 30 個(gè)人才有 1 個(gè)管理者，這就意味著管理崗畢竟是很少的。