和小程序鬥智鬥勇那些事

JTalk 第三期 前端場 《2018 · 前端展望》活動在1月21日成功舉辦，掘金線下活動 JTalk 由掘金主辦，每期 JTalk 會邀請垂直行業的優秀工程師來分享優秀的實踐經驗，技巧方法。旨在爲開發者提供線下技術交流互動機會，幫助開發者成長。

小程序因爲封閉加上生態不夠成熟，讓不少開發者踩了很多坑。那麼，來看滴滴前端工程師王道含和小程序鬥智鬥勇的那些事，他將和你們聊聊小程序開發的一些感覺和實踐經驗，幫助你們更好的爬坑、填坑。

演講文

你們好，做爲今天的開場，阿不，暖場嘉賓，我來給你們講一下關於小程序的這個主題。

其實在以前掘金膜法小編來找個人時候，是問過我要講什麼話題的，沒太想好，你有什麼建議呢？

• 膜法小編：我以爲2018年前端有三個熱門方向：工程化，PWA，小程序。我說好，工程化這個話題我仍是略有研究。

• 膜法小編：可是咱們請了掘金小冊《用 npm script 打造超溜的前端工做流》的做者王仕軍老師。
• 我：那我就聊聊 PWA！
• 膜法小編：咱們此次還請了百度外賣前端負責的林溪老師，講他們前端的方案。
• 我：因此到我這就剩小程序了麼。
• 膜法小編：這樣吧，你能夠當作命題做文，題目就叫「如何____開發小程序」。
• 我：好的，我打算講的題目是，如何不要去開發小程序之小程序勸退指南。最近剛剛寫了幾個月的小程序，感受很是的難受。
• 膜法小編：正好講講怎麼鬥智鬥勇的嘛，也是很寶貴的經驗對不對。 因而我被他說服了，今天來跟你們聊聊我開發小程序的一些經歷和對小程序的想法。

---

怎麼看待小程序

微信小程序是2017年1月9日上線的，到如今正好一年多一點的時間，前不久一週年的時候，張小龍的微信公開課應該刷爆了你們的朋友圈，關於這個內容咱們後面再聊。

在我看來小程序可以出現的契機仍是如今的網絡環境更好了，好到什麼程度？前一陣西二旗地鐵站就在推廣地鐵乘車的 APP，用 APP 買地鐵票，首張免費。我聽了就很心動，掏出手機，打開商店，搜索 APP 的名字，下載，等它安裝好，再註冊一個帳號，而後開始買票。

你會發現，打開應用市場，搜索應用，點擊下載，以及下載後安裝的時間加起來，比你下載的時間還要長。當咱們習慣了快節奏以後，就很難再慢下來了，咱們如今可以等待可能只有二維碼的掃描識別以及接收驗證碼。想一下，若是一個驗證碼倒數到30秒還沒返回，你是否是很焦慮。

因此這個東西不是由於它特別創新或者特別先進，由於發展到這個階段，市場就告訴你，咱們須要這個東西了。

關於小程序幾件有趣的事情

關於小程序你會發現幾件頗有趣的事情，問一下有多少人開發太小程序，好的大家不要把手放下，用微信自帶的開發工具寫代碼的能夠自豪的繼續保持舉手。

我猜是沒有的，若是真的有這樣的同窗，大家天天上班是否是有一種被綁架的感受。咱們開發都是用 vscode 或者 atom，而後通過一次編譯輸出到微信的文件夾裏，就能夠直接在模擬器裏面運行了。

說到模擬器，實際上是一個閹割版的 devtools，前一段時間我就想看一下內存，很差意思，沒有這個功能。不過基本的功能卻是有的，也基本夠用。

真機調試的槽點

比起模擬器，真機調試的槽點就要更多一點。好比地圖組件的層級很是高，因此調試地圖就成了一件，不可能的事。

不過我這麼機智，確定能找到辦法對吧，我把調試信息輸出到了 title 裏面。你可能要問，爲何不在模擬器裏看，由於模擬器的行爲和真機不一致啊。

總結出來的經驗是，基本模擬器跑的出來的，iphone 都跑的出來，兩千塊以上的安卓也能夠，到了千元機就開始出各類問題了。並且由於小程序畢竟不是原生開發，你不能用原生開發的方式去調試它。

我曾經去問 Android 開發的同事，若是我想監控內存怎麼辦，同事說，你能夠裝一個360手機助手。

咱們評價一個技術或者一個框架的時候，會從什麼維度去看待？背景，性能，前景，仍是商業價值？掘金的 CEO 陰明曾經說過，排在第一位的應該是社區。

掘金技術社區的微信小程序標籤頁

這裏就又有一件頗有趣的事情，你們可能參加過不少的線下沙龍，可能也有小程序主題的，可是你會發現，大多數的都是搞營銷的人。某某小程序平臺創始人，某某小程序數據分析公司，不多有程序員出來說，若是大家碰巧聽過，多是在 GITC， 也是咱們滴滴的同事。

苗典 - 小程序框架-teddy 滴滴出行.pdf

技術角度看小程序的社區生態

這說明從技術角度來看，這個東西的社區是不成熟的。畢竟這東西纔出來一年時間，好像不成熟也情有可原是麼？不是的，若是它真的對於程序員來講有足夠的吸引力，必定有不少人會投入到社區中。爲何沒有這樣，咱們猜想一下緣由。

去年小程序發佈時，張小龍對小程序能不能作遊戲給出了一個暫時否認的答案，他稱，「如今並不能作。」這與小程序在微信沒有入口、不會積累粉絲、不能推送消息、不能分享到朋友圈一塊兒，成爲小程序遭質疑其存在的商業價值的關鍵點。

時至今日，咱們再來看，加速搶票的小程序刷屏了朋友圈，去年年末小程序開始支持 webview，而今年年初更是高調推出了小遊戲。對於營銷人來講，每一次的開放都是一場想象力的狂歡，但對於程序員來講，這種毫無預兆的更新更像是一場午夜噩夢。

小程序適合技術投機，不適合技術投資。

當11月3號看到微信支持 webview 的時候，我打開了網易雲音樂，單曲循環了一天的涼涼。 前端習慣的節奏是什麼？就是 ECMA 標準這種，來給你們科普一下:

原圖看這裏： 連接

也就是說從創意的提出，這個功能就是透明的，若是要嚐鮮的話，在 draft 以前就可使用。這就是開放系統的意義，他給了技術，社區和生態成長的空間，並且重要的是，它告訴你了對將來的期待。

好比剛剛提出要作promise 的時候，社區就有不少方案，你們也樂於去完善，儘管咱們知道有一天，全部瀏覽器包括 node 都原生支持 promise 的時候，這些方案就會死去，但這就像咱們不會由於會出 IPnone 11 就不去買iPhone X，咱們樂於去追，甚至跑得比標準更超前。

而小程序做爲一個封閉系統，咱們不會知道將來會支持什麼特性，他是一個體驗的解決方案，是一個商業的解決方案，但並非一個技術的解決方案。

由於我對於他的將來是不可預期的，他的發展可能只被一個團隊，甚至被一我的來決定。好比你以爲 go 是個好語言，你能夠投入精力去學go。或者你以爲 nodejs 大有可爲，我立志五年內成爲一流的 js 工程師。

可是你不可能立一個志向說，我要作一個優秀的小程序工程師，你連明年這個時候要作什麼都不知道。固然，從商業角度來講，你一直緊跟小程序的新版，其實能夠吃到市場的福利。如今一樣功能的端內程序，作小程序版就要比所謂的 H5版要貴的，這是能夠吃到的福利。

總而言之，從程序員的角度來看，小程序適合技術投機，不適合技術投資。

---

怎麼開發小程序

出於一些緣由，咱們不得不去開發小程序，那就要以積極的心態去面對它。 首先，小程序提供了不少原生能力，在以前咱們想要這些能力的時候，須要和端上的同窗約定 jsbridge，也要佔用端上的開發時間。小程序統一了這個接口，使得跨平臺而且應用原生能力的成本大大下降了。

若是可以再走一步，讓咱們以傳統前端開發的技術棧和開發環境進行小程序開發，就能讓開發體驗再往前邁進一大步。

好比小程序不支持 npm 包，只能在 page 粒度開發，也沒有好用的狀態數據管理，包括代碼規範檢查，各類預處理器也都不支持。

小程序開發框架 - teddy

咱們不能接受這種史前的開發體驗，因此滴滴平臺部的同事們作了一個小程序開發框架，叫作 teddy。我有想過爲何這個框架要起名叫 teddy，多是爲了表示這個框架很厲害，什麼都能幹吧。

teddy包含兩個部分，cli 和 runtime。

cli 提供了腳手架，編譯的功能。經過預編譯，能夠支持 預編譯，npm，es六、css 預處理器，代碼合併壓縮以及livereload。 而runtime 則提供了組件的增強，好比列表，條件，watch，computed，mixin 一類的指令。

小程序中自己自帶了 bindXX 來綁定事件，可是傳參數是個大問題，在官方文檔中標配的想要傳入參數的話，只能經過獲取事件對象上的 dataset 來得到模板上數據：e.currentTarget.dataset.xx；Teddy 則加強了這部分事件處理，使得傳參更便捷直觀。

teddy-request

默認小程序會有5條請求併發限制，而在應用層一般咱們並不能保證必定不會超限，因此須要一種機制來處理，這種機制就是利用隊列來處理請求，而後保證最大限制數不會超出；並且還有一種場景，例如埋點，咱們但願的是埋點請求儘可能不和咱們普通請求競爭，因此須要有一個低優先級的隊列來發埋點請求。基於這些需求，咱們封裝了 teddy-request。

另外就是引入了 redux，封裝了 teddy-redux。redux 不像 vuex 和 vue 耦合的那麼緊密，是一個比較方便獨立做爲數據管理的框架，咱們的小程序都是用 redux 來作狀態管理的。

---

今天來其實不是作廣告的，畢竟我也不是 teddy 的開發者，想要分享的實際上是工程師在面對問題和解決問題的思路。 咱們對技術價值的判斷，就是體驗和效率。

體驗價值好比css3就是可以加強體驗的，一樣，小程序能夠更快打開，可使用原生的功能，能夠拿到羣信息這都是體驗側的價值。效率則是在已經可以實現功能之後，把開發的效率提高上來，好比promise到async。

前面咱們也說過，商業投資和技術投資是不一樣的，技術投資難以是短時間的。好比你今天以爲人工智能很厲害，有前景，那第一件事多是先把高數課本找出來。技術不會是單點存在，他們是關聯和遞進的。因此咱們看到，當面對小程序體驗升級的時候，技術側能夠大量採用已經成熟的框架和數據管理理念，甚至是成熟的組件。

我看好微信羣養青蛙

小程序可以提高體驗，也可以在須要原生功能支持的時候提升效率，那咱們就把熟悉的開發模式對接過來，把先進的開發模式應用過來。

最近和端上的同窗聊天，端上的同窗就說，以爲如今前端在不少地方作的比端要好，尤爲是組件化和狀態數據管理方面，他們也在從前端借鑑經驗。

因此你看，缺失的開發體驗，程序員會自行去填平，在這個時代，一個封閉標準是很難禁錮住技術棧的選擇，由於不管你選擇使用什麼語言，什麼語法，都會有人作出一個方案，用他們熟悉的方式開發，再編譯成目標語言。

關於標準

關於阿里雲的大輪子 dawn

另一個蠻想分享的觀點，是前一段時間阿里雲的同窗過來技術交流，他們安利了一個本身開發的前端構建和工程化工具。

基本上把你知道的構建工具和工程化工具作了一個大禮包，從模板到打包，到代碼規範檢查，我印象最深的是有一個功能，能夠遠程配置 eslint規則，強行執行線上的規則檢測，就是說哪怕你本地沒有加規則，或者改掉，依然不能跳過線上的配置。

分享結束後就有人提問說：

• 第一，這裏每一個工具咱們都會用，大家造這個輪子有什麼意義。
• 第二，若是一個新人來到大家團隊，是否是還要學習這個新東西，而若是他離開了團隊，是否是又意味着要從新學習全套的大禮包。

分享的同窗回答說：

• 確實可能對於在座的各位來講，手寫一個 webpack 配置是最基本的技能，或者隨手寫的代碼就是可以經過 eslint 檢測的。由於阿里雲也有不少私有云部署業務，因此見了不少的技術團隊，現狀是，有很是多的團隊仍然用着原始的，混亂的方式進行着開發。

造個好輪子，幫同事續一秒

對於大廠的高級程序員來講，已經處在了馬斯洛金字塔上精神層面的位置，而對於更多的人來講，技術首先是實現工程的手段。可以幫助這些人提升效率，就是頗有價值的。 雖然我不是平臺技術部的，可是咱們也在爲業務線開發一些框架級的工具，這些工具對咱們本身以及同事提升效率都有很大幫助。因此天天上班的時候，我都很自豪的跟本身說，你不是去工做，你是去幫同事續命。

歡迎一塊兒來寫小程序

很慚愧沒有講太多代碼上的內容，由於關於小程序的文檔其實已經寫得很好了，vue 也是你們都很熟悉的東西，至於 teddy，如今尚未開源出來，若是想要體驗 用 teddy來開發小程序，有一個簡單的辦法，就是把你的簡歷發給我，來滴滴上班，就能夠自由的使用了。

若是想要參與開發，我也能夠幫忙把簡歷內推到平臺技術部。我是在業務部門的，也有不少有趣的事情能夠作，也很是歡迎來投簡歷。

結語

在這個信息過剩的時代，咱們得到信息太過容易，難的是得到咱們須要的信息。因此我一直以爲，線下沙龍的意義不在於這幾十分鐘的時間可以解決問題，而是可以找到能和你討論問題的人，這我的多是講師，也多是其餘提問的觀衆，這是我幾年來作開發者社區，也參與不少沙龍和大會作講師和志願者的體會。

因此也歡迎你們關注個人知乎：王德福，或者在羣里加微信，有空一塊兒聊技術。

PPT 下載

和小程序鬥智鬥勇那些事

掘金羣：

羣已經滿了100人，添加機器人入羣。

瞭解 JTalk

掘金線下活動 JTalk