- PyScript 允許使用 WebAssembly 將 Python 嵌入到 HTML 中，支援 NumPy 和 Pandas 等強大的函式庫。
- Brython 將 Python 程式碼轉換為 JavaScript，使其成為 DOM 和 SVG 元素進行輕量級操作的理想選擇。
- WebAssembly 是一項關鍵技術，它使編譯型語言能夠在 Web 上以接近原生效能的方式運作。
- 對於處理後端邏輯，也有像 Flask 和 Django 這樣的傳統伺服器端替代方案。
將 Python 的強大功能引入瀏覽器環境一直是許多開發者的夢想。直到最近，如果你想讓任何程式在 Web 上運行，JavaScript 仍然是無可爭議的王者，也是唯一無需依賴外部伺服器即可執行客戶端邏輯的可行選擇。
然而，隨著各種工具和標準的出現，後端壁壘被打破，整個格局發生了翻天覆地的變化。如今，將 Python 與 HTML 整合的方法多種多樣，從使用編譯器翻譯程式碼，到利用二進位技術直接在主流瀏覽器（例如 Chrome）的標籤頁中實現卓越的效能，不一而足。
PyScript：Anaconda 革命
Anaconda 發布 PyScript 框架是向前邁出的最重要一步之一。這個框架本質上是對底層程式語言的封裝… Pyodide、Emscripten 與 WebAssembly (Wasm)這使得 Python 幾乎可以透明地在客戶端運行。它最吸引人的地方在於，它允許你直接在自訂 HTML 標籤中編寫 Python 程式碼，例如： <py-script>極大地促進了互動式應用程式的創建。
首先，只需將 PyScript 的 CSS 和 JS 檔案包含在文件頭部即可。它的優勢之一是： 它支援大型庫 例如 NumPy、Pandas 或 Scikit-learn，可以使用標籤進行設定。 <py-env>此外，PyScript 還提供了一個 與 JavaScript 進行雙向通信允許使用該模組操作瀏覽器的 DOM。 js Python。
至於介面方面，PyScript 也毫不遜色，它提供了 整合式 UI 元件 如 <py-button> o <py-inputbox>當與之互動時，它們會執行 Python 函數。但是需要注意的是，由於它們是基於 WebAssembly， 初始載入時間可能較長。 行動裝置上的效能可能會受到影響。
Brython：Python 翻譯為 JavaScript
如果我們想要一個負載更輕的替代方案，Brython 是一個經典之選。與 PyScript 不同，Brython 是一個完全用 JavaScript 編寫的 Python 3 實作。 翻譯 Python 程式碼 以便瀏覽器能夠理解它。要使其正常工作，必須呼叫該函數。 brython() 在這件事上 onload HTML 主體部分。
Brython 的突出之處在於它能夠與 HTML 和 SVG 元素進行互動。透過使用該對象，可以實現這一點。 document有可能 動態注入內容 或使用自訂運算子在 SVG 畫布上繪製幾何圖形，例如： =< 向文檔樹新增節點。儘管它功能多樣，但也有其限制： 它不支援所有模組 標準庫要求資料輸入和輸出必須透過 HTML 元素處理，因為 print() o input() 它們的運作方式與傳統方式不同。
其他實作方式和比較
生態系統十分廣泛，還有其他一些有趣的項目。一方面，有 Skulpt，它透過 JavaScript 支援 Python 2 和 3；還有 Transcrypt，它可以作為 JavaScript 編譯器，儘管後者似乎已被遺忘。此外，還有 VistaPython，它提出了一種不同的方法，使用JavaScript 編寫的字節碼解釋器和 Antlr 生成的解析器，從而更容易升級到更新的 Python 版本。
比較這些方案，我們發現 Brython 和 Skulpt 使用的是難以維護的手動解析器。相比之下，Pyodide（PyScript 的基礎）是 CPython 到 WebAssembly 的真正移植，保證了更高的兼容性，但代價是軟體包體積更大。 VistaPython 則力求在靈活性和體積之間取得平衡，透過最佳化負載特性來確保應用程式在任何裝置上都能快速運作。
傳統方法和後端
並非所有操作都必須在瀏覽器中進行。對許多人來說，結合 Python 和 HTML 的最可靠方法仍然是使用… 伺服器框架，例如 Python 中的 Flask 或 Django在這種方案中，Python 在伺服器端處理邏輯並將渲染後的 HTML 發送給客戶端，或者它充當… REST API 它使用 JavaScript 編寫的前端，以 JSON 格式交換資料。 fetch o axios.
還有一些較早的方法，例如 CGI（通用網關介面），雖然現在由於其複雜性而被認為過時，但它是動態 Web 的基礎。對於只需要展示資料的人來說，將 Jupyter Notebook 轉換為 HTML是發布技術報告最快、最簡單的方法。
這一切背後的引擎：WebAssembly
真正讓 Python、C++ 和 Rust 等語言觸達 Web 的魔法在於 WebAssembly (Wasm)。這項開放標準使得二進位程式碼能夠以接近原生效能的方式執行。由於 Wasm，Adobe 等公司得以將Photoshop 移植到 Web 平台，而 AutoCAD 和 Figma 也大幅優化了資料載入和處理效率。
無論是透過 Brython 轉換還是 PyScript 的二進位功能，在客戶端運行 Python 的能力都為創建複雜的資料科學工具和應用程式開闢了無限可能，而無需用戶在電腦上安裝任何東西，從而使高級程式設計的普及化。
Python 在 Web 上的整合已經從簡單的伺服器端腳本發展到透過 WebAssembly 進行二進位執行，您可以選擇使用 Brython 進行輕量級 JavaScript 轉換，或者使用 PyScript 和 Pyodide 的全部功能，從而改變了我們對前端開發的理解。
