Ang web development ay isa sa mga pinakasikat na kaso ng paggamit para sa programming. Ang Python ay isa sa pinakasikat na programming language sa mundo. Kaya bakit hindi tayo makabuo ng mga web app sa Python?  Ang paggawa ng UI ay dapat na simple, ngunit kahit na mayroon kang mahusay na mga inhinyero sa iyong koponan, ang overhead ng pag-aaral ng bagong wika at mga tool ay isang malaking hadlang. Kadalasan ang paggawa ng UI ay maaaring mas mahirap kaysa sa aktwal na gawaing ginagawa ng isa! Binuo namin ang Reflex, isang open source Python web framework upang malutas ang eksaktong problemang ito.  TLDR  Sa ilalim ng hood, ang mga Reflex app ay nag-compile pababa sa isang   frontend app at isang   backend app. Tanging ang UI ay pinagsama-sama sa Javascript; ang lahat ng lohika ng app at pamamahala ng estado ay nananatili sa Python at pinapatakbo sa server. Gumagamit ang Reflex ng   upang magpadala ng mga kaganapan mula sa frontend hanggang sa backend, at upang magpadala ng mga update ng estado mula sa backend hanggang sa frontend. React FastAPI WebSockets  Umiiral na Mga Solusyon sa Python  Mayroong ilang mga paraan upang bumuo ng mga app sa Python, ngunit wala sa mga ito ang umaangkop sa aming mga pangangailangan.  Sa isang banda, may mga framework tulad ng   at   na mahusay para sa pagbuo ng production-grade web apps. Ngunit pinangangasiwaan lang nila ang backend - kailangan mo pa ring gumamit ng JavaScript at isang frontend framework, pati na rin ang pagsulat ng maraming boilerplate code upang ikonekta ang frontend at backend. Django Flask  Sa kabilang banda, ang mga purong aklatan ng Python tulad ng   at   ay maaaring maging mahusay para sa maliliit na proyekto, ngunit limitado ang mga ito sa isang partikular na kaso ng paggamit at walang mga tampok at pagganap upang bumuo ng isang buong web app. Habang lumalaki ang iyong app sa mga feature at pagiging kumplikado, maaari mong makita ang iyong sarili na naabot ang mga limitasyon ng framework, kung saan kailangan mong limitahan ang iyong ideya upang umangkop sa framework, o i-scrap ang iyong proyekto at muling itayo ito gamit ang isang "real web framework". Dash Streamlit  Gusto naming i-bridge ang agwat na ito sa pamamagitan ng paglikha ng isang framework na madali at madaling gamitin upang makapagsimula, habang nananatiling flexible at malakas upang suportahan ang anumang app.  Mga Layunin ng Reflex    : Gumamit ng isang wika para sa lahat. Purong Python    : Buuin ang iyong mga ideya nang madali nang hindi nangangailangan ng karanasan sa web development. Madaling magsimula    : Ang mga web app ay dapat tumugma sa pagiging nako-customize at pagganap ng mga tradisyonal na web framework. Ganap na kakayahang umangkop    : Pangasiwaan ang full-stack mula sa frontend, hanggang sa backend, hanggang sa pag-deploy. Kasama ang mga baterya  Ngayon tingnan natin kung paano namin binuo ang Reflex upang maabot ang mga layuning ito.  Ang Reflex Architecture  Ang mga full-stack na web app ay binubuo ng isang frontend at isang backend. Ang frontend ay ang user interface, at inihahain bilang isang web page na tumatakbo sa browser ng user. Pinangangasiwaan ng backend ang lohika at pamamahala ng estado (tulad ng mga database at API), at pinapatakbo sa isang server. Sa tradisyonal na web development, ang mga ito ay karaniwang dalawang magkahiwalay na app, at kadalasang isinusulat sa iba't ibang mga framework o wika. Halimbawa, maaari mong pagsamahin ang isang Flask backend sa isang React frontend. Sa diskarteng ito, kailangan mong magpanatili ng dalawang magkahiwalay na app at magtatapos sa pagsulat ng maraming boilerplate code upang ikonekta ang frontend at backend.  Gusto naming gawing simple ang prosesong ito sa Reflex sa pamamagitan ng pagtukoy sa frontend at backend sa iisang codebase, habang ginagamit ang Python para sa lahat. Dapat lang mag-alala ang mga developer tungkol sa logic ng kanilang app at hindi tungkol sa mga detalye ng pagpapatupad sa mababang antas.   Frontend  Gusto naming magmukhang tradisyunal na web app ang mga Reflex app sa end user, habang madali pa ring buuin at mapanatili para sa developer. Para magawa ito, binuo namin sa ibabaw ng mga mature at sikat na teknolohiya sa web.  Kapag   ang iyong app, kino-compile ng Reflex ang frontend pababa sa isang single-page   app at ihahatid ito sa isang port (bilang default   ) na maaari mong i-access sa iyong browser. reflex run na Next.js 3000  Ang trabaho ng frontend ay ipakita ang estado ng app, at magpadala ng mga kaganapan sa backend kapag nakipag-ugnayan ang user sa UI. Walang aktwal na lohika ang tumatakbo sa frontend.  Mga bahagi  Ang mga reflex frontend ay binuo gamit ang mga bahagi na maaaring buuin nang magkasama upang lumikha ng mga kumplikadong UI. Sa halip na gumamit ng templating language na pinaghahalo ang HTML at Python, ginagamit lang namin ang mga function ng Python para tukuyin ang UI.  Sa ilalim ng hood, ang mga bahagi ay nag-compile hanggang sa mga bahagi ng React. Marami sa aming mga pangunahing bahagi ay batay sa   , isang sikat na library ng React component. Mayroon din kaming maraming iba pang bahagi para sa pag-graph, mga datatable, at higit pa. Pinili namin ang React dahil isa itong sikat na library na may malaking ecosystem. Ang aming layunin ay hindi muling likhain ang web ecosystem, ngunit gawin itong naa-access sa mga developer ng Python. Radix  Nagbibigay-daan din ito sa aming mga user na magdala ng sarili nilang mga bahagi kung wala kaming sangkap na kailangan nila. Maaaring ibalot ng mga user ang sarili nilang mga bahagi ng React at pagkatapos ay i-publish ang mga ito para magamit ng iba. Sa paglipas ng panahon, bubuo kami ng aming third party na component ecosystem upang madaling mahanap at magamit ng mga user ang mga bahagi na ginawa ng iba.  Pag-istilo  Gusto naming tiyaking maganda ang hitsura ng mga Reflex app, habang binibigyan pa rin ang mga developer ng ganap na kontrol sa hitsura ng kanilang app.  Mayroon kaming pangunahing sistema ng tema na nagbibigay-daan sa iyong magtakda ng mga opsyon sa pag-istilo ng mataas na antas gaya ng dark mode at kulay ng accent sa kabuuan ng iyong app para bigyan ito ng pinag-isang hitsura at pakiramdam.  Higit pa rito, maaaring i-istilo ang mga bahagi ng Reflex gamit ang buong kapangyarihan ng CSS. Ginagamit namin ang   library para payagan ang "CSS-in-Python" na pag-istilo, para maipasa mo ang anumang CSS prop bilang argumento ng keyword sa isang bahagi. Kabilang dito ang mga tumutugon na props sa pamamagitan ng pagpasa ng listahan ng mga value. Emotion  Backend  Sa Reflex lamang ang frontend ay nag-compile sa Javascript at tumatakbo sa browser ng user, habang ang lahat ng estado at lohika ay nananatili sa Python at pinapatakbo sa server. Kapag   ka , magsisimula kami ng FastAPI server (bilang default sa port   ) kung saan kumokonekta ang frontend sa pamamagitan ng isang websocket. reflex run 8000  Ang lahat ng estado at lohika ay tinukoy sa loob ng klase   . Ang estado ay binubuo ng   at   . Ang mga Var ay anumang value sa iyong app na maaaring magbago sa paglipas ng panahon. Ang mga ito ay tinukoy bilang mga katangian ng klase sa iyong klase   , at maaaring anumang uri ng Python na maaaring i-serialize sa JSON. State mga vars event handler State  Ang mga tagapangasiwa ng kaganapan ay mga pamamaraan sa iyong klase   na tinatawag kapag nakipag-ugnayan ang user sa UI. Ang mga ito ay ang tanging paraan na maaari naming baguhin ang mga vars sa Reflex, at maaaring tawagan bilang tugon sa mga aksyon ng user, tulad ng pag-click sa isang button o pag-type sa isang text box. State  Dahil ang mga humahawak ng kaganapan ay tumatakbo sa backend, maaari mong gamitin ang anumang library ng Python sa loob ng mga ito.   Pagproseso ng Kaganapan  Karaniwan kapag nagsusulat ng mga web app, kailangan mong magsulat ng maraming boilerplate code upang ikonekta ang frontend at backend. Sa Reflex, hindi mo kailangang mag-alala tungkol doon - pinangangasiwaan namin ang komunikasyon sa pagitan ng frontend at backend para sa iyo. Kailangan lang isulat ng mga developer ang kanilang logic sa handler ng kaganapan, at kapag na-update ang mga vars, awtomatikong ina-update ang UI.  Mga Trigger ng Kaganapan  Maaaring makipag-ugnayan ang user sa UI sa maraming paraan, gaya ng pag-click sa isang button, pag-type sa isang text box, o pag-hover sa isang elemento. Sa Reflex, tinatawag namin itong   . mga trigger ng kaganapan  Queue ng Kaganapan  Sa frontend, nagpapanatili kami ng queue ng event ng lahat ng nakabinbing event. Ang isang kaganapan ay binubuo ng tatlong pangunahing piraso ng data:    : Ang bawat kliyente (tab ng browser) ay may natatanging token upang makilala ito. Ipaalam nito sa backend kung aling estado ang ia-update. token ng kliyente    : Ang event handler na tatakbo sa estado. event handler    : Ang mga argumentong ipapasa sa event handler. arguments  Kapag na-trigger ang isang kaganapan, idaragdag ito sa queue. Mayroon kaming flag   upang matiyak na isang kaganapan lamang ang naproseso sa isang pagkakataon. Tinitiyak nito na ang estado ay palaging pare-pareho at walang anumang kundisyon ng lahi na may dalawang tagapangasiwa ng kaganapan na nagbabago sa estado nang sabay-sabay. May mga pagbubukod dito, tulad ng mga kaganapan sa background na nagbibigay-daan sa iyong magpatakbo ng mga kaganapan sa background nang hindi hinaharangan ang UI. processing  Kapag handa nang iproseso ang kaganapan, ipapadala ito sa backend sa pamamagitan ng koneksyon sa WebSocket.  Tagapamahala ng Estado  Kapag natanggap na ang kaganapan, pinoproseso ito sa backend. Gumagamit ang Reflex ng   na nagpapanatili ng pagmamapa sa pagitan ng mga token ng kliyente at ng kanilang estado. Bilang default, ang tagapamahala ng estado ay isang in-memory na diksyunaryo, ngunit maaari itong palawakin upang gumamit ng database o cache. Sa produksyon ginagamit namin ang Redis bilang aming tagapamahala ng estado. state manager  Pangangasiwa ng Kaganapan  Kapag mayroon na kaming estado ng user, ang susunod na hakbang ay patakbuhin ang event handler na may mga argumento.  Mga Update ng Estado  Sa tuwing babalik (o magbubunga) ang isang event handler, sine-save namin ang state sa state manager at ipinapadala namin ang   sa frontend para i-update ang UI. Para mapanatili ang performance habang lumalaki ang iyong estado, sinusubaybayan ng internally Reflex ang mga vars na na-update sa panahon ng event handler (   ). state update dirty vars  Kapag natapos na ang pagproseso ng event handler, makikita namin ang lahat ng maruruming vars at gumawa kami ng state update na ipapadala sa frontend.  Iniimbak namin ang bagong estado sa aming tagapamahala ng estado, at pagkatapos ay ipinapadala ang update ng estado sa frontend. Ang frontend pagkatapos ay ina-update ang UI upang ipakita ang bagong estado.  Konklusyon  Umaasa ako na nagbibigay ito ng magandang pangkalahatang-ideya kung paano gumagana ang Reflex sa ilalim ng hood. Magkakaroon kami ng higit pang mga post na lalabas upang ibahagi kung paano namin ginawang nasusukat at gumaganap ang Reflex sa pamamagitan ng mga feature gaya ng state sharding at compiler optimizations.

This post provides insights into new product. 

pip install reflex

Ang audio na ito ay ginawa sa orihinal na wika ng kuwento!

Pagdidisenyo ng Purong Python Web Framework

About Author

MGA KOMENTO

HANG TAGS

ANG ARTIKULONG ITO AY IPINAKITA SA

Related Stories

How I deployed my spark document classification(Logistic Regression) model/s as a standalone app…

Getting intimate with Ethereum tokens

Hosting a DNS domain on the blockchain

How I deployed my spark document classification(Logistic Regression) model/s as a standalone app…

Getting intimate with Ethereum tokens

Hosting a DNS domain on the blockchain

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps