設計純Python Web框架

Web 開發是最受歡迎的程式設計用例之一。 Python 是世界上最受歡迎的程式語言之一。那為什麼我們不能用 Python 建立 Web 應用程式呢？

製作 UI 應該很簡單，但即使您的團隊中有出色的工程師，學習新語言和工具的開銷也是一個巨大的障礙。通常，製作 UI 可能比實際工作更困難！

總長DR

在底層，Reflex 應用程式編譯為 React 前端應用程式和 FastAPI 後端應用程式。僅 UI 被編譯為 Javascript；所有應用程式邏輯和狀態管理都保留在Python中並在伺服器上運行。 Reflex 使用 WebSockets 將事件從前端傳送到後端，並將狀態更新從後端傳送到前端。

現有的Python解決方案

已經有幾種用 Python 建立應用程式的方法，但沒有一個能滿足我們的需求。

一方面，像 Django 和 Flask 這樣的框架非常適合建立生產級 Web 應用程式。但它們只處理後端 - 你仍然需要使用 JavaScript 和前端框架，以及編寫大量樣板程式碼來連接前端和後端。

另一方面，像 Dash 和 Streamlit 這樣的純 Python 函式庫非常適合小型項目，但它們僅限於特定的用例，並且不具備建立完整 Web 應用程式的功能和效能。隨著您的應用程式功能和複雜性的增長，您可能會發現自己達到了框架的極限，此時您要么必須限制您的想法以適應框架，要么廢棄您的專案並使用“真正的Web 框架”重建它。

我們希望透過創建一個易於上手且直觀的框架來彌合這一差距，同時保持靈活和強大的功能以支援任何應用程式。

反射的目標

• 純Python：用一種語言完成所有事情。
• 易於上手：無需 Web 開發經驗即可輕鬆建立您的想法。
• 完全靈活性：Web 應用程式應與傳統 Web 框架的可自訂性和效能相符。
• 包含電池：處理從前端到後端再到部署的全端。

現在讓我們深入了解我們如何建立 Reflex 來實現這些目標。

反射架構

全端網路應用程式由前端和後端組成。前端是使用者介面，可作為在使用者瀏覽器上運行的網頁。後端處理邏輯和狀態管理（例如資料庫和 API），並在伺服器上運行。

在傳統的 Web 開發中，這些通常是兩個獨立的應用程序，並且通常是用不同的框架或語言編寫的。例如，您可以將 Flask 後端與 React 前端結合。使用這種方法，您必須維護兩個單獨的應用程序，並最終編寫大量樣板程式碼來連接前端和後端。

我們希望透過在單一程式碼庫中定義前端和後端，同時使用 Python 來完成所有操作，從而簡化 Reflex 中的此過程。開發人員只需擔心應用程式的邏輯，而不用擔心低階實作細節。

前端

我們希望 Reflex 應用程式對於最終用戶來說看起來和感覺就像傳統的 Web 應用程序，同時仍然易於開發人員構建和維護。為此，我們建立在成熟且流行的網路技術之上。

當您反射執行您的應用程式時，Reflex 會將前端編譯為單頁 Next.js 應用程序，並將其提供給您可以在瀏覽器中訪問的連接埠（預設為 3000）。

前端的工作是反映應用程式的狀態，並在使用者與 UI 互動時將事件傳送到後端。前端沒有運作任何實際邏輯。

成分

反射前端是使用可以組合在一起創建複雜 UI 的元件建構的。我們不使用混合 HTML 和 Python 的模板語言，而是使用 Python 函數來定義 UI。

在底層，元件編譯為 React 元件。

我們的許多核心元件都基於流行的 React 元件庫 Radix。我們還有許多其他用於繪圖、資料表等的元件。

我們選擇React是因為它是一個擁有龐大生態系統的流行函式庫。我們的目標不是重新創建 Web 生態系統，而是讓 Python 開發人員可以使用它。

如果我們沒有他們需要的組件，這也允許我們的用戶攜帶他們自己的組件。使用者可以封裝自己的React元件，然後發佈給其他人使用。隨著時間的推移，我們將建立我們的第三方組件生態系統，以便用戶可以輕鬆找到和使用其他人建立的組件。

造型

我們希望確保 Reflex 應用程式開箱即用時看起來不錯，同時仍然讓開發人員完全控制其應用程式的外觀。

我們有一個核心主題系統，可讓您在整個應用程式中設定高級樣式選項，例如深色模式和強調色，以賦予其統一的外觀和感覺。

除此之外，還可以使用 CSS 的全部功能來設計 Reflex 元件的樣式。我們利用 Emotion 函式庫來允許「CSS-in-Python」樣式，因此您可以將任何 CSS prop 作為關鍵字參數傳遞給元件。這包括透過傳遞值列表來回應的 props。

後端

在 Reflex 中，只有前端編譯為 Javascript 並在使用者的瀏覽器上運行，而所有狀態和邏輯都保留在 Python 中並在伺服器上運行。當您反射運行時，我們啟動一個 FastAPI 伺服器（預設在連接埠 8000），前端透過 websocket 連接到該伺服器。

所有狀態和邏輯都在 State 類別中定義。

狀態由 vars 和 事件處理程序組成。

變數是應用程式中可能隨時間變化的任何值。它們被定義為 State 類別上的類別屬性，可以是任何可以序列化為 JSON 的 Python 類型。

事件處理程序是 State 類別中的方法，當使用者與 UI 互動時呼叫。它們是我們在 Reflex 中修改變數的唯一方法，並且可以呼叫它們來回應使用者操作，例如單擊按鈕或在文字方塊中鍵入。

由於事件處理程序在後端運行，因此您可以在其中使用任何 Python 庫。

事件處理

通常在編寫 Web 應用程式時，您必須編寫大量樣板程式碼來連接前端和後端。使用 Reflex，您不必擔心這一點 - 我們為您處理前端和後端之間的通訊。開發人員只需編寫事件處理程序邏輯，當變數更新時，UI 就會自動更新。

事件觸發器

使用者可以透過多種方式與 UI 交互，例如按一下按鈕、在文字方塊中鍵入或將滑鼠懸停在元素上。在 Reflex 中，我們將這些稱為事件觸發器。

事件隊列

在前端，我們維護所有待處理事件的事件佇列。一個事件由三個主要資料組成：

• 客戶端令牌：每個客戶端（瀏覽器標籤）都有一個唯一的令牌來識別它。這讓後端知道要更新哪個狀態。
• 事件處理程序：在狀態上執行的事件處理程序。
• 參數：傳遞給事件處理程序的參數。

當事件被觸發時，它會被加入到佇列中。
我們有一個處理標誌來確保一次只處理一個事件。這確保了狀態始終一致，並且在兩個事件處理程序同時修改狀態時不存在任何競爭條件。但也有例外，例如後台事件，它允許您在背景運行事件而不阻塞 UI。

事件準備好處理後，就會透過 WebSocket 連線傳送到後端。

狀態經理

收到事件後，就會在後端處理。

Reflex 使用 狀態管理器 來維護客戶端令牌與其狀態之間的對應。預設情況下，狀態管理器只是記憶體中的字典，但可以擴展以使用資料庫或快取。在生產中，我們使用 Redis 作為狀態管理器。

事件處理

一旦我們獲得了使用者的狀態，下一步就是使用參數執行事件處理程序。

狀態更新

每次事件處理程序傳回（或產生）時，我們都會將狀態保存在狀態管理器中，並將狀態更新傳送到前端以更新 UI。

為了在狀態增長時保持效能，Reflex 在內部追蹤在事件處理程序期間更新的變數（髒變數）。
當事件處理程序完成處理後，我們找到所有髒變數並建立狀態更新以傳送到前端。

我們將新狀態儲存在狀態管理器中，然後將狀態更新傳送到前端。
然後前端更新 UI 以反映新狀態。

結論

我希望這可以很好地概述 Reflex 的底層工作原理。我們將發布更多文章來分享我們如何透過狀態分片和編譯器最佳化等功能使 Reflex 具有可擴展性和高效能。

以上是設計純Python Web框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！