A webfejlesztés a programozás egyik legnépszerűbb felhasználási módja. A Python a világ egyik legnépszerűbb programozási nyelve. Miért nem tudunk webalkalmazásokat készíteni Pythonban?  A felhasználói felület elkészítésének egyszerűnek kell lennie, de még akkor is, ha nagyszerű mérnökök vannak a csapatban, óriási akadályt jelentett az új nyelvek és eszközök megtanulása. A felhasználói felület létrehozása gyakran nehezebb lehet, mint a tényleges munka! Pontosan ennek a problémának a megoldására építettük a Reflexet, egy nyílt forráskódú Python webes keretrendszert.  TLDR  A motorháztető alatt a Reflex alkalmazások egy   frontend alkalmazásra és egy   háttéralkalmazásra fordíthatók. Csak a felhasználói felület van fordítva Javascriptre; az összes alkalmazáslogika és állapotkezelés Pythonban marad, és a szerveren fut. A Reflex   segítségével küldi el az eseményeket a frontendről a háttérrendszerre, és küldi az állapotfrissítéseket a háttérrendszerről a frontendre. React FastAPI a WebSockets  Meglévő Python megoldások  Már volt néhány módja annak, hogy Pythonban készítsünk alkalmazásokat, de egyik sem felel meg az igényeinknek.  Egyrészt vannak olyan keretrendszerek, mint   és   , amelyek kiválóan alkalmasak éles szintű webalkalmazások készítésére. De csak a háttérrendszert kezelik – továbbra is JavaScriptet és frontend keretrendszert kell használnia, valamint sok feldolgozási kódot kell írnia a frontend és a háttérrendszer összekapcsolásához. a Django a Flask  Másrészt a tiszta Python-könyvtárak, mint például   és   nagyszerűek lehetnek kis projektekhez, de egy adott használati esetre korlátozódnak, és nem rendelkeznek a teljes webalkalmazás létrehozásához szükséges funkciókkal és teljesítménnyel. Ahogy alkalmazásának funkciói és összetettsége bővül, előfordulhat, hogy eléri a keretrendszer korlátait, ekkor vagy korlátoznia kell az ötletét, hogy illeszkedjen a keretrendszerhez, vagy le kell vetnie a projektet, és újjá kell építenie egy "valódi webes keretrendszer" segítségével. a Dash a Streamlit,  Ezt a szakadékot egy olyan keretrendszer létrehozásával szeretnénk áthidalni, amely könnyen és intuitív módon kezdhető el, ugyanakkor rugalmas és hatékony marad bármely alkalmazás támogatásához.  A Reflex céljai    : Mindenhez egy nyelvet használjon. Pure Python    : egyszerűen, webfejlesztési tapasztalat nélkül készítse el ötleteit. Könnyű elkezdeni    : A webalkalmazásoknak meg kell felelniük a hagyományos webes keretrendszerek testreszabhatóságának és teljesítményének. Teljes rugalmasság    : Kezelje a teljes köteget az előtértől a háttérbe, a telepítésig. Akkumulátorok mellékelve  Most pedig nézzük meg, hogyan építettük fel a Reflexet e célok elérése érdekében.  A Reflex architektúra  A full-stack webalkalmazások előtérből és háttérrendszerből állnak. A frontend a felhasználói felület, és a felhasználó böngészőjében futó weboldalként szolgál. A háttérrendszer kezeli a logikát és az állapotkezelést (például adatbázisok és API-k), és egy kiszolgálón fut. A hagyományos webfejlesztésben ez általában két különálló alkalmazás, és gyakran különböző keretrendszerben vagy nyelven íródnak. Például kombinálhat egy Flask hátteret egy React előtérrel. Ezzel a megközelítéssel két különálló alkalmazást kell karbantartania, és sok általános kódot kell írnia az előtér és a háttérrendszer összekapcsolásához.  Szeretnénk egyszerűsíteni ezt a folyamatot a Reflexben azáltal, hogy a frontendet és a backendet is egyetlen kódbázisban határozzuk meg, miközben mindenhez Pythont használunk. A fejlesztőknek csak az alkalmazás logikája miatt kell aggódniuk, nem pedig az alacsony szintű megvalósítás részletei miatt.   Frontend  Azt akarjuk, hogy a Reflex alkalmazások hagyományos webalkalmazásnak tűnjenek és úgy érezzék a végfelhasználó számára, hogy a fejlesztők továbbra is könnyen elkészíthetők és karbantarthatók legyenek. Ennek érdekében kiforrott és népszerű webes technológiákra építettünk.  Amikor   az alkalmazást, a Reflex lefordítja a kezelőfelületet egy egyoldalas   alkalmazásba, és egy porton (alapértelmezés szerint   ) szolgálja ki, amelyhez hozzáférhet a böngészőben. reflex run Next.js 3000  A frontend feladata, hogy tükrözze az alkalmazás állapotát, és eseményeket küldjön a háttérrendszernek, amikor a felhasználó interakcióba lép a felhasználói felülettel. A frontenden nem fut tényleges logika.  Alkatrészek  A Reflex frontendek olyan összetevőkből épülnek fel, amelyek összetett felhasználói felületek létrehozásához összeállíthatók. A HTML-t és Pythont keverő sablonnyelv használata helyett csak Python-függvényeket használunk a felhasználói felület meghatározásához.  A motorháztető alatt az összetevők a React komponensekké állnak össze. Számos alapvető összetevőnk   , egy népszerű React komponenskönyvtáron alapul. Számos egyéb komponensünk is van grafikus ábrázoláshoz, adattáblázatokhoz és még sok máshoz. Azért választottuk a Reactet, mert ez egy népszerű könyvtár hatalmas ökoszisztémával. Nem az a célunk, hogy újra létrehozzuk a webes ökoszisztémát, hanem hogy elérhetővé tegyük a Python fejlesztők számára. a Radixen  Ez azt is lehetővé teszi a felhasználók számára, hogy saját komponenseiket hozzák magukkal, ha nincs szükségük alkatrészre. A felhasználók becsomagolhatják saját React-komponenseiket, majd közzétehetik azokat mások számára. Idővel kiépítjük harmadik féltől származó összetevő-ökoszisztémánkat, hogy a felhasználók könnyen megtalálhassák és felhasználhassák a mások által készített összetevőket.  Styling  Gondoskodni akartunk arról, hogy a Reflex alkalmazások jól nézzenek ki a dobozból, miközben továbbra is teljes ellenőrzést biztosítunk a fejlesztőknek alkalmazásuk megjelenése felett.  Van egy alapvető témarendszerünk, amely lehetővé teszi magas szintű stílusbeállítások, például sötét mód és kiemelő színek beállítását az egész alkalmazásban, hogy egységes megjelenést és érzetet biztosítson.  Ezen túlmenően a Reflex komponensei a CSS teljes erejével stílusozhatók. Kihasználjuk az   könyvtárat, hogy lehetővé tegyük a "CSS-in-Python" stílust, így bármilyen CSS-propagot átadhat kulcsszó argumentumként egy összetevőnek. Ez magában foglalja a reszponzív kellékeket az értékek listájának átadásával. Emotion  Háttérrendszer  A Reflexben csak a frontend fordítja le a Javascriptet, és fut a felhasználó böngészőjén, míg az összes állapot és logika Pythonban marad, és a szerveren fut.   elindítunk egy FastAPI-kiszolgálót (alapértelmezés szerint a   porton), amelyhez a frontend egy websocketen keresztül csatlakozik. reflex run 8000  Minden állapot és logika egy   belül van meghatározva. Az állam   és   áll. A változók bármely olyan értéket jelentenek az alkalmazásban, amely idővel változhat. Ezek osztályattribútumként vannak definiálva a   osztályban, és bármilyen Python-típus lehet, amely JSON-ba sorozható. State varsokból eseménykezelőkből State  Az eseménykezelők olyan metódusok   osztályban, amelyek akkor hívódnak meg, amikor a felhasználó interakcióba lép a felhasználói felülettel. Ez az egyetlen módja annak, hogy módosítsuk a Vars-t a Reflexben, és meghívhatók válaszként a felhasználói műveletekre, például egy gombra kattintásra vagy egy szövegdobozba való beírásra. State  Mivel az eseménykezelők a háttérben futnak, bármelyik Python-könyvtárat használhatja bennük.   Eseményfeldolgozás  Általában webalkalmazások írásakor sok általános kódot kell írnia az előtér és a háttérrendszer összekapcsolásához. A Reflex segítségével emiatt nem kell aggódnia – mi kezeljük helyette a kommunikációt a frontend és a háttérrendszer között. A fejlesztőknek csak meg kell írniuk az eseménykezelő logikáját, és a változók frissítésekor a felhasználói felület automatikusan frissül.  Eseményindítók  A felhasználó számos módon kommunikálhat a felhasználói felülettel, például kattinthat egy gombra, beírhat egy szövegmezőt, vagy az egérmutatót egy elem fölé viheti. A Reflexben ezeket   nevezzük. eseményindítóknak  Eseménysor  A kezelőfelületen eseménysort tartunk fenn az összes függőben lévő eseményből. Egy esemény három fő adatból áll:    : Minden ügyfélnek (böngésző lapnak) van egy egyedi tokenje az azonosításhoz. Ezzel tudatja a háttérrendszerrel, hogy melyik állapotot kell frissíteni. kliens token    : Az állapoton futtatandó eseménykezelő. eseménykezelő    : Az eseménykezelőnek átadandó argumentumok. arguments  Amikor egy esemény aktiválódik, az hozzáadódik a várólistához. Van egy   jelzőnk, amely biztosítja, hogy egyszerre csak egy esemény kerüljön feldolgozásra. Ez biztosítja, hogy az állapot mindig konzisztens legyen, és ne legyenek versenyfeltételek, amikor két eseménykezelő egyszerre módosítja az állapotot. Ez alól vannak kivételek, például a háttérben zajló események, amelyek lehetővé teszik az események futtatását a háttérben a felhasználói felület blokkolása nélkül. processing  Miután az esemény készen áll a feldolgozásra, egy WebSocket kapcsolaton keresztül elküldésre kerül a háttérrendszernek.  Államvezető  Az esemény beérkezése után a rendszer feldolgozza a háttérben. A Reflex   használ, amely leképezést tart fenn az ügyféljogkivonatok és azok állapota között. Alapértelmezés szerint az állapotkezelő csak egy memórián belüli szótár, de kibővíthető adatbázis vagy gyorsítótár használatára. A termelésben a Redist használjuk állami menedzserként. állapotkezelőt  Eseménykezelés  Miután megvan a felhasználó állapota, a következő lépés az eseménykezelő futtatása az argumentumokkal.  Állami frissítések  Minden alkalommal, amikor egy eseménykezelő visszatér (vagy ad eredményt), mentjük az állapotot az állapotkezelőben, és elküldjük az   a kezelőfelületnek a felhasználói felület frissítéséhez. A teljesítmény fenntartása érdekében az állapot növekedésével a Reflex belsőleg nyomon követi az eseménykezelő során frissített változókat (   ). állapotfrissítéseket piszkos vars  Amikor az eseménykezelő befejezte a feldolgozást, megtaláljuk az összes piszkos változót, és létrehozunk egy állapotfrissítést, amelyet elküldünk a frontendnek.  Az új állapotot az állapotkezelőnkben tároljuk, majd elküldjük az állapotfrissítést a frontendnek. A frontend ezután frissíti a felhasználói felületet, hogy tükrözze az új állapotot.  Következtetés  Remélem, ez jó áttekintést ad a Reflex működéséről a motorháztető alatt. További bejegyzések jelennek meg, amelyekben megosztjuk, hogyan tettük a Reflexet méretezhetővé és hatékonyan olyan funkciókkal, mint az állapotfelosztás és a fordítóoptimalizálás.

This post provides insights into new product. 

pip install reflex

Ez a hanganyag a történet eredeti nyelvén készült!

Pure Python webes keretrendszer tervezése

About Author

HOZZÁSZÓLÁSOK

HANG TAGOK

EZT A CIKKET BEMUTATTA

Related Stories

How Emoji Credibility Indicators Add Context to HackerNoon Stories

And now the important day of the election had arrived

Of The First and Last Things: Part 4

How Emoji Credibility Indicators Add Context to HackerNoon Stories

And now the important day of the election had arrived

Of The First and Last Things: Part 4

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps