BackendPythonPyScript

PyScript

PyScript 이란?

python 코드를 클라이언트단인 웹브라우저에서 동작시킬 수 있고, PyScript에서 Javascript 라이브러리를 호출하고, python 으로 모든 웹 개발이 가능하다고 한다.

PyScript

  • CPython 과 WebAssembly /Emscripten은 포팅해주는 Pyodide 으로 제작
  • PyScript는 추후 다른 언어들까지의 지원을 제공할 예정

Get Started

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Pyscript</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css">
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
  print('Hello World!')
</py-script>
<py-script>
  import random

  for i in range(3):
    rNumber = random.randrange(1, 20)
    print('random number: ' + str(rNumber))

  print("closed...")
</py-script>
</body>
</html>

파이썬 코드에서 동작하기 위해 필요한 파이썬 패키지 정의

1
2
3
4
5
6
7
8
<py-env>
  - bokeh
  - matplotlib
  - pandas
  - scikit-learn
  - path:
  - ./my-custom-py-module.py
</py-env>

파이썬 표준 라이브러리나 써드파티 OSS 패키지들과 함께 사용하기 위해서는 py-env 태그에 dependency 명시

웹 페이지에서 실행될 파이썬 코드를 작성

1
2
3
<py-script>
  print('Hello, World!')
</py-script>

py 파일 import 로드

1
<py-script src="./python_file.py"></py-script>

코드 유저가 입력하고 확인할 수 있는 REPL (read-eval-prin loop) 컴포넌트를 생성

1
2
3
4
5
<py-repl>
  import numpy as np

  print(np.random.randn(10))
</py-repl>

데이터 시각화 샘플 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// index.html

<!DOCTYPE html>
<html>
<head>
  <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:
    - ./data.py
  </py-env>
</head>
<body>
<py-script>print('Hello world!')</py-script>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-script output="plot">
  import matplotlib.pyplot as plt
  from data import make_x_and_y

  x, y = make_x_and_y(n=1000)

  fig, ax = plt.subplots()
  ax.scatter(x, y)
  fig
</py-script>
</body>
</html>
1
2
3
4
5
6
7
8
// data.py

import numpy as np

def make_x_and_y(n):
  x = np.random.randn(n)
  y = np.random.randn(n)
  return x, y

웹 브라우저 렌더링 결과 화면

PyScript는 현재 alpha 단계에 있고, 많은 알려진 이슈들이 있으며 (로딩 시간 등) PyScript를 활용해 다양한 것을 시도해보기를 권하지만 아직은 production 단계에서 사용하는 것을 권장하지 않는다고 한다.

참조

공유하기