웹 브라우저에서 Python을 실행하고 싶습니까? 파이스크립트가 여기 있습니다!

5899 단어 tutorialwebdevpyscriptpython
PyScript는 사용자가 HTML 코드 자체 내에서 브라우저에서 Python 응용 프로그램을 만들 수 있는 완전히 새로운 프레임워크입니다. Pyodide와 WASM으로 구동됩니다.

Pyodide는 WebAssembly를 기반으로 하는 브라우저 및 Node.js용 Python 배포판입니다. ( Source )

기술 수준에서 PyScript는 TypeScript, Svelte Framework, Python, JavaScript, Tailwind CSS로 구축되고 rollup.js와 함께 번들로 제공됩니다.



PyScript의 일부 핵심 구성 요소에는 다음이 포함됩니다( Source ).

브라우저의 Python: 서버측 구성에 의존하지 않고 드롭인 콘텐츠, 외부 파일 호스팅 및 애플리케이션 호스팅을 활성화합니다.

Python 에코시스템: 많은 인기 있는 Python 패키지 및 과학적 스택(예: numpy, pandas, scikit-learn 등)을 실행합니다.

Python with JavaScript: Python과 Javascript 개체 및 네임스페이스 간의 양방향 통신

환경 관리: 사용자가 실행할 페이지 코드에 포함할 패키지 및 파일을 정의할 수 있습니다.

시각적 애플리케이션 개발: 버튼, 컨테이너, 텍스트 상자 등과 같이 쉽게 사용할 수 있는 선별된 UI 구성 요소를 사용합니다.

유연한 프레임워크: Python에서 직접 연결 가능하고 확장 가능한 새로운 구성 요소를 만들고 공유하는 데 활용할 수 있는 유연한 프레임워크

웹사이트의 95%를 지원하는 거대한 JavaScript를 대체할 것이라고 생각할 수도 있습니다...실제로는 아닙니다! 현재 PyScript는 사용성에서 속도 저하에 이르기까지 많은 문제가 있는 알파 단계의 실험 프로젝트입니다. 따라서 현재 프로덕션 환경에서는 사용하지 않는 것이 좋습니다.

HTML 코드에서 PyScript를 사용하려면 무엇이 필요한지 살펴보겠습니다.
  • <head> 태그에 아래 링크를 추가해야 합니다.

    • <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>


  • 그런 다음 html 페이지에서 PyScript 구성 요소를 사용할 수 있습니다. 현재 PyScript에서 구현하는 일부 요소는 다음과 같습니다.
    • <py-script> : 웹 페이지 내에서 실행 가능한 Python 코드를 정의하는 데 사용할 수 있습니다. 요소 자체는 페이지에 렌더링되지 않으며 논리를 추가하는 데만 사용됩니다.
    <py-env> : pip 도구와 유사한 프로젝트 종속성을 관리합니다.

    <py-env>
    - matplotlib
    - numpy
</py-env>

    <py-repl> : 페이지에 코드 편집기로 렌더링되고 사용자가 실행 가능한 코드를 작성할 수 있도록 하는 REPL 구성 요소를 만듭니다.
  • 사용자 정의 Python 모듈을 사용할 수도 있습니다. 아래는 예시입니다.

    • <py-env>
    - matplotlib
    - numpy
    - paths:
        - src/data.py
</py-env>


    해당 저장소github 에서 더 많은 태그를 찾을 수 있습니다.

    위 태그의 몇 가지 예를 보여주는 코드를 작성해 보겠습니다.

    1. PyScript에 인사하기

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello, PyScript!</title>
  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
</head>
<body>
  <py-script>print("Hello, PyScript!")</py-script>
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</body>
</html>


    산출:


    2. 나만의 REPL 구축

    <!DOCTYPE html>
<html>

<head>
    <title>PyScript REPL</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>

<body>
    <div class="text-center">
        <br>
        <h1><b>PyScript REPL</b></h1><br>
        <pre>Tip: Press Shift+ENTER to evaluate cell</pre>
        <br>
    </div>
    <div>
        <py-repl id="my-repl" auto-generate="true"></py-repl>
    </div>

</body>

</html>


    산출:


    3. matplotlib 및 numpy를 사용하여 그래프 그리기

    plot.html

    <!DOCTYPE html>
<html>

<head>
    <title>PyScript Plot</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env>
        - matplotlib
        - numpy
        - paths:
            - /pyscript_plot.py
    </py-env>
</head>

<body>
    <br>
    <h1><b>PyScript Plot</h1><br>
    <div id="plot"></div>
    <py-script output="plot">
from matplotlib import pyplot as plt
from pyscript_plot import get_values

x, y = get_values()
fig, ax = plt.subplots()
ax.scatter(x, y)
fig
    </py-script>

</body>

</html>


    pyscript_plot.py

    import numpy as np
import math 

def get_values():
    x = np.arange(0, math.pi*2, 0.05)
    y = np.sin(x)
    return x, y


    산출:


    아래 링크에서 더 많은 예제를 찾을 수 있습니다.

    https://github.com/pyscript/pyscript/tree/main/examples

    전체 프로젝트는 참으로 유망해 보입니다. 현재 알파 단계에 있다는 점을 감안할 때, 우리는 이 프레임워크가 개발자 커뮤니티에서 어떻게 형성되고 수용되는지 기다려야 할 것입니다.

    계속 배우세요...건배! 😃
    btrfs의 RAID 구성을 온라인으로 진행
    Java의 메모리 관리

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage