蒲公英 · JELLY技術周刊 Vol.13 跟 VSCode 學習如何開發大型 IDE 項目

開發一個 IDE 很難麼？這或許是件很難的事情，但當我們參考 VSCode 的技術構架來看，整個開發流程就會平滑順暢很多，從核心開發、代碼編輯器、視圖結構到插件系統，在這整個技術構架中我們可以看到很多一個 IDE 開發中需要注意的方方面面。如果你對 VSCode 深入研究過，相信可以從中頗受啟發，在此之前不妨先來看看本期推薦。

登高遠眺

天高地迥，覺宇宙之無窮

基礎技術

跟 VSCode 學習如何開發大型 IDE 項目

VSCode 是當下非常流行的微軟開源的代碼編輯器，它在滿足多樣性插件化生态的同時保證了軟體的健壯和性能，這得益于其優秀的插件化核心架構設計。本文作者是螞蟻金服雲鳳蝶團隊成員，文中對 VSCode 的關鍵技術架構作了深刻的剖析和了解，包括核心分層隔離與擴充機制、依賴注入、指令系統、插件化架構等等，如果你正在打造一個可擴充的軟體系統，這篇解讀非常值得去學習參考。其實，VSCode 的優秀架構離不開其專注而克制的産品定位——“編輯器 + 代碼了解 + 調試”，其他的内容交給社群生态來擴充。最完美的設計，往往是精簡到極緻，而無法再做減法了。

前端進階：跟着開源項目學習插件化架構

微核心（插件化）架構被廣泛應用于軟體系統設計中，譬如 Vue 的插件機制

Vue.use(Plugin)

就是一個簡單的插件化設計。微核心架構既能滿足靈活擴充的特性，又不影響系統的穩定性。本文基于西瓜視訊播放器項目來闡述微核心架構的實踐應用，在播放器中，小到一個播放按鈕大到一項直播功能特性都可以了解為一個插件子產品。作者貼合簡練的代碼，講述了插件系統中插件管理、連接配接和通信的全過程，非常通俗易懂。

圖形程式設計

UI 互動動效合輯

這個合輯收集了近期較有創意的 UI 互動轉場動效，可以看到許多不同于尋常轉場互動的想法，比如波紋、圖形變形與轉場動畫的結合，又比如利用弧形色塊的變化進行的轉場效果等等，目前已釋出了8期内容，有網頁動效設計需求的設計或開發都可以浏覽參考，同時感受一下優秀動效設計中的緩動曲線。

AR 體驗的“後浪”來了：ARCore Depth API 讓遮擋難題迎刃而解

針對 AR 開發場景中景深算法的 Depth API 正式釋出。有了這個 API，開發者在支援 ARCore 的 Android 裝置上開發 AR 場景時可以更準确地處理虛拟物體與現實物體的遮擋關系，完全杜絕虛拟物體與透視關系不符的“貼圖”問題，使得虛拟物體沉浸效果更為真實。文中還有更多的應用場景，并提供了海量動圖示範。

桌面開發

Flutter 在桌面端的最新進展：支援打包 Windows 和 Linux 應用了

Flutter 的目标是支援盡可能多的平台和裝置，我們已經知道它可以很好地在 iOS 和 Android 裝置上運作了，那麼它對桌面端的支援情況如何呢？Tim Sneath，Flutter 産品經理，在最近的一篇博文中分享了他們最新的進展，聊到了他們支援了打包 Windows 和 Linux 應用了，如何調用不同桌面系統的原生元件，以及更新插件模型來友善開發者更容易地支援不同的平台等工作。Tim Sneath 還分享了有開發者已經利用 Flutter 釋出了最新的桌面端應用，你也可以跟随本文，嘗試一下，看看 Flutter 桌面端能否滿足你的需求。

譯文：https://jelly.jd.com/article/5ef9e4ac7c53070156dd5b8a

服務端開發

Easy-Monitor3 開始你的Node.js核心性能監控之旅

Easy-Monitor3是一款基于 Node.js Addon實作的開源核心采樣以及收集工具，提供完整的Web UI支援(APM)，支援私有化部署，全平台支援。可用于記憶體洩露分析，性能瓶頸分析，監控告警等。

工具推介

AutoCannon：一款http壓測工具

AutoCannon是一款使用node編寫的壓測工具，能比wrk生成更多負載，市面上類似的産品很多，老牌的ab，帶有圖形界面的soap ui等。不過AutoCannon可以友善的進行指令行調用，甚至還能在代碼内調用，這對于寫壓測腳本來說就非常友善。另外它還能結合node clinic 一起使用，定位性能問題無往而不利。

滄海拾遺

滄海拾遺，積跬步以至千裡

實作一個簡單但有趣的 AR 效果

看完 Depth API 這樣的 AR 後浪，不知道你有沒有心動呢？如果你也想快速上手 AR，不妨來試試這樣一個簡單的效果，讓你快速對 Web AR 有一個了解，這些基礎能幫助我們在 AR 這條路上走的更遠。

碰撞檢測 -- 源自生活的特效

Web 中有很多常見的 2D 碰撞檢測，掌握這些實用的小技巧，在特定需求的頁面中會有更為出色的體驗。你對這些方法熟悉麼？還不了解的話可以進來試試看哦～「内含基于 Canvas 的運作執行個體、圖檔說明」

「蒲公英」期刊，每周更新，我們專注于挖掘「基礎技術、工程化、跨端架構技術、圖形程式設計、服務端開發、桌面開發、人工智能」等多個大方向的業界熱點，并加以專業的解讀；不僅如此，我們還精選凹凸技術文章，向大家呈現團隊内的研究技術方向。

擡頭仰望，蒲公英的種子會生根發芽，如夏花絢爛；格物緻知，我們登高遠眺、滄海拾遺，以求積矽步而至千裡。

蒲公英 · JELLY技術周刊貢獻指南