- PyScript umożliwia osadzanie Pythona w HTML przy użyciu WebAssembly, obsługując zaawansowane biblioteki, takie jak NumPy i Pandas.
- Brython tłumaczy kod Pythona na JavaScript, dzięki czemu idealnie nadaje się do lekkiej manipulacji elementami DOM i SVG.
- WebAssembly to kluczowa technologia umożliwiająca uruchamianie kompilowanych języków w sieci z wydajnością zbliżoną do natywnej.
- Istnieją tradycyjne alternatywy oparte na serwerze, takie jak Flask i Django, służące do obsługi logiki zaplecza.
Wprowadzenie mocy Pythona do środowiska przeglądarkowego od dawna było marzeniem wielu programistów. Do niedawna, jeśli zależało Ci na tym, aby cokolwiek działało w sieci, JavaScript był niekwestionowanym królem i jedyną realną opcją wykonywania logiki po stronie klienta bez polegania na zewnętrznym serwerze.
Jednak sytuacja zmieniła się radykalnie dzięki pojawieniu się różnych narzędzi i standardów, które przełamują bariery back-endowe . Obecnie istnieje wiele sposobów na integrację Pythona z HTML, od kompilatorów tłumaczących kod, po wykorzystanie technologii binarnych, które zapewniają niesamowitą wydajność bezpośrednio w karcie najpopularniejszej przeglądarki, takiej jak Chrome.
PyScript: Rewolucja Anaconda
Jednym z największych skoków naprzód było wydanie przez Anacondę języka PyScript. Ten framework to po prostu warstwa opakowująca... Pyodide, Emscripten i WebAssembly (Wasm)Dzięki temu Python może działać niemal transparentnie na kliencie. Najbardziej atrakcyjnym aspektem jest możliwość pisania kodu Pythona bezpośrednio w niestandardowych znacznikach HTML, takich jak: <py-script>, znacznie ułatwiając tworzenie interaktywnych aplikacji.
Aby zacząć, wystarczy umieścić pliki CSS i JS języka PyScript w nagłówku dokumentu. Jedną z jego największych zalet jest to, że Obsługuje duże biblioteki takie jak NumPy, Pandas lub Scikit-learn, które można skonfigurować za pomocą znacznika <py-env>Ponadto PyScript oferuje dwukierunkowa komunikacja z JavaScriptumożliwiając manipulację DOM przeglądarki za pomocą modułu js Pyton.
Jeśli chodzi o interfejs, PyScript nie zawodzi, ponieważ oferuje zintegrowane komponenty interfejsu użytkownika jako <py-button> o <py-inputbox>które wykonują funkcje Pythona podczas interakcji. Należy jednak pamiętać, że ze względu na oparcie na WebAssembly, Początkowy czas ładowania może być długi. a wydajność na urządzeniach mobilnych może być ograniczona.
Brython: Python przetłumaczony na JavaScript
Jeśli szukamy lżejszej alternatywy pod względem obciążenia, Brython jest klasycznym wyborem. W przeciwieństwie do PyScript, Brython to implementacja Pythona 3 napisana w całości w JavaScript. przetłumacz kod Pythona aby przeglądarka mogła to zrozumieć. Aby to zadziałało, konieczne jest wywołanie funkcji brython() w przypadku onload treści HTML.
Brython wyróżnia się możliwością interakcji z elementami HTML i SVG. Dzięki wykorzystaniu obiektu documentjest możliwe wstrzykiwać zawartość dynamicznie lub rysuj figury geometryczne na płótnie SVG, używając niestandardowych operatorów, takich jak =< do dodawania węzłów do drzewa dokumentu. Pomimo swojej wszechstronności, ma ograniczenia: Nie obsługuje wszystkich modułów standardowej biblioteki i wymaga, aby dane wejściowe i wyjściowe były obsługiwane za pomocą elementów HTML, ponieważ print() o input() Nie działają w tradycyjny sposób.
Inne implementacje i porównania
Ekosystem jest szeroki i istnieją inne interesujące projekty. Z jednej strony mamy Skulpt, który obsługuje Pythona 2 i 3 za pośrednictwem JavaScript, oraz Transcrypt, który działa jako kompilator JavaScript, choć ten ostatni wydaje się być zapomniany. Jest też VistaPython, który proponuje inne podejście, wykorzystując interpreter kodu bajtowego napisany w JavaScript i parser wygenerowany przez Antlr, ułatwiając aktualizację do nowszych wersji Pythona.
Porównując te podejścia, widzimy, że Brython i Skulpt używają ręcznych parserów, które są trudne w utrzymaniu. Z kolei Pyodide (fundament PyScript) to prawdziwy port CPythona do WebAssembly, gwarantujący znacznie większą kompatybilność, aczkolwiek kosztem znacznie większego pakietu do pobrania. VistaPython stara się znaleźć równowagę między elastycznością a rozmiarem , optymalizując profile obciążenia, aby zapewnić szybkie działanie aplikacji na dowolnym urządzeniu.
Tradycyjne metody i zaplecze
Nie wszystko musi odbywać się w przeglądarce. Dla wielu najpewniejszym sposobem na połączenie Pythona i HTML pozostaje użycie... frameworki serwerowe, takie jak Flask w Pythonie lub DjangoW tym schemacie Python obsługuje logikę na serwerze i wysyła wyrenderowany kod HTML do klienta lub działa jako API REST który wymienia dane w formacie JSON z front-endem napisanym w JavaScript przy użyciu fetch o axios.
Istnieją również starsze metody, takie jak CGI (Common Gateway Interface), które – choć obecnie uważane za przestarzałe ze względu na swoją złożoność – stanowiły podstawę dynamicznej sieci WWW. Dla tych, którzy po prostu potrzebują zaprezentować dane, konwersja notatników Jupyter do formatu HTML to najszybszy sposób na publikację raportów technicznych bez komplikacji technicznych.
Silnik stojący za tym wszystkim: WebAssembly
Prawdziwą magią, która pozwala językom takim jak Python, C++ i Rust zaistnieć w internecie, jest WebAssembly (Wasm). Ten otwarty standard umożliwia wykonywanie kodu binarnego z wydajnością zbliżoną do natywnej. Dzięki Wasm firmy takie jak Adobe mogły przenieść Photoshopa do internetu , a AutoCAD i Figma radykalnie zoptymalizowały ładowanie i przetwarzanie danych.
Możliwość uruchamiania Pythona na kliencie, czy to za pośrednictwem tłumaczenia Brython, czy też binarnej mocy PyScript, otwiera przed użytkownikiem cały świat możliwości tworzenia złożonych narzędzi i aplikacji do nauki o danych, bez konieczności instalowania czegokolwiek na jego komputerze. Upowszechnia to dostęp do zaawansowanego programowania.
Integracja Pythona w sieci rozwinęła się od prostych skryptów po stronie serwera do wykonywania binarnego za pośrednictwem WebAssembly, umożliwiając wybór między lekkim tłumaczeniem na JavaScript za pomocą Brython lub pełną mocą PyScript i Pyodide, zmieniając tym samym sposób, w jaki postrzegamy rozwój front-endu.
