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， 也是我們滴滴的同事。
技術角度看小程式的社群生態
這說明從技術角度來看，這個東西的社群是不成熟的。畢竟這東西才出來一年時間，好像不成熟也情有可原是麼？不是的，如果它真的對於程式設計師來說有足夠的吸引力，一定有很多人會投入到社群中。為什麼沒有這樣，我們猜測一下原因。
去年小程式釋出時，張小龍對小程式能不能做遊戲給出了一個暫時否定的答案，他稱，“現在並不能做。”這與小程式在微信沒有入口、不會積累粉絲、不能推送訊息、不能分享到朋友圈一起，成為小程式遭質疑其存在的商業價值的關鍵點。
時至今日，我們再來看，加速搶票的小程式刷屏了朋友圈，去年年底小程式開始支援 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，es6、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人，新增機器人入群。