IDE搬進瀏覽器里——JetBrains Projector


發展

提起 JetBrains,你會想到什么?各路強大的 IDE,比如 Android Studio、IDEA、WebStorm……這些對於開發者來說耳熟能詳的產品都出自這家公司,這些 IDE 的功能強大,但同時也只能運行在用戶自己的電腦上,其“內存黑洞”的稱號更是讓開發者們又愛又恨。

img
事實上,目前所有的 JetBrains IDE 都使用 Java Swing 繪制 UI,其他基於 IntelliJ 的 IDE 也是如此,比如 Android Studio。鑒於 Swing 是 Java GUI 的一個庫,而 Java 本身就是一門很吃內存的編程語言,雖然可以充分利用 Java 跨平台的特性,這也是這些 IDE 在 macOS、Windows 和 Linux 上 UI 幾乎一致的原因。但現在,Swing 跨桌面平台的特性卻也成為阻礙其發展的一個原因了,在一些瘦客戶端的情況下,“內存黑洞”屢屢被人詬病,Swing 也無法發揮其優勢,於是 Projector 便應運而生了。

橫向比較

img
JetBrains Projector 是 JetBrains 提出的“遠程開發”解決方案,基於 Client + Server 架構,雖然對標的是微軟 VSCode 的Remote Development方案,但是二者的原理和體驗效果還是相差很多的。

VSCode 通過 SSH 等技術,只傳輸代碼、索引等數據,僅將計算勻給服務器,而渲染顯示等還是依賴本地的 VSCode 客戶端,這種情況下,你仍然需要安裝 VSCode。
Projector 改動了 Swing 的渲染機制,通過網絡傳輸渲染指令,最終使用 Web 技術將界面展現出來。這樣做的好處是,你可以直接使用瀏覽器訪問安裝在服務器上的 IDEA。
筆者在查閱資料的過程中發現,經常有很多人將這兩者弄混,通過上述內容,相信你也有一個直觀的感受了,這兩者使用體驗的差距類似於VNC 與 SSH之間使用體驗的差距。因此筆者認為這其實是對於「雲端編程」的兩種不同的解決方案,針對的使用場景雖有交叉,但很多情況下是不一樣的,因此並不會有哪一方會完全取代另一方的情況出現。

使用場景

既然上文已經提到了,JetBrains Projector 和 VSCode Remote 的使用場景並不相同,那這一節就來簡單說說 Projector 特別適合解決的問題:

  • 在運行時或數據庫附近運行代碼以減少往返次數。

  • 高度安全的企業環境。

  • 真正的大型項目。

  • 禁止源代碼本地復制。

  • 用戶硬件約束。

  • 瘦客戶端。

  • 需要在 Windows 機器甚至是 ChromeOS 等非傳統操作系統上的 GNU/Linux 環境中運行 IDE。

  • 需要在關閉計算機后讓應用在服務器上繼續運行。

  • 遠程調試服務器端(devtest、devprod)。

  • 具有調試源和預配置 IDE 的VM 或 Docker 映像。

  • 需要遠程訪問的配置。

Note:Projector 不支持協作開發。

初體驗

前文說了 JetBrains Projector 是基於 Client + Server 架構的,因此為了體驗 Projector,我們需要分別安裝 Client 端和 Server 端。

Server 端

img
官方給出了三種搭建 Server 端的方式,分別是:

Docker 鏡像:Docker 是在雲環境中運行 Projector 的最簡單的方法,需要額外安裝 Docker 環境。不需要額外安裝 IDEA,如果只是為了體驗,推薦該方式。
Python 腳本:通過 PyPi 安裝,這是一個獨立的發行版,目前僅適用於 GNU/Linux 主機。
IDE 插件:需要有圖形界面的電腦支持並運行 Jetbrains IDE,通過安裝 Projector 插件來作為服務端。

PS:個人覺得第三種方式有多此一舉的嫌疑,既然遠程服務器都已經具備圖形界面了,那我直接使用 VNC 不就好了嗎?

搭建過程很簡單,這里選擇 Docker 搭建 Projector 服務.

先安裝docker

curl -sSL https://get.daocloud.io/docker | sh

再直接選擇以下幾個命令安裝指定 IDE 即可

docker pull registry.jetbrains.team/p/prj/containers/projector-clion
docker pull registry.jetbrains.team/p/prj/containers/projector-datagrip
docker pull registry.jetbrains.team/p/prj/containers/projector-goland
docker pull registry.jetbrains.team/p/prj/containers/projector-idea-c
docker pull registry.jetbrains.team/p/prj/containers/projector-idea-u
docker pull registry.jetbrains.team/p/prj/containers/projector-phpstorm
docker pull registry.jetbrains.team/p/prj/containers/projector-pycharm-c
docker pull registry.jetbrains.team/p/prj/containers/projector-pycharm-p
docker pull registry.jetbrains.team/p/prj/containers/projector-webstorm

例如,這個代碼段可以拉取 IntelliJ IDEA Community Edition:

docker pull registry.jetbrains.team/p/prj/containers/projector-idea-c
  • 商業版:
docker pull registry.jetbrains.team/p/prj/containers/projector-idea-u

然后運行鏡像,docker允許鏡像(8081為宿主機對外端口,8887為docker容器端口)

執行以下命令,將<IMAGE_ID>換成剛剛下載完成的鏡像 ID 即可。

docker run --rm -p 8887:8887 -it <IMAGE_ID>

例如

sudo docker run --rm -p 8081:8887 -v /home/admin/projector-docker:/home/project
or-user -itd registry.jetbrains.team/p/prj/containers/projector-idea-u

出現以下內容說明 Server 端安裝成功 👇

img

(可忽略步驟)查看容器是否已經正常運行

docker ps

或者使用GitHub上腳本,參考我在iPad Air 上裝了個IntelliJ IDEA,擼了一個SpringBoot項目

Client 端

JetBrains 官方給出兩種 Client 端的使用方式,一種是直接通過瀏覽器訪問,另一種是使用官方開發的客戶端。

官方客戶端的地址在:https://github.com/JetBrains/projector-client

瀏覽器訪問

我們先通過瀏覽器訪問http://localhost:8887/,同意 Policy 后便可以看到如下頁面 👇

img
顯示效果和本地的 IDEA 幾乎沒有差別,當然了,使用體驗也還是和服務器的性能有很大關系。

官方 Client App

我們打開官方提供的客戶端后填入剛才的地址便會顯示同樣的效果。

img
在簡單閱讀了這個官方 App 的源碼后發現這個 Desktop App 其實是基於 Electron 的,有趣的是,雖然使用的是自家的 Kotlin 語言編寫,但不知道為什么不順便使用自家的Compose for Desktop。

瀏覽器訪問的一些缺點

雖然通過官方 App 使用 Projector 很方便,但說到底我還是要下載一個應用程序,既然都這樣了,和 VSCode Remote 也沒什么區別,我為什么不直接使用瀏覽器訪問呢?

其實官方文檔中已經針對這個疑問做了詳細的說明

  1. iPad 不支持 self-signed WebSockets,即不安全的 Websockets 連接(較新的安卓其實也不支持),因此想利用 iPad 訪問局域網內的 Projector 會有些麻煩,當然了,你給服務器添加 HTTPS 訪問也是可以的。
  2. 一些快捷鍵會被瀏覽器攔截,例如,Windows/Linux 中的 Ctrl+Q 或 Mac 中的 Cmd+N 是由瀏覽器處理的。這可能會導致你在使用 Projector 無法使用一些快捷鍵。
  3. 剪切板不同步,服務端的剪切板會有一些限制,使得開發過程中的復制與粘貼會出現一些問題。
    也正是因為上述這些問題,官方才推出了自己的客戶端 App。

VSCode on Browser

通過上述的介紹,相信你對 JetBrains Projector 已經有了一定的了解了,其原理就是改變 Swing 的渲染方式,使其最終可以使用 Web 技術將界面展現出來。

這時候,我們可以頭腦風暴一下,既然 VSCode 基於的 Electron 技術本質上是讓運行在瀏覽器中的網頁可以順暢的運行在桌面端,那么是不是可以進行一個“逆向”,將運行在桌面的 VSCode 反向運行在瀏覽器中呢?這種方式的思路不同於 VSCode Remote,反而和 JetBrains Projector 有些類似,答案當然是可以的,國外也已經有大神將源碼開源出來了,詳情參考 👉https://github.com/cdr/code-server。

img


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM