> 開發一個 IDE 很難麼？這或許是件很難的事情，但當我們參考 VSCode 的技術構架來看，整個開發流程就會平滑順暢很多，從核心開發、程式碼編輯器、檢視結構到外掛系統，在這整個技術構架中我們可以看到很多一個 IDE 開發中需要注意的方方面面。如果你對 VSCode 深入研究過，相信可以從中頗受啟發，在此之前不妨先來看看本期推薦。 ## 登高遠眺 > 天高地迥，覺宇宙之無窮 ### 基礎技術 #### [跟 VSCode 學習如何開發大型 IDE 專案](http://3.cn/-100jaq65) VSCode 是當下非常流行的微軟開源的程式碼編輯器，它在滿足多樣性外掛化生態的同時保證了軟體的健壯和效能，這得益於其優秀的外掛化核心架構設計。本文作者是螞蟻金服雲鳳蝶團隊成員，文中對 VSCode 的關鍵技術架構作了深刻的剖析和理解，包括核心分層隔離與擴充套件機制、依賴注入、命令系統、外掛化架構等等，如果你正在打造一個可擴充套件的軟體系統，這篇解讀非常值得去學習參考。其實，VSCode 的優秀架構離不開其專注而剋制的產品定位——“編輯器 + 程式碼理解 + 除錯”，其他的內容交給社群生態來擴充套件。最完美的設計，往往是精簡到極致，而無法再做減法了。 #### [前端進階：跟著開源專案學習外掛化架構](http://3.cn/10-0japS7) 微核心（外掛化）架構被廣泛應用於軟體系統設計中，譬如 Vue 的外掛機制 `Vue.use(Plugin)` 就是一個簡單的外掛化設計。微核心架構既能滿足靈活擴充套件的特性，又不影響系統的穩定性。本文基於西瓜視訊播放器專案來闡述微核心架構的實踐應用，在播放器中，小到一個播放按鈕大到一項直播功能特性都可以理解為一個外掛模組。作者貼合簡練的程式碼，講述了外掛系統中外掛管理、連線和通訊的全過程，非常通俗易懂。 ### 圖形程式設計 #### [UI 互動動效合輯](http://3.cn/100-jap8B) 這個合輯收集了近期較有創意的 UI 互動轉場動效，可以看到許多不同於尋常轉場互動的想法，比如波紋、圖形變形與轉場動畫的結合，又比如利用弧形色塊的變化進行的轉場效果等等，目前已釋出了8期內容，有網頁動效設計需求的設計或開發都可以瀏覽參考，同時感受一下優秀動效設計中的緩動曲線。 #### [AR 體驗的“後浪”來了：ARCore Depth API 讓遮擋難題迎刃而解](http://3.cn/100jaq-Bj) 針對 AR 開發場景中景深演算法的 Depth API 正式釋出。有了這個 API，開發者在支援 ARCore 的 Android 裝置上開發 AR 場景時可以更準確地處理虛擬物體與現實物體的遮擋關係，完全杜絕虛擬物體與透視關係不符的“貼圖”問題，使得虛擬物體沉浸效果更為真實。文中還有更多的應用場景，並提供了海量動圖演示。 ### 桌面開發 #### [Flutter 在桌面端的最新進展：支援打包 Windows 和 Linux 應用了](http://3.cn/100jap-oq) Flutter 的目標是支援儘可能多的平臺和裝置，我們已經知道它可以很好地在 iOS 和 Android 裝置上運行了，那麼它對桌面端的支援情況如何呢？Tim Sneath，Flutter 產品經理，在最近的一篇博文中分享了他們最新的進展，聊到了他們支援了打包 Windows 和 Linux 應用了，如何呼叫不同桌面系統的原生元件，以及更新外掛模型來方便開發者更容易地支援不同的平臺等工作。Tim Sneath 還分享了有開發者已經利用 Flutter 釋出了最新的桌面端應用，你也可以跟隨本文，嘗試一下，看看 Flutter 桌面端能否滿足你的需求。 譯文：https://jelly.jd.com/article/5ef9e4ac7c53070156dd5b8a ### 服務端開發 #### [Easy-Monitor3 開始你的Node.js核心效能監控之旅](http://3.cn/-100jaqlR) Easy-Monitor3是一款基於 Node.js Addon實現的開源核心取樣以及收集工具，提供完整的Web UI支援(APM)，支援私有化部署，全平臺支援。可用於記憶體洩露分析，效能瓶頸分析，監控告警等。 ### 工具推介 #### [AutoCannon：一款http壓測工具](http://3.cn/-100japop) AutoCannon是一款使用node編寫的壓測工具，能比wrk生成更多負載，市面上類似的產品很多，老牌的ab，帶有圖形介面的soap ui等。不過AutoCannon可以方便的進行命令列呼叫，甚至還能在程式碼內呼叫，這對於寫壓測指令碼來說就非常方便。另外它還能結合node clinic 一起使用，定位效能問題無往而不利。 ## 滄海拾遺 > 滄海拾遺，積跬步以至千里 #### [實現一個簡單但有趣的 AR 效果](http://3.cn/100ja-qlQ) 看完 Depth API 這樣的 AR 後浪，不知道你有沒有心動呢？如果你也想快速上手 AR，不妨來試試這樣一個簡單的效果，讓你快速對 Web AR 有一個瞭解，這些基礎能幫助我們在 AR 這條路上走的更遠。 #### [碰撞檢測 -- 源自生活的特效](http://3.cn/100ja-qlS) Web 中有很多常見的 2D 碰撞檢測，掌握這些實用的小技巧，在特定需求的頁面中會有更為出色的體驗。你對這些方法熟悉麼？還不瞭解的話可以進來試試看哦～「內含基於 Canvas 的執行例項、圖片說明」 > 「蒲公英」期刊，每週更新，我們專注於挖掘「**基礎技術**、**工程化**、**跨端框架技術**、**圖形程式設計**、**服務端開發**、**桌面開發**、**人工智慧**」等多個大方向的業界熱點，並加以專業的解讀；不僅如此，我們還精選凹凸技術文章，向大家呈現團隊內的研究技術方向。 > > 抬頭仰望，蒲公英的種子會生根發芽，如夏花絢爛；格物致知，我們登高遠眺、滄海拾遺，以求積矽步而至千里。 > > [蒲公英 · JELLY技術週刊貢獻指南](http://3.cn/12dbZQ-x)  ------- 歡迎關注凹凸實驗室部落格：[aotu.io](https://aotu.io/) 或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章： ![歡迎關注凹凸實驗室公眾號](https://img2020.cnblogs.com/other/1992869/202007/1992869-20200708095202423-906331